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/estendeu um componente via ActionScript sabe bem do que falo, mas aqui vai a explicação.
Vou falar apenas do processo que acontece por detrás de um adicionar um botão como child a um container (Box) com o simples código:
// Criar uma box, um botão, definir o label e adicionar como child
var boxContainer:Box = new Box();
var b:Button = new Button()
b.label = “Enviar”;
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 aquando 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 criarmos o nosso próprio componente.
Artigo original aqui (EN)
Este artigo está disponivel em pdf para download. (link externo - www.msdevstudio.com)
This entry was written by and posted on June 25, 2008 at 10:19 am and filed under Cairngorm, Eventos, Exemplos, Flex, svn, zinc. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
Post a comment or leave a trackback: Trackback URL. 
This entry was written by 
This entry was written by 