Flex中如何利用mx:states和mx:State创建不同状态应用的例子

<?xml version="1.0" encoding="utf-8"?>
<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>