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>