Posted by The Fattest on 08/09/2007

Add Comment
Skill

Flex Snippet Tutorial - Application Creation Life Cycle Events

Posted in:

There are many times when I don't remember exactly when application startup events are fired in Flex. I figured this probably happens to other people so why not write a small post about what life cycle events are fired when? Hopefully after this short tutorial you will have a good idea of when particular life cycle events are fired.

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.

Also below is a sample application that shows the four application life cycle events and when they occurred after the start of the application. You can always grab the code for this sample by right clicking the example.

Application Creation Life Cycle Events
Get Adobe Flash player

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.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
   width="349" height="319" initialize="recordEvent(event)"
   preinitialize="recordEvent(event)" creationComplete="recordEvent(event)"
   applicationComplete="recordEvent(event)" >
  <mx:Script>
   <![CDATA[
     import mx.events.FlexEvent;
     import flash.utils.getTimer;
     
     [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>

Now once the last event applicationCreation is fired all other events can start firing, such as click events and so on. Understanding how the application is created is an important aspect to any program but it is especially so in Flex because of its event driven nature.

I hope this quick run through helps you out when trying to figure out what starup event(s) you should hook into. If you would like more info on these check out the Adobe livedocs and a special thanks to Ted Patrick, who has great info on all aspects of Flex.

Add Comment

Put code snippets inside language tags:
[language] [/language]

Examples:
[javascript] [/javascript]
[actionscript] [/actionscript]
[csharp] [/csharp]

See here for supported languages.

Javascript must be enabled to submit anonymous comments - or you can login.