Flex - Lebenszyklusphasen

Lebenszyklus der Flex-Anwendung

Obwohl Sie Flex-Anwendungen erstellen können, ohne die Lebenszyklusphasen einer Anwendung zu kennen, ist es gut, den grundlegenden Mechanismus zu kennen. die Reihenfolge, in der die Dinge geschehen. Es hilft Ihnen dabei, Funktionen wie das Laden anderer Flex-Anwendungen zur Laufzeit zu konfigurieren und den Prozess des Ladens und Entladens von Klassenbibliotheken und Assets zur Laufzeit zu verwalten.

Durch ein gutes Verständnis des Lebenszyklus von Flex-Anwendungen können Sie bessere Anwendungen erstellen und optimieren, da Sie wissen, wo Sie Code optimal ausführen können. Wenn Sie beispielsweise sicherstellen möchten, dass während eines Preloaders Code ausgeführt wird, müssen Sie wissen, wo der Code für dieses Ereignis platziert werden soll.

Wenn wir eine Flex-Anwendung in einen Browser laden, treten die folgenden Ereignisse während des Lebenszyklus einer Flex-Anwendung auf.

Im Folgenden finden Sie kurze Informationen zu verschiedenen Ereignissen im Flex-Lebenszyklus.

Sr.Nr.	Eventbeschreibung
1	preInitialize: mx.core.UIComponent.preinitialize Ereignistyp: mx.events.FlexEvent.PREINITIALIZE Dieses Ereignis wird zu Beginn der Komponenteninitialisierungssequenz ausgelöst. Die Komponente befindet sich beim Auslösen dieses Ereignisses in einem sehr unformatierten Zustand. Viele Komponenten, wie z. B. die Schaltflächensteuerung, erstellen interne untergeordnete Komponenten, um Funktionen zu implementieren. Das Button-Steuerelement erstellt beispielsweise eine interne UI-TextField-Komponente, um den Beschriftungstext darzustellen. Wenn Flex das Vorinitialisierungsereignis auslöst, wurden die untergeordneten Elemente, einschließlich aller internen untergeordneten Elemente, einer Komponente noch nicht erstellt.
2	initialize: mx.core.UIComponent.initialize Ereignistyp: mx.events.FlexEvent.INITIALIZE Dieses Ereignis wird nach der Vorinitialisierungsphase ausgelöst. Das Flex Framework initialisiert in dieser Phase die interne Struktur dieser Komponente. Dieses Ereignis wird automatisch ausgelöst, wenn die Komponente einem übergeordneten Element hinzugefügt wird. Sie müssen initialize () nicht generell aufrufen.
3	CreationComplete: mx.core.UIComponent.creationComplete Ereignistyp: mx.events.FlexEvent.CREATION_COMPLETE Dieses Ereignis wird ausgelöst, wenn die Komponente ihre Konstruktion, Eigenschaftsverarbeitung, Messung, Layout und Zeichnung abgeschlossen hat. Zu diesem Zeitpunkt ist die Komponente abhängig von ihrer sichtbaren Eigenschaft nicht sichtbar, obwohl sie gezeichnet wurde.
4	applicationComplete: spark.components.Application.applicationComplete Ereignistyp: mx.events.FlexEvent.APPLICATION_COMPLETE Wird versendet, nachdem die Anwendung initialisiert, vom LayoutManager verarbeitet und an die Anzeigeliste angehängt wurde. Dies ist das letzte Ereignis im Lebenszyklus der Anwendungserstellung und zeigt an, dass die Anwendung vollständig geladen wurde.

Beispiel für einen flexiblen Lebenszyklus

Befolgen Sie die Schritte zum Verständnis des Testlebenszyklus einer Flex-Anwendung, indem Sie eine Testanwendung erstellen.

Schritt	Beschreibung
1	Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einer packagecom. tutorialspoint.client wie im Kapitel Flex - Anwendung erstellen erläutert .
2	Ändern Sie HelloWorld.mxml wie unten erläutert. Halten Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht.

Es folgt der Inhalt der geänderten mxml-Datei 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/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>

Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im normalen Modus kompilieren und ausführen, wie wir es im Kapitel Flex - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis: [ Online testen ]