Aula 4.4 - Usando o controle DataGrid

Aula 4.4 - Usando o controle DataGrid.

Requisitos

Introdução

Nesse exercício você usará o controle DataGrid para mostrar dados de empregados de uma empresa fictícia. Você também configurará e formatará colunas e dados em colunas como mostrado na Figura 1.

Nota: O controle DataGrid é um componente MX. Não existe um componente Spark equivalente no Flex 4.

Figura 1: Visualizando a aplicação pronta.

Nessa aula você aprenderá como:

I. Especificando colunas no controle DataGrid.

Nesta seção você configurará um controle DataGrid para que o mesmo só mostre colunas que você definir.

1. Baixe o arquivo ex4_04_inicial.zip se ainda não baixou e descompacte-o em seu computador.

2. Abra o Flash Builder.

3. Importe o arquivo ex4_04_inicial.fxp.

4. Abra o arquivo ex4_04_inicial.mxml.

5. Localize o controle Label abaixo do comentários de componentes UI.

6. Abaixo do controle Label, crie um controle DataGrid.

<s:Label text="Relaçao de Funcionários"
color="#1F1F1F"
fontSize="24"/>
<mx:DataGrid>

</mx:DataGrid>

7. Para o controle DataGrid, vincule empregadosList como valor do provedor de dados e atribua 100% à propriedade width.

<mx:DataGrid dataProvider="{empregadoList}" width="100%">

</mx:DataGrid>

8. Salve o arquivo e rode a aplicativo.

Você deve ver o controle DataGrid populado com dados dos empregados como mostrado na Figura 2.

Figura 2: Rodando a aplicação e vendo o controle DataGrid preenchido com dados dos empregados da empresa fictícia.

9. Retorne ao exercício ex4_04_inicial.mxml.

10. No controle DataGrid mude o valor da propriedade width para 250.

<mx:DataGrid dataProvider="{empregadoList}" width="250">

</mx:DataGrid>

11. Entre as tags do controle DataGrid, crie um bloco columns.

<mx:DataGrid dataProvider="{empregadoList}" width="250">
<mx:columns>

</mx:columns>
</mx:DataGrid>

Dentro do bloco de propriedade "columns" você pode definir uma ou mais instâncias "DataGridColumn". Lembre-se que a propriedade dataProvider contém o modelo de dados para esse componente. A coluna mostra a visão desse painel. Em outras palavras, todos os dados são armazenados na propriedade "dataProvider" e você está apenas definindo quais as peças são expostas nestas colunas

12. Dentro do bloco columns, adicione uma instância do controle DataGridColumn.

<mx:DataGrid dataProvider="{empregadoList}" width="250">
<mx:columns>
<mx:DataGridColumn/>
</mx:columns>
</mx:DataGrid>

13. Para o controle DataGridColumn, adicione uma propriedade dataField com valor de primeiroNome e a propriedade headerText com valor de Nome.

<mx:DataGridColumn dataField="primeiroNome"
headerText="Nome"/>

14. Abaixo do controle DataGridColumn, crie outro controle DataGridcolumn e adicione a propriedade dataField com valor de dataDeAdmissao e para a propriedade headerText o valor de "Data de Admissão".

<mx:DataGrid dataProvider="{empregadoList}" width="250">
<mx:columns>
<mx:DataGridColumn dataField="primeiroNome" headerText="Nome"/>
<mx:DataGridColumn dataField="dataAdmissao" headerText="Data de Admissão"/>
</mx:columns>
</mx:DataGrid>

15. Salve e rode a aplicação.

Você deve o controle DataGrid mostrando somente o nome e a coluna de data de admissão como mostrado na Figura 3.

Figura 3:  Rodando a aplicação e vendo o controle DataGrid populado com informações dos empregados e suas respectivas datas de admissão.

II. Formatando dados em um controle DataGrid.

Nesta seção, você usará a função e a propriedade "labelFunction" do controle "DataGridColumn" para formatar o nome do funcionário apresentado na primeira instância DataGridColumn. Você também vai usar um componente "DateFormatter" para formatar a data no segundo controle DataGridColumn .

1. Retorne ao Flash builder.

2. Dentro do bloco de Script, abaixo da variável "empregadoList", crie uma função privada chamada "nomeDoEmpregado" que retorne tipo de dados da classe String.

private function nomeDoEmpregado():String
{

}

3. Na função crie o argumento "item" com tipo de dados da classe Object.

private function nomeDoEmpregado(item:Object):String
{

}

Esta função será chamada para cada linha no controle DataGrid. Cada vez que ele é executado, o controle DataGrid passa todos os dados em que uma linha para a função. Na etapa acima, você está nomeando o item de dados para uso nessa função.

Lembre-se que, por padrão, a coluna DataGrid exibe apenas um campo de dados que corresponda a propriedade "DataField". Você pode usar esta função e, a propriedade do item, para referência a vários campos de dados para exibição na coluna.

4. Para a função crie outro argumento chamado "coluna" e tipo de dados da classe DataGridColumn.

