Exercício 2.5: Ligando Dados e Personalizando a Exibição
Antes de iniciar, você deve concluir o Exercício 2.4: Configurando o Componente Grade de Dados.
Ligando os Dados e Personalizando a Exibição
Você deseja exibir as posições do portfólio (as ações compradas) na Grade de Dados para que o usuário possa visualizar o conteúdo de um determinado portfólio, paginar os dados, classificar os dados e editar quantidades para executar algum trabalho de análise simples.
- Na visualização Dados de Cliente, navegue para o nó raiz.usuários.portfólios.posições e arraste-o para a Grade de Dados na visualização Design. A Grade de Dados será automaticamente configurada para exibição de dados básicos para todos os campos da classe Posição.

- Assegure-se de que a Grade de Dados esteja selecionada e, em seguida, clique na guia Colunas na visualização Propriedades sob odc:dataGrid para personalizar as colunas. Você pode reorganizar a ordem das colunas utilizando os
botões Para Cima e Para Baixo. Também é possível incluir ou remover colunas utilizando os botões Incluir e Remover. Ao selecionar uma linha, você pode digitar um rótulo, largura e valor para o cabeçalho da coluna. Por padrão, o valor do atributo é utilizado como o cabeçalho da coluna.
Para este tutorial:
- Remova o atributo refNum.
- Reordene as colunas de uma maneira que faça sentido para você.
- Digite cabeçalhos das colunas mais descritivos.
- Selecione alguma célula na Grade de Dados e selecione a guia Detalhes da Coluna na visualização Propriedades. O conteúdo das guias da visualização Propriedades é dinâmico e alterado automaticamente para refletir a coluna selecionada. Na guia Coluna, você pode:
- Configurar o Cabeçalho da Coluna (que também era possível na guia Lista de Colunas)
- Especificar o alinhamento da coluna
- Especificar a largura (em pixels) da coluna
- Especificar se a coluna deve mostrar dados de leitura ou campos editáveis
- Especificar se o conteúdo das células na coluna deve, ou não, ser sublinhado, uma vez que uma dica visual para o usuário que está clicando produzirá algum comportamento especial
Para este tutorial:
- Escolha o alinhamento à direita para
quantidade, preço e data de compra
.
- Selecione O conteúdo da coluna é editável para
quantidade
.
- Você também pode configurar o modo como as colunas individuais são exibidas. Clique na guia Detalhes da Coluna e você verá uma lista Formato com quatro opções:
- Cadeia é um campo básico sem formatação, mesmo se os dados subjacentes ao campo forem um número ou uma data
- Número formata a coluna como um número, especificando, por exemplo, o estilo e o formato
- Data/Hora permite personalizar um formato de data, hora ou data/hora
- Máscara permite criar uma máscara de entrada
Para este tutorial:
- Defina a coluna
Data de Compra
como Data/Hora.É importante que, se estiver exibindo uma data em um Grade de Dados, você realmente defina a coluna para ser formatada como uma Data. Caso contrário, o número de milissegundos desde 1 de janeiro de 1970, 00:00:00 GMT será exibido porque é a representação interna de objetos Data no Java ou JavaScript.
- Defina as colunas
preço
e quantidade
como Número.
Configurando e Gerenciando Rotinas de Tratamento de Eventos
As Rotinas de Tratamento de Eventos para os Componentes Faces Client são gravadas por meio da Visualização Edição Rápida. Para os componentes Grade de Dados ou Árvore, você pode utilizar as rotinas de tratamento de eventos incluídas ou gravar suas próprias rotinas de tratamento de eventos personalizadas. Há duas rotinas de tratamento de eventos incluídas:
- Definir objeto selecionado como raiz no componente de destino - Essa rotina de tratamento obtém o objeto selecionado no controle atual (opcionalmente, uma referência específica nesse objeto) e o torna o objeto raiz no controle de destino. Para esse tipo de rotina de tratamento de eventos, o controle de destino pode ser qualquer Componente Faces Client, exceto Serviço da Web e os componentes JavaServer Faces padrão suportados pelo Faces Client, que estejam ligados ao mesmo tipo de objeto que aquele a partir do qual o evento se originou. A lista de controles de destino possíveis é mostrada no diálogo de configuração que aparece. Utilize essa rotina de tratamento de eventos quando desejar que o objeto selecionado na Visualização em Árvore (origem) determine o que é mostrado na Grade de Dados (destino). Essa rotina de tratamento não altera valores de dados da origem de dados, mas define o que é exibido no controle selecionado.
- Ligar o objeto selecionado a outro objeto - Essa rotina de tratamento obtém o valor do objeto selecionado (opcionalmente, uma referência específica dentro desse objeto) e o liga a um outro objeto de dados. Essa rotina de tratamento de eventos define os valores de dados armazenados em um objeto de dados, por exemplo, um Java bean, um registro do banco de dados relacional, etc. Por exemplo, na amostra portfólio do Faces Client, quando um usuário escolhe uma ação específica da Grade de Dados, os valores dos campos nesse objeto ação são copiados para o objeto de dados placeHolderStock, que é posteriormente utilizado como um parâmetro de entrada para o Serviço da Web. A rotina de tratamento altera o valor armazenado nesse objeto.
Se você selecionar a Grade de Dados, a visualização QuickEdit mostrará os seguintes eventos:
- onhighlight
- Esse evento é chamado quando uma linha é realçada pelo usuário e permite que o desenvolvedor implemente lógica arbitrária em resposta. Por exemplo, causando alguma computação, um URL a ser chamado ou alterações em uma página.
- onselect
- Esse evento é chamado quando uma linha é selecionada. A seleção de linha deve estar ativada para que o evento seja disparado.
- onunselect
- Esse evento é chamado quando uma linha é desmarcada. Ele deve ter sido selecionado antes e a seleção de linha deve estar ativada para que esse evento seja disparado.
Nota: Quando você selecionar um evento na visualização QuickEdit e clicar no painel do código, verá alguns comentários que explicam a finalidade do evento e, o mais importante, seus parâmetros e o tipo e valor de retorno esperados.
Editando os Estilos
Se você precisar personalizar a aparência e o comportamento da Grade de Dados, edite o CSS (Cascading Style Sheet) padrão denominado datagrid.css. O arquivo está disponível em seu projeto no Project Navigator em /WebContent/theme/datagrid.css. Aprender Mais sobre Estilos de Componente.
Agora você está pronto para iniciar o Exercício 2.6: Testando no Servidor.