Flex Instantiation Lifecycle & Event Flow

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


                    container.addChild(component);

                    To Process the addChild call

1.     set parent reference
2.     compute style
3.     dispatch add from the component to let everyone know that its getting added
4.     dispatch childAdd from the container
5.     dispatch pre-initialize on component - internal children are about to be added through createChildren() call so developer's get a last chance to affect the component - implement the listener and affect the component's internal structure
6.     dispatch initialize on component - children get initialized through createChildren() call but layout n sizing of component is not determined yet - you do not have to override this if you are creating your own custom component
7.     Later render event gets triggered to display the application

   

1.                     determine the sizing n layout
2.                     set visible = true
3.                     creationComplete on component
4.                     updateComplete

When you create the component in MXML as shown above, Flex SDK generates folllowing equivalent code which is similar to following 3 steps in ActionScript:

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

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

 2) You configure the component by setting its properties, as the following code show:

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

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.
box1.addChild(button1);

Flex performs the following actions to process the box1.addChild(button1) call:

4. Flex sets the parent property for the component to reference its parent container.

5. Flex computes the style settings for the component.

6. Flex dispatches the add event from the component, button1 to let the interested folks know that a component button1 got added to parent.

7. Flex dispatches the childAdd event from the parent container box1 to let the interested folks know that a box1 got a child added.

8. Flex dispatches the preinitialize event on the component, button1. 

The component is in a very raw state when this event is dispatched. Many components, such as the Button control, create internal child components to implement th functionality; for example, the Button control creates an internal UITextField component to represent its label text. 

At the time when Flex dispatches the preinitialize event, the children (including the internal children, of a component) have not yet been created. They get created in this call.

9. Flex creates and initializes the component's children, including the component's internal children.

10. Flex dispatches the initialize event on the component. At this time, all of the component's children have been initialized, but the component has not been fully processed. In particular, it has not been sized for layout.

11. Later, to display the application, a render event gets triggered, and Flex does the following:

1. Flex completes all processing required to display the component, including laying out the component.

2. Flex makes the component visible by setting the visible property to true.

3. Flex dispatches the creationComplete event on the component. The component has been sized and processed for layout and all properties are set. This event is dispatched only once when the component is created.

4. Flex dispatches the updateComplete event on the component. Flex dispatches additional updateComplete events whenever the position, size, or other visual characteristic of the component changes and the component has been updated for display.