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.

  1. 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.
    Grade de Dados Ligada
  2. 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:
    1. Remova o atributo refNum.
    2. Reordene as colunas de uma maneira que faça sentido para você.
    3. Digite cabeçalhos das colunas mais descritivos.
  3. 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: Para este tutorial:
    1. Escolha o alinhamento à direita para quantidade, preço e data de compra.
    2. Selecione O conteúdo da coluna é editável para quantidade.
  4. 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: Para este tutorial:
    1. 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.
    2. 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:

  1. 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.
  2. 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.

Termos de Utilização | Feedback
(C) Copyright IBM Corporation 2000, 2005. Todos os Direitos Reservados.