Exercício 2.4: Configurando o Componente Grade de Dados
Antes de iniciar, você precisa concluir o Exercício 2.3: Criando e Configurado Dados do Lado Cliente.
O componente Grade de Dados do Faces Client permite classificar, filtrar, paginar e geralmente manipular o lado cliente dos dados, sem causar atualizações de página. A Grade de Dados é totalmente orientada por metadados e processa o conteúdo de suas células inteiramente no navegador.
Inserindo o Componente Grade de Dados
- Assegure-se de que seu arquivo JSP esteja aberto. Embora você possa excluir o texto de marcador, certifique-se de não excluir a tag de dados de cliente representada por uma caixa de linha pontilhada.

- Na visualização Paleta, abra a gaveta Componentes Faces Client, clicando nela.
- Arraste o componente Grade de Dados e solte-o em qualquer lugar na visualização Design.

Definindo as Propriedades
Embora existam muitos recursos da Grade de Dados que possam ser personalizados, para este tutorial nós alteraremos apenas alguns.
- Na visualização Propriedades, clique na guia odc:dataGrid.
- Para configurar o número de linhas que você deseja que apareça, altere o atributo altura. Para este tutorial, digite um valor
5
.
- Especifique um filtro de linha, que é uma expressão JavaScript que retorna um valor Booleano para indicar ao componente Grade de Dados se uma linha deve ser mostrada. Para este tutorial, deixe-o vazio.
- Especifique a largura da tabela. Selecione 90%.
- Especifique se a Grade de Dados é ou não editável, permitindo que um usuário exclua linhas (e seus objetos correspondentes na estrutura de dados) ou inclua novas linhas (e insira o novo objeto na estrutura de dados). Para o tutorial, deixe As linhas podem ser incluídas/excluídas desmarcadas.
- Configure onde você deseja ver a barra de navegação, que oferece ao usuário a capacidade de paginar os dados Selecione Mostrar Barra de Rodapé para este tutorial.
- Ative a seleção de linha, especificando se a coluna de seleção deve ser mostrada e configure sua aparência: o rótulo para seu cabeçalho (Selecionar), alinhamento (Central), largura (30 pixels) e se os botões de opções ou caixas de opções devem ser utilizados (selecione Permitir Várias Opções para criar caixas de opções).
- Selecione Mostrar Número de Linha para ativar uma coluna de índice de linha que torna mais fácil para um usuário ver quantas linhas existem no conjunto de dados e quais linhas estão sendo exibidas (linha 6 a 10, por exemplo) em um dado momento.

Agora você está pronto para iniciar o Exercício 2.5: Ligando Dados e Personalizando a Exibição.