Flex State

在Flex 程序中，引入了状态设计的概念。在一个程序中，按照功能的需求，将界面切分成相对独立的部分。运行过程中，随着用户交互，界面在各个部分之间切换。比如在购物车程序中，登录界面、选购商品界面、购物车界面、付款界面，这些部分代表着不同的功能，显示当前程序的运行状态，每个界面便是一个状态（Status）。       在State对象中可以使用以下的方法：

setProperty：设置对象的属性

setStyle：设置对象的样式

setEventHandler：设置对象某一事件的监听方法

removeChild：删除一个子级元素

transition：设置状态的过渡动画效果

addChild：向对象添加一个子级元素 <?xml version="1.0" encoding="utf-8"?> <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">     <mx:Script>         <![CDATA[             import mx.events.CloseEvent;             import mx.controls.Alert;             private function clickHandler(event:Event):void{                 Alert.show("Do you want to save your changes?","Save Changes",3,this,alertClickHandler);             }             private function alertClickHandler(event:CloseEvent):void{                 if(event.detail==Alert.YES){                     label1.text="Please Login!";                     currentState="";                 }else{                     currentState='Register';                 }             }         ]]>     </mx:Script>         <mx:states>         <mx:State name="Register">             <mx:AddChild relativeTo="{loginForm}" position="lastChild">//addChild：向对象添加一个子级元素 lastChild表示在最后位置添加                 <mx:target>                     <mx:FormItem id="confirm" label="Confirm:">                         <mx:TextInput/>                     </mx:FormItem>                 </mx:target>             </mx:AddChild>             <mx:AddChild relativeTo="{loginForm}" position="lastChild">                 <mx:target>                     <mx:FormItem id="email" label="Email:">                         <mx:TextInput id="emailId"/>                     </mx:FormItem>                 </mx:target>             </mx:AddChild>             <mx:SetProperty target="{loginPanel}" name="title" value="Register"/>//设置id为loginPanel的Panel对象的title属性的值为Register             <mx:SetProperty target="{loginButton}" name="label" value="Register"/>             <mx:SetEventHandler target="{loginButton}" name="click" handlerFunction="clickHandler"/>//设置对象某一事件的监听方法             <mx:SetStyle target="{loginButton}" name="color" value="blue"/>//设置对象的样式             <mx:RemoveChild target="{registerLink}"/>删除一个子级元素             <mx:AddChild relativeTo="{spacer1}" position="before">//添加子元素在space1前面                 <mx:target>                     <mx:LinkButton id="loginLink" label="Return to login" click="currentState=''"/>                 </mx:target>             </mx:AddChild>         </mx:State>     </mx:states>     <mx:Panel title="Login" id="loginPanel" horizontalScrollPolicy="off" verticalScrollPolicy="off" paddingTop="10" paddingBottom="10"          paddingLeft="10" paddingRight="10">         <mx:Text width="100%" color="blue" id="label1" text="Click the 'Need to Register?'"/>         <mx:Form id="loginForm">             <mx:FormItem label="Username:">                 <mx:TextInput/>             </mx:FormItem>             <mx:FormItem label="Password:">                 <mx:TextInput/>             </mx:FormItem>         </mx:Form>         <mx:ControlBar>             <mx:LinkButton id="registerLink" label="Need to Register?" click="currentState='Register'"/>             <mx:Spacer width="100%" id="spacer1"/>             <mx:Button label="Login" id="loginButton"/>         </mx:ControlBar>     </mx:Panel>  </mx:Module>