flex spaghetti

Just another WordPress.com weblog

Archive for June, 2009

Application.application returns null.

Posted by rvollmar on June 21, 2009

Just a quick note:
If you have started using s:Application, you’ll find that mx.core.Application.application returns null. We’ve deprecated that syntax; the replacement is mx.core.FlexGlobals.topLevelApplication. To read about more backwards compatibility issues, here’s a helpful article: http://labs.adobe.com/wiki/index.php/Flex_4:Backward_Compatibility
All the best!
– Rob

Posted in Application | Leave a Comment »

Creating states in a skin

Posted by rvollmar on June 21, 2009

You may want to change the attributes of a component’s skin depending on the state the component is in. In this case, we’re going to make a skin for the Application class which changes its background depending on the state it’s in:

happy: yellow background
sad: blue background
sophisticated: various shades of grey
bland: white background

1. Copy frameworks/projects/flex4/src/spark/skins/spark/ApplicationSkin.mxml to the directory you’re working in and rename it. I’m calling it SkinWithStates.mxml.

2a. Find the states section and add some states.
2b. Find the backgroundRect and make its fill stateful. Also, add a couple more Rects for the sophisticated state. Note that the subsequent Rects have left/right/top/bottom set to increasing numbers, so they will appear nested. Here is how the skin file should look when it’s done:

<?xml version="1.0" encoding="utf-8"?>

<!--- The default skin class for the Spark Application component. 
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    alpha.disabled="0.5" >

    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("spark.components.Application")]
    ]]>
    </fx:Metadata> 
    
    <s:states>
     <s:State name="normal" />
     <s:State name="disabled" />
        <s:State name="sad" />
        <s:State name="happy" />
        <s:State name="sophisticated" />
        <s:State name="bland" />
    </s:states>
    
    <s:Rect id="backgroundRect" 
        left="0" right="0" 
        top="0" bottom="0">
        <s:fill>
            <s:SolidColor color.sad="0x0000ff"
                          color.happy="0xffff00"
                          color.sophisticated="0x000000"
                          color.bland="0xffffff" />
        </s:fill>
    </s:Rect>
    
    <s:Rect id="backgroundRect2"
        left="20" right="20"
        top="20" bottom="20">
        <s:fill>
            <s:SolidColor color.sad="0x0000ff"
                          color.happy="0xffff00"
                          color.sophisticated="0x444444"
                          color.bland="0xffffff" />
        </s:fill>
    </s:Rect>

    <s:Rect id="backgroundRect3"
        left="40" right="40"
        top="40" bottom="40">
        <s:fill>
            <s:SolidColor color.sad="0x0000ff"
                          color.happy="0xffff00"
                          color.sophisticated="0x888888"
                          color.bland="0xffffff" />
        </s:fill>
    </s:Rect>
        
    <s:Group id="contentGroup" left="0" right="0"
    top="0" bottom="0"
    minWidth="0" minHeight="0"/>

</s:Skin>

3. Override the getCurrentSkinState() method in a subclass of Application. This method should do whatever analysis is needed to figure out what state the skin should be in, and return a string containing that state’s name. Here is an example which just returns the mood, which is the name of a state. Save it as TestApplication.as:

package{

    import spark.components.Application;

    public class TestApplication extends Application{
    
        public var mood:String;

        // Constructor.
        public function TestApplication():void{
            mood = "bland";
        }
    
        // Return the state the skin should be in.
        override protected function getCurrentSkinState():String{
            return mood;
        }   
    }
}

4. Make a main application file which uses the subclass and the skin just created:

<?xml version="1.0" encoding="utf-8"?>
<custom:TestApplication 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:custom="*"
    skinClass="SkinWithStates" >

<fx:Script>
<![CDATA[

    private function doMoodChange(e:Event):void{
        this.mood = e.currentTarget.selectedValue;
        
        // This causes the skin's state to
        // be evaluated again.
        invalidateSkinState();
    }

]]>
</fx:Script>

<fx:Declarations>
    <s:RadioButtonGroup id="group1" 
        itemClick="doMoodChange(event)" />
</fx:Declarations>

<s:Group x="50" y="50">
    <s:layout>
        <s:VerticalLayout />
    </s:layout>

    <s:SimpleText text="Choose Mood:" />
    
    <s:RadioButton id="rbHappy" 
                   groupName="group1" 
                   label="happy" value="happy" /> 
    <s:RadioButton id="rbSad" 
                   groupName="group1" 
                   label="sad" value="sad" /> 
    <s:RadioButton id="rbSophisticated" 
                   groupName="group1" 
                   label="sophisticated" 
                   value="sophisticated" /> 
    <s:RadioButton id="rbBland" 
                   groupName="group1" 
                   label="bland" 
                   value="bland" 
                   selected="true" /> 
</s:Group>

</custom:TestApplication>

Posted in Application, Skins, States | Leave a Comment »

Fetching and building Flex source code with a Mac

Posted by rvollmar on June 13, 2009

For the Mac users out there, here are some instructions for fetching the latest Flex SDK source code (aka “trunk”). Note that I’m saying LATEST. It might not be stable. Heck, it might not even build.

For a GUI client, I use SmartSVN because it was the first one I stumbled over which:
– Has a free, functional version.
– I figured out how to use quickly.

If you can recommend another, please point me to it. I’ll be happy to give it a try and post instructions.

Of course, the instructions are basically the same on any OS. But it’s always nice to see very specific instructions for the OS one is using.

Instructions using the svn command line client:
1. Get it (http://downloads.open.collab.net/binaries.html) and install it.
2. Run this command:

svn checkout http://opensource.adobe.com/svn/opensource/flex/sdk/trunk local-directory

Instructions using SmartSVN (6.0.2):
1. Get it (http://www.syntevo.com/smartsvn/index.html), install it, and start it.
2. Project > Check Out.
3. Choose Quick Checkout and fill in:
URL: http://opensource.adobe.com/svn/opensource/flex/sdk/trunk
Local Directory: whatever works for you
4. Click Continue, then Finish.

Building the SDK:
Assuming you have recent releases of Ant (I have 1.7.0) and Java (I have 1.5.0_16-133):
1. Bring up a terminal window.
2. cd to the trunk directory that you fetched above.
3. Run: ant clean main

Note: I don’t have FLEX_HOME, JAVA_HOME, or ANT_HOME defined anywhere, but there is some documentation which claims these are needed. Do what works for you.

References:
Getting source code: http://opensource.adobe.com/wiki/display/flexsdk/Get+Source+Code
Building the SDK: http://opensource.adobe.com/wiki/display/flexsdk/Build+and+Test

Posted in Source | Leave a Comment »

Setting the layout property in Flex 4

Posted by rvollmar on June 13, 2009

In Flex 3, the layout property could be set to strings such as “absolute”, “horizontal”, and “vertical”. In Flex 4, the layouts are classes such as BasicLayout, HorizontalLayout, VerticalLayout, and TileLayout. If you try to set the layout property in a class’ MXML tag, you will get the compiler error “values of type spark.layouts.supportClasses.LayoutBase cannot be represented in text.” Here are some options:

1. To set the layout for the Application in MXML:

<s:Application ...>
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
...

2. To set the layout for a Group:

<s:Group>
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
...

3. That seemed verbose, so there’s a shortcut to set the layout for a Group; you can use VGroup and HGroup:

<s:VGroup>
...

Enjoy,
– Rob

Posted in Application, Group, Layout | Leave a Comment »

A class is missing!

Posted by rvollmar on June 13, 2009

You may notice that code completion seems to fail for some classes. If this is happening to you, try pressing control + space twice. In order to guide developers into using the new Spark classes, code completion has been turned off by default for certain Halo (mx) classes.

To modify this behavior, select Window > Preferences > Flash Builder > Editors > MXML Code > Advanced. This control shows the order of the suggestions as you repeatedly press control + space. Moving “All” to the top will allow all classes matching your partial word to be suggested in the initial code completion hint.

– Rob

Posted in Builder | Leave a Comment »