Adobe Flex 3 UI Components Lifecycle

In adobe flex 3 there are certain events that are called when a component is created. These events are raised in the following order: 1) preInitialize: This event is raised when the component has just been created but none of the child components exist. 2) initialize: This event is raised after the component and all its children have been created but before any dimensions have been calculated. 3) creationComplete: This even is dispatched after all the component and its children have been created and after all the layout calculations have been performed. 4) applicationComplete: Dispatched after all the components of an application have been successfully created Events 1) to 3) are dispatched in the order mentioned above for all visible components. Note however that for components that are not visible on the screen by default, none of these events will be raised. This is because depending on the creation policy the hidden components might not exist yet. For example in a TabNavigator only the components that are inside the default tab are created because they are visible. If you do change to another non-visible tab then Flex creates the components one by one. In that case the events mentioned above are raised. We have created a simple example to demonstrate this. The DataGrid shows you a list of the events that have been raised during the lifecycle of the main application window. If you change to the second tab you will see additional entries in the list due to the creation of a Label UI component.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" preinitialize="preInitialise()" initialize="initialise()" applicationComplete="applicationComplete()" creationComplete="creationComplete()" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var eventsCalled:ArrayCollection=new ArrayCollection(); public function preInitialise():void { eventsCalled.addItem({label:"preInitialise called",event:"preInitialise"}); } public function initialise():void { eventsCalled.addItem({label:"initialise called",event:"initialise"}); } public function creationComplete():void { eventsCalled.addItem({label:"creation complete called",event:"creationComplete"}); }

public function applicationComplete():void { eventsCalled.addItem("applicationComplete called"); } ]]> </mx:Script> <mx:TabNavigator width="400" height="400"> <mx:Canvas label="tab1"> <mx:DataGrid id="datagrid" dataProvider="{eventsCalled}" top="10" left="10" width="300" /> </mx:Canvas> <mx:Canvas label="tab2"> <mx:Label text="This label is created only when it is displayed" creationComplete="creationComplete();" preinitialize="preInitialise();" initialize="initialise();" /> </mx:Canvas> </mx:TabNavigator> </mx:Application>

To see this example in action click: here You can change this behavior by setting the creationPolicy attribute, for example in the application mxml node. This attribute is only valid for containers. There are 4 possible values for this attribute: 1) creationPolicy=auto the container delays creating some or all of its descendants until they are needed. This is known as deferred instantiation 2) creationPolicy=all the container immediately creates all its descendants even if they are not selected. 3) creationPolicy=queued all components inside a container are added to a creation queue. The application waits until all children of a container are created before moving to the next container. 4. creationPolicy=none all components inside a container are never created. Whoever decides to go with this strategy needs to manually create all items inside a container. For example to change the behavior seen above we could set the creationPolicy=all:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationPolicy="all" preinitialize="preInitialise()" initialize="initialise()" applicationComplete="applicationComplete()" creationComplete="creationComplete()" viewSourceURL="srcview/index.html"> ... </mx:Application>

Flex: Event Bubbling Example

A refactor it gave me a chance to update the way I handled events. This page on Adobe's site explains the event bubbling model. To give a brief overview there are three phases: Capture, Targeting and Bubbling. The Capture phase will pass through each branch of a DisplayObject tree until it reaches the last node. The Targeting phase will look for objects that have event listeners bound to them. The Bubbling phase ascends the DisplayObject tree from the last node to the first node and activates the event listeners. Only DisplayObjects have a Capture and Bubbling phase. Here is some example code I made in MXML that shows how event bubbling works. There are four files. The Application file includes Layer1. Layer1 includes Layer2. Layer2 includes Layer3. When Layer3 is created it will throw an event. The first property of the event is the string that will trigger event listeners, the second allows the event to bubble through the DisplayObject tree. The third allows the event to be canceled at any of the DisplayObjects it passes through. The event will bubble through each DisplayObject and back to the Application without manually passing it forward. UPDATE If you're looking for an example of event bubbling in ActionScript please view this article. index.mxml view source print?
01 <?xml version="1.0" encoding="utf-8"?> 02 03 04 05 06 07 08 09 10 11 private function init() : void { trace("in the base"); private var _level1:Level1; <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()" styleName="plain"> <mx:Script> <![CDATA[ import obj.Level3; import obj.Level1;

12 13 14 15 16 17 18 19 20 21 22 23 24 ]]> </mx:Script> } }

_level1 = new Level1;

//add eventListener _level1.addEventListener(Level3.EVENT,onEvent);

addChild(_level1);

private function onEvent(event:Event) : void { trace("picked up event from Level3 ");

25 </mx:Application>

Layer1.mxml view source print?

01 <?xml version="1.0" encoding="utf-8"?> 02 03 04 05 06 07 { trace("in level 1"); <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" initialize="init()"> <mx:Script> <![CDATA[ private var _level2:Level2; private function init() : void

08 09 10 11 12 ]]> </mx:Script> }

_level2 = new Level2; addChild(_level2);

13 </mx:Canvas>

Layer2.mxml view source print?

01 <?xml version="1.0" encoding="utf-8"?> 02 03 04 05 06 07 08 09 10 11 12 ]]> </mx:Script> } { trace("in level 2"); _level3 = new Level3; addChild(_level3); <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" initialize="init()"> <mx:Script> <![CDATA[ private var _level3:Level3; private function init() : void

13 </mx:Canvas>

Layer3.mxml view source print?

01 <?xml version="1.0" encoding="utf-8"?> 02 03 04 05 06 07 08 09 10 11 12 ]]> </mx:Script> } <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" initialize="init()"> <mx:Script> <![CDATA[ public static const EVENT:String = "level3"; private function init(): void { trace("in level 3"); var event:Event = new Event(EVENT,true,true); dispatchEvent(event);

13 </mx:Canvas>

You can download the Flex Project Archive example here. This can be directly imported into Flex. Run it in debug mode to see how each level is triggered.