`

[转]FLEX的初始化顺序

    博客分类:
  • Flex
阅读更多

From:http://blog.csdn.net/dante_k7/archive/2009/06/18/4275381.aspx
FLEX组件在建立的时候都会经历四个事件:preinitialize , initialize , creationComplete 和 updateComplete(updateComplete事件在任何改动视觉的情况下都会发生,不是初始化时独有的)。

下面的例子检测在嵌套和平行的情况下,各个组件的事件抛出顺序。
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  3.                                 preinitialize="showEvent(event)"
  4.                                 initialize="showEvent(event)"
  5.                                 creationComplete="showEvent(event)"
  6.                                 updateComplete="showEvent(event)">
  7.         
  8.         <mx:script>
  9.                   <!--[CDATA[
  10.                 import flash.utils.getTimer;
  11.                 private function showEvent(event:Event):void {
  12.                        trace(flash.utils.getTimer().toString()+" >> "+event.currentTarget.name+" "+event.type);
  13.                 }
  14.                  ]]-->
  15.         </mx:script>
  16.         
  17.         <mx:Canvas id="canv1"
  18.                            preinitialize="showEvent(event)"
  19.                            initialize="showEvent(event)"
  20.                            creationComplete="showEvent(event)"
  21.                            updateComplete="showEvent(event)">
  22.                 
  23.                 <mx:Button id="btn1"
  24.                                    preinitialize="showEvent(event)"
  25.                                    initialize="showEvent(event)"
  26.                                    creationComplete="showEvent(event)"
  27.                                    updateComplete="showEvent(event)"/>
  28.         </mx:Canvas>
  29.         
  30.         <mx:Button id="btn2"
  31.                            preinitialize="showEvent(event)"
  32.                            initialize="showEvent(event)"
  33.                            creationComplete="showEvent(event)"
  34.                            updateComplete="showEvent(event)"/>
  35.         
  36. </mx:Application>
复制代码
上面的例子输出顺序是:

1299 >> eventTest0 preinitialize

1307 >> canv1 preinitialize

1310 >> btn1 preinitialize

1318 >> btn1 initialize

1319 >> canv1 initialize

1320 >> btn2 preinitialize

1321 >> btn2 initialize

1321 >> eventTest0 initialize

[SWF] G:\projects\eventTest\bin-debug\eventTest.swf - 588,818 bytes after decompression

1387 >> btn1 creationComplete

1387 >> btn1 updateComplete

1387 >> canv1 creationComplete

1387 >> canv1 updateComplete

1388 >> btn2 creationComplete

1388 >> btn2 updateComplete

1388 >> eventTest0 creationComplete

1390 >> eventTest0 updateComplete

看着有点混乱,不过仔细看看,可以把过程分成两个部分。

很明显,所有的creationComplete和updateComplete发生在第二次update的时候,之前flex组件只是做一些设置和计算的工作,并没有在画布上画任何东西。除此之外,还有这么一些规律:

 
  * 就单个组件而言,事件的抛出顺序是preinitialize,initialize,creationComplete
    * 嵌套关系的两个组件(比如Canvas和button1),preinitialize先外后内,initialize和creationComplete先内后外。只是creationComplete要在下一次update才会发生。
    * 平行关系的两个组件(比如Canvas和button2),按mxml内的顺序,只有前面组件initialize结束后,后面的组件才会抛出preinitialize。

分享到:
评论

相关推荐

    Flex Application 初始化顺序

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

    关于Flex 初始化的research

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

    Flex启动与初始化

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

    Flex中方法调用顺序的思考

    此阶段通常用于设置不可改变的属性,因为一旦组件初始化完成,再尝试修改这些属性可能会导致错误。 3. **commitProperties**:在此阶段,Flex会检查组件的属性是否有变化,并更新组件的状态。如果在上一周期中有...

    flex事件运行流程

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

    Flex模块化开发实例

    - **初始化**:模块加载完成后,会调用`initialize`事件。 - **创建**:当模块的根组件被创建时,触发`creationComplete`事件。 - **卸载**:通过调用`unloadAndStop`方法可以卸载模块,释放其占用的资源。 6. *...

    flex窗口最大最小化

    Flex布局允许开发者对容器内的子元素进行灵活的排版,通过调整子元素的大小和顺序,适应不同的屏幕尺寸和设备。关键属性包括`display: flex`用于开启Flex布局,`flex-direction`定义主轴方向,`justify-content`和`...

    Flex布局学习资料

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

    Flex分页技术

    示例代码中的`creationCompleteHandler`函数用于初始化数据加载和事件监听。在Flex中,事件监听器通常用于响应用户交互或数据变化,从而更新界面。 7. **数据绑定**: `[Bindable]`元标签用于标记变量,使其在...

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

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

    flex自定义创建css样式

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

    flex 百叶窗效果

    1. **初始化容器**:首先,为包含所有百叶窗元素的容器设置`display: flex`,并根据需要设置`flex-wrap`属性来决定元素是否换行。例如: ```css .container { display: flex; flex-wrap: wrap; } ``` 2. **...

    flex css动态加载

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

    Flex4 AIP 中文说明

    8. **模块化开发**:Flex4支持模块化开发,开发者可以将应用拆分为多个模块,按需加载,降低初始加载时间,提升用户体验。 9. **移动设备支持**:虽然Flex4主要是为桌面浏览器设计的,但通过Adobe AIR,开发者可以...

    flex 播放器 源码

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

    flash_flex.rar_flex

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

    flex_array.rar_flex

    1. **初始化函数**:通常会有一个初始化函数用于创建一个新的Flex Array,它会根据初始大小分配第一个块,并设置相关的管理信息。 2. **增长策略**:为了支持动态增长,文件中应该包含一个增长数组容量的函数。该...

    flex 工作流设计器

    1. **新建工作流**:打开Flex工作流设计器,选择“新建”创建一个新的工作流项目,设定初始参数。 2. **设计流程图**:从工具箱中选择所需的流程元素(如开始、结束、任务、决策等)拖放到画布上,并通过连接线定义...

    Flex入门学习文档

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

Global site tag (gtag.js) - Google Analytics