FLEX的初始化顺序

 

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。

相关文章

一:display:flex布局display:flex是一种布局方式。它即可以...
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些...
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周...
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后...
我在网页上运行了一个Flex应用程序,我想使用Command←组合键...