Aula 4.3 - Implementando um spark item renderer em controles baseado em listas.
Nesse exercício você aplicará ao componente item renderer criado no exercício 4.2 um controle Spark List. Você também usará o mesmo item renderer com um controle Spark ComboBox.
Aula 4.3 - Implementando um spark item renderer em controles baseado em listas.
Requisitos
Exercícios anteriores
Aula 1.1 O espaço de trabalho padrão e manipulação de arquivos no Flash Builder 4.
Exercício 4.1: ex4_01_inicial.zip - Passando dados ao item renderers para exibição.
Exercicio 4.2: ex4_02_inicial.zip - Mostrando dados dinâmicos em item renderer personalizado
Software necessário:
Flash Builder 4 (Download trial)
Arquivo de exemplo dessa aula:
Exercicio 4.3: ex4_03_inicial.zip - Implementando um spark item renderer em controles baseado em listas.
Introdução
Nesse exercício você aplicará ao componente item renderer criado no exercício 4.2 um controle Spark List (veja Figura 1). Você também usará o mesmo item renderer com um controle Spark ComboBox.
Este é outro exemplo da flexibilidade da arquitetura de componentes Spark.
Figura 1: Visualizando a aplicação pronta.
Nessa aula você aprenderá como:
I. Aplicar um item renderer spark ao controle spark List.
II. Aplicar um item renderer spark ao controle spark ComboBox.
I. Aplicando um item renderer spark ao controle spark List.
Nesta seção você usará o item renderer criado no exercício anterior para representar um controle Spark List.
1. Baixe o arquivo ex4_03_inicial.zip se ainda não baixou e descompacte-o em seu computador.
2. Abra o Flash Builder.
3. Importe o arquivo ex4_03_inicial.fxp.
4. Abra o arquivo ex4_03_inicial.mxml.
5. Localize o controle DataGroup.
6. Substitua a tag DataGroup pela tag List.
<s:List dataProvider="{listaDeEmpregado}"
itemRenderer="components.EmpregadosItemRenderer">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:List>
7. Salve o arquivo e rode a aplicação.
Você deve ver uma borda preta do controle List ao redor das imagens dos funcionários (veja Figura 2).
Figura 2: Visualizando borda da imagem.
II. Aplicando um item renderer spark ao controle spark ComboBox.
Nesta seção você usará o item renderer para mostrar os estados em um controle Spark ComboBox.
1. Retorne ao ex4_03_inicial.mxml.
2. Localize o bloco List.
3. Substitua a tag "List" por tags de criação do controle ComboBox.
<s:ComboBox dataProvider="{listaDeEmpregado}"
itemRenderer="components.EmpregadosItemRenderer">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:ComboBox>
4. Salve o arquivo e rode a aplicação.
5. Abra o controle ComboBox.
Você deve ver a imagem dos funcionários mostrados com o item renderer, como mostrado na Figura 3.
Figura 3: Abra o controle ComboBox para ver imagens dos funcionários.
6. Selecione um funcionário no controle ComboBox.
Você deve ver o string [object Object] dentro do controle ComboBox, como visto na Figura 4. Isto significa que você precisa definir a propriedade para mostrar os dados no controle ComboBox.
Figura 4: Selecionando um funcionário e vendo o string object.
7. Retorne ao arquivo ex4_03_inicial.mxml.
8. No controle ComboBox adicione uma propriedade labelField com valor de lastName.
<s:ComboBox dataProvider="{listaDeEmpregado}"
itemRenderer="components.EmpregadosItemRenderer"
labelField="lastName" >
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:ComboBox>
9. Salve e rode a aplicação.
10. Selecione um funcionário no controle ComboBox.
Você deve ver o nome do funcionário mostrado no controle ComboBox como mostrado na Figura 5.
Figura 5: ComboBox mostrando informações dos funcionários.
Conhecimentos adquiridos
Nesse exercício você aprendeu como usar um item renderer com um controle Spark List e um controle Spark ComboBox.
Agora você está apto a responder as perguntas abaixo:
P.1. Os controles Spark podem ser intercambiáveis para usar o mesmo item renderers?
R.1. Sim.
P.2. Que propriedade é definida para adicionar um conjunto de barras de rolagem a um controle List?
R.2. A propriedade height.
Comments (0)