Flex Application Creation Life Cycle

There are many times when I don’t remember exactly when application startup events are fired in Flex.
First lets go over what events there are for an application creation life cycle. These include preinitialize, initialize, creationComplete, and applicationComplete. Below is a diagram that explains when each happens and shows the order.

Looking at the code below we see that all that is done in the example is that when each event is fired I call a small function. This function, recordEvent, takes in a FlexEvent and adds some text to our report string. Also you see that not only is a little bit of text added, the time from flash.utils.getTimer() is printed. This getTimer() function returns the amount of milliseconds that have gone by since the start of the application. So what we get printed out is event.type and the time at which the event occurred.

appCreation.mxml

<?xml version=”1.0″ encoding=”utf-8″?> <mx:Application xmlns:mx=” http://www.adobe.com/2006/mxml“ layout=”absolute” width=”349″ height=”319″ preinitialize=”recordEvent(event)” initialize=”recordEvent(event)” creationComplete=”recordEvent(event)” applicationComplete=”recordEvent(event)”> <mx:Script> <![CDATA[ import mx.events.FlexEvent; import flash.utils.getTimer; import mx.controls.Alert; [Bindable] private var reportTxt:String = “”; private function recordEvent(event:FlexEvent):void { reportTxt += (event.type + ” event occured at “ + flash.utils.getTimer() + “ms” + “\n”); } ]]> </mx:Script> <mx:Panel x=”0″ y=”0″ width=”349″ height=”319″ layout=”absolute” title=”Life Cycle Events”> <mx:TextArea x=”10″ y=”10″ width=”309″ height=”259″ editable=”false” id=”txtReport” text=”{reportTxt}”/> </mx:Panel> </mx:Application>