Flex Examples » States http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Hiding specific items in a data provider based on the current application state in Flex Gumbo http://blog.flexexamples.com/2009/02/24/hiding-specific-items-in-a-data-provider-based-on-the-current-application-state-in-flex-gumbo/ http://blog.flexexamples.com/2009/02/24/hiding-specific-items-in-a-data-provider-based-on-the-current-application-state-in-flex-gumbo/#comments Wed, 25 Feb 2009 07:37:46 +0000 Peter deHaan http://blog.flexexamples.com/2009/02/24/hiding-specific-items-in-a-data-provider-based-on-the-current-application-state-in-flex-gumbo/ The following example shows how you can toggle specific strings based on the Flex Gumbo application’s current state by using the includeIn and excludeFrom attributes on the String object.

For more information see “Exploring the new states syntax in Flex Gumbo” and the “Enhanced States Syntax – Functional and Design Specification” page at [...]]]> The following example shows how you can toggle specific strings based on the Flex Gumbo application’s current state by using the includeIn and excludeFrom attributes on the String object.

For more information see “Exploring the new states syntax in Flex Gumbo” and the “Enhanced States Syntax – Functional and Design Specification” page at opensource.adobe.com.

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″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/24/hiding-specific-items-in-a-data-provider-based-on-the-current-application-state-in-flex-gumbo/ -->
<FxApplication name="String_includeIn_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white">

    <states>
        <State name="one" />
        <State name="two" />
        <State name="three" />
    </states>

    <ApplicationControlBar>
        <Form styleName="plain">
            <FormItem label="currentState:">
                <Label text="{currentState}" />
            </FormItem>
            <FormItem direction="horizontal">
                <FxButton label="State one"
                        click="currentState='one';" />
                <FxButton label="State two"
                        click="currentState='two';" />
                <FxButton label="State three"
                        click="currentState='three';" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <FxList id="list"
            horizontalCenter="0"
            bottom="40">
        <dataProvider>
            <ArrayCollection>
                <String>1. The</String>
                <String>2. Quick</String>
                <String>3. Brown</String>
                <String includeIn="one">4. Fox</String>
                <String includeIn="two">5. Jumps</String>
                <String includeIn="one,two">6. Over</String>
                <String excludeFrom="one">7. The</String>
                <String excludeFrom="two">8. Lazy</String>
                <String excludeFrom="one,two">9. Dog</String>
            </ArrayCollection>
        </dataProvider>
    </FxList>

