Aula 1.5: O layout de componentes Flex.

 

Requisitos

Introdução

O layout de componentes Flex.

Podemos usar a classe layout com qualquer container spark para configurar o modo como os componentes Flex aparecem na tela. A Figura 1 mostra o exercicio pronto.

Figura 1: O exercício pronto.

 Nessa aula você aprenderá:

 

I. O uso do absolute layout.

Nessa seção você criará e configurará uma aplicação Flex com um absolute layout.

1. Baixe o arquivo ex1_aula_05_inicial.zip e descompacte o arquivo em seu computador.

2. Abra o Flash Builder.

3. Importe o arquivo ex1_aula_05_inicial.fxp.

4. No painel Package Explorer expanda a pasta "componentes" para ter acesso ao arquivo MostraEstados.mxml (veja Figura 2).

 

Figura 2: Vendo o componente MostraEstados.mxml.

5. Abra o ex1_05_inicial.mxml.

6. Abaixo do comentário de componentes, procure o controle Label e as quatro instâncias do componente "MostraEstados.mxml" (veja Figura 3).

<components:MostraEstados image="imagens/ac.jpg"
nEstado="Acre - AC"
nCapital="Rio Branco"
y="46"  />
<components:MostraEstados image="imagens/ap.jpg"
nEstado="Amapá - AP"
nCapital="Macapá"
x="138" y="157"  />
<components:MostraEstados image="imagens/am.jpg"
nEstado="Amazonas - AM"
nCapital="Manaus"
x="267" y="267"  />
<components:MostraEstados image="imagens/pa.jpg"
nEstado="Pará - PA"
nCapital="Belem"
x="413" y="378"  />

 

Figura 3: Vendo instâncias do componente personalizado.

7. Rode a aplicação.

Observe que os componentes são mostrados em diagonal do lado superior esquerdo até o lado inferior direito (veja Figura 4).

 

Figura 4: Rodando a aplicação.

II. Ajustando o layout.

Nessa seção mudaremos o layout da aplicação para entender as diferenças entre os layouts.

1. Retorne ao Flash Builder.

2. Abaixo do comentário "Properties of the parent" DELETE as tags de layout:

<!----------Properties of the parent ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<s:layout>
<s:BasicLayout />
</s:layout>

3. Salve o arquivo.

4. Rode a aplicação.

A aplicação deve ser idêntica a figura 4 (veja Figura 5).

 

Figura 5: Rodando a aplicação se observa que não houve alteração.

5. Retorne ao Flash Builder.

6. Insira novamente as tags de layout, mas mude de BasicLayout para TileLayout

<s:layout>
<s:TileLayout />
</s:layout>

7. Salve o arquivo e rode a aplicação.

Você verá que os campos agora estão posicionados de forma diferente usndo o TileLayout (veja Figura 6).

 

Figura 6: Rodando a aplicação e vendo posicionamento com a classe TileLayout.

8. Retorne ao Flash Builder.

9. Mude o layout de TileLayout para HorizontalLayout.

<s:layout>
<s:HorizontalLayout />
</s:layout>

10. Salve o arquivo e rode a aplicação.

Observe que as propriedades x e y dos controles Label são ignoradas (veja Figura 7).

 

Figura 7: Rodando a aplicação usando a classe HorizontalLayout.

11. Retorne ao Flash Builder.

12. Mude o layout para VerticalLayout.

<s:layout>
<s:VerticalLayout />
</s:layout>

13. Salve o arquivo e rode a aplicação.

Você deve ver agora os componentes alinhados verticalmente (veja Figura 8).

 

Figura 8: Rodando a aplicação e vendo os componentes alinhados verticalmente.

 

III. Uso de múltiplos layouts em containers Flex.

Nessa seção usaremos múltiplos layouts em containers Flex para mudar a disposição das imagens na aplicação de exemplo.

1. Retorne ao Flash Builder.

2. No painel de código aninhe a instância do componente MXML MostraEstados dentro de um container "Group".

<s:Group>

<components:MostraEstados bandeiraImagem="images/bandeira-AC.png"
nomeEstado="Acre"
nomeCapital="Rio Branco"
y="46"/>
<components:MostraEstados bandeiraImagem="images/bandeira-AL.png"
nomeEstado="Alagoas"
nomeCapital="Maceió"
x="138" y="157"/>
<components:MostraEstados bandeiraImagem="images/bandeira-AM.png"
nomeEstado="Amazonas"
nomeCapital="Manaus"
x="267" y="267"/>
<components:MostraEstados bandeiraImagem="images/bandeira-AP.png"
nomeEstado="Amapá"
nomeCapital="Macapá"
x="413" y="378"/>
</s:Group>

