Exploring the new states syntax in Flex Gumbo

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.