private function nomeDoEmpregado(item:Object, column:DataGridColumn):String
{

}

Esta segunda referência ao argumento "nome" da instância DataGridColumn é que chama essa função.

5. Dentro da função, use a palavra chave "return" para rerornar o valor de item.primeiroNome e item.segundoNome separados por um espaço.

private function nomeDoEmpregado(item:Object, column:DataGridColumn):String
{
return item.primeiroNome + " " + item.ultimoNome;
}

6. Localize o controle DataGrid.

7. Dentro do primeiro controle DataGridColumn, remova a propriedade dataField e seu valor.

8. Para o primeiro controle DataGridColumn, adicione a propriedade labelFunction com valor de "nomeDoEmpregado" e mude o valor de headerText para Nome Completo.

<mx:DataGrid dataProvider="{empregadoList}" width="250">
<mx:columns>
<mx:DataGridColumn labelFunction="nomeDoEmpregado" headerText="Nome Completo"/>
<mx:DataGridColumn dataField="dataAdmissao" headerText="Data de Admissão"/>
</mx:columns>
</mx:DataGrid>

9. Salve e rode a aplicação.

Você deve ver o nome completo do empregado na primeira coluna. Observe que alguns sobrenomes são cortados (veja Figura 4).

Figura 4: Rodando a aplicação e vendo primeiro e último nome do empregado na primeira coluna.

10. Retorne ao exercício ex4_04_inicial.mxml.

11. Dentro do bloco DataGrid, na primeira tag DataGridColumn, adicione a propriedade width com um valor de 135.

<mx:DataGridColumn labelFunction="nomeDoEmpregado"
headerText="Nome Completo" width="135"/>

12. Localize o bloco Declarations.

13. Dentro do bloco Declarations, abaixo do componente HTTPService, crie uma tag DateFormatter.

<fx:Declarations>
<s:HTTPService id="empregadoService"
url="data/empregados.xml"
result="empregadoList=empregadoService.lastResult.empregados.empregado"/>

<mx:DateFormatter />
</fx:Declarations>

A classe DateFormatter afeta a formatação de um elemento visual, mas não é um elemento visual em si, assim é declarado dentro do bloco de declarações.

14. Na tag DateFormatter, atribua a formatadorDeData como id e DD-MM-YY como formatString.

<mx:DateFormatter id="formatadorDeData" formatString="MM-DD-YYYY"/>

15. Dentro do bloco de Script, abaixo da função nomeDoEmpregado(), crie uma função privada chamada formatadorDeData e atribua a ela o retorno do tipo String.

private function formatadorDeData():String
{

}

16. Na função crie um parâmetro chamado item com tipo de dados da classe Object.

private function formatadorDeData(item:Object):String
{

}

17. Nessa função crie outro parãmetro chamado column e tipo de dados da classe DataGridColumn.

private function formatadorDeData(item:Object, column:DataGridColumn):String
{

}

18. Dentro da função formatadorDeData() use o método format() da instância formatadorDeDataAdmissao com uma declaração return que retornará a versão formatada de item.dataDeAdmissao de cada empregado.

private function formatadorDeData(item:Object, column:DataGridColumn):String
{

return formatadorDeDataAdmissao.format(item.dataAdmissao);

}

19. Localize o controle DataGrid.

20. Na segunda tag DataGridColumn, adicione a propriedade labelFunction com valor de formatadorDeData.

<mx:DataGrid dataProvider="{empregadoList}" width="250">
<mx:columns>
<mx:DataGridColumn labelFunction="nomeDoEmpregado" headerText="Nome Completo" width="135"/>
<mx:DataGridColumn dataField="dataAdmissao" headerText="Data de Admissão" labelFunction="formatadorDeData"/>
</mx:columns>
</mx:DataGrid>

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

Você deverá ver o grid agora exibindo o nome e sobrenome do funcionário e data de admissão formatado, como mostrado na Figura 5

Figura 5: Rodando a aplicação e vendo coluna formatada.

III. Criando uma função "label" reutilizável.

Nesta seção, você fará a função DateFormat() se tornar reutilizável pela aplicação do parâmetro "column" no controle DataGridColumn.

1. Retorne ao Flash Builder.

2. Dentro do bloco de Script, localize a função formatadorDeData().

3.Dentro da função, troque o parâmetro dataAdmissao por column e altere a referência da coluna específica para  "item[column.dataField]".

private function formatadorDeData(item:Object, column:DataGridColumn):String
{
return formatadorDeDataAdmissao.format(item[column.dataField]);
}

4. Salve e rode a aplicação.

Você deverá ver que não há nenhuma mudança na aplicação, como mostrado na Figura 5, mas agora você pode reutilizar essa função para qualquer instância DataGridColumn.

Figura 6: Rodando a aplicação e vendo que não houve alteração.

Conhecimentos adquiridos

Neste exercício, você aprendeu como usar e configurar o controle DataGrid. Você também aprendeu como formatar os dados dentro de um controle DataGridColumn usando uma função chamada com a propriedade labelFunction.

Agora você está apto a responder as perguntas abaixo: