Understanding the Flex 3 component life cycle

Considering UIComponent class as a base class, we will look into the property for UIComponent class.

• Getting the style setting of the component.
• After setting style the preinitialize event is dispatches on the component. The preinitialize event (mx.events.FlexEvent) is fired when the UIComponent is in a very early stage i.e. the component’s has been instantiated but hasn’t created any child component.
• When a component is told to create its child component, the component’s createChildren() method is called. So now createChildren() method is called. createChildren() is a protected method of UIComponent class which we need to override when we create a subclass of the UIComponent.Also within this addChild() method is called to add child object. We do not call this method directly, Flex call the createChildren() method to call the addChild() method to add the component to its parents.

• Call the invalidateProperties(), invalidateSize() and invalidateDisplayList() method to trigger and later calls to the commitPropertise(), measure() or updateDisplayList() method during next render event.

If invalidateProperties() then commitPropertise() method is called during a next screen update.

If invalidateSize() then measure() method is called during next screen update.

If invalidateDisplayList() then updateDisplayList() method is called during next screen update.

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

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

When the component has finished its construction and has all initialization properties set, dispatches an initialize event.

After the initialization phase all the properties are processed, the component is measured, laid out and drawn. After this the component dispatches a creationComplete event.

• Now the childAdd event is dispatched on the parent container.

The childAdd event is dispatched when addChild() or addchildAt() method is called.

At this when childAdd event is triggered, the child object is initialized and its height and width is not calculated, and has not been drawn on the screen.

• Now the initialize event is dispatched on the parent container.

The initialize event is dispatched when the component has finished all the construction and has set all the initialization properties. After this initialization phase properties are processed, the component is measured, laid out and drawn and after this the creationComplete event is dispatched.

During next execution event, flex perform following action:

• Call the commitProperties() method.

When the component has had its properties set and when its children have been created, the commitProperties() method is called.commitPropertise () method processes the set properties on the component. You do not call this methods, Flex call this method when we use addChild method to add a component to the container or when we call invalidatePropertise() of the component.

commitPropertise() is called before the measure() method.

• Call the measure() method.

When a component is told to measure itself, the measure() method is called.

measure() method calculate the default size of the component. The default operation of measure() sets measuredWidth, measuredHeight, measuredMinWidth and measureMinHeight to 0.

• Call the layoutChrome() method:-

The layoutChrome() method define the border area around the container of the container class.

• Call the updateDisplayList() method:-

When a component is told to position its children,the updateDisplayList() method is called.This method sizes and position the children of the component based on the previous property and style setting and draw the skin and graphic that the component is using.The parent component determine the size of the component itself.

• Dispatches the updateComplete event on the component:-

The updateComplete event is dispatched when the object has commitPropetise(), measure(), and updateDisplayList() method called.

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

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

• Makes the component visible by setting the visible property to true.
• 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.
• 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.

The following code snippets represent the above concept.

package
{
import mx.core.UIComponent;
public class mytest extends UIComponent
{

		public function mytest(){
			trace("CONSTRUCTOR");
			super();
		}
		override protected function updateDisplayList
(unscaledWidth:Number, unscaledHeight:Number):void{
			trace("UPDATELIST");
			super.updateDisplayList(unscaledHeight,unscaledWidth);
		}
		override protected function createChildren():void{
			trace("CREATE CHILDREN");
			super.createChildren();
		}
		override protected function measure():void{
			trace("MEASURE");
			super.measure();
		}
		override protected function commitProperties():void{
			trace("COMMIT PROPRTIES");
			super.commitProperties();
		}
		override protected function initializationComplete():void{
			trace("INITILIZATION");
		}

	}
}

You can run this code and see the execution of various methods present in the code.