1.可以使用PopUpManager进行界面切换
2.使用状态(state),自定义一些状态事件(StateEvent),在index.mxml(mx: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();
分享到:
相关推荐
FLex 无间隙界面切换 FLex 无间隙 界面切换 这个效果可以看看 但是觉得 是想要的
在Flex中,模型负责处理数据和业务逻辑,视图负责显示数据,而控制器负责协调模型和视图之间的交互。 5. **Cairngorm框架**:Cairngorm提供了事件驱动的架构,通过命令模式处理应用的控制流程。它包含以下核心组件...
在flex中在同一界面实现切换效果,代码简单,易懂。
虽然在Flex中直接使用CSS属性设置循环背景并不容易,但Jackson.Wang找到了一种解决方案。他参考了一位国外博主的方法,并提供了一个链接指向这位博主的博客(www.degrafa.org)。 在该博客中,作者提供了一段...
这篇博客“Java 整合 Flex 开发应用”可能探讨了如何将这两者有效地融合,以实现高效的数据交互和动态用户界面。 【描述】虽然描述信息为空,但我们可以通过常规理解推测,作者可能分享了在实际项目中Java和Flex的...
本示例通过一个具体的代码片段展示了如何使用Flex中的高级数据绑定技术实现界面的多语言切换。它不仅包含了数据绑定的基本概念,还涉及到了模型与视图之间的交互、事件监听等高级特性。这种实现方式不仅简化了代码,...
第五章和第六章可能会探讨FLEX中的数据服务,如AMF通信、Web服务调用和 BlazeDS/LiveCycle Data Services的使用,让FLEX应用程序能够与后端服务器无缝交互,实现数据的获取和更新。 第七章至第九章可能涉及更高级的...
Flex是由Adobe公司开发的一种开放源码的富互联网应用程序(RIA)框架,主要用于构建和部署跨平台、跨浏览器的互动用户界面。本教程基于Flex官方文档,旨在为开发者提供中文版的详细学习指南,帮助理解并掌握Flex的...
这是一个图表探索工具,专注于展示Flex中可用的各种图表类型和配置。它允许开发者试验不同类型的图表,如柱状图、折线图、饼图等,并调整参数,如数据源、颜色、标签等。这对于创建数据可视化应用非常有用,开发者...
在这个过程中,开发者会学习如何利用Flex SDK或Flex Builder创建用户界面,如何使用ActionScript处理业务逻辑,以及如何调试和优化应用。 6. **Flex开源项目**:开源意味着源代码对公众开放,开发者可以查看、学习...
在开发过程中,你可能还需要配置Apache BlazeDS或Adobe LiveCycle Data Services来实现服务器与Flex应用之间的数据交换。同时,理解ActionScript的基本语法、MXML组件模型以及Flex框架(如Spark和MX)的工作原理对...
在Flex中,可以使用Timer或ENTER_FRAME事件来驱动游戏循环。 - **碰撞检测**:检测游戏对象间的碰撞是游戏逻辑的重要部分。可以使用矩形碰撞检测、像素级碰撞检测等方法。 - **物理引擎**:对于复杂的运动模拟,...
Flex中的CSS与Web开发中的CSS有一些相似之处,但也有其特定的规则和属性,如Skin和Style的概念,以及对Flex组件特有的样式支持。 在Flex中,样式可以通过以下几种方式应用: 1. **全局样式(Global Styles)**:...
在Flex开发中,事件机制扮演着重要角色。Flex遵循事件流模型,包括三个阶段: - **捕获阶段**:事件从最顶级的父节点向下传播到目标节点,检测沿途的节点是否注册了事件监听器。 - **目标阶段**:事件到达目标节点...
MXML是Flex中的一个重要组成部分,它类似于HTML,用来描述用户界面的布局和组件。通过MXML,开发者可以以声明式的方式定义UI元素,而ActionScript则用于处理程序逻辑和事件处理。 新建MXML文件是Flex开发的起点。在...
- **数据绑定**:Flex 3支持双向数据绑定,能够自动同步用户界面元素与模型数据之间的值,简化了数据管理过程。 - **皮肤系统**:Flex 3引入了一套新的皮肤系统,允许开发者自定义UI组件的外观,实现高度个性化的...
本文将通过图解的方式详细介绍Flex与MyEclipse的集成开发过程,并涉及Struts、Tomcat以及BlazeDS等关键技术点。 #### 二、Flex简介 Flex是一种用于构建和部署跨浏览器、跨平台的互联网应用程序的开源框架。它最初...
2. **FlexBuilder**:它是基于Eclipse的IDE,为Flex开发提供了一流的支持,包括代码提示、调试器、项目管理等功能,极大地方便了开发过程。 **二、MXML与ActionScript** 3. **MXML**:MXML是一种声明式语言,用于...
在本文中,我们将深入探讨如何使用Adobe Flex 4.5框架来开发针对Android操作系统的应用程序。Flex是一款强大的、基于ActionScript的开源开发工具,它允许开发者创建富互联网应用(RIA)以及跨平台的移动应用。Flex ...
ActionScript是Flex中的主要编程语言,版本3.0带来了显著的性能提升和面向对象的改进。它支持类、接口、包和命名空间,以及强大的错误处理和类型系统。ActionScript 3.0还引入了事件驱动模型,使得与用户交互更加...