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>
總結
以上是生活随笔為你收集整理的Flex State的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 北上广深人口为何会大量流失?
- 下一篇: Flex页面跳转的五种实现方式