Executing order of Flex component life cycle functions

Flex Component life cycle  is pretty well known by every one who have knowledge of Flex . But  let me explain here if any one not aware of it .

Flex component Life cycle contains some event which is dispatched by flash player while creating component .These events are

1) FlexEvent.PREINITIALIZE
2) FlexEvent.INITIALIZE
3) FlexEvent.CREATION_COMPLETE
4) FlexEvent.UPDATE_COMPLETE

Flash player dispatches  above events while creating any component and with respect to these events some methods get called. These method are

1) constructor of component
2) createChildren()
3) commitProperties()
4) measure()
5) updateDisplayList()

Now there are two question .

1) what is the Executing order of  these methods ?
2) which method get execute after which event ?

To find out answer of these two questions I wrote one sample custom component , which I am going to post here .

This component extend  UIComponent class and override all required method . I put trace statement in every method so we can easily recognize order of method and event .
copy and paste this component in your project then add in main file and run in debug mode .
package
{
 import flash.events.Event;
 import mx.controls.Button;
 import mx.core.UIComponent;
 import mx.events.FlexEvent;

 public class CustomComp  extends UIComponent
 {
  public function CustomComp ()
  {
   trace("CustomComp  constructor called");
   this.addEventListener(FlexEvent.INITIALIZE , initializeEventHandler);
   this.addEventListener(FlexEvent.PREINITIALIZE , preInitializeEventHandler);
   this.addEventListener(FlexEvent.CREATION_COMPLETE,creationcompleteEventHandler);
   this.addEventListener(FlexEvent.UPDATE_COMPLETE , updateCompleteEventHandler);
   super();
  }

  private function initializeEventHandler(event:FlexEvent):void{
   trace("initializeEventHandler called");
  }

  private function preInitializeEventHandler(event:FlexEvent):void{
   trace("preInitializeEventHandler called");
  }

  private function creationcompleteEventHandler(event:FlexEvent):void{
   trace("creationcompleteEventHandler called");
  }

  private function updateCompleteEventHandler(event:FlexEvent):void{
   trace("updateCompleteEventHandler called");
  }
 
  override protected function createChildren():void{
   trace("createChildren called");
   super.createChildren();

     }

     override protected function commitProperties():void{
      trace("commitProperties called");
      super.commitProperties();
     }
   
     override protected function measure():void{
      trace("measure called");
      super.measure();
    
     }
     override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
      trace("updateDisplayList called");
      super.updateDisplayList(unscaledWidth ,unscaledHeight);
     }

 }
}
After running in debug mode you can see trace statement in following order .

CustomComp constructor called
preInitializeEventHandler called
createChildren called
initializeEventHandler called
commitProperties called
measure called
updateDisplayList called
creationcompleteEventHandler called
updateCompleteEventHandler called

Now you can easily find out answer of above questions.

1 comments:

  Anonymous

February 5, 2010 at 11:09 AM

Thanks Neeraj..this is help ful for me