Flex - Fasi del ciclo di vita

Ciclo di vita dell'applicazione Flex

Sebbene sia possibile creare applicazioni Flex senza comprendere le fasi del ciclo di vita di un'applicazione, è bene conoscere il meccanismo di base; l'ordine in cui accadono le cose. Ti aiuterà a configurare funzionalità come il caricamento di altre applicazioni Flex in fase di esecuzione e a gestire il processo di caricamento e scaricamento di librerie di classi e risorse in fase di esecuzione.

Una buona comprensione del ciclo di vita dell'applicazione Flex ti consentirà di creare applicazioni migliori e ottimizzarle perché saprai dove eseguire il codice in modo ottimale. Ad esempio, se è necessario assicurarsi che parte del codice venga eseguito durante un preloader, è necessario sapere dove posizionare il codice per quell'evento.

Quando carichiamo un'applicazione flessibile in un browser, si verificano i seguenti eventi durante il ciclo di vita dell'applicazione flessibile.

Di seguito è riportato un breve dettaglio sui diversi eventi del ciclo di vita Flex.

Suor n	Descrizione dell'evento
1	preInitialize: mx.core.UIComponent.preinitialize Tipo di evento: mx.events.FlexEvent.PREINITIALIZE Questo evento viene inviato all'inizio della sequenza di inizializzazione del componente. Il componente è in uno stato molto grezzo quando viene inviato questo evento. Molti componenti, come il controllo Button, creano componenti figlio interni per implementare la funzionalità. Ad esempio, il controllo Button crea un componente TextField dell'interfaccia utente interna per rappresentare il testo dell'etichetta. Quando Flex invia l'evento pre-inizializzazione, i figli, inclusi tutti i figli interni, di un componente non sono stati ancora creati.
2	inizializzare: mx.core.UIComponent.initialize Tipo di evento: mx.events.FlexEvent.INITIALIZE Questo evento viene inviato dopo la fase di pre-inizializzazione. Il framework Flex inizializza la struttura interna di questo componente durante questa fase. Questo evento si attiva automaticamente quando il componente viene aggiunto a un genitore. Non è necessario chiamare in generale initialize ().
3	creationComplete: mx.core.UIComponent.creationComplete Tipo di evento: mx.events.FlexEvent.CREATION_COMPLETE Questo evento viene inviato quando il componente ha terminato la costruzione, l'elaborazione della proprietà, la misurazione, il layout e il disegno. A questo punto, a seconda della sua proprietà visibile, il componente non è visibile anche se è stato disegnato.
4	applicationComplete: spark.components.Application.applicationComplete Tipo di evento: mx.events.FlexEvent.APPLICATION_COMPLETE Inviato dopo che l'applicazione è stata inizializzata, elaborata dal LayoutManager e allegata all'elenco di visualizzazione. Questo è l'ultimo evento del ciclo di vita della creazione dell'applicazione e significa che l'applicazione è stata caricata completamente.

Esempio di ciclo di vita flessibile

Seguiamo i passaggi per comprendere il ciclo di vita del test di un'applicazione Flex creando un'applicazione di test -

Passo	Descrizione
1	Crea un progetto con un nome HelloWorld sotto un packagecom. tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione .
2	Modifica HelloWorld.mxml come spiegato di seguito. Mantieni invariato il resto dei file.
3	Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.

Di seguito è riportato il contenuto del file mxml modificato 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>

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]