Adobe Flex Component Instantiation Life Cycle

About the component instantiation life cycle

For Presentation click here

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:

2. // Create a Button control.

3. var b:Button = new Button()

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

5. // Configure the button control.

6. b.label = “Submit”;

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

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

8. // Add the Button control to the Box container.

9. boxContainer.addChild(b);

Flex performs the following actions:

a. Sets the parent property for the component to reference its parent container.

b. Computes the style settings for the component.

c. Dispatches the preinitialize event on the component.

d. Calls the component’s createChildren() method.

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

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

g. Dispatches the childAdd event on the parent container.

h. Dispatches the initialize event on the parent container.

10. During the next render event, Flex performs the following actions:

a. Calls the component’s commitProperties() method.

b. Calls the component’s measure() method.

c. Calls the component’s layoutChrome() method.

d. Calls the component’s updateDisplayList() method.

e. Dispatches the updateComplete event on the component.

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

12. 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 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”&gt;

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

On request of Jimmi

commitProperties()
Flex schedules a call to the commitProperties() method when a call to the invalidateProperties() method occurs

The main advantages of using the commitProperties() method are the following:

  • To coordinate the modifications of multiple properties so that the modifications occur synchronously.For example, you might define multiple properties that control the text displayed by the component, such as the alignment of the text within the component. A change to either the text or the alignment property requires Flex to update the appearance of the component. However, if you modify both the text and the alignment, you want Flex to perform any calculations for sizing or positioning the component once, when the screen updates.Therefore, you use the commitProperties() method to calculate any values based on the relationship of multiple component properties. By coordinating the property changes in the commitProperties() method, you can reduce unnecessary processing overhead.
  • To coordinate multiple modifications to the same property.You do not necessarily want to perform a complex calculation every time a user updates a component property. For example, users modify the icon property of the Button control to change the image displayed in the button. Calculating the label position based on the presence or size of an icon can be a computationally expensive operation that you want to perform only when necessary.To avoid this behavior, you use the commitProperties() method to perform the calculations. Flex calls the commitProperties() method when it updates the display. That means you perform the calculations once when Flex updates the screen, regardless of the number of times the property changed between screen updates.

measure()
Flex schedules a call to the measure() method when a call to the invalidateSize() method occurs.
When you use the addChild() method to add a component to a container, Flex automatically calls the invalidateSize() method.

if we explicity set the width and height then flex doesnot call measure of the specific component.
like <mx:Button height=”10″ width=”10″/>

layoutChrome()
Flex schedules a call to the layoutChrome() method when a call to the invalidateDisplayList() method occurs

You typically use the

layoutChrome()method to define and position the border area of the container, and any additional elements that you want to appear in the border area.the Panel container uses the

layoutChrome()method to define the title area of the panel container, including the title text and close button.

updateDisplayLis()
Flex schedules a call to the updateDisplayList() method when a call to the invalidateDisplayList() method occurs.
A component does not appear on the screen until its

updateDisplayList()method gets called
The main uses of the updateDisplayList() method are the following:

  • To set the size and position of the elements of the component for display.Many components are made up of one or more child components, or have properties that control the display of information in the component. For example, the Button control lets you specify an optional icon, and use the labelPlacement property to specify where the button text appears relative to the icon.The Button.updateDisplayList() method uses the settings of the icon and labelPlacement properties to control the display of the button.For containers that have child controls, the updateDisplayList() method controls how those child components are positioned. For example, the updateDisplayList() method on the HBox container positions its children from left to right in a single row; the updateDisplayList() method for a VBox container positions its children from top to bottom in a single column.

    To size components in the updateDisplayList() method, you use the setActualSize() method, not the sizing properties, such as width and height. To position a component, use the move() method, not the x and y properties.

  • To draw any visual elements necessary for the component.Components support many types of visual elements such as skins, styles, and borders. Within the updateDisplayList() method, you can add these visual elements, use the Flash drawing APIs, and perform additional control over the visual display of your component.

14 thoughts on “Adobe Flex Component Instantiation Life Cycle

  1. Brilliant post. Has sorted me out a number of times. Boggles my mind why Adobe doesn’t have such a list in its docs.

    I do have a question though: Step 12a. ( Makes the component visible by setting the visible property to true. ) I am creating a component that has a button which I want to be initially invisible. I set the property in the createChildren() method, but it is still visible. Where should I set the invisibility (for children of my component), so that it is persistent?

    PS., I tried placing button.visible=false; in the component’s creationComplete event handler, and that works, but when I apply an animation to the component the button reappears.

  2. This is one of the most important thing a Flex developer needs to know, and it’s a shame the regular Adobe docs don’t cover it as well as you. Good job!

  3. Quite Nice to see the article like this. I have been searching this type of article in Flex but i haven’t seen. This beautiful article forced me to say that this is one of the best article in Flex in have seen till now…….

    Thanks
    Deepandra

    1. A very nice article. One thing missing here is when *exactly* flex renders the component. When I add some code to the CREATION_COMPLETE event, this code is executed *before* the component becomes visible.
      Is there an absolute way to know that the component was drawn to the screen??

      Thanks,
      Eyal

  4. Very simple and well written article. Thanks. It really sorted out the fundamentals necessary before coding in Flex.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s