Ao percorrer a documentação da Adobe, reparei num resumo bastante interessante que fala do ciclo de execução/criação de cada componente da nossa aplicação, é incrível como cada simples botão ao ser adicionado a um container tem uma dezena de procedimentos até que seja disparado o evento creationComplete. Ir a la documentación de Adobe, me di cuenta de un resumen muy interesante que habla sobre el ciclo de ejecución y creación de cada uno de los componentes de nuestra aplicación, es sorprendente cómo todos y cada uno de botón que se añade a un contenedor de una docena de procedimientos hasta que se desencadenó el evento creationComplete. Para quem já criou/extendeu um componente via action script já sabe bem do que falo, mas mesmo assim coloco a explicação. Para aquellos que ya han creado / componente a través de una secuencia de comandos de acción ampliado ya sabe a qué me refiero, pero aún así poner la explicación.

Vou falar apenas do processo de adicionar um botão como child a um container (Box) com Estoy hablando sólo del proceso de añadir un botón como un niño a un recipiente (caja) con

o simples código: el simple código:

    1: // Criar uma box, um botão, definir o label e adicionar como child 1: / / Crear un cuadro, un botón, establecer la etiqueta y añadir como niños 

    2:  var boxContainer:Box = new  Box(); 2: var boxContainer: Box = new Box (); 

    3: 3: 

    4:  var b:Button = new  Button() 4: var b: Botón Botón = new () 

    5: 5: 

    6:  b.label = "Enviar" ; 6: b.label = "Enviar"; 

    7: 7: 

    8:  boxContainer.addChild(b); 8: boxContainer.addChild (b); 

O flex, procederá da seguinte forma: El flex, haga lo siguiente:

1. 1. É chamado o componente construtor (new Box e depois new Button) Se llama el fabricante de componentes (nuevo cuadro y luego botón Nuevo)

2. Chamado o setter (b.label=) e actualizado todo o componente ( muitas das vezes são chamados métodos de actualização para definirem todo o layout: invalidateProperties() , invalidateSize() , ou invalidateDisplayList() ) 2. Llamados los setter (b.label =) y actualizado todo el componente (y, a menudo, están llamados a actualizar los métodos para definir la totalidad del diseño: invalidateProperties (), invalidateSize (), o invalidateDisplayList ())

3. Adiciona como child (filho) do box. Aqui o flex faz a maior parte do trabalho, executando-se a  seguinte ordem: 3. Añade como un niño (hijo) de la caja. En este caso, el flex hace más de la obra, ejecutando el siguiente orden:

4. Define a propriedade parent do componente para fazer referencia ao seu "container". 4. Define la propiedad de la matriz componente para hacer referencia a su "contenedor".

5. Calcula e define o estilo/"style" de todo o componente. 5. Calcula y establece el estilo / "estilo" de todo el componente.

6. Dispara o evento preinitialize do componente. 6. Disparar preinitialize el caso del componente.

7. Chama o método createChildren() do componente. 7. Llama el método createChildren () del componente.

8. Chama os métodos invalidateProperties() , invalidateSize() ,  e invalidateDisplayList() para obrigar a serem disparadas/chamadas os métodos commitProperties() , measure() , ou updateDisplayList() no próximo evento render . 8. Llama a los métodos invalidateProperties (), invalidateSize (), y invalidateDisplayList () a la fuerza para ser despedido / Llame a los métodos commitProperties (), medida (), o updateDisplayList () en el próximo evento de entrega. A única excepção a estes acontecimentos, é que o flex não chama o método measure() quando o "user/programador" define a altura e largura do componente. La única excepción a estos eventos es que el flex medida no requiere el método () cuando el "usuario / programador" define la altura y la anchura del componente.

9. Dispara o evento initialize no componente. Nesta altura todos os childs (childrens) no componente são inicializados, mas o componente ainda não foi correctamente definido no seu tamanho, nem processado o seu layout. 9. Disparar el caso de inicializar el componente. En este punto todos los Niños (para niños), el componente se inicializa, pero el componente todavía no ha sido debidamente definido por su tamaño, transformados o su diseño. Este evento pode ser usado para definir /executar procedimentos extra no componente antes que seja completamente processado. Este evento se puede utilizar para definir y aplicar los procedimientos de componente extra antes de que se procesa por completo.

10. 10. Dispara o evento childAdd no componente "pai" / "parent". ChildAdd disparar en el caso de que el "padre" / "padre".

11. Dispara o evento initialize do seu componente "pai" / "parent". 11. Disparar inicializar el caso de su componente "padre" / "padre".

12. 12. Durante o próximo evento render o flex faz as seguinte acções: Durante el próximo evento de entrega el flex hace las siguientes acciones:

• - Chama o métodos pela seguinte ordem: - Llame a los métodos en el siguiente orden:
• commitProperties(); commitProperties ();
• measure(); medida ();
• layoutChrome(); layoutChrome ();
• updateDisplayList(); updateDisplayList ();
• - -- Finalmente é disparado o evento updateComplete no componente. Por último se activa en caso updateComplete componente.

13. O flex, depois deste processo ainda poderá disparar eventos de renderização ( render ) 13. El flex, entonces este proceso también puede desencadenar eventos de la prestación (hacer) se os métodos commitProperties() , measure() , ou updateDisplayList() forem executados/chamados através dos métodos invalidateProperties() , invalidateSize() , ou invalidateDisplayList() . si los métodos commitProperties (), medida (), o updateDisplayList () se aplican / llamados por los métodos invalidateProperties (), invalidateSize (), o invalidateDisplayList ().

14. Depois do ultimo evento render ser chamado, o flex executa as seguintes acções: 14. Después de que el último evento que se llama entrega, el flex realiza las siguientes acciones:

• - Coloca o componente visível ( .visible=true; ). - Coloque el componente visible (. Visible = true;).
• - Dispara o evento creationComplete no componente. - Dispara en el caso de creationComplete componente. O componente é dimensionado e processado para o layout. El componente está diseñado y procesado para el diseño. Este evento é apenas disparado uma única vez e só quando o componente é criado. Este evento se activa sólo una vez y sólo cuando el componente se crea.
• - Dispara o evento updateComplete no componente, este evento também é disparado quando são alteradas quaisquer definições do componente, como layout, posição, tamanho ou qualquer alteração das características visuais. - Dispara en el caso de updateComplete componente, este evento se desencadena cuando las opciones se cambian los componentes, tales como diseño, posición, tamaño o cualquier cambio en las características visuales.

A maior parte do trabalho de configuração, definição, e renderização de um componente acontece que este é adicionado a um container ( método addChild() ), isto porque enquanto o componente não for adicionado a um container, o flex não consegue saber o seu tamanho, definir as propriedade "in-line"/"inheriting" ou desenha-lo no ecrã. La mayoría de los trabajos de configuración, definición, y la prestación de un componente es que este se añade a un recipiente (método addChild ()), ya que mientras que el componente no se agrega a un contenedor, el flex no puede tener su tamaño , Establecer la propiedad "en línea" / "heredar" o dibujar en la pantalla.

Perceber estes passos, é essencial para conhecer  as propriedades e as operações que são executadas a quando da criação de um componente. Entender estos pasos son esenciales para conocer las propiedades y las operaciones que se llevan a cabo en el establecimiento de un componente. Ajuda-nos também a perceber melhor porque é que às vezes temos certos erros no nosso código bem como a entender o processo de criação de um componente, o que se torna muito útil para criar-mos ou/ou extender  o nosso próprio componente. Nos ayudan a comprender mejor por qué a veces tenemos algunos errores en nuestro código y para comprender el proceso de creación de un componente, que es muy útil para la creación de ellos para mí y / o ampliación de nuestro propio componente.

Artigo original aqui (EN) Artículo original aquí (EN)

Abraço. Abrazar.

Este artigo está disponivel em pdf para download. Este artículo está disponible en PDF para descargar.