</FxApplication>

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

 
]]> http://blog.flexexamples.com/2009/02/24/hiding-specific-items-in-a-data-provider-based-on-the-current-application-state-in-flex-gumbo/feed/ 0 Exploring the new states syntax in Flex Gumbo http://blog.flexexamples.com/2008/08/13/exploring-the-new-states-syntax-in-flex-gumbo/ http://blog.flexexamples.com/2008/08/13/exploring-the-new-states-syntax-in-flex-gumbo/#comments Thu, 14 Aug 2008 06:37:27 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/13/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 [...]]]> 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.

 
]]> http://blog.flexexamples.com/2008/08/13/exploring-the-new-states-syntax-in-flex-gumbo/feed/ 0 Creating view states in a Flex application http://blog.flexexamples.com/2007/10/05/creating-view-states-in-a-flex-application/ http://blog.flexexamples.com/2007/10/05/creating-view-states-in-a-flex-application/#comments Sat, 06 Oct 2007 05:59:18 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/05/creating-view-states-in-a-flex-application/ The following example shows how you can create different view states in a Flex application by using the <mx:states /> and <mx:State /> tags.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/10/05/creating-view-states-in-a-flex-application/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:states> <mx:State name="login"> <mx:AddChild> <mx:Form id="loginForm"> <mx:FormHeading label="Login" /> <mx:FormItem [...]]]> The following example shows how you can create different view states in a Flex application by using the <mx:states /> and <mx:State /> tags.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/05/creating-view-states-in-a-flex-application/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:states>
        <mx:State name="login">
            <mx:AddChild>
                <mx:Form id="loginForm">
                    <mx:FormHeading label="Login" />
                    <mx:FormItem label="Username:">
                        <mx:TextInput id="log_username" />
                    </mx:FormItem>
                    <mx:FormItem label="Password:">
                        <mx:TextInput id="log_password"
                                displayAsPassword="true" />
                    </mx:FormItem>
                    <mx:FormItem>
                        <mx:Button label="Login" />
                    </mx:FormItem>
                </mx:Form>
            </mx:AddChild>
        </mx:State>
        <mx:State name="register">
            <mx:AddChild>
                <mx:Form id="registerForm">
                    <mx:FormHeading label="Register" />
                    <mx:FormItem label="Username:">
                        <mx:TextInput id="reg_username" />
                    </mx:FormItem>
                    <mx:FormItem label="Password:">
                        <mx:TextInput id="reg_password1"
                                displayAsPassword="true" />
                    </mx:FormItem>
                    <mx:FormItem label="Confirm password:">
                        <mx:TextInput id="reg_password2"
                                displayAsPassword="true" />
                    </mx:FormItem>
                    <mx:FormItem>
                        <mx:Button label="Register" />
                    </mx:FormItem>
                </mx:Form>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <mx:transitions>
        <mx:Transition id="loginTransition"
                fromState="*"
                toState="login">
            <mx:WipeDown target="{loginForm}"/>
        </mx:Transition>
        <mx:Transition id="registerTransition"
                fromState="*"
                toState="register">
            <mx:WipeDown target="{registerForm}"/>
        </mx:Transition>
    </mx:transitions>

    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;

            private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
                currentState = evt.item.data;
            }
        ]]>
    </mx:Script>

    <mx:Array id="dp">
        <mx:Object data="" label="Default state" />
        <mx:Object data="login" label="Login" />
        <mx:Object data="register" label="Register" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:ToggleButtonBar id="toggleButtonBar"
                dataProvider="{dp}"
                itemClick="toggleButtonBar_itemClick(event);" />
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/10/05/creating-view-states-in-a-flex-application/feed/ 20 Toggling a Flex container’s visibility using states http://blog.flexexamples.com/2007/08/24/toggling-a-flex-containers-visibility-using-states/ http://blog.flexexamples.com/2007/08/24/toggling-a-flex-containers-visibility-using-states/#comments Fri, 24 Aug 2007 14:10:36 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/24/toggling-a-flex-containers-visibility-using-states/ In a previous post, “Toggling a Flex container’s visibility”, we looked at toggling a VBox container’s visibility by setting both the visible property and includeInLayout property. While the approach felt a little crude, we can build the same thing using the much more powerful view states. What are view states and how do we [...]]]> In a previous post, “Toggling a Flex container’s visibility”, we looked at toggling a VBox container’s visibility by setting both the visible property and includeInLayout property. While the approach felt a little crude, we can build the same thing using the much more powerful view states. What are view states and how do we use them? Well, if you’re new to states, this should clear everything up: “Adobe – Flex Quick Start Basics: Creating States”.

Now, with that out of the way, lets look at some code and a basic example.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/24/toggling-a-flex-containers-visibility-using-states/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Parallel targets="{[vbox2]}">
                <mx:WipeDown />
                <mx:Fade />
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>

    <mx:states>
        <mx:State name="expanded">
            <mx:AddChild relativeTo="{vbox1}" position="after">
                <mx:VBox id="vbox2"
                        width="120"
                        height="100%"
                        backgroundColor="haloGreen">
                    <mx:Label text="VBox 2" />
                </mx:VBox>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <mx:Style>
        VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;

            [Bindable]
            [Embed(source="assets/help.png")]
            private var helpIcon:Class;

            private function toggleExpanded():void {
                switch (currentState) {
                    case "expanded":
                        currentState = "";
                        break;
                    default:
                        currentState = "expanded";
                        break;
                }
            }
        ]]>
    </mx:Script>

    <mx:HBox width="100%" height="100%">
        <mx:VBox id="vbox1"
                width="120"
                height="100%"
                backgroundColor="haloOrange">
            <mx:Label text="VBox 1" />
            <mx:Button label="Help"
                       icon="{helpIcon}"
                    click="toggleExpanded()" />
        </mx:VBox>

        <mx:VBox id="vbox3"
                width="100%"
                height="100%"
                backgroundColor="haloBlue">
            <mx:Label text="VBox 3" />
        </mx:VBox>
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/24/toggling-a-flex-containers-visibility-using-states/feed/ 11