Em continuação com o tutorial ( 001 - 002 - 003 - 004 - 005 - 006)

4. Display List

A display list, mais uma vez traduzida à letra pode ser entendida como lista de apresentação, foi uma grande inovação no no flash/flex com o AS3, e que agora apresentou muitos problemas de adaptação para muitos designers/programadores habituados à versão anterior. Nas versões anteriores do AS, todos os elementos visuais eram tratados e apresentados separadamente no swf final o que exigia dos programadores um grande conhecimento e acima de tudo muito código para lidar com essa apresentação visual dos elementos e com os métodos de criar, eliminar e adicionar objectos o que resultava num controlo restrito desses mesmos objectos e que o garbage collector era incapaz de controlar.

O AS3 trouxe uma nova forma de lidar com estes objectos e sua apresentação, a display list. Logicamente esta display list pode ser entendida como uma lista de elementos visuais do swf que pode incluir os objectos mais comuns como movieclips e botões, mas também shapes, gráficos, painéis e muitos outros que não existiam nas versões anteriores ou que não podiam ser criados “programaticamente”.

Resumindo, a display list é praticamente o que contém e regula a apresentação de todos os nossos elementos visuais na altura da “criação”/apresentação do .swf final.

4.1. Entendendo a display list.

Para compreender algo que não vemos, temos que ter próvas bem lógicas do que se fala, e como disse em cima, a display list é o que gere todos os elementos gráficos do nosso .swf, falando no caso do flex, vou tentar fazer um rascunho do que podemos entender como sendo um esquema visual da display list. Suponhamos que em flex temos:

- Fundo da aplicação.

- 1 painel (Painel1)

- 1 titleWindow (Win1)

- 1 botão (botao1)

- 1 imagem dentro do painel 1 (Img1)

- 1 botão dentro do painel 1 (Botao2)

- 1 progressBar dentro do titleWindow (ProgressBar)

O esquema da display list apresentaria-se da seguinte forma:

Este é o exemplo de uma simples aplicação, pelo que a display list está organizada com vários objectos, os que enumerei como “display Object Container” são objectos que suportam outros objectos dentro de si como filhos (“child’s”), e os enumerados com “display Object”, não suportam “nativamente” filhos/”childs” dentro de si. (existem alguns displayObject, como o caso no flex do swfLoader ou o ModuleLoader que são display Objects, mas que suportam filhos dentro de si).

Como podem ver com este esquema, facilmente se conseguem perceber as vantagens da displayList, ou seja, na imagem conseguimos perceber alguns pontos:

- O stage é o palco principal, podemos entender como o Objecto que contém todos os outros, sendo que é o Pai (“root/raiz”)

- A aplicação principal, que contém os elementos painel 1, win 1, botão 1 como seus child’s e tendo como seu pai o stage (parent)

- Por sua vez, os child’s da aplicação principal (painel 1 e win1) também contêm child’s tendo como parent a applicação principal.

- Finalmente temos os objectos (botão2 e Img1) como childs do Painel 1 e o objecto ProgressBar como child do objecto Win1.

Isto pode parecer um pouco complicado, mas podem com uma simples função conseguimos perceber esta hierarquia de Objectos:

Serão então apresentados no painel de debug os objectos e seus childs (se existirem).

Nesta função temos alguns novos parâmetros:

.numChildren; Mostra o número de child’s do objecto.

.getChildAt(i); Busca o nome do child na devida posição da displayList;

DisplayObjectContainer; Compara se o objecto é um displayContainer, caso seja, lista os seus filhos também, chamando a função de novo.

4.2. Adicionado um objecto à display List. addChild();

No flex, ao arrastar-mos um componente para dentro de um painel ou para a nossa área (fundo/Aplicação), na realidade mesmo vendo o código MXML gerado, não vemos nenhuma referencia ao addChild, pelo simples motivo; O MXML é uma linguagem estilo XML que serve unicamente para organizar o código de uma maneira mais simples e lógica, mas na realidade este MXML é completamente transformado em AS3 na altura da compilação do vosso projecto, e para que tenham a certeza disso saibam que não existe nada no MXML que não possamos fazer em AS3, vejam o exemplo:

Em action script 3 no flex isto ficaria algo como:

Se reparar-mos poucas coisas temos que fazer, e o número de linhas é quase o mesmo. Reparem com atenção nas propriedades e métodos que indiquei no código, penso que a única coisa nova será a propriedade .id que define o id do painel, e os imports no topo, que importam os objectos ComboBox e Panel para que possam ser usados. Podemos ver também os métodos addChild em acção, adicionando em primeiro o comboBox (combo) como child do painel e depois adicionando o painel ao stage principal.

O addChild é um método disponível em muitos dos elementos gráficos presentes no flex, pelo que este exemplo pode ser aplicado a inúmeros objectos, que tem como principal objectivo adicionar elementos à display list ou a outro elemento (display object container) da display list.

Sendo que para adicionar à display list, basta usar:

onde o objecto pode ser praticamente qualquer componente/displayObject do flex/flash

E para adicionar a outro objecto já filho/child da display list:

onde o displayObjectContainer é o objecto ao qual será adicionado o child, no caso em cima, usamos o painel como display object container, e o combo como Objecto (display Object).

Podemos também adicionar um display object container (painel por exemplo) a outro display object Container (TitleWindow):

Devem ter em especial atenção esta display list, porque é uma parte fundamental no action script 3, e que se mal compreendida pode trazer muitos “dissabores” principalmente na hora de organizar os objectos adicionados ao swf.

Por agora é tudo..alguma duvida digam…

Na próxima parte falaremos de como identificar e remover childs da display list ou de dentro de outros objectos da display list.

Abraço.

http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt