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

Tagged as: state