Flex Snippet Tutorial - Application Creation Life Cycle Events
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.
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"
viewSourceURL="../files/LifeCycleEventsTutorial.mxml"
preinitialize="recordEvent(event)"
initialize="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>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="349" height="319"
viewSourceURL="../files/LifeCycleEventsTutorial.mxml"
preinitialize="recordEvent(event)"
initialize="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.
Posted in Flex, All Tutorials by The Fattest |
