Adobe Flex Application Development Life Cycle

Though there is no mandatory demand to understand the life cycle of Adobe Flex application development, it is wise to acquire knowledge on the basic mechanism and the way in which things accomplish. It will help you configure features such as load other Adobe Flex applications at runtime, and manage the process of loading and unloading class libraries and assets at runtime. A proper understanding of the Adobe Flex application life cycle will enable you to build better applications and optimize them because you will know where to optimally run code. For example, if you need to ensure that some code runs during a preloader, you need to know where to place the code for that event.

While loading the Adobe Flex application in the web browser the following events occurs during the lifeCycle of Adobe Flex application.

Adobe Flex Life Cycle Events

Following is the brief detail about different Adobe Flex Life Cycle Events.

S.N.        Event & Description

1             

preInitialize: mx.core.UIComponent.preinitialize=

Event Type: mx.events.Adobe FlexEvent.REINITIALIZE

This event is dispatched at the beginning of the component initialization sequence. The component is in a very raw state when this event is dispatched. Many components, such as Button control, creates internal child components to implement the functionality. For example, the Button control creates an internal UITextField component to represent its label text.

When Adobe Flex dispatches the reinitialize event, the children, including all the internal children, of a component have not yet been created.

2             

initialize: mx.core.UIComponent.initialize

Event Type: mx.events.Adobe FlexEvent.INITIALIZE

This event is dispatched after reinitialize phase. Adobe Flex framework initializes the internal structure of this component during this phase. This event automatically fires when the component is added to a parent.

you do not need to call initialize() generally.

3             

creationComplete: mx.core.UIComponent.creationComplete

Event Type: mx.events.Adobe FlexEvent.CREATION_COMPLETE

This event is dispatched when the component has finished its construction, property processing, measuring, layout, and drawing.

At this point, depending on its visible property, the component is not visible even though it has been drawn.

4             

applicationComplete: spark.components.Application.applicationComplete

Event Type:mx.events.Adobe FlexEvent.APPLICATION_COMPLETE

Dispatched after the Application has been initialized, processed by the LayoutManager, and attached to the display list.

This is the last event of the application creation life cycle and signifies that application has been loaded completely.

Adobe Flex Life Cycle Example

Let us follow the following steps to test life cycle of an Adobe Flex application by creating a test application:

Step       Description

1              Create a project with a name HelloWorld under a package com.tutorialspoint.client as explained in the Adobe Flex - Create Application chapter.

2              Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.

3              Compile and run the application to make sure business logic is working as per the requirements.

Following is the content of the modified XML file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

   xmlns:s="library://ns.adobe.com/Adobe Flex/spark"

   xmlns:mx="library://ns.adobe.com/Adobe Flex/mx"

   width="100%" height="100%" minWidth="500" minHeight="500"

   initialize="reportEvent(event)"

   preinitialize="reportEvent(event)"

   creationComplete="reportEvent(event)"

   applicationComplete="reportEvent(event)"> 

   <fx:Style source="/com/tutorialspoint/client/Style.css"/>

   <fx:Script>

      <![CDATA[

         import mx.controls.Alert;

         import mx.events.Adobe FlexEvent;

         [Bindable]

         private var report:String = "";

         private function reportEvent(event:Adobe FlexEvent):void{

            report += "\n" + (event.type + " event occured at: "

            + getTimer() + " ms" + "\n");

         }

      ]]>

   </fx:Script>

   <s:BorderContainer width="500" height="500" id="mainContainer"

      styleName="container">

      <s:VGroup width="100%" height="100%" gap="50"

         horizontalAlign="center" verticalAlign="middle">

         <s:Label textAlign="center" width="100%" id="lblHeader"

         fontSize="40" color="0x777777" styleName="heading"

         text="Life Cycle Events Demonstration"/>

         <s:TextArea id="reportText" text="{report}" editable="false"

         width="300" height="200">                                                              

         </s:TextArea>                                         

      </s:VGroup>              

   </s:BorderContainer>

</s:Application>

Once you are ready with all the changes done, let us compile and run the application in normal mode as we did in Adobe Flex - Create Application chapter. If everything is fine with your application, this will produce the relevant results.