Flex 组件实例化生命周期

当我们创建一个按钮、Group的时候，总想知道Flex在背后为我们做了哪些事情，尤其开发自定义组件的时候，对组件的实例化生命周期更是需要了解。Adobe 官方材料using_flex_4.pdf便详细介绍了组件实例化生命周期。

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 Group container:

// Create a Group container.

var groupContainer:Group = new Group();

// Configure the Group container.

groupContainer.x = 10; groupContainer.y = 10;

// Create a Button control.

var b:Button = new Button()

// Configure the button control.

b.label = "Submit"; ...

// Add the Button control to the Box container.

groupContainer.addElement(b);

The following steps show what occurs when you execute the code to create the Button control, and add the control to the 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(), invalidateSkinState(), or invalidateDisplayList() methods.

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

// Add the Button control to the Box container.

gropContainer.addElement(b);

Flex then performs the following actions:

4、Sets the parent property for the component to reference its parent container.

5、Computes the style settings for the component.

6、Dispatches the preinitialize event on the component.

7、Calls the component’s createChildren() method. For skinnable components, this causes a call to attachSkin(), which calls partAdded(), for all static parts defined in the skin file.

8、Calls the invalidateProperties(), invalidateSize(), invalidateSkinSate(), and invalidateDisplayList() methods to trigger calls to the commitProperties(), measure(), getCurrentSkinState(), 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.

9、Dispatches the initialize event on the component. At this time, all of the component’s children are initialized, but the component has not been sized or processed for layout. You can use this event to perform additional processing of the component before it is laid out.

Because the initialize event is dispatched early in the component's startup sequence, make sure that none of your processing causes the component to invalidate itself. You typically perform any final processing during the creationComplete event.

10、Dispatches the childAdd event on the parent container.

11、Dispatches the initialize event on the parent container.

12、During the next render event, Flex performs the following actions:

a Calls the component’s commitProperties() method. For skinnable components, the commitProperties() method calls the getCurrentSkinState() methods.

b Calls the component’s measure() method.

c Calls the component’s updateDisplayList() method.

13、Flex dispatches additional render events if the commitProperties(), measure(), or updateDisplayList() methods call the invalidateProperties(), invalidateSize(), invalidateSkinSate(), or invalidateDisplayList() methods.

14、After the last render event occurs, Flex performs the following actions:

a Makes the component visible by setting the visible property to true.

b 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.

c 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 addElement() 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:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">

<s:Group> <s:Button label="Submit"/> </s:Group>

</s: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 removeElement() method.