Flex组件生命周期

Flex组件在初始化阶段会依次触发下列的几个事件：

 preinitialize  -  当组件在创建的原始阶段触发，它的子元素都还没有创建
 initialize  -  当组件及其子元素都已经创建完毕的时候触发，但此时组件的大小尺寸还没有决定
 creationComplete  -  当组件布局完成并显示之后触发

因此，我们一般在initialize的时候，可以对组件上要显示的字符信息等进行设置；尤其是在该时刻设置和组件尺寸相关的值。而要获取和组件布局相关的信息的操作，则放在creationComplete时。



Flex组件的实例化生命周期

我们来看下面这段MXML代码：

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Box id="box1" width="200">
        <mx:Button id="button1" label="Submit"/>
    </mx:Box>
</mx:Application>

和这段MXML等同的ActionScript代码是：

var box1:Box = new Box();
box1.width=200;

var button1:Button = new Button()
button1.label = "Submit";

box1.addChild(button1);

其实，当你用MXML创建组件时，Flex SDK会生成相应的AS代码，以上代码在看似简单，但在执行过程中会发生很或的事情，我们来看下创建Button组件时执行的流程：
1）调用构造方法来创建实例
var button1:Button = new Button()；

2）对创建的Button实例设置属性
button1.label = "Submit";

3）调用Button实例的addChild()方法把按钮添加到父容器中
box1.addChild(button1);

在调用这行代码的时候，将会产生以下动作：
a.设置组件实例的parent属性，使其关联到父容器
b.设置组件实例的样式
c.触发组件实例的add事件
d.触发父容器的childAdd事件
e.触发组件实例的preinitialize事件，触发时，组件实例处于非常原始的状态
f.创建组件实例的子元素
g.组件触发initialize事件,此时，组件和其子元素都已经创建完毕，但和布局相关的属性都还没有处理

4）显示应用，render事件被触发，并且会做以下处理：
a.所有涉及显示和布局相关的东西被处理完成
b.设置组件的visible属性为true
c.组件的creationComplete事件被触发
d.组件的updateComplete事件被触发

 

-----------------------官方文档-------------------------------------

原文来自Adobe live doc

The component instantiation life cycle describes the sequence of steps that occur when you create a component object from a component class. As part of that life cycle, Flex automatically calls component methods, dispatches events, and makes the component visible.

The following example creates a Button control in ActionScript and adds it to a container:

// Create a Box container.
var boxContainer:Box = new Box();
// Configure the Box container. 

// Create a Button control. 
var b:Button = new Button()
// Configure the button control.
b.label = "Submit";
...
// Add the Button control to the Box container.
boxContainer.addChild(b);

The following steps show what occurs when you execute the code to create the Button control, and add the control to the Box container:

1. You call the component's constructor, as the following code shows:

   // Create a Button control. 
   var b:Button = new Button()
   

2. You configure the component by setting its properties, as the following code shows:

   // Configure the button control.
   b.label = "Submit";
   

   Component setter methods might call the invalidateProperties(), invalidateSize(), or invalidateDisplayList() methods.

3. You call the addChild() method to add the component to its parent, as the following code shows:

   // Add the Button control to the Box container.
   boxContainer.addChild(b);
   

   Flex performs the following actions:

   1. Sets the parent property for the component to reference its parent container.
   2. Computes the style settings for the component.
   3. Dispatches the preinitialize event on the component.
   4. Calls the component's createChildren() method.
   5. Calls the invalidateProperties(), invalidateSize(), and invalidateDisplayList() methods to trigger later calls to the commitProperties(), measure(), or updateDisplayList() methods during the next render event.

      The only exception to this rule is that Flex does not call the measure() method when the user sets the height and width of the component.

   6. Dispatches the initialize event on the component. At this time, all of the component's children are initialized, but the component was not sized or processed for layout. You can use this event to perform additional processing of the component before it is laid out.
   7. Dispatches the childAdd event on the parent container.
   8. Dispatches the initialize event on the parent container.
4. During the next render event, Flex performs the following actions:
   1. Calls the component's commitProperties() method.
   2. Calls the component's measure() method.
   3. Calls the component's layoutChrome() method.
   4. Calls the component's updateDisplayList() method.
   5. Dispatches the updateComplete event on the component.
5. Flex dispatches additional render events if the commitProperties(), measure(), or updateDisplayList() methods call the invalidateProperties(), invalidateSize(), or invalidateDisplayList() methods.
6. After the last render event occurs, Flex performs the following actions:
   1. Makes the component visible by setting the visible property to true.
   2. Dispatches the creationComplete event on the component. The component is sized and processed for layout. This event is only dispatched once when the component is created.
   3. Dispatches the updateComplete event on the component. Flex dispatches additional updateComplete events whenever the layout, position, size, or other visual characteristic of the component changes and the component is updated for display.

Most of the work for configuring a component occurs when you add the component to a container by using the addChild() method. That is because until you add the component to a container, Flex cannot determine its size, set inheriting style properties, or draw it on the screen.

You can also define your application in MXML, as the following example shows:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Box>
        <mx:Button label="Submit"/>
    </mx:Box>
</mx:Application>

The sequence of steps that Flex executes when creating a component in MXML are equivalent to the steps described for ActionScript.

You can remove a component from a container by using the removeChild() method. If there are no references to the component, it is eventually deleted from memory by the garbage collection mechanism of Macromedia Flash Player 9 from Adobe.

------------------------------------翻译-------------------------------------

关于组件实例化生命周期
描述执行的序列步骤，当你从一个组件类创建一个组件时。作为生命周期的一部分，Flex自动调用组件方法，分发事件，使组件可视。
下例是在AS中创建一个按钮并增加到一个容器中：
1.调用组件的构造函数，新建一个组件：
// Create a Button control.
var b:Button = new Button()

2.通过设置它的属性，配置组件，如：
// Configure the button control.
b.label = "Submit";

3.你调用addChild()方法来增加组件到它的父对象：
// Add the Button control to the Box container.
boxContainer.addChild(b);

Flex执行如下的动作：
a.为组件设置parent属性引用它的父容器
b.计算组件的style设置
c.在组件上分发preinitialize事件
d.调用组件的createChildren()方法
e.调用invalidateProperties(),invalidateSize(),和invalidateDisplayList()方法，以触发延迟的调用commitProperties(),measure(),或updateDisplayList()方法在下一个render事件期。
 这条规则仅有的例外是Flex不调用measure()方法当用户设置组件的height和width时。
f.在组件上分发initialize事件。在这时，组件的所有子对象被初始化，但这个组件组件还未为布局而被尺寸化或处理，你能使用这个事件来执行这个组件附加的处理，在它被布局前。
g.分发childAdd事件在父容器上
h.分发initialize事件在父容器上

4.在下一个render事件期间，Flex执行如下的行为：
a.调用组件的commitProperties()方法
b.调用组件的measure()方法
c.调用组件的layoutChrome()方法
d.调用组件的updateDisplayList()方法
e.在组件上分发updateComplete事件

5.Flex分发附加render事件，如果commitProperties(),measure()，或updateDisplayList()方法调用invalidateProperties(),invalidateSize(),或invalidateDisplayList()方法。

6.在最后的render事件执行后，Flex执行如下动作：
通过设置visible属性为ture让组件可视
分发creationComplete事件在组件上。组件为布局被sized和processed。这个事件仅被分发一次当组件被创建时。
分发updateComplete事件在组件上。Flex分发附加的updateComplete事件不管何时布局，位置，尺寸，或组件别的可视特性改变，并且组件被更新显示。

为配置一个组件的多数的工作执行，当你使用addChild()方法，增加一个组件到一个容器。这是因为，直到你增加组件到一个容器,Flex不能决定它的尺寸，设置继承的style属性，或画它在屏幕上。
在MXML里增加一个组件的步骤等效于AS中执行的步骤：
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Box>
        <mx:Button label="Submit"/>
    </mx:Box>
</mx:Application>
从一个容器中删除一个组件，通过使用removeChild()方法，如果没有引用到这个组件，它最终会被内存中删除，由Flash Player9的垃圾回收机制。