極客書

Flex - Life Cycle Phases

儘管，您可以在不了解應用程式生命周期階段的情況下構建Flex應用程式，但最好了解基本機制;事情發生的順序。它將幫助您配置功能，例如在運行時加載其他Flex應用程式，並在運行時管理類庫和資產的加載和卸載過程。

對Flex應用程式生命周期的良好理解將使您能夠構建更好的應用程式並對其進行優化，因爲您將知道在哪裡優化運行代碼。例如，如果需要確保某些代碼在預加載程序期間運行，則需要知道將該事件的代碼放置在何處。

Life Cycle Events

當我們在瀏覽器中加載flex應用程式時，在flex應用程式的生命周期中會發生以下事件。

下面是關於不同Flex生命周期事件的簡要細節。

Sr.No Event & Description
1

預初始化：mx.core.UIComponent.preInitialize

事件類型：mx.events.flexevent.preinitize

此事件在組件初始化序列開始時調度。發送此事件時，組件處於非常原始的狀態。許多組件（如Button控制項）創建內部子組件以實現功能。例如，Button控制項創建一個內部UI TextField組件來表示其標籤文本。

當Flex分派預初始化事件時，組件的子級（包括所有內部子級）尚未創建。
2

初始化：mx.core.UIComponent.initialize

事件類型：mx.events.flexevent.初始化

此事件在預初始化階段之後調度。Flex框架在此階段初始化此組件的內部結構。此事件在將組件添加到父級時自動激發。

通常不需要調用initialize（）。
3

creationComplete:mx.core.UIComponent.creationComplete

事件類型：MX.events.flexevent.creation&u complete

此事件在組件完成其構造、屬性處理、測量、布局和繪圖後發送。

此時，根據其「可見」屬性，即使已繪製組件，該組件也不可見。
4

applicationComplete:spark.components.Application.applicationComplete

事件類型：mx.events.FlexEvent.APPLICATION_COMPLETE

在應用程式初始化、由LayoutManager處理並附加到顯示列表後發送。

這是應用程式創建生命周期的最後一個事件，表示應用程式已完全加載。

Flex Life Cycle Example

讓我們通過創建一個測試應用程式來了解Flex應用程式的測試生命周期;

Step Description
1 Create a project with a name HelloWorld under a packagecom.tutorialspoint.client as explained in the 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. 

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/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.FlexEvent;
   
         [Bindable]
         private var report:String = "";

         private function reportEvent(event: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>

完成所有更改後，讓我們以正常模式編譯並運行應用程式，就像我們在flex-create application一章中所做的那樣。如果您的應用程式一切正常，它將產生以下結果：[聯機試用]