Flex实现页面多态--state对象
在Flex 程序中，引入了狀態設計的概念。在一個程序中，按照功能的需求，將界面切分成相對獨立的部分。運行過程中，隨著用戶交互，界面在各個部分之間切換。比如在購物車程序中，登錄界面、選購商品界面、購物車界面、付款界面，這些部分代表著不同的功能，顯示當前程序的運行狀態，每個界面便是一個狀態（Status）。
在一個復雜的程序中，將程序按照功能進行結構劃分是非常重要的，這樣，問題會變得明了，這也是使用狀態設計的原因。
其實，我們和狀態打過很多交道，只不過沒有把它理論化。比如，鼠標的點擊動作，也是由幾個狀態組成的：鼠標移上、鼠標按下、鼠標松開、鼠標移開。用這種視角來分析問題，條理就很清楚，不容易陷入令人煩惱的邏輯糾紛中。
當狀態發生改變時，我們可以為兩個狀態的切換添加形變動畫。形變動畫由若干個動畫效果組成，可以理解為：狀態的切換也是行為的一種，因此，形變動畫的創建和使用與行為一樣，非常簡單。
在Flex中，狀態的創建也是很簡單的。我們不需要花費時間在界面的設計上，也不用去關心狀態的運作方式，這些都由Flex來完成。
所有的組件都實現了狀態機制，一般情況下，容器類組件或有容器特色的組件和狀態機制是最佳組合，這樣狀態機制就可以控制程序的一個功能塊。
請看實例demo.mxml的源程序：
<?xml version="1.0" ?> <!-- Simple example to demonstrate the States class. --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <!--[CDATA[ import mx.controls.Alert; import mx.events.CloseEvent; private function clickHandler(event:Event):void { Alert.show("Do you want to save your changes?", "Save Changes", 3, this, alertClickHandler); } // Event handler function for displaying the selected Alert button. private function alertClickHandler(event:CloseEvent):void { if (event.detail==Alert.YES) { //status.text="You answered Yes"; lable1.text = "Please Login!"; currentState=''; } else { currentState='Register'; //status.text="You answered No"; } } ]]--> </mx:Script> <!-- Define one view state, in addition to the base state.--> <mx:states> <mx:State name="Register"> <mx:AddChild relativeTo="{loginForm}" position="lastChild"> <mx:target> <mx:FormItem id="confirm" label="Confirm:"> <mx:TextInput/> </mx:FormItem> </mx:target> </mx:AddChild> <mx:AddChild relativeTo="{loginForm}" position="lashChild"> <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"/> <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"> <mx:target> <mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/> </mx:target> </mx:AddChild> </mx:State> </mx:states> <!-- Define a Panel container that defines the login form.--> <mx:Panel title="Login" id="loginPanel" horizontalScrollPolicy="off" verticalScrollPolicy="off" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"> <mx:Text width="100%" color="blue" id="lable1" text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/> <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:Application>
這里在mx:states標簽中添加了一對mx:State標簽，用來定義一個狀態，并命名為“detail”。在State對象可以使用如下方法：
l? SetEventHandler：設置對象某一事件的監聽方法
l? SetProperty：設置對象的屬性
l? SetStyle：設置對象的樣式
l? AddChild：向對象添加一個子級元素
l? RemoveChild：刪除一個子級元素
l? Transition：設置狀態的過渡動畫效果
當程序或組件切換到目標狀態時，里面添加的方法就會被自動調用。
在上面的實例中，使用了AddChild和RemoveChild方法。其中AddChild的relativeTo屬性表示目標容器，position表示新對象在容器中的位置，可選的值有before、after、firstChild和lastChild。
<mx:AddChild relativeTo="{contentPanel}" position="lastChild" creationPolicy="all">
????? ……
</mx:AddChild>
position 默認是lastChild，表示在所有子級元素的最后；firstChild表示添加在目標的所有子級元素最前面；before和after分別表示添加到對象的所在容器中，處于對象位置的前面和后面。在添加對象時，creationPolicy可以控制對象對子級元素的顯示操作，可選的值有：all， auto，none和queued。all表示總是創建對象；auto表示只有需要對象時才創建；queued表示將對象放在等待創建的隊列中，對象完成初始化再開始創建子級元素；none則表示不創建對象，直到調用了createComponentsFromDescriptors函數時才創建它。默認為auto，有時為了強迫對象總是顯示出來，可以設為all。如果沒有特殊的需求，設為all就可以了。
RemoveChild使用起來比較簡單，只要指定目標即可：
<mx:RemoveChild target="{img}"></mx:RemoveChild>
這條語句表示刪除img對象。
在使用State對象時，currentState屬性代表了當前對象的狀態，利用它我們可以很方便地操作狀態的切換。在函數changeState中，就是利用currentState來改變狀態的：
//判斷當前狀態，狀態默認為空值
if(currentState == "detail"){
??? currentState = "";????????? //切換到默認狀態????????
??? btn.label = "了解詳情";????? //修改按鈕的文字
}else{
??? currentState = "detail";??? //切換到detail狀態?????
??? btn.label = "返回簡介";
}
在從默認狀態切換到“detail”狀態時，<mx:State name = "detail">…< mx:State>標簽內的代碼開始執行。如果再次返回默認狀態，所有的物件仍會恢復原貌。也就是說，“detail”狀態下通過 AddChild、RemoveChild等進行的修改不會影響默認狀態，被刪除的物件仍然還在。
轉載于:https://www.cnblogs.com/muyuge/archive/2009/08/05/6152680.html
總結
以上是生活随笔為你收集整理的Flex实现页面多态--state对象的全部內容，希望文章能夠幫你解決所遇到的問題。
