探索與發現

1.可以使用PopUpManager進行界面切換
2.使用狀態(state),自定義一些狀態事件(StateEvent),在index.mxml（ｍｘ：application）中監聽組件派發的狀態事件類型,利用改變狀態來改變顯示的界面.

⑴用第一種方式來實現相對簡單,利用PopUpManager的一些靜態方法即可實現,比較適用于一些size相對較小的可視化組件,比如:登陸表單組件,或修改一個值,要求重新輸入一個新值等等類似情況.實現示例代碼如下：

var win:*;
win = new loginPanel();
//彈出顯示登錄框
PopUpManager.addPopUp(win,this,true);
//登陸框顯示在中間
PopUpManager.centerPopUp(win); 

 ⑵在第二種方法中利用state來改變顯示的界面則要相對復雜許多.

①首先我們需要自定義統一的狀態事件名稱

package note.events{
/**
* 狀態事件,每個狀態值要和狀態名稱一樣
* @author halzhang
*/
public class StateEvent{
public static const NULL_STATE:String = "";
public static const LOGIN_STATE:String = "loginState";
public static const ADDNOTE_STATE:String = "addNoteState";
public static const ADDUSER_STATE:String = "addUserState";
public static const LISTALLUSER_STATE:String = "listAllUserState";
}
}

 ②在Flex項目的主程序中定義state,當然也可以加上狀態切換的動畫.

<!-- 定義狀態,我們分別定義了三個狀態,每個狀態對應一個自定義的可視化組件  -->
<mx:states>
<mx:State name="loginState">
<mx:AddChild position="lastChild">
<!-- 狀態對應的自定義組件:登陸組件 -->
<view:loginPanel id="panel_login" x="195" y="89"/>
</mx:AddChild>
</mx:State>
<mx:State name="addNoteState">
<mx:AddChild position="lastChild">
<!-- 狀態對應的自定義組件:添加留言組件 -->
<view:addNotePanel id="panel_addNote" x="10" y="44"/>
</mx:AddChild>
</mx:State>
<mx:State name="addUserState">
<mx:AddChild position="lastChild">
<!-- 狀態對應的自定義組件:添加用戶組件 -->
<view:addUserPanel id="panel_addUser" x="10" y="44"/>
</mx:AddChild>
</mx:State>
<mx:State name="listAllUserState">
<mx:AddChild position="lastChild">
<view:allUserPanel id="panel_allUser" x="10" y="44"/>
</mx:AddChild>
</mx:State>
</mx:states>

③在組件中派發狀態事件（StateEvent）

 //關閉添加留言組件的時候派發"空"狀態事件,也就是主程序界面不顯示其他組件
//如果想顯示其他組件,則派發相應的狀態事件
internal function closeMySelf():void{
appModel.dispatchEvent(new Even(StateEvent.NULL_STATE));
}

④在主程序界面中監聽狀態事件(StateEvent),從而通過改變狀態來顯示我們需要的組件.

                                                //添加狀態事件監聽,在程序初始化的時候執行
internal function stateListener():void{
appModel.addEventListener(StateEvent.NULL_STATE,stateEventHandler);
appModel.addEventListener(StateEvent.LOGIN_STATE,stateEventHandler);
appModel.addEventListener(StateEvent.ADDNOTE_STATE,stateEventHandler);
}
//狀態事件處理函數
internal function stateEventHandler(evt:Event):void{
this.currentState = evt.type.toString();
}

在項目中appModel是一個繼承 EventDispatcher,使用單例模式實現的程序模型.不知道讀者是否發現StateEvent中事件名稱是和主程序界面中定義的state的 name值是一致的.因為這樣定義我們就可以使用統一的狀態事件處理函數,就不需要先去判斷是哪個狀態事件,在來改變當前狀態.只要簡單的執行 this.currentState = evt.type.toString();