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>