I used Flex 2/3 for a couple of years and have just come back to it, upgrading to Flex 4. I'm seeing some references to Halo and Spark themes but I never got into themes in my previous work so I'm a bit confused what's going on. Am I correct that Halo was the default theme, or is this all new?
Also, I took a simple Flex 3 MXML and tried to make it work in Flex4:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
layout="absolute" borderStyle="none" borderColor="#000000" cornerRadius="0"
backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#000000, #FF0000]"
width="800" height="600"
frameRate="20">
</mx:Application>
But I get errors, like "Error: The style 'backgroundGradientColors' is only supported by type 'mx.core.Application' with the theme(s) 'halo'."
I tried a few things but each one introduced its own errors.
Flex 4 introduced a new component architecture, called "Spark". "Halo" refers to the Flex 3 component architecture.
an overview of Spark vs Halo components
instructions to use Halo theme in a project (which is what you need to make your example compile)
Related
I opened up flash builder, made a new Flex project, and then inserted that label into the mxml file.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:Label id="label" text="myLabel"/>
</s:Application>
Now I run this (Using either Internet Explorer or Google Chrome) and I see a simple white screen with nothing on it (http://i101.photobucket.com/albums/m59/plinios/Untitled-4_zps1ef1127d.png).
Is it just me being silly? I've looked everywhere and I could not find a solution. This seems to be a very very simple problem. Why is the label not showing up?
EDIT:
I restarted my PC and re-installed Flash builder. I then tried the simple code above and it still displayed a white screen for Chrome and IE. Interestingly enough, I put a panel for the label to rest on and it displayed in IE, but not in Chrome.
<s:Panel x="41" y="36" width="250" height="200">
<s:Label id="label" x="10" y="-20" text="myLabel"/>
</s:Panel>
EDIT:
When right-clicking the screen, I get a flash menu, not an HTML menu.
Would using the Windows 8 operating system affect this in anyway? I don't see any other reason as to why it wouldn't be showing up normally.
I have solved this issue. The first thing to realize is that only IE will display this correctly. When you start coding, you need to wrap everything in a Spark Group. That's it!
I need to have a group box in flex 3 - simple border with a heading at the top but the heading at the top should not have any border line through it.
I searched on the Net and the closest that I could get with source is
http://keg.cs.uvic.ca/flexdevtips/titledborder/srcview/
But the problem with this is that I can’t view in design mode what is on the group box. Does anyone know how to fix this?
Then I decided to go with canvases and an input box
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:TextInput
text="This should be my label"
x="124" y="72"
width="166" height="32"
borderStyle="solid"
fontWeight="bold"
color="#003366" backgroundColor="#D81010"/>
<mx:Canvas x="107" y="88" width="263" height="200" borderStyle="solid" label="Testst">
</mx:Canvas>
</mx:Application>
But I can't seem to get the Textinput to be ontop of the canvas. There is a line through the box as in the below picture
Does anyone know how to resolve this or have a better idea?
thanks
What you are looking for is a component equivalent to "fieldset" in HTML. It would be easier to use create component for better styling control. For Flex 2/3, you may use jwopitz-lib; but if you could use Flex 4 or above, try the ShinyLib component (specifically the FieldSet class and FieldSet skin). It would be easier if you could migrate the application to Flex 4 or the latest Flex, you would be exposed to a lot more components.
To get a custom component to work in design mode, you need to compile the code into a SWC library. Then reference the SWC library in your application project. I've never bothered to do this, I imagine you may get mixed results. I haven't bothered w/design mode in over 5 years :)
The reason the "window" component (in the URL that you linked to in the question) works in design mode is that it extends the Flex component TitleWindow. Since it extends an existing Flex component, I am assuming design mode knows how to render it.
I have read the Adobe's docs Using FXG and Embedding application assets, but can only embed the FXG through MXML -
MyStars.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.Home">
</s:ViewNavigatorApplication>
Home.mxml (works okay, when embedding FXG through MXML):
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="assets.*"
title="Home">
<comps:Star />
</s:View>
Star.fxg (located in src/assets/Star.fxg):
<?xml version='1.0' encoding='UTF-8'?>
<fxg:Graphic xmlns:fxg="http://ns.adobe.com/fxg/2008" version="2">
<fxg:Path x="9.399" y="10.049" data="M 82.016 78.257 L 51.895 69.533 L 27.617 89.351 L 26.621 58.058 L 0.231 41.132 L 29.749 30.52 L 37.714 0.241 L 56.944 24.978 L 88.261 23.181 L 70.631 49.083 Z">
<fxg:fill>
<fxg:SolidColor color="#FFFFFF"/>
</fxg:fill>
<fxg:stroke>
<fxg:SolidColorStroke
caps="none"
color="#4769C4"
joints="miter"
miterLimit="4"
weight="20"/>
</fxg:stroke>
</fxg:Path>
</fxg:Graphic>
When I however try to instansiate the FXG graphic through ActionScript (still in the same Flex mobile project), I get the compile error:
Call to a possibly undefined method Star
Home.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="assets.*"
title="Home">
<fx:Script>
<![CDATA[
import spark.core.SpriteVisualElement;
private static const STAR:SpriteVisualElement = new Star();
]]>
</fx:Script>
<s:BitmapImage source="{STAR}" />
</s:View>
I've also tried import comps; and/or new comps.Star();
When I move the FXG file to src/ and use xmlns:comps="*" everything works.
Import Star in ActionScript, which based on your code I assume will be something like this:
import assets.Star
private static const STAR:SpriteVisualElement = new Star();
I suspect that will get rid of the compiler error. However, I'm not sure if you can use a SpriteVisualElement as the source for a BitmapImage. You may have to add the SpriteVisualElement as a child of the parent container and make use of the Flex Component Lifecycle to do this.
I've done some experimenting around this, and just contributed this code to Apache Flex. The specific class is here. Although, for some reason I missed the fact that FXG elements could be SpriteVisualElements. Using my FXGImage class will not absolve you of the responsibility of having to size and position the component in ActionScript if you create it in ActionScript.
For FXG graphic, pay attention to your artwork size. When you create object using FXG, the white-space around the icon counts. Make sure you set the artwork size to the size of your icon (no extra white-space around the icon). This way, the FXG asset will look much better when you embed to the bitmapImage.
What I'd like to do: create an MXML component with some children, then extend it via MXML to create a new component with more children, without losing the original set.
In other words
create a component bc.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
<s:Button id="b1" label="button1"/>
</s:BorderContainer>
and then extend it to a separate component mc.mxml
<?xml version="1.0" encoding="utf-8"?>
<borderContainerX:bc xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:borderContainerX="borderContainerX.*">
<s:Button id="b2" y="100" label="button2"/>
</borderContainerX:bc>
and get a component with 2 buttons.
I've seen various threads on how this is either not possible (1) or on workarounds to accomplish this (2, 3) and have been wondering if something has changed with the advent of Flex 4 or if we're still stuck with these workarounds the last reply in thread 3 seems to hint at Flex 4 fixing it all?
In Flex 4, you will have to override your "mxmlContent" property setter in order to preserve your already defined children in a parent class
One of possible implementations of such a override is presented in the comment for this blog entry
Quick tip (Flex 4): Goodbye templates – hello mxmlContent
http://www.websector.de/blog/2009/10/02/quick-tip-flex-4-goodbye-templates-hello-mxmlcontent/
I'm trying to load an mxml component into my main flex project.
I saw that there are many related question regarding this issue but i'm too of a newbie to understand them.
the page contains a vbox on left and right sides and another flash file in the middle.
i want the vbox's that are placed on the left and right sides to be in separated mxml component. how can i do so?
thanks
Create the mxml component for your side boxes. In the following, I based it on VBox since that might be what you're looking for. I gave it an obnoxious backgroundColor that should be easy to spot when we run the app.
SideBox.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="300"
backgroundColor="0x990000">
</mx:VBox>
So in your main mxml application you can include your custom component by telling the application what namespace to look for it (that's what the xmlns:local="*" is for - the word local is just a name so that I can easily remember what it means, you can call it anything, the * essentially means to look in the current/same directory).
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:local="*" layout="absolute">
<local:SideBox x="40" y="20" />
<local:SideBox x="500" y="20" />
</mx:Application>