Flex - Fases del ciclo de vida

Ciclo de vida de la aplicación Flex

Aunque puede crear aplicaciones Flex sin comprender las fases del ciclo de vida de una aplicación, es bueno conocer el mecanismo básico; el orden en que ocurren las cosas. Le ayudará a configurar funciones como cargar otras aplicaciones Flex en tiempo de ejecución y gestionar el proceso de carga y descarga de bibliotecas de clases y activos en tiempo de ejecución.

Una buena comprensión del ciclo de vida de las aplicaciones Flex le permitirá crear mejores aplicaciones y optimizarlas porque sabrá dónde ejecutar el código de manera óptima. Por ejemplo, si necesita asegurarse de que algún código se ejecute durante un precargador, debe saber dónde colocar el código para ese evento.

Cuando cargamos una aplicación flexible en un navegador, los siguientes eventos ocurren durante el ciclo de vida de la aplicación flexible.

A continuación se muestra un breve detalle sobre los diferentes eventos del ciclo de vida flexible.

No Señor	Descripción del evento
1	preInitialize: mx.core.UIComponent.preinitialize Tipo de evento: mx.events.FlexEvent.PREINITIALIZE Este evento se distribuye al comienzo de la secuencia de inicialización del componente. El componente está en un estado muy crudo cuando se distribuye este evento. Muchos componentes, como el control de botones, crean componentes secundarios internos para implementar la funcionalidad. Por ejemplo, el control Button crea un componente TextField de UI interno para representar el texto de su etiqueta. Cuando Flex distribuye el evento de preinicialización, los hijos, incluidos todos los hijos internos, de un componente aún no se han creado.
2	inicializar: mx.core.UIComponent.initialize Tipo de evento: mx.events.FlexEvent.INITIALIZE Este evento se distribuye después de la fase de preinicialización. El marco flexible inicializa la estructura interna de este componente durante esta fase. Este evento se activa automáticamente cuando el componente se agrega a un padre. Generalmente no es necesario llamar a initialize ().
3	creationComplete: mx.core.UIComponent.creationComplete Tipo de evento: mx.events.FlexEvent.CREATION_COMPLETE Este evento se distribuye cuando el componente ha terminado su construcción, procesamiento de propiedades, medición, diseño y dibujo. En este punto, dependiendo de su propiedad visible, el componente no es visible aunque se haya dibujado.
4	applicationComplete: spark.components.Application.applicationComplete Tipo de evento: mx.events.FlexEvent.APPLICATION_COMPLETE Se envía después de que la aplicación se haya inicializado, procesada por LayoutManager y adjuntada a la lista de visualización. Este es el último evento del ciclo de vida de creación de la aplicación y significa que la aplicación se ha cargado por completo.

Ejemplo de ciclo de vida flexible

Sigamos los pasos para comprender el ciclo de vida de prueba de una aplicación Flex creando una aplicación de prueba:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un packagecom. tutorialspoint.client como se explica en el capítulo Flex - Create Application .
2	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra el contenido del archivo mxml modificado 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 vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]