Flex之旅：第二部分：容器与布局(1)---容器的初始化顺序

容器的初始化顺序

如下代码：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         minWidth="955" minHeight="600">
  <fx:Script>
    <![CDATA[
      import mx.events.FlexEvent;
      
      protected function hgroup1_preinitializeHandler(event:FlexEvent):void
      {
        trace("hgroup1_preinitializeHandler");  
      }
      
      protected function vgroup1_preinitializeHandler(event:FlexEvent):void
      {
        trace("vgroup1_preinitializeHandler");
      }
      
      protected function panel1_preinitializeHandler(event:FlexEvent):void
      {
        trace("panel1_preinitializeHandler");
      }
      
      protected function hgroup1_initializeHandler(event:FlexEvent):void
      {
        trace("hgroup1_initializeHandler");
      }
      
      protected function vgroup1_initializeHandler(event:FlexEvent):void
      {
        trace("vgroup1_initializeHandler");
        
      }
      
      protected function panel1_initializeHandler(event:FlexEvent):void
      {
        trace("panel1_initializeHandler");
      }
      
      protected function hgroup1_creationCompleteHandler(event:FlexEvent):void
      {
        trace("hgroup1_creationCompleteHandler");
      }
      
      protected function vgroup1_creationCompleteHandler(event:FlexEvent):void
      {
        trace("vgroup1_creationCompleteHandler");
      }
      
      protected function panel1_creationCompleteHandler(event:FlexEvent):void
      {
        trace("panel1_creationCompleteHandler");
      }
      
    ]]>
  </fx:Script>

  
  
  <s:HGroup creationComplete="hgroup1_creationCompleteHandler(event)"
        initialize="hgroup1_initializeHandler(event)"
        preinitialize="hgroup1_preinitializeHandler(event)">
    <s:VGroup creationComplete="vgroup1_creationCompleteHandler(event)"
          initialize="vgroup1_initializeHandler(event)"
          preinitialize="vgroup1_preinitializeHandler(event)">
      <s:Panel creationComplete="panel1_creationCompleteHandler(event)"
           initialize="panel1_initializeHandler(event)"
           preinitialize="panel1_preinitializeHandler(event)">
      </s:Panel>
    </s:VGroup>
  </s:HGroup>
</s:Application>

console:

hgroup1_preinitializeHandler
vgroup1_preinitializeHandler
panel1_preinitializeHandler
panel1_initializeHandler
vgroup1_initializeHandler
hgroup1_initializeHandler
panel1_creationCompleteHandler
vgroup1_creationCompleteHandler
hgroup1_creationCompleteHandler

几点说明：

如上代码里：HGroup 包裹 VGroup 包裹 Panel

初始化顺序是：先preinitialize，再initialize，最后creationComplete

preinitialize顺序(从外到内)： HGroup->VGroup ->Panel

initialize顺序(从内到外)：Panel->VGroup ->HGroup

creationComplete顺序（从内到外）：Panel->VGroup ->HGroup

当组件广播preinitialize 和initialize 事件时，它的子组件还没有创建完成。因此，要访问某个组件的所有子组件，必须侦听creationComplete 时间。在广播initialize 事件后，组件本身已经完成测量、绘制和布局，但是其子组件可能仍未完全完成实例化过程。最后，creationComplete 事件表明所有容器内的子组件都完全实例化结束。