Normally on other IDEs, I simply drag a Rectangle object to the body or content of my application then resize it, define colors, etc. What I discovered in Flex 4 (Flash Builder 4) was that it's not just like that (or is it?) and I can't seem to find something to drag to my application to create a Rectangle object.
My question is, how do I do it? How do I create a simple Rectangle?
There is no support for FXG elements in Flash Builder Design mode.
What you can do is, use Flash Catalyst, draw your primitives with it and copy/paste the generated code in Flash Builder.
I think I just figured out how to deal with it. I just make a new component and base it on spark.primitives.Rect. Then after that, I just assign the fill's SolidColor to whatever I need just like my component code below.
<?xml version="1.0" encoding="utf-8"?>
<s:Rect xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
[Bindable]
public var fillColor:String;
]]>
</fx:Script>
<s:fill>
<s:SolidColor color="{fillColor}" />
</s:fill>
</s:Rect>
Not sure if this is the best way but it works for me so I'll go along with it. :)
Related
I've created a simple effect in Flex, code below, but it does not execute correctly... When I rollOver the icon, MOST of the time the effect plays, and when I rollOut of the image the effect should play in reverse, but rarely does...
Is my code or logic incorrect? FYI - I'm using Flash Builder 4.6.
<?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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:Move id="detail_fade" target="{detail_panel}" xFrom="218" xTo="400" />
</fx:Declarations>
<s:Panel id="detail_panel" x="218" y="10" width="728" height="580" title="something">
</s:Panel>
<s:VGroup x="7" y="5" width="200" height="200">
<s:Image source="images/Airfield Icon.jpg"
rollOver="detail_fade.play()" rollOut="detail_fade.reverse()"/>
</s:VGroup>
As Mahesh pointed out in his comment, reverse() will only reverse an effect that is actually playing. Which is why you only see it happening sometimes: i.e. when you're quick enough to roll_out before the effect has ended.
You should instead use:
detail_fade.play(null, true);
The first argument of the play method, is an Array of the targets of your effect. Since you've already given it a target, you don't need to pass it again (that's why it says null).
The second argument is a Boolean telling the effect to play in the inverse direction if set to true. It is of course false by default.
Now, you may notice that when you roll_out quickly, the effect will jump to the end and start playing in the other direction from there.
This can be fixed like so:
if (detail_fade.isPlaying) detail_fade.reverse();
else detail_fade.play(null, true);
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.
I'm having a very odd issue where I am trying to use a text area to display some text on a mobile AIR app. It works fine whenever I am using the phone emulator on my desktop to debug, however whenever I put the app on my phone, the text displays, then disappears. I've also noticed that if I lock the screen and unlock, the text will display just fine when I come back.
Here's the code:
<?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" title="Program Overview">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
private var text:String = "Hey how are ya";
]]>
</fx:Script>
<s:TextArea text="{text}" editable="false" />
</s:View>
One other interesting thing to note is that it only happens on certain Views, and only on Views in the first ViewNavigator tab. This leads me to believe that there isn't really anything wrong with my use of the TextArea, but something else happening at a higher level in the application. Any ideas on what I should look for?
I think than the problem can be solved if you add the skinClass:
this is for TextArea:
<s:TextArea id="text1" skinClass="spark.skins.mobile.TextAreaSkin" text="{myVar}"/>
this is fot TextInput:
<s:TextInput id="text2" skinClass="spark.skins.mobile.TextInputSkin" text="{myVar}"/>
I hope this help you!
I ended up replacing all of my TextArea's with StyleableTextFields as #Al_Birdy suggested and that took care of the issue. Because you can only use them in AS it made layout and styling a little bit more difficult but it was definitely worth the fix.
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 build a simple component extending spark.components.Group to have a background color, more specifically a spark.primitives.Rect component stretched to fill the background.
This is what I've come up with thus far:
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"
<fx:Metadata>
[DefaultProperty(name="content")]
</fx:Metadata>
<s:Rect id="background" width="100%" height="100%">
<s:fill>
<s:SolidColor color="#990000"/>
</s:fill>
</s:Rect>
<s:Group id="container"/>
<s:filters>
<!-- For good measure ;) -->
<s:DropShadowFilter color="#000000" strength="0.4" blurX="5" blurY="5" distance="2" angle="90"/>
</s:filters>
<fx:Script>
<![CDATA[
public function set content(value:Array):void {
this.container.mxmlContent = value;
}
]]>
</fx:Script>
</s:Group>
Ok, so the logic here basically makes sense, right? All children declared in MXML go to the Group called "container". That is working just fine. However, when I run the example below, the layout is completely fubar.
<s:VGroup>
<!-- This is the component described above -->
<components:MessageContainer id="component" width="100" height="100"/>
<mx:Slider/>
<mx:Slider/>
<mx:ColorPicker/>
</s:VGroup>
This is what it looks like:
Is there something I'm missing here? Maybe a method I need to override?
Weird. I just resorted to making a Skin implementation and applying it to a SkinnableContainer. I was compiling using the Beta 2 release of Flex 4 as well. Very strange indeed.
What build of flex 4 are you using? I just copied your code exactly and the output looks as you would expect it to.
I am running the beta 2 build that was released within the last few weeks. Build 4.0.0.253292. You can upgrade your build if you aren't running the latest, but you can also try to clean the project. It might just be getting confused. Also make sure your browser isn't caching the swf, which sometimes happens when the file size doesn't change dramatically.