3. No container Group, adicione uma tag layout com uma tag aninhada VerticalLayout.

<s:Group>

<s:layout>
<s:VerticalLayout/>
</s:layout>
...

4. Salve o arquivo e rode a aplicação.

As imagens agora são mostradas na vertical (veja Figura 9).

 

Figura 9: O componente MostraEstados ordenados verticalmente.

5. Retorne ao Flash Builder.

6. Mude o container "Group" para um container "Panel".

<s:Panel>
<s:layout>
<s:VerticalLayout/>
</s:layout>
...
</s:Panel>

7. Salve o arquivo e rode a aplicação.

O container "Panel" mostra os Estados dispostos como no container "Group", mas este controle tem um visual diferente que se destaca na tela (veja Figura 10).

 

Figura 10: Visualizando Estados usando um container "Panel".

8. Retorne ao Flash Builder.

9. Mude o container "Panel" para um container "VGroup".

<s:VGroup>
<s:layout>
<s:VerticalLayout/>
</s:layout>
...
</s:VGroup>

10. No container VGroup, remova as tags layout.

<s:VGroup>
...
</s:VGroup>

11. Salve o arquivo e rode a aplicação.

Os Estados continuam ordenados do mesmo jeito que estavam nos containers "Panel" e "Group" sem usar a classe VerticalLayout (veja a Figura 11).

 

Figura 11: Os Estados são mostrados verticalmente.

12. Retorne ao Flash Builder.

13. Mude o container VGroup para um container HGroup.

<s:HGroup>
...
</s:HGroup>

14. Salve o arquivo e rode a aplicação.

Os Estados agora são ordenados horizontalmente dentro da aplicação (veja a Figura 12).

 

Figura 12: Mostrando os Estados usando o container HGroup.

IV. Usando múltiplos layouts na aplicação.

Nessa seção usaremos múltiplas tags de layout para organizar o conteúdo da aplicação.

1. Retorne ao Flash Builder.

2. Abaixo do comentário Properties of the parent mude a propriedade layout para usar a classe TileLayout.

<!-- Properties of the parent  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<s:layout>
<s:TileLayout />
</s:layout>

3. Localize e delete as tags do container HGroup que envolvem instâncias do componente MostraEstados.

4. Localize e delete o comentário (~Usaremos apenas 04 estados nesta seção do exercício~~) para permitir que novas instâncias de Estados sejam adicionadas à aplicação.

5. Salve o arquivo.

6. Rode a aplcação.

Você deve ver o título e oito instâncias de "MostraEstados" arranjadas como na Figura 13.

Figura 13: Vendo a aplicação usando a classe TileLayout.

7. Retorne ao Flash builder.

8. Reverta a classe layout da aplicação para VerticalLayout.

<s:layout>
<s:VerticalLayout/>
</s:layout>

9. Aninhe todas as oito instâncias do componente "MostraEstados" dentro do container "Group". Certifique-se de que o controle Label não esteja incluído no grupo.

<s:Label
text="Estados Brasileiros"  ... />
<s:Group>

<component:MostraEstados ... /> 
<component:MostraEstados ... /> 
<component:MostraEstados ... /> 
<component:MostraEstados ... /> 
<component:MostraEstados ... /> 
<component:MostraEstados ... /> 
<component:MostraEstados ... /> 
<component:MostraEstados ... /> 
</s:Group>

10. Dentro do novo container "Group", use as tags layout para aplicar a classe TileLayout ao container.

<s:Group>
<s:layout>
<s:TileLayout />
</s:layout>
...
<s:Group>

11. Salve o arquivo.

12. Rode a aplicação.

O container "Group" com a classe TileLayout é posicionada abaixo do controle Label (veja Figura 14).

 

Figura 14: Mostrando o grupo de Estados usando a classe TileLayout.

V. Usando a classe layout em um componente personalizado.

Nessa seção você organizará os controles personalizados dentro do componente MostraEstados usando a classe layout e suas propriedades.

1. Retorne ao Flash Builder.

2. Pelo Package Explorer, na pasta componentes abra o arquivo MostraEstados.mxml.

3. Nos controles Label e Image, delete as propriedades x e y e seus valores.

