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

1.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute">
  <mx:Script>
  <![CDATA[
   import mx.validators.ValidationResult;
   import mx.controls.Alert;  
   //登陆处理
   private function loginHandle():void
   { 
      currentState="index";//成功后跳转到新状态"index"
   }
  ]]>
 </mx:Script>
 
  <!--新状态"index"-->
 <mx:states>
  <mx:State name="index">                <!--新建'index'State-->
   <mx:RemoveChild target="{panel1}"/>   <!--移除”登陆框“-->

   <mx:AddChild position="lastChild">     <!--添加新的组件-->
    <mx:Panel x="144" y="76" width="400" height="400" layout="absolute">
    <mx:Label x="200" y="200" text="欢迎来到主页" fontSize="20" fontFamily="Georgia" color="#EAC248"/>
    </mx:Panel>
   </mx:AddChild>
   

  </mx:State>
 </mx:states>
 <!--登陆框-->
 <mx:Panel width="326" height="247"
  layout="absolute" title="用户登陆" id="panel1"
  fontFamily="Georgia" fontSize="12" fontWeight="normal" left="108" top="108">
  <!--"用户名标签"-->
  <mx:Label x="41.5" y="33" text="用户名"/>
  <!--"密码标签"-->
  <mx:Label x="41.5" y="77" text="密    码"/>
  <!--"用户名输入框"-->
  <mx:TextInput x="110" y="33" id="txtUsername" />
  <!--"密码输入框"-->
  <mx:TextInput x="110" y="75" id="txtPassword" displayAsPassword="true"/>
  <!--"验证码输入框"-->
  <mx:TextInput x="110" y="108" width="48" id="txtCheckCode"/>
  <!--"登陆按钮"-->
  <mx:Button x="106" y="155" label="登陆" id="btnLogin" click="loginHandle()"/>
  <!--"重置按钮"-->
  <mx:Button x="218" y="155" label="重置" id="btnReset" />
  <!--"验证码标签"-->
  <mx:Label x="41.5" y="108" text="验证码"/>
  <!--"验证码显示标签"-->
  <mx:Label x="166" y="108" width="49" height="25" id="lblCheckCode"/>
  <!--"重设验证码"-->
  <mx:Label x="223" y="108" text="看不清楚" height="25" />
 </mx:Panel>
</mx:Application>

 

 

2.

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