在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>
分类: Flex
本文转自左正博客园博客，原文链接：http://www.cnblogs.com/soundcode/p/3434669.html，如需转载请自行联系原作者