<mx:Image source="{bandeiraImagem}" />
<s:Label text="{nomeEstado}"
fontWeight="bold"
textAlign="center"
width="120"/>
<s:Label width="120"
text="{nomeCapital}"
textAlign="center" />

4. Salve o arquivo e rode a aplicação.

Você deve ver os controles dentro do componente MostraEstados posicionados no topo da imagem (veja Figura 15).

Figura 15: Vendo a aplicação sem layout definido para o componente "MostraEstados".

 5. Retorne ao Flash Builder.

 6. No arquivo MostraEstados.mxml, localize o comentário Properties of the parent.

 7. Abaixo do comentário crie um conjunto de tags layout.

 <!-- Properties of the parent  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
 <s:layout>
 </s:layout>

 8. Dentro das tags layout, adicione uma classe VerticalLayout.

 <s:layout>
<s:VerticalLayout/>
</s:layout>

 9. Salve o arquivo e rode a aplicação.

Observe que os controles são arranjados verticalmente, mas não centralizados (veja Figura 16). Os controles de texto parecem centralizados, mas de forma não alinhada. Isto ocorre porque eles estão centralizados com a propriedade textAlign="center".

 

Figura 16: Visualização da aplicação com a classe VerticalLayout definida.

10. Retorne ao Flash Builder.

11. Para a instância VerticalLayout, adicione a propriedade horizontalAlign e configure o valor para center.

<s:VerticalLayout horizontalAlign="center"/>

12. Salve o arquivo e rode a aplicação.

Os controles agora são centralizados dentro de cada instância MostraEstados (veja Figura 17).

 

Figura 17: Visualização da aplicação com os títulos centralizados.

VI.Uso da classe BorderContainer

Nessa seção veremos o uso da classe Spark BorderContainer para criar uma borda ao redor da imagem das bandeiras dos Estados. O container BorderContainer pode ser usado no lugar de um skin para criar bordas e background para os componentes.

1. Retorne ao ex1_05_inicial.mxml no Flash Builder.

2. No modo Source code, circunde o container "Group" que está aninhado no componente "MostraEstados" com um componente BorderContainer.

<s:BorderContainer>
<s:Group>
<s:layout>
<s:TileLayout/>
</s:layout>
<components:EmployeeDisplay ... />
...
</s:Group>
</s:BorderContainer>

3. Na tag de abertura BorderContainer, adicione a propriedade borderColor com o valor de #0b85b7, uma propriedade cornerRadius com valor de 8 e uma borderWeight com um valor de 4.

<s:BorderContainer borderColor="#0b85b7"
cornerRadius="8"
borderWeight="4">

4. Salve o arquivo e rode a aplicação.

Os componentes MostraEstados estão circundados com uma borda (veja Figura 18).

 

Figura 18: Aplicação com bordas ao redor dos componentes "MostraEstados".

 

VII. Aplicando barras de rolagem na aplicação.

Nessa seção veremos como usar o componente Scroller para adicionar barras de rolagem na aplicação.

1. Retorne ao arquivo ex1_05_inicial.mxml no Flash builder.

2. No container "Group" que está aninhado no bloco do componente "MostraEstados", adicione uma propriedade id com o valor de estadosGroup, para a propriedade height adicione o valor de 300 e propriedade width com valor de 250.

<s:BorderContainer borderColor="#0b85b7"
cornerRadius="8"
borderWeight="4">
<s:Group id="estadosGroup" height="300" width="250">
<s:layout>
<s:TileLayout/>
</s:layout>
...

3. No final do bloco BorderContainer entre a tag de fechamento BorderContainer e após o fechamento da tag Group, crie um componente Scroller.

</s:Group>
<s:Scroller/>
</s:BorderContainer>

4. Para o componente Scroller adicione uma propriedade viewport e vincule-o ao valor da propriedade id do componente Group, estadosGroup.

</s:Group>
<s:Scroller viewport="{estadosGroup}"/>
</s:BorderContainer>

5. Salve o arquivo e rode a aplicação.

A aplicação agora tem uma barra de rolagem que permite a você rolar a lista de Estados (veja Figura 19).

 

Figura 19: Visualizando a barra de rolagem na aplicação.

Conhecimentos adquiridos

Nessa aula você aprendeu como aplicar layout em containers e controles Flex e aplicar diversas opções de layouts a uma aplicação.

Agora já sabemos como responder, por exemplo as perguntas abaixo: