Flex - Life Cycle Phases-alljchome-开发者的教程家园

Adobe Flex Tutorial

Adobe Flex Resources

Selected Reading

Flex - Life Cycle Phases

Life Cycle of Flex Apppcation

Although, you can build Flex apppcations without understanding the pfe cycle phases of an apppcation, it is good to know the basic mechanism; the order in which things occur. It will help you to configure features such as loading other Flex apppcations at runtime, and manage the process of loading and unloading class pbraries and assets at runtime.

A good understanding of the Flex apppcation pfe cycle will enable you to build better apppcations 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.

When we load flex apppcation in a browser, the following events occurs during the pfecycle of flex apppcation.

Following is the brief detail about different Flex Life cycle events.

Sr.No	Event & Description
1	preInitiapze: mx.core.UIComponent.preinitiapze Event Type: mx.events.FlexEvent.PREINITIALIZE This event is dispatched at the beginning of the component initiapzation 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 functionapty. For example, the Button control creates an internal UI TextField component to represent its label text. When Flex dispatches the pre-initiapze event, the children, including all the internal children, of a component have not yet been created.
2	initiapze: mx.core.UIComponent.initiapze Event Type: mx.events.FlexEvent.INITIALIZE This event is dispatched after pre-initiapze phase. Flex framework initiapzes 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 initiapze() generally.
3	creationComplete: mx.core.UIComponent.creationComplete Event Type: mx.events.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	apppcationComplete: spark.components.Apppcation.apppcationComplete Event Type:mx.events.FlexEvent.APPLICATION_COMPLETE Dispatched after the Apppcation has been initiapzed, processed by the LayoutManager, and attached to the display pst. This is the last event of the apppcation creation pfe cycle and signifies that apppcation has been loaded completely.

Flex Life Cycle Example

Let us follow the steps to understand test pfe cycle of a Flex apppcation by creating a test apppcation −

Step	Description
1	Create a project with a name HelloWorld under a packagecom.tutorialspoint.cpent as explained in the Flex - Create Apppcation chapter.
2	Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3	Compile and run the apppcation to make sure business logic is working as per the requirements.

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

<?xml version = "1.0" encoding = "utf-8"?>
<s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "pbrary://ns.adobe.com/flex/spark"
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500"
   initiapze = "reportEvent(event)"
   preinitiapze = "reportEvent(event)"
   creationComplete = "reportEvent(event)"
   apppcationComplete = "reportEvent(event)">	
   
   <fx:Style source = "/com/tutorialspoint/cpent/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
   
         [Bindable]
         private var report:String = "";

         private function reportEvent(event:FlexEvent):void {
            report += "
" + (event.type + " event occured at: " 
            + getTimer() + " ms" + "
");
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalApgn = "center" verticalApgn = "middle">
         <s:Label textApgn = "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:Apppcation>

Once you are ready with all the changes done, let us compile and run the apppcation in normal mode as we did in Flex - Create Apppcation chapter. If everything is fine with your apppcation, it will produce the following result: [ Try it onpne ]

Flex - Life Cycle Phases

Life Cycle of Flex Apppcation

Flex Life Cycle Example

友情链接