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. Para quem já criou/extendeu um componente via action script já sabe bem do que falo, mas mesmo assim coloco a explicação.

Vou falar apenas do processo de adicionar um botão como child a um container (Box) com

o simples código:

   1: // Criar uma box, um botão, definir o label e adicionar como child

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

   3: 

   4: var b:Button = new Button()

   5: 

   6: b.label = "Enviar";

   7: 

   8: boxContainer.addChild(b);

O flex, procederá da seguinte forma:

1. É chamado o componente construtor (new Box e depois new Button)

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() )

3. Adiciona como child (filho) do box. Aqui o flex faz a maior parte do trabalho, executando-se a  seguinte ordem:

4. Define a propriedade parent do componente para fazer referencia ao seu "container".

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

6. Dispara o evento preinitialize do componente.

7. Chama o método createChildren() do 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. 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.

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. Este evento pode ser usado para definir /executar procedimentos extra no componente antes que seja completamente processado.

10. Dispara o evento childAdd no componente "pai" / "parent".

11. Dispara o evento initialize do seu componente "pai" / "parent".

12. Durante o próximo evento render o flex faz as seguinte acções:

• - Chama o métodos pela seguinte ordem:
• commitProperties();
• measure();
• layoutChrome();
• updateDisplayList();
• - Finalmente é disparado o evento updateComplete no componente.

13. O flex, depois deste processo ainda poderá disparar eventos de renderização ( render ) se os métodos commitProperties(), measure(), ou updateDisplayList() forem executados/chamados através dos métodos invalidateProperties(), invalidateSize(), ou invalidateDisplayList().

14. Depois do ultimo evento render ser chamado, o flex executa as seguintes acções:

• - Coloca o componente visível ( .visible=true; ).
• - Dispara o evento creationComplete no componente. O componente é dimensionado e processado para o layout. Este evento é apenas disparado uma única vez e só quando o componente é criado.
• - 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.

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ã.

Perceber estes passos, é essencial para conhecer  as propriedades e as operações que são executadas a quando da criação de um 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.

Artigo original aqui (EN)

Abraço.

Este artigo está disponivel em pdf para download.