1.可以使用PopUpManager进行界面切换
2.使用状态(state),自定义一些状态事件(StateEvent),在index.mxml（ｍｘ：application）中监听组件派发的状态事件类型,利用改变状态来改变显示的界面.
⑴用第一种方式来实现相对简单,利用PopUpManager的一些静态方法即可实现,比较适用于一些size相对较小的可视化组件,比如:登陆表单组件,或修改一个值,要求重新输入一个新值等等类似情况.实现示例代码如下：
- <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来改变显示的界面则要相对复杂许多.
①首先我们需要自定义统一的状态事件名称
- <span style="font-size: small;">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";
- }
- }</span>
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,当然也可以加上状态切换的动画.
- <span style="font-size: small;"><!-- 定义状态,我们分别定义了三个状态,每个状态对应一个自定义的可视化组件 -->
- <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></span>
<!-- 定义状态,我们分别定义了三个状态,每个状态对应一个自定义的可视化组件 -->
<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）
- <span style="font-size: small;"> //关闭添加留言组件的时候派发"空"状态事件,也就是主程序界面不显示其他组件
- //如果想显示其他组件,则派发相应的状态事件
- internal function closeMySelf():void{
- appModel.dispatchEvent(new Even(StateEvent.NULL_STATE));
- }</span>
//关闭添加留言组件的时候派发"空"状态事件,也就是主程序界面不显示其他组件
//如果想显示其他组件,则派发相应的状态事件
internal function closeMySelf():void{
appModel.dispatchEvent(new Even(StateEvent.NULL_STATE));
}
④在主程序界面中监听状态事件(StateEvent),从而通过改变状态来显示我们需要的组件.
- <span style="font-size: small;"> //添加状态事件监听,在程序初始化的时候执行
- 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();
- }</span>
//添加状态事件监听,在程序初始化的时候执行
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();