探索与发现

研究java技术

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  83 随笔 :: 0 文章 :: 109 评论 :: 0 Trackbacks

1.可以使用PopUpManager进行界面切换
2.使用状态(state),自定义一些状态事件(StateEvent),在index.mxml(mx:application)中监听组件派发的状态事件类型,利用改变状态来改变显示的界面.


⑴用第一种方式来实现相对简单,利用PopUpManager的一些静态方法即可实现,比较适用于一些size相对较小的可视化组件,比如:登陆表单组件,或修改一个值,要求重新输入一个新值等等类似情况.实现示例代码如下:

Js代码
  1. <span style="font-size: small;">var win:*;   
  2. win = new loginPanel();   
  3. //弹出显示登录框   
  4. PopUpManager.addPopUp(win,this,true);   
  5. //登陆框显示在中间   
  6. PopUpManager.centerPopUp(win); </span>  

 ⑵在第二种方法中利用state来改变显示的界面则要相对复杂许多.

①首先我们需要自定义统一的状态事件名称

Java代码
  1. <span style="font-size: small;">package note.events{  
  2. /** 
  3.  * 状态事件,每个状态值要和状态名称一样 
  4.  * @author halzhang 
  5. */  
  6. public class StateEvent{  
  7.           public static const NULL_STATE:String = "";  
  8.           public static const LOGIN_STATE:String = "loginState";  
  9.           public static const ADDNOTE_STATE:String = "addNoteState";  
  10.           public static const ADDUSER_STATE:String = "addUserState";  
  11.           public static const LISTALLUSER_STATE:String = "listAllUserState";  
  12.          }  
  13. }</span>  

 ②在Flex项目的主程序中定义state,当然也可以加上状态切换的动画.

Html代码
  1. <span style="font-size: small;"><!-- 定义状态,我们分别定义了三个状态,每个状态对应一个自定义的可视化组件  -->  
  2.     <mx:states>  
  3.         <mx:State name="loginState">  
  4.             <mx:AddChild position="lastChild">  
  5.                 <!-- 状态对应的自定义组件:登陆组件 -->  
  6.                 <view:loginPanel id="panel_login" x="195" y="89"/>  
  7.             </mx:AddChild>  
  8.         </mx:State>  
  9.           
  10.         <mx:State name="addNoteState">  
  11.             <mx:AddChild position="lastChild">  
  12.                 <!-- 状态对应的自定义组件:添加留言组件 -->  
  13.                 <view:addNotePanel id="panel_addNote" x="10" y="44"/>  
  14.             </mx:AddChild>  
  15.         </mx:State>  
  16.           
  17.         <mx:State name="addUserState">  
  18.             <mx:AddChild position="lastChild">  
  19.                 <!-- 状态对应的自定义组件:添加用户组件 -->  
  20.                 <view:addUserPanel id="panel_addUser" x="10" y="44"/>  
  21.             </mx:AddChild>  
  22.         </mx:State>  
  23.           
  24.         <mx:State name="listAllUserState">  
  25.             <mx:AddChild position="lastChild">  
  26.                 <view:allUserPanel id="panel_allUser" x="10" y="44"/>  
  27.             </mx:AddChild>  
  28.         </mx:State>  
  29.     </mx:states></span>  

③在组件中派发状态事件(StateEvent)

Js代码
  1. <span style="font-size: small;"> //关闭添加留言组件的时候派发"空"状态事件,也就是主程序界面不显示其他组件     
  2.  //如果想显示其他组件,则派发相应的状态事件     
  3.  internal function closeMySelf():void{    
  4.         appModel.dispatchEvent(new Even(StateEvent.NULL_STATE));    
  5.  }</span>  

④在主程序界面中监听状态事件(StateEvent),从而通过改变状态来显示我们需要的组件.

Js代码
  1. <span style="font-size: small;">                                                //添加状态事件监听,在程序初始化的时候执行  
  2.             internal function stateListener():void{  
  3.                 appModel.addEventListener(StateEvent.NULL_STATE,stateEventHandler);  
  4.                 appModel.addEventListener(StateEvent.LOGIN_STATE,stateEventHandler);  
  5.                 appModel.addEventListener(StateEvent.ADDNOTE_STATE,stateEventHandler);  
  6.             }  
  7.             //状态事件处理函数  
  8.             internal function stateEventHandler(evt:Event):void{  
  9.                 this.currentState = evt.type.toString();  
  10.             }</span>  

在项目中appModel是一个继承 EventDispatcher,使用单例模式实现的程序模型.不知道读者是否发现StateEvent中事件名称是和主程序界面中定义的state的 name值是一致的.因为这样定义我们就可以使用统一的状态事件处理函数,就不需要先去判断是哪个状态事件,在来改变当前状态.只要简单的执行 this.currentState = evt.type.toString();

posted on 2009-09-10 17:50 蜘蛛 阅读(2704) 评论(2)  编辑  收藏 所属分类: Flex

评论

# re: 对Flex开发过程中界面切换的认识(转)[未登录] 2010-08-27 09:21 kevin
Dim InstalledObjects(12)
InstalledObjects(1) = "JMail.Message" 'JMail 4.3
InstalledObjects(2) = "CDONTS.NewMail" 'CDONTS
InstalledObjects(3) = "Persits.MailSender" 'ASPEMAIL
'-----------------------
InstalledObjects(4) = "Adodb.Stream" 'Adodb.Stream
InstalledObjects(5) = "Persits.Upload" 'Aspupload3.0
InstalledObjects(6) = "SoftArtisans.FileUp" 'SA-FileUp 4.0
InstalledObjects(7) = "DvFile.Upload" 'DvFile-Up V1.0
'-----------------------
InstalledObjects(9) = "CreatePreviewImage.cGvbox" 'CreatePreviewImage
InstalledObjects(10) = "Persits.Jpeg" 'AspJpeg
InstalledObjects(11) = "Persits.Jpeg" 'SoftArtisans ImgWriter V1.21  回复  更多评论
  

# re: 对Flex开发过程中界面切换的认识(转) 2013-04-29 15:52 we44444444444444444444444444444444444/////////////
Flex:实现三个界面的动态切换 - 小石在思考 - Yecon - 和讯博客
Flex:实现三个界面的动态切换 [原创 2009-2-18 11:06:54] 我顶 字号:大 ...flex 查看和 flex 相关的微博 界面 查看和 界面 相关的微博 state 查看和 ...
yecon.blog.hexun.com/29488241...html 2013-4-4 - 百度快照
急!在flex中如何点击按钮实现页面切换(状态切换)_百度知道
1个回答 - 提问时间: 2012年07月26日
可以用viewstack或者state
zhidao.baidu.com/question/4558101... 2012-7-27 - 百度快照
FLEX界面切换 - ITeye问答
FLEX界面切换10 刚接触FLEX,我想了解一下,在做FLEX的时候,我们能不能把MXML... 产品License 如何实现? 使用dwr出现的问题 http 怎么实现长连接, CXF的纯...
www.iteye.com/problems/16... 2013-4-23 - 百度快照
Flex怎样实现局部切换显示????? - CSDN论坛 - CSDN.NET
8条回复 - 发帖时间: 2012年5月17日
Flex怎样实现局部切换显示? [问题点数:20分,结帖人templingbin] 收藏...比如我有一界面,顶部是标题栏,底部是状态信息栏,中间就是用于切换各个界面内容...
bbs.csdn.net/topics/390054... 2013-4-18 - 百度快照
对Flex开发过程中界面切换的认识(转) - 探索与发现 - BlogJava
1条评论 - 发文时间: 2009年9月10日
对Flex开发过程中界面切换的认识(转) 1.可以使用PopUpManager进行界面切换 2....利用改变状态来改变显示的界面. ⑴用第一种方式来实现相对简单,利用PopUpManager...
www.blogjava.net/zhaijianhui/archive... 2013-4-23 - 百度快照
js实现图片切换_浮动窗口代码_flex js_js图片变换代码
js实现图片切换_浮动窗口代码_flex js_js图片变换代码 在php中加入js代码js实现图片切换网页漂浮代码左侧浮动广告代码js广告代码管理空间漂浮物代码js图片展示js树形...
xrjvs.17173.adultcompanion.co.uk/ 2010-11-2 - 百度快照
对Flex开发过程中界面切换的认识 - 努力吧 - ITeye技术网站
利用改变状态来改变显示的界面. ⑴用第一种方式来实现相对简单,利用PopUpManager... ②在Flex项目的主程序中定义state,当然也可以加上状态切换的动画. <!--...
halzhang.iteye.com/blog/457... 2013-4-13 - 百度快照
急!在flex中如何点击按钮实现页面切换(状态切换) - 已解决 - 搜搜...
1个回答 - 最新回答: 2011年4月14日
最佳答案: n种办法, 你可以用model 或者状态status 或者 viewstatic
wenwen.soso.com/z/q2801163...htm 2013-3-20 - 百度快照
一种基于flex的可视化多层流量切分界面的实现_系统架构_酷勤网
一种基于flex的可视化多层流量切分界面的实现浏览次数:次 2012年07月07日 百度... 那么这些基本元素的数据模型如何实现呢?我们可以从这些元素的特性着手分析,如图1...
www.kuqin.com/system-analysis/201207... 2012-7-8 - 百度快照
Flex怎么样实现各个mxml页面之间的来回转换,最好给个例..._百度知道
1个回答 - 提问时间: 2011年09月06日
最佳答案: 不知道你的MXML各个页面是什么方式的。 如果是以Module方式的建立的MXML页面,可以使用_moduleInfo.load() 例: 假设我们有个testmod.mxml的Module ...
zhidao.baidu.com/question/3164598... 2011-9-9 - 百度快照
  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: