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.
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.
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:
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
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.
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″/>
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.
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.