Flex4中的State切换

简单的功能描述：

1.一个用户登录界面，点击忘记密码以后切换到忘记密码状态

2.在忘记密码界面点击返回登录后切换到登陆画面

功能很简单，和Flex3有很大的区别，所以做一个记录

 

 /Files/pochonlee/myflex.swf

 

点击运行后

代码

<? xml version="1.0" encoding="utf-8" ?>
< s:Application  xmlns:fx ="http://ns.adobe.com/mxml/2009"  
               xmlns:s ="library://ns.adobe.com/flex/spark"  
               xmlns:mx ="library://ns.adobe.com/flex/mx"  minWidth ="500"  minHeight ="500"  width ="100%"  height ="100%"  viewSourceURL ="srcview/index.html" >
     < s:states >
         < s:State  name ="defaultState" />
         < s:State  name ="forgotState" />
     </ s:states >
     < fx:Declarations >
         <!--  将非可视元素（例如服务、值对象）放在此处  -->
     </ fx:Declarations >
     < s:Panel  width ="447"  height ="223"  horizontalCenter ="0"  verticalCenter ="0"  id ="mainPanel"  title ="用户登录"  title.forgotState ="找回密码" >
         < mx:Form  id ="loginForm"  horizontalCenter.forgotState ="0"  horizontalCenter.defaultState ="0"  width.defaultState ="300"  height.defaultState ="100"  verticalCenter.defaultState ="-40"  width.forgotState ="300"  height.forgotState ="100"  verticalCenter.forgotState ="-40" >
             < mx:FormItem  label ="邮箱:"  id ="itemEmail" >
                 < s:TextInput  id ="txtEmail" />
             </ mx:FormItem >
             < mx:FormItem  label ="密码:"  id ="itemPass"  includeIn ="defaultState" >
                 < s:TextInput  id ="txtPass"  displayAsPassword ="true" />
             </ mx:FormItem >
         </ mx:Form >
         < mx:ControlBar  horizontalCenter ="0"  verticalCenter ="30"  horizontalCenter.forgotState ="0"  verticalCenter.forgotState ="30"  id ="controllerBar" >
             < mx:LinkButton  id ="backLink"  label ="忘记密码"  label.forgotState ="返回登录"  click.defaultState ="backLink_clickHandlerChange(event)"  click.forgotState ="backLink_clickHandler(event)" />
             < mx:Spacer  width ="100%"  id ="spacer" />
             < mx:Button  label ="登录"  id ="btnSign"  label.forgotState ="提交" />
         </ mx:ControlBar >
         <!-- s:transitions>
            <mx:Transition>
                <s:Parallel target="{itemPass}" id="t">
                    <s:Fade duration="1000" />
                </s:Parallel>
            </mx:Transition>
        </s:transitions -->
         < s:transitions >
             < s:Transition >
                 < s:Parallel  target =" {itemPass} " >
                     < s:Fade  duration ="1000"   />
                 </ s:Parallel >
             </ s:Transition >
         </ s:transitions >
     </ s:Panel >
     < fx:Script >
         <![CDATA[
            protected function backLink_clickHandlerChange(event:MouseEvent):void
            {
                this.setCurrentState("forgotState", true);
            }
            protected function backLink_clickHandler(event:MouseEvent):void
            {
                this.setCurrentState("defaultState", true);
            }
         ]]>

     </ fx:Script >
</ s:Application >