Flex 3快速入门（11）: 构建简单的用户界面 定义状态过渡
<mx:Application
??? xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle"
??? width="340" height="250"
???? viewSourceURL="src/DefiningStateTransitions/index.html"
>
??? <mx:Script>
??????? <![CDATA[
??????????? // You need to import easing classes even if
??????????? // you're going to use them only in MXML.
??????????? import mx.effects.easing.Bounce;
??????? ]]>
??? </mx:Script>
??? <!--
??????? Use the transitions property (array) of
??????? the Application class to store your transitions.
??? -->
??? <mx:transitions>
??????? <!--
??????????? The "*" indicates that the transition should be applied
??????????? to any changes in the view state. You can set either
??????????? property to "" to refer to the base view state.
??????? -->
?????? <mx:Transition fromState="*" toState="*">
??????????? <!-- Parallel effects execute in unison -->
??????????? <mx:Parallel targets="{[loginPanel, registerLink, loginButton, confirm]}">
??????????????? <mx:Resize duration="500" easingFunction="Bounce.easeOut"/>
??????????????? <!--
??????????????????? Sequence effects execute in turn. The effects
??????????????????? in this sequence will only affect the confirm FormItem.
??????????????? -->
??????????????? <mx:Sequence target="{confirm}">
??????????????????? <mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0" />???????????
??????????????????? <mx:Blur duration="200" blurYFrom="20.0" blurYTo="1" />???????????
??????????????? </mx:Sequence>
??????????? </mx:Parallel>
??????? </mx:Transition>
??? </mx:transitions>
???????
??? <!-- The states property of the Application class
???????? defines the view states. -->
??? <mx:states>
??? <!--
??????????? The "Register" state is based on the base state.
??????????? All states are based on the base state by default
??????????? so you can leave out the basedOn property.
??????? -->
??????? <mx:State name="Register" basedOn="">
??????????? <!-- Add a FormItem component to the form. -->
??????????? <mx:AddChild
??????????????? relativeTo="{loginForm}"
??????????????? position="lastChild"
??????????????? creationPolicy="all"
??????????? >
??????????????? <mx:FormItem id="confirm" label="Confirm:">
??????????????????? <mx:TextInput/>
??????????????? </mx:FormItem>
??????????? </mx:AddChild>
???????????
??????????? <!-- Set properties on the Panel container and Button control. -->
??????????? <mx:SetProperty target="{loginPanel}"
??????????? name="title" value="Register"/>
???????????
??????????? <mx:SetProperty target="{loginButton}"
??????????? name="label" value="Register"/>
???????????
??????????? <!-- Remove the existing LinkButton control. -->
??????????? <mx:RemoveChild target="{registerLink}"/>
???????????
??????????? <!--
??????????????? Add a new LinkButton control to change
??????????????? view state back to the login form.
??????????? -->
??????????? <mx:AddChild relativeTo="{spacer1}" position="before">
??????????????? <mx:LinkButton label="Return to Login" click="currentState=''"/>
??????????? </mx:AddChild>
??????? </mx:State>
??? </mx:states>
??? <mx:Panel
??????? title="Login" id="loginPanel"
??????? horizontalScrollPolicy="off" verticalScrollPolicy="off"
??? >
??? <mx:Form id="loginForm">
??????? <mx:FormItem label="Username:">
??????????? <mx:TextInput/>
??????? </mx:FormItem>
??????? <mx:FormItem label="Password:">
??????????? <mx:TextInput/>
??????? </mx:FormItem>
??? </mx:Form>
???
??? <mx:ControlBar>
??????? <!--
??????????? Use the LinkButton control to change to
??????????? the Register view state.
??????? -->
??????? <mx:LinkButton
??????????? label="Need to Register?" id="registerLink"
??????????? click="currentState='Register'"
??????? />
??????? <mx:Spacer width="100%" id="spacer1"/>
??????? <mx:Button label="Login" id="loginButton"/>
??? </mx:ControlBar>
??? </mx:Panel>
</mx:Application>
结果
若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。
