Flex - Phases du cycle de vie

Cycle de vie de l'application Flex

Bien que vous puissiez créer des applications Flex sans comprendre les phases du cycle de vie d'une application, il est bon de connaître le mécanisme de base; l'ordre dans lequel les choses se produisent. Il vous aidera à configurer des fonctionnalités telles que le chargement d'autres applications Flex au moment de l'exécution et à gérer le processus de chargement et de déchargement des bibliothèques de classes et des actifs au moment de l'exécution.

Une bonne compréhension du cycle de vie des applications Flex vous permettra de créer de meilleures applications et de les optimiser car vous saurez où exécuter le code de manière optimale. Par exemple, si vous devez vous assurer que du code s'exécute pendant un préchargement, vous devez savoir où placer le code pour cet événement.

Lorsque nous chargeons une application flex dans un navigateur, les événements suivants se produisent pendant le cycle de vie de l'application flex.

Voici un bref détail sur les différents événements du cycle de vie Flex.

Sr. Non	Description de l'évenement
1	preInitialize: mx.core.UIComponent.preinitialize Type d'événement: mx.events.FlexEvent.PREINITIALIZE Cet événement est distribué au début de la séquence d'initialisation du composant. Le composant est dans un état très brut lorsque cet événement est distribué. De nombreux composants, tels que le contrôle Button, créent des composants enfants internes pour implémenter des fonctionnalités. Par exemple, le contrôle Button crée un composant TextField d'interface utilisateur interne pour représenter le texte de son étiquette. Lorsque Flex distribue l'événement de pré-initialisation, les enfants, y compris tous les enfants internes, d'un composant n'ont pas encore été créés.
2	initialiser: mx.core.UIComponent.initialize Type d'événement: mx.events.FlexEvent.INITIALIZE Cet événement est distribué après la phase de pré-initialisation. Le framework Flex initialise la structure interne de ce composant pendant cette phase. Cet événement se déclenche automatiquement lorsque le composant est ajouté à un parent. Vous n'avez pas besoin d'appeler initialize () en général.
3	creationComplete: mx.core.UIComponent.creationComplete Type d'événement: mx.events.FlexEvent.CREATION_COMPLETE Cet événement est distribué lorsque le composant a terminé sa construction, le traitement des propriétés, la mesure, la mise en page et le dessin. À ce stade, selon sa propriété visible, le composant n'est pas visible même s'il a été dessiné.
4	applicationComplete: spark.components.Application.applicationComplete Type d'événement: mx.events.FlexEvent.APPLICATION_COMPLETE Distribué après l'initialisation de l'application, traité par le LayoutManager et attaché à la liste d'affichage. Il s'agit du dernier événement du cycle de vie de création de l'application et signifie que l'application a été complètement chargée.

Exemple de cycle de vie Flex

Laissez-nous suivre les étapes pour comprendre le cycle de vie des tests d'une application Flex en créant une application de test -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un packagecom. tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ ]