`
raymond2006k
  • 浏览: 293655 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Flex Application 初始化顺序

阅读更多
原文地址: http://www.jexchen.com

大家都知道,我们在编写Flex应用程序时,通常是以<mx:Application>标签作为开头,实际上,Flex应用程序在启动运行的时候并不是直接从Application开始运行,在这之前还有一部分悄悄的先运行了,正如大家所看到的,当我们运行编写好的Flex应用程序时,尽管我们没有编写任何与启动进度载入条相关的代码,但无一例外的,应用程序均会为我们自动加上这一部分。因此才有我们看到的如下图所示的标准的Flex loading载入条。

    通常我们所说的Flex应用程序,本质上来说是基于Flex框架、采用ActionScript 3.0编写的Flash应用程序,从这一点来说,它和普通的Flash应用程序没有任何差别。相对来说,传统的使用Flash IDE(如Flash CS3)创建Flash程序时更多的基于“时间线”(Timeline)及“帧”(Frame)的概念,更易于设计师理解;而基于Flex框架来创建的 Flash应用程序更多是强调程序性,很少提及“时间线”与“帧”的概念,更易于程序员理解。其实Flex应用程序一样也有时间线,只是这部分由Flex 框架隐藏起来了,通常不为大家所熟悉,在默认创建Flex程序时,这一切Flex已帮我们完成了,但了解这部分内容更有助于大家对Flex应用程序的启动有更深刻的认识,以便能对程序更灵活的控制与发挥~~


    我们来看看上面这幅示意图,Flex应用程序共由两帧组成,第1帧为preloader部分,第2帧为主应用程序部分,此两部分由Flex应用程序的根SystemManager统管,SystemManager是flash.display.MovieClip的子类,影片剪辑(movie clip)支持帧。由于swf属于一种渐进式(progressive)下载的格式,正是由于swf格式这个特性,Flash Player并不需要等待整个程序下载完成便可直接访问已载入帧的内容,因此第一帧通常用来作为应用程序载入时的loading画面显示,一般来说,第一帧包含的内容应该尽可能的少(在第一帧中尽量不要含有Flex框架的组件),以便能很快的下载并立即显示;第二帧才是主应用程序真正的内容,一旦 SystemManager实例进入到第二帧后,即开始内部主应用程序运行的生命周期(life cycle),也就是进入我们最为熟悉的<mx:Application>运行的部分(SystemManger实例有一 application的属性,在第1帧时,此属性为null,当进入到第2帧时,该属性才指向真正的主程序application实例)记住我们开始所说的,Flex应用程序总的来说是以事件驱动的程序。

    在程序进入第2帧,主程序application开始运行后,便会相应的触发相应的一系列事件,按事件发生的先后顺序依次来介绍:

preinitialize

应用程序application已实例化,但此时还未创建任何相关的孩子组件(child component)

initialize

此时,创建了相应的孩子组件,但还未对这些子组件进行布局

creationComplete

应用程序application完成全部实例化,并完成所有子组件的布局

apllicationComplete

上面三处事件的完成,表明application内部启动的整个进程完成,接下来便会通知SystemManager派发applicationComplete事件。此时,启动程序启动完成并准备运行。


    Flash包含的是一个时间线上的多个帧, 而Flex的SWF只包含2个帧. SystemManager, Preloader, DownloadProgressBar和少量工具类都在第一帧, 剩下的包括应用代码/ 内嵌资源全都在第二帧中. 当Flash Player下载下载SWF时, 只要接收到第一帧内足够的数据, 就会实例化SystemManager, 由它来创建Preloader, 然后创建DownloadProgressBar, 这两个对象会察看剩余字节的传输过程. 当第一帧的所有字节传输完毕后, SystemManager发送enterFrame到第二帧, 然后是其他事件. 最后Application对象派发applicationComplete事件.
    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函数中, 主要是从性能方面考虑.
    Flex 是一个事件驱动的编程模型, 任何事情的发生, 其背后必然存在一个事件. 而开发者第一次看到MXML时, 很难体会到一个Xml标记的应用的事件流和实例化的生命周期. 这个对于HTML和Flash的开发者尤其会感到困惑, 因为其熟悉的方式与Flex的一点也不相似. HTML的实例化是从上到下的, Flash的执行是从Frame0开始一帧帧运行的. 而Flex则又有不同.

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

 
 1. <?xml version="1.0" encoding="utf-8"?> 
   2. <mx:Application  
   3.     xmlns:mx="http://www.adobe.com/2006/mxml"  
   4.     layout="absolute" 
   5.     backgroundGradientColors="[#67cbff, #fcffff]"  
   6.     color="#000000"  
   7.     fontSize="12"     
   8.     preinitialize="report( event , 'preinitialize' )" 
   9.     initialize="report( event , 'initialize' )" 
  10.     creationComplete="report( event , 'creationComplete' )" 
  11.     applicationComplete="report( event , 'applicationComplete' )" 
  12.     > 
  13.      
  14.     <mx:Script> 
  15.         <![CDATA[     
  16.                      
  17.             [Bindable] 
  18.              
  19.             public var outTextData:String=""; 
  20.              
  21.             public function report( event:Event , value:String ):void 
  22.             { 
  23.                 outTextData += String( flash.utils.getTimer() ) + 'ms >> '  
  24.                 + event.currentTarget + '.' + value + '\n';     
  25.             } 
  26.              
  27.         ]]> 
  28.     </mx:Script> 
  29.      
  30.     <mx:TextArea 
  31.         id="outTextArea" 
  32.         text="{ outTextData }" 
  33.         right="10" left="10" top="50" bottom="10" alpha="0.5" 
  34.         wordWrap="false" 
  35.         initialize="report( event , 'initialize' )" 
  36.         creationComplete="report( event , 'creationComplete' )"  
  37.         /> 
  38.      
  39.     <mx:Button  
  40.         y="10" height="30" left="168" width="150" 
  41.         id="HelloButton" 
  42.         label="Say Hello" 
  43.         initialize="report( event , 'initialize' )" 
  44.         creationComplete="report( event , 'creationComplete' )"  
  45.         rollOver="report( event , 'rollOver' )"  
  46.         rollOut="report( event , 'rollOut' )"  
  47.         click="report( event , 'click > Hello!' )"  
  48.         /> 
  49.          
  50.     <mx:Button 
  51.         id="GoodByeButton"  
  52.         label="Say Goodbye"  
  53.         y="10" left="10" height="30" width="150" color="#000000" 
  54.         initialize="report( event , 'initialize' )" 
  55.         creationComplete="report( event , 'creationComplete' )"  
  56.         click="report( event , 'click > Goodbye!' )"  
  57.         /> 
  58.          
  59.     <mx:Button 
  60.         id="ClearButton"  
  61.         label="Clear"  
  62.         y="10" left="326" height="30" color="#000000" right="10"         
  63.         initialize="report( event , 'initialize' )" 
  64.         creationComplete="report( event , 'creationComplete' )"  
  65.         click="outTextData='';report( event , 'click' )"  
  66.          /> 
  67.      
  68. </mx:Application> 


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

   1. 167ms >> EventFlow0.preinitialize
   2. 183ms >> EventFlow0.outTextArea.initialize
   3. 187ms >> EventFlow0.HelloButton.initialize
   4. 188ms >> EventFlow0.GoodByeButton.initialize
   5. 189ms >> EventFlow0.ClearButton.initialize
   6. 189ms >> EventFlow0.initialize
   7. 243ms >> EventFlow0.outTextArea.creationComplete
   8. 243ms >> EventFlow0.HelloButton.creationComplete
   9. 243ms >> EventFlow0.GoodByeButton.creationComplete
  10. 244ms >> EventFlow0.ClearButton.creationComplete
  11. 244ms >> EventFlow0.creationComplete
  12. 246ms >> EventFlow0.applicationComplete
  13. 一旦applicationComplete事件触发后, 组件就会在鼠标事件派发后触发自己的事件.
  14. 1807ms >> EventFlow0.HelloButton.rollOver
  15. 2596ms >> EventFlow0.HelloButton.rollOut
分享到:
评论

相关推荐

    Flex启动与初始化

    下图为 swf 初始化的顺序: 1. SystemManager 2. 加载器 3. Application 二、SystemManager 的作用 SystemManager 是 Flex 发布 swf 的文档类,是应用程序的入口。它不仅控制 swf 的加载和启动,还划分 Flex 工程...

    关于Flex 初始化的research

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

    flex事件运行流程

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

    FLEX 系统管理器 SystemManager

    首先是Application对象的实例化,接着初始化Application的SystemManager。在初始化过程中,预初始化事件被派发,然后调用createChild()方法创建所有应用组件。初始化事件被派发,表明所有组件准备就绪。...

    flex 模块化modules源码例子

    4. **模块生命周期**:Flex模块有其特定的生命周期,包括加载、初始化、显示和卸载阶段。开发者需要理解这些阶段,以便正确处理模块的加载事件和状态变化。 5. **模块间的通信**:Flex模块可以通过事件、回调函数、...

    Flex3组件和框架的生命周期

    **Flex应用程序的初始化阶段** 初始化阶段主要负责配置应用程序的基础环境,包括加载外部资源、初始化外部接口等。这个阶段还会调用`createChildren()`方法,用于创建子组件实例。 **Flex应用程序的预加载阶段** ...

    LXF.zip_flex

    4. 初始化地图:在Flex的初始化事件中,使用API密钥初始化地图组件,并加载地图。 5. 功能扩展:通过API提供的方法,可以添加标记、绘制路径、设置信息窗口等,增强地图的功能性和互动性。 四、实例演示 以下是一个...

    LoadXML.rar_flex

    "LoadXML.rar_flex"这个压缩包文件很可能包含了一个Flex项目,该项目着重于如何加载XML文件并从中提取数据,以便进行程序初始化。以下是关于Flex加载XML及初始化程序的相关知识点。 1. **Flex与XML的结合**: Flex...

    Flex解决乱码问题

    这段代码中的`initialize`属性指定了初始化事件处理器,在该处理器中设置`useCodePage`为`true`,使得Flex应用能够正确地处理Unicode编码。 #### 2. 服务器端编码设置 除了客户端的配置之外,还需要确保服务器端的...

    理解Flex3的组件和框架的生命周期

    ##### 4.2 Flex 应用程序的初始化阶段 初始化阶段是应用程序启动后的第一个关键步骤。在这个阶段,Flex 框架会对应用程序进行初步的配置,并准备执行其他后续操作。 **示例代码**: ```as public function ...

    使用FLEX 和 Actionscript开发FLASH 游戏(一)

    - `creationComplete`事件在应用程序初始化完成后触发,适合在此时执行一些初始化操作。 - `enterFrame`事件则会在每一帧渲染前触发,这对于游戏循环非常关键,你可以在该事件处理函数中更新游戏状态和绘制下一帧...

    flex拍照案例,java后台保存照片

    - 通过 `&lt;mx:Application&gt;` 标签创建 Flex 应用程序。 - 使用 `&lt;mx:Style&gt;` 定义样式,如字体大小等。 - `&lt;mx:Script&gt;` 包含脚本逻辑,负责处理相机操作和图像处理。 - **初始化应用程序**: - `initApp()` ...

    Flex 时间问题

    `creationCompleteHandler`函数在应用创建完成后被调用,这里初始化了一个每秒触发一次的`Timer`。 `startTimer`和`stopTimer`函数分别用于启动和停止计时器。`timeTransform`函数接收起始时间和当前计数,计算并...

    Flex-jsp两个必要jar包

    这个jar包的核心功能是初始化Flex的SWF加载器,它负责在浏览器中加载Flex应用程序的SWF文件,并且处理与服务器的AMF(Action Message Format)通信,这是一种高效的数据交换协议,用于在Flex客户端和Java服务器之间...

    MapABC Flex API 示例 代码 用户手册 开发包

    - **地图初始化**:如何加载地图,设置初始位置和级别。 - **图层操作**:如何添加、删除和切换地图图层,如卫星图、地形图等。 - **标记与图例**:如何在地图上添加自定义图标作为标记,以及创建图例来解释地图...

    将 Flex 集成到 Java EE 应用程序的最佳实践(完整源代码)

    HttpFlexSession 是 BlazeDS 提供的一个 Listener,负责监听 Flex 远程调用请求,并进行一些初始化设置: 清单 4. 定义 Flex Listener &lt;listener&gt; &lt;listener-class&gt;flex.messaging.HttpFlexSession...

    NetBackup 8.3.0.1 Application Guide for Flex Appliance 2.0.1.pdf

    - 安装NetBackup管理控制台和客户端软件包是初始化过程的关键步骤,确保用户可以管理和监控备份环境。 4. **创建NetBackup应用实例** - 实例创建是NetBackup配置的核心部分,包括主服务器实例、媒体服务器实例和...

    +Flex+集成到+Java+EE+应用程序的最佳实践(完整源代码)

    HttpFlexSession 是 BlazeDS 提供的一个 Listener,负责监听 Flex 远程调用请求,并进行一些初始化设置: 清单 4. 定义 Flex Listener &lt;listener&gt; &lt;listener-class&gt;flex.messaging.HttpFlexSession...

Global site tag (gtag.js) - Google Analytics