The following examples show the new enhanced state syntax in the beta Flex Gumbo SDK. For more information and examples on the new state syntax, see the spec at http://opensource.adobe.com/wiki/display/flexsdk/Enhanced+States+Syntax.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

The following example shows how you can set specific fill color for a rectangle for each state using dot-syntax on an attribute in an MXML tag:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/13/exploring-the-new-states-syntax-in-flex-gumbo/ -->
<Application xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library:adobe/flex/halo"
        layout="flex.layout.BasicLayout">

    <states>
        <State name="state1" />
        <State name="state2" />
        <State name="state3" />
    </states>

    <mx:HBox left="10" top="10">
        <Button label="State 1 (red)"
                click="currentState='state1';" />
        <Button label="State 2 (green)"
                click="currentState='state2';" />
        <Button label="State 3 (blue)"
            click="currentState='state3';" />
    </mx:HBox>

    <Rect id="rect"
            width="100"
            height="100"
            horizontalCenter="0"
            verticalCenter="0">
        <fill>
            <SolidColor color.state1="red"
                    color.state2="haloGreen"
                    color.state3="haloBlue" />
        </fill>
    </Rect>

</Application>

View source is enabled in the following example.

The following example shows how you can use the same dot syntax on the MXML tag directly to set a different fill type (SolidColor, LinearGradient, BitmapFill) on a rectangle:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/13/exploring-the-new-states-syntax-in-flex-gumbo/ -->
<Application xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library:adobe/flex/halo"
        layout="flex.layout.BasicLayout">

    <states>
        <State name="state1" />
        <State name="state2" />
        <State name="state3" />
    </states>

    <mx:HBox left="10" top="10">
        <Button label="State 1 (SolidColor)"
                click="currentState='state1';" />
        <Button label="State 2 (LinearGradient)"
                click="currentState='state2';" />
        <Button label="State 3 (BitmpFill)"
            click="currentState='state3';" />
    </mx:HBox>

    <Rect id="rect"
            width="100"
            height="100"
            horizontalCenter="0"
            verticalCenter="0">
        <fill.state1>
            <SolidColor color="red" />
        </fill.state1>
        <fill.state2>
            <LinearGradient>
                <GradientEntry color="red" />
                <GradientEntry color="haloOrange" />
                <GradientEntry color="yellow" />
                <GradientEntry color="haloGreen" />
                <GradientEntry color="haloBlue" />
            </LinearGradient>
        </fill.state2>
        <fill.state3>
            <BitmapFill source="@Embed('flex_logo.jpg')" />
        </fill.state3>
    </Rect>

</Application>

View source is enabled in the following example.

The following example shows how you can include or exclude display list items by specifying the includeIn attribute in the MXML tag:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/13/exploring-the-new-states-syntax-in-flex-gumbo/ -->
<Application xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library:adobe/flex/halo"
        layout="flex.layout.BasicLayout">

    <states>
        <State name="state1" />
        <State name="state2" />
        <State name="state3" />
    </states>

    <mx:HBox left="10" top="10">
        <Button label="State 1 (Rect)"
                click="currentState='state1';" />
        <Button label="State 2 (Ellipse)"
                click="currentState='state2';" />
        <Button label="State 3 (Path)"
            click="currentState='state3';" />
    </mx:HBox>

    <Rect id="rect"
            width="100"
            height="100"
            horizontalCenter="0"
            verticalCenter="0"
            includeIn="state1">
        <fill>
            <SolidColor color="red" />
        </fill>
    </Rect>

    <Ellipse id="ellipse"
            width="100"
            height="100"
            horizontalCenter="0"
            verticalCenter="0"
            includeIn="state2">
        <fill>
            <SolidColor color="red" />
        </fill>
    </Ellipse>

    <Path id="path"
            data="M 0 0 L 100 100 Z M 0 100 L 100 0 Z"
            horizontalCenter="0"
            verticalCenter="0"
            includeIn="state3">
        <stroke>
            <SolidColorStroke color="red" weight="10" />
        </stroke>
    </Path>

</Application>

View source is enabled in the following example.

These are just a few of the many things you can do with the new, enhanced state syntax in Flex Gumbo. For more examples, see the the Enhanced States Syntax – Functional and Design Specification document on the opensource.adobe.com site.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

0 Responses to Exploring the new states syntax in Flex Gumbo

  1. Abdul Qabiz says:

    I saw the spec couple of days back, it looks good. I find new states stuff nice and more intuitive. I am still thinking on other aspects, where it might not be as friendly. But if it does for 80% cases, that should not be problem.

    Thanks for putting up some examples.

    -abdul

  2. peterd says:

    Abdul Qabiz,

    For the aspects where you think the new model isn’t as friendly or usable as the old states syntax, can you please file bugs/enhancement requests in the Flex bug base at http://bugs.adobe.com/flex/.

    Peter

  3. jason says:

    Anyone getting this to work with the new release of Gumbo? My version cannot find .

  4. jason says:

    Cant find states

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree