`

Flex 应用的初始化顺序(转)

    博客分类:
  • Flex
阅读更多

preloader->systemManager->FlexApplication started… 
然后才是 

preinitialize 
在 所有的初始化之前触发,没有子组件的定义,但是可以引用组件的变量. 

initialize 
当所有子组件生成完成后触发,在这 个时间点还没有组件被渲染出来. 

creationComplete 
组件定义完成并已经在显示列表. 

applicationComplete 
所 有的组件初始化完成并显示. 


首 先介绍一下SystemManager. SystemManager是Flex应用的主控 者, 它控制着应用窗口, Application实例, 弹出窗口, cursors, 并管理着ApplicationDomain中的 类. SystemManager是FlashPlayer实例化的第一个类, 它存储了主应用窗口的大小和位置信息, 保存其子组件比如:浮动弹出窗口 和模态窗口的痕迹. 通过SystemManager可以获得内嵌字体,样式和document对象. 
自定义的可视化组件 (UIComponent的子类)只有在调用过addChild()后, 才会有一个SystemManager赋给他们, 之前是Null. 所以在自 定义可视化组件的构造函数中不要使用SystemManager. 

通常, Application对象创建时, 发生如下事件: 
1. 实 例化Application对象 
2. 初始化Application.systemManager 
3. Application在初 始化过程之前, 派发预初始化事件. 
4. 调用createChild(). 此时, 所有应用组件被创建, 所有组件的 createChild()被调用. 
5. Application派发初始化事件, 表明所有的组件初始化完毕. 
6. 派发 creationComplete事件 
7. Application对象添加到显示列表中 
8. 派发 applicationComplete事件 

大 多数情况下, 我们使用<mx:Application>来创建 application对象, 但如果使用ActionScript来创建的话, 那么建议不要在application的构造函数中创建组件, 推荐在 crateChildren函数中, 主要是从性能方面考虑. 

Flash包含的是一个时间线上的多个帧, 而Flex的SWF只包含2 个帧. SystemManager, Preloader, DownloadProgressBar和少量工具类都在第一帧, 剩下的包括应用代码 / 内嵌资源全都在第二帧中. 当Flash Player下载下载SWF时, 只要接收到第一帧内足够的数据, 就会实例化 SystemManager, 由它来创建Preloader, 然后创建DownloadProgressBar, 这两个对象会察看剩余字节的传输过 程. 当第一帧的所有字节传输完毕后, SystemManager发送enterFrame到第二帧, 然后是其他事件. 最后Application 对象派发applicationComplete事件. 

Flex 是一个事件驱动的编程模型, 任何事情的发生, 其背后必然存在一个 事件. 而开发者第一次看到MXML时, 很难体会到一个Xml标记的应用的事件流和实例化的生命周期. 这个对于HTML和Flash的开发者尤其会感 到困惑, 因为其熟悉的方式与Flex的一点也不相似. HTML的实例化是从上到下的, Flash的执行是从Frame0开始一帧帧运行的. 而 Flex则又有不同. 

从我们开始学习Flex时, 我们就需要了解事件流和MXML的实例化. 我非常困惑因为我实在难以理解什么样的 事件会被触发或者事件什么时候会被触发. 关键是要理解事件的基础并亲自观察事件流的初始化. 

我们来看一个简单的MXML的应用. 

<?xml version=”1.0″ encoding=”utf-8″?><mx:Application    xmlns:mx=”http://www.adobe.com/2006/mxml”    layout=”absolute”    backgroundGradientColors=”[#67cbff, #fcffff]”    color=”#000000″    fontSize=”12″        preinitialize=”report( event , ‘preinitialize’ )”    initialize=”report( event , ‘initialize’ )”    creationComplete=”report( event , ‘creationComplete’ )”    applicationComplete=”report( event , ‘applicationComplete’ )”    >        <mx:Script>        <![CDATA[                                    [Bindable]                        public var outTextData:String=”";                        public function report( event:Event , value:String ):void            {                outTextData += String( flash.utils.getTimer() ) + ‘ms >> ‘                + event.currentTarget + ‘.’ + value + ‘\n’;                }                    ]]>    </mx:Script>        <mx:TextArea        id=”outTextArea”        text=”{ outTextData }”        right=”10″ left=”10″ top=”50″ bottom=”10″ alpha=”0.5″        wordWrap=”false”        initialize=”report( event , ‘initialize’ )”        creationComplete=”report( event , ‘creationComplete’ )”        />        <mx:Button        y=”10″ height=”30″ left=”168″ width=”150″        id=”HelloButton”        label=”Say Hello”        initialize=”report( event , ‘initialize’ )”        creationComplete=”report( event , ‘creationComplete’ )”        rollOver=”report( event , ‘rollOver’ )”        rollOut=”report( event , ‘rollOut’ )”        click=”report( event , ‘click > Hello!’ )”        />            <mx:Button        id=”GoodByeButton”        label=”Say Goodbye”        y=”10″ left=”10″ height=”30″ width=”150″ color=”#000000″        initialize=”report( event , ‘initialize’ )”        creationComplete=”report( event , ‘creationComplete’ )”        click=”report( event , ‘click > Goodbye!’ )”        />            <mx:Button        id=”ClearButton”        label=”Clear”        y=”10″ left=”326″ height=”30″ color=”#000000″ right=”10″                initialize=”report( event , ‘initialize’ )”        creationComplete=”report( event , ‘creationComplete’ )”        click=”outTextData=”;report( event , ‘click’ )”         />    </mx:Application>


这 个应用运行时, 输出了实例流程和事件流. 这校我们就能够看到所有事件的触发顺序. 可以发现应用启动后, 事件的顺序是一定的. 下面是输出的内 容: 

167ms >> EventFlow0.preinitialize 
183ms >> EventFlow0.outTextArea.initialize 
187ms >> EventFlow0.HelloButton.initialize 
188ms >> EventFlow0.GoodByeButton.initialize 
189ms >> EventFlow0.ClearButton.initialize 
189ms >> EventFlow0.initialize 
243ms >> EventFlow0.outTextArea.creationComplete 
243ms >> EventFlow0.HelloButton.creationComplete 
243ms >> EventFlow0.GoodByeButton.creationComplete 
244ms >> EventFlow0.ClearButton.creationComplete 
244ms >> EventFlow0.creationComplete 
246ms >> EventFlow0.applicationComplete 

一 旦applicationComplete事件触发后, 组件就会在鼠标事件派发后触发自己的事件. 

1807ms >> EventFlow0.HelloButton.rollOver 
2596ms >> EventFlow0.HelloButton.rollOut 
2954ms >> EventFlow0.HelloButton.rollOver 
3170ms >> EventFlow0.HelloButton.rollOut 
3543ms >> EventFlow0.HelloButton.rollOver 
4052ms >> EventFlow0.HelloButton.click > Hello! 
4267ms >> EventFlow0.HelloButton.click > Hello! 
4474ms >> EventFlow0.HelloButton.click > Hello! 
4569ms >> EventFlow0.HelloButton.rollOut 
4907ms >> EventFlow0.GoodByeButton.click > Goodbye! 
5130ms >> EventFlow0.GoodByeButton.click > Goodbye!

分享到:
评论

相关推荐

    Flex Application 初始化顺序

    Flex Application 初始化顺序是一个重要的概念,尤其对于开发Adobe Flex应用程序的开发者来说,理解这一流程能帮助他们更好地优化代码和管理应用程序的生命周期。Flex是基于ActionScript和MXML的框架,用于构建富...

    Flex启动与初始化

    Flex 启动与初始化过程是指 Flex 应用程序从启动到显示的整个过程。在这个过程中,Flex 系统会创建一个 SystemManager 对象,该对象是应用程序的入口,负责控制 swf 的加载和启动,也负责划分 Flex 工程显示层级。 ...

    关于Flex 初始化的research

    原因在于Flex组件的生命周期,尤其是初始化阶段的事件顺序。 Flex组件的生命周期包含多个关键阶段,这些阶段按照一定的顺序执行,确保组件的正确初始化和显示。主要阶段包括: 1. **PREINITIALIZE**:这是组件生命...

    Flex中方法调用顺序的思考

    综上所述,深入理解Flex中的方法调用顺序对于编写高效、健壮的Flex应用至关重要。通过合理的覆盖生命周期方法和管理事件处理,我们可以更好地控制组件的行为,从而创建出更优秀的富互联网应用。而提供的`...

    flex事件运行流程

    本文将深入探讨Flex事件运行流程,特别是与`mx:Application.applicationComplete`、`creationComplete`以及Flex应用程序初始化顺序相关的知识点。 首先,Flex应用程序的启动始于`preloader`阶段,系统管理器...

    flex窗口最大最小化

    在前端开发中,Flex布局(Flexible Box)是一种用于创建弹性盒模型的CSS3模块,它极大地简化了网页或应用程序中的复杂布局设计。本教程将详细讲解如何使用Flex来实现窗口的拖拽、最大化、最小化以及关闭功能,这些都...

    Flex模块化开发实例

    在名为"ModularApp"的这个实例中,我们可以期待看到如何将一个复杂的Flex应用程序划分为多个模块,并演示如何使用Flex的模块化特性来有效地管理和加载这些模块。通过学习和实践这个实例,开发者可以掌握Flex模块化...

    Flex分页技术

    综上所述,Flex开发Flex dataGrid分页技术涵盖了数据管理、用户交互、性能优化等多个方面,这些知识点对于构建功能丰富的Flex应用至关重要。通过理解并运用这些技术,开发者可以创建出高效、易于使用的数据展示界面...

    flash_flex.rar_flex

    6. **Flex Component Lifecycle**:理解组件的生命周期,如初始化、测量、布局和绘制阶段,对于优化性能至关重要。 7. **数据绑定**:Flex支持数据绑定,能自动同步UI组件和后台数据模型,简化开发。 8. **States...

    Flex布局学习资料

    `flex-grow`定义放大比例,`flex-shrink`定义缩小比例,`flex-basis`定义初始大小。 5. **单独控制项目**:每个项目可以通过`align-self`属性覆盖`align-items`的设置,实现个性化的对齐。 6. **顺序控制**:`...

    flex组件,功能强大的下拉框

    4. **初始化显示已选择项** 当页面加载时,该组件能够自动显示之前用户已选择的选项,这提高了用户体验,因为他们无需再次手动设置。这种功能通常是通过存储和恢复用户偏好来实现的,可能涉及到本地存储或服务器端...

    Flex 白皮书 编成 flash

    6. **Flex应用生命周期**: 从初始化到销毁,Flex应用有明确的生命周期。理解这个过程对于优化性能和处理状态变化至关重要。 7. **数据绑定**: Flex支持双向数据绑定,使得视图层和模型层的数据能自动同步,降低了...

    Flex4 AIP 中文说明

    9. **移动设备支持**:虽然Flex4主要是为桌面浏览器设计的,但通过Adobe AIR,开发者可以将Flex应用程序部署到移动设备上,支持多种操作系统,如iOS和Android。 10. **错误处理和调试**:Flex4提供了更强大的错误...

    flex自定义创建css样式

    Flex布局允许我们轻松地处理容器内元素的对齐、顺序以及尺寸调整,特别是在响应式设计中,它的优势尤为突出。本篇文章将深入探讨如何在Flex布局中自定义创建CSS样式,以满足多样化的设计需求。 首先,我们需要理解...

    gis api for flex

    3. 初始化Map对象:创建Map对象,并设置地图的基本属性,如初始位置、比例尺等。 4. 添加图层:根据需求添加不同的图层,如TiledMapServiceLayer、DynamicMapServiceLayer等。 5. 控件与工具:添加缩放控件、导航...

    flex css动态加载

    首先,Flex CSS(也称为Flexbox)是CSS3弹性盒模型,它为处理容器内元素的布局提供了一种现代化的方法。Flexbox主要设计用于单一方向的布局,如水平或垂直排列,它解决了以往CSS布局模式(如浮动和定位)中的一些...

    flex 播放器 源码

    HTML文件可能包含了加载SWF所需的脚本和设置,例如Flash Player插件的引用,以及播放器的初始化参数。 `.settings`目录包含了项目特定的Eclipse或Flex Builder设置,这些设置可能与代码格式化、编译器警告、错误...

    Flex入门学习文档

    4. `FlexMxmlServlet`和`FlexSwfServlet`的初始化参数`load-on-startup`决定了它们在服务器启动时的加载顺序,`FlexMxmlServlet`先于`FlexSwfServlet`加载,因为MXML编译必须在SWF检索之前完成。 配置完成后,你...

    Flex第一步之源代码

    事件处理是用户与应用程序交互的关键,而理解应用程序的生命周期对于管理组件的创建、初始化和销毁至关重要。 Chapter_8和Chapter_9可能涉及更高级的主题,比如服务调用,如AMF或HTTP服务,以获取和发送服务器端的...

Global site tag (gtag.js) - Google Analytics