1.可以使用PopUpManager進(jìn)行界面切換
2.使用狀態(tài)(state),自定義一些狀態(tài)事件(StateEvent),在index.mxml（ｍｘ：application）中監(jiān)聽組件派發(fā)的狀態(tài)事件類型,利用改變狀態(tài)來改變顯示的界面.
⑴用第一種方式來實(shí)現(xiàn)相對簡單,利用PopUpManager的一些靜態(tài)方法即可實(shí)現(xiàn),比較適用于一些size相對較小的可視化組件,比如:登陸表單組件,或修改一個(gè)值,要求重新輸入一個(gè)新值等等類似情況.實(shí)現(xiàn)示例代碼如下：
- <span style="font-size: small;">var win:*;
- win = new loginPanel();
- //彈出顯示登錄框
- PopUpManager.addPopUp(win,this,true);
- //登陸框顯示在中間
- PopUpManager.centerPopUp(win); </span>
var win:*;
win = new loginPanel();
//彈出顯示登錄框
PopUpManager.addPopUp(win,this,true);
//登陸框顯示在中間
PopUpManager.centerPopUp(win);
⑵在第二種方法中利用state來改變顯示的界面則要相對復(fù)雜許多.
①首先我們需要自定義統(tǒng)一的狀態(tài)事件名稱
- <span style="font-size: small;">package note.events{
- /**
- * 狀態(tài)事件,每個(gè)狀態(tài)值要和狀態(tài)名稱一樣
- * @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";
- }
- }</span>
package note.events{
/**
* 狀態(tài)事件,每個(gè)狀態(tài)值要和狀態(tài)名稱一樣
* @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項(xiàng)目的主程序中定義state,當(dāng)然也可以加上狀態(tài)切換的動(dòng)畫.
- <span style="font-size: small;"><!-- 定義狀態(tài),我們分別定義了三個(gè)狀態(tài),每個(gè)狀態(tài)對應(yīng)一個(gè)自定義的可視化組件 -->
- <mx:states>
- <mx:State name="loginState">
- <mx:AddChild position="lastChild">
- <!-- 狀態(tài)對應(yīng)的自定義組件:登陸組件 -->
- <view:loginPanel id="panel_login" x="195" y="89"/>
- </mx:AddChild>
- </mx:State>
-
- <mx:State name="addNoteState">
- <mx:AddChild position="lastChild">
- <!-- 狀態(tài)對應(yīng)的自定義組件:添加留言組件 -->
- <view:addNotePanel id="panel_addNote" x="10" y="44"/>
- </mx:AddChild>
- </mx:State>
-
- <mx:State name="addUserState">
- <mx:AddChild position="lastChild">
- <!-- 狀態(tài)對應(yīng)的自定義組件:添加用戶組件 -->
- <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></span>
<!-- 定義狀態(tài),我們分別定義了三個(gè)狀態(tài),每個(gè)狀態(tài)對應(yīng)一個(gè)自定義的可視化組件 -->
<mx:states>
<mx:State name="loginState">
<mx:AddChild position="lastChild">
<!-- 狀態(tài)對應(yīng)的自定義組件:登陸組件 -->
<view:loginPanel id="panel_login" x="195" y="89"/>
</mx:AddChild>
</mx:State>
<mx:State name="addNoteState">
<mx:AddChild position="lastChild">
<!-- 狀態(tài)對應(yīng)的自定義組件:添加留言組件 -->
<view:addNotePanel id="panel_addNote" x="10" y="44"/>
</mx:AddChild>
</mx:State>
<mx:State name="addUserState">
<mx:AddChild position="lastChild">
<!-- 狀態(tài)對應(yīng)的自定義組件:添加用戶組件 -->
<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>
③在組件中派發(fā)狀態(tài)事件（StateEvent）
- <span style="font-size: small;"> //關(guān)閉添加留言組件的時(shí)候派發(fā)"空"狀態(tài)事件,也就是主程序界面不顯示其他組件
- //如果想顯示其他組件,則派發(fā)相應(yīng)的狀態(tài)事件
- internal function closeMySelf():void{
- appModel.dispatchEvent(new Even(StateEvent.NULL_STATE));
- }</span>
//關(guān)閉添加留言組件的時(shí)候派發(fā)"空"狀態(tài)事件,也就是主程序界面不顯示其他組件
//如果想顯示其他組件,則派發(fā)相應(yīng)的狀態(tài)事件
internal function closeMySelf():void{
appModel.dispatchEvent(new Even(StateEvent.NULL_STATE));
}
④在主程序界面中監(jiān)聽狀態(tài)事件(StateEvent),從而通過改變狀態(tài)來顯示我們需要的組件.
- <span style="font-size: small;"> //添加狀態(tài)事件監(jiān)聽,在程序初始化的時(shí)候執(zhí)行
- internal function stateListener():void{
- appModel.addEventListener(StateEvent.NULL_STATE,stateEventHandler);
- appModel.addEventListener(StateEvent.LOGIN_STATE,stateEventHandler);
- appModel.addEventListener(StateEvent.ADDNOTE_STATE,stateEventHandler);
- }
- //狀態(tài)事件處理函數(shù)
- internal function stateEventHandler(evt:Event):void{
- this.currentState = evt.type.toString();
- }</span>
//添加狀態(tài)事件監(jiān)聽,在程序初始化的時(shí)候執(zhí)行
internal function stateListener():void{
appModel.addEventListener(StateEvent.NULL_STATE,stateEventHandler);
appModel.addEventListener(StateEvent.LOGIN_STATE,stateEventHandler);
appModel.addEventListener(StateEvent.ADDNOTE_STATE,stateEventHandler);
}
//狀態(tài)事件處理函數(shù)
internal function stateEventHandler(evt:Event):void{
this.currentState = evt.type.toString();
}
在項(xiàng)目中appModel是一個(gè)繼承
EventDispatcher,使用單例模式實(shí)現(xiàn)的程序模型.不知道讀者是否發(fā)現(xiàn)StateEvent中事件名稱是和主程序界面中定義的state的
name值是一致的.因?yàn)檫@樣定義我們就可以使用統(tǒng)一的狀態(tài)事件處理函數(shù),就不需要先去判斷是哪個(gè)狀態(tài)事件,在來改變當(dāng)前狀態(tài).只要簡單的執(zhí)行 this.currentState = evt.type.toString();