< Anterior | Próximo >

Lição 2.1: Formatar uma Tabela de Dados

A tabela de dados na página all_records.jsp tem uma aparência utilitária. Ela exibe todos os registros no banco de dados e links para as outras páginas como foi projetada para fazer, mas não é muito atraente. Neste exercício, você melhorará essa tabela de dados incluindo um paginador, regras de estilo e imagens dos itens à venda.

Renomear Cabeçalhos de Coluna

Em muitos casos, você não deseja que os cabeçalhos das colunas em sua tabela de dados sejam os nomes exatos das colunas do banco de dados. As etapas a seguir mostram como renomear os cabeçalhos das colunas da tabela de dados para algo mais apropriado.
  1. Dê um clique duplo na página all_records.jsp na visualização Explorador Corporativo (Enterprise Explorer)
  2. Clique na coluna Categoria Principal (Maincategory) na tabela de dados.
  3. Na visualização Propriedades (Properties), clique na guia h:outputText e altere o campo de texto Valor (Value) de Categoria Principal para Categoria.
  4. Se quiser, renomeie as outras colunas.
  5. Salve a página.

Formatar Componentes de Saída

Também é possível formatar os componentes de saída. Nestas etapas, você formatará o componente de saída {PREÇO (PRICE)} para aparecer como um valor monetário em vez de como um número comum.
  1. Clique no componente de saída {PREÇO (PRICE)} na página.
  2. Na visualização Propriedades (Properties), localize o menu drop-down Tipo (Type) e selecione Moeda (Currency). Agora, o preço de cada item será mostrado no estilo de moeda em vez de como um número comum. Outros estilos e formatos estão disponíveis para diferentes tipos de dados tais como percentagens, datas e horas. Também é possível personalizar o formato de um componente de saída para mostrar um tipo de dados não relacionado na visualização Propriedades (Properties), como um número de telefone.
  3. Salve a página.

Classificar os Dados

Neste momento, os dados não estão relacionados em nenhuma ordem. Para fornecer aos usuários uma lista mais organizada de anúncios, ordene a lista de registros por categoria de modo que itens semelhantes sejam agrupados juntos.
  1. Clique com o botão direito do mouse em all_recordlist (ADS) na visualização Dados da Página (Page Data) (Janela (Window) > Mostrar Visualização (Show View) > Dados da Página (Page Data)) e clique em Configurar (Configure) no menu de contexto. A janela Configurar Lista de Registros Relacionais (Configure Relational Record List) é aberta. Se aparecer uma mensagem de aviso instruindo que não foi possível estabelecer uma conexão ao banco de dados, você deixou o servidor em execução depois de testar o Web site. Se isso acontecer, clique em Cancel (Cancelar) em cada diálogo e pare o servidor conforme explicado na seção "Parando o Servidor" em Testando o Web site.
  2. Selecione Recuperar registro existente ou lista de registros do escopo (Retrieve existing record or record list from scope) e Reutilizar definição de metadados de um registro existente ou de uma lista de registros (Reuse metadata definition from an existing record or record list) e, em seguida, clique em Avançar (Next).
  3. Na próxima janela, clique para selecionar o ADS e, em seguida, clique em Avançar (Next).
  4. No lado direito da próxima janela, clique em Ordenar Resultados (Order results). A janela Pedidos (Orders) será aberta.
  5. Na área de janela Colunas Disponíveis, clique em CATEGORIA PRINCIPAL (MAINCATEGORY).
  6. Clique no botão > para mover a coluna CATEGORIA PRINCIPAL (MAINCATEGORY) para a área de janela Ordenar por (Order by). A janela deve ser semelhante a esta:
    Ordenar por guia na janela Configurar Lista de Registros Relacionais (Configure Relational Record List).
  7. Clique em Fechar (Close) para fechar a janela Pedidos (Orders).
  8. Clique em Concluir (Finish) para aplicar as alterações. Agora os dados serão ordenados por categoria. É possível classificar por qualquer coluna no banco de dados.

Incluir um Paginador

Em vez de exibir todos os registros de um só vez na tabela de dados, é possível utilizar um paginador. Um paginador divide automaticamente os registros em páginas de um tamanho definido sem criar nenhum novo arquivo JSP no projeto.
  1. Clique em qualquer lugar dentro da tabela de dados.
  2. Na visualização Propriedades (Properties), clique em h:dataTableEx na lista de tags HTML à esquerda da visualização.
  3. Clique na guia Opções de exibição (Display options) em h:dataTableEx.
  4. No campo Linhas por página (Rows per page), digite 5.
  5. Clique no botão próximo a Incluir um Paginador de Estilo da Web (Add a web style pager). Uma imagem de como o paginador aparecerá é exibida na parte inferior da tabela de dados. A visualização do paginador no Page Designer é uma imagem simulada e não reflete exatamente quantas páginas serão exibidas, já que isto somente poderá ser determinado quando a página for carregada em um navegador.
  6. Salve a página. Você pode fazer experiências com os diferentes estilos de paginadores e o componente de estatísticas de páginas para encontrar o melhor ajuste para a página, se quiser.

Dispor os Componentes em uma Caixa de Grupo como uma Lista

Em vez de ter exatamente um componente de saída em cada coluna da tabela de dados, é possível combinar elementos dentro de colunas para produzir um layout mais atraente. Você utilizará uma caixa de grupo para organizar os componentes de maneira semelhante à utilização de uma tabela HTML oculta. Especificamente, depois de incluir o componente de imagem para melhorar o site visualmente, você tomaria a maioria das informações de texto sobre cada anúncio e as colocaria em uma única coluna da tabela de dados, que seria então chamada DETAILS.
  1. Clique na gaveta Componentes Faces Avançados (Enhanced Faces Components) na Paleta para abri-la. Arraste um componente Painel - Caixa de Grupo (Panel - Group Box) para a coluna TÍTULO (TITLE) da tabela de dados. A janela Selecionar Tipo (Select Type) é aberta.
  2. Escolha Caixa (Box) como o tipo da caixa de grupo na janela Selecionar Tipo (Select Type) e clique em OK. Essa caixa de grupo dispõe os componentes colocados dentro dela em um única coluna ou linha e pode ser orientada vertical ou horizontalmente.
  3. Clique na caixa de grupo para selecioná-la.
  4. Utilizando a gaveta Componentes Faces Avançados (Enhanced Faces Components) Propriedades, altere a Orientação (Orientation) para Vertical.
  5. Arraste o componente {TÍTULO (TITLE)} para a caixa de grupo de lista. O texto de instrução na caixa de grupo desaparece depois que você inclui um componente nela.
  6. Arraste um componente Imagem (Image) da gaveta Componentes Faces Avançados (Enhanced Faces Components) da Paleta para a caixa de grupo de lista. É aconselhável soltar o componente de imagem na borda inferior da caixa de grupo para garantir que a imagem seja posicionada abaixo do título.
  7. Clique no componente de imagem recém-incluído.
  8. Utilize área Tamanho (Size) da visualização Propriedades (Properties) para definir a Largura (Width) para 60 pixels e a Altura (Height) para 50 pixels. Isso garante que, não importa de que tamanho as imagens sejam no banco de dados, elas sempre aparecem como 60x50 na página.
  9. Ligue o componente de imagem à coluna FOTO (PHOTO) de all_recordlist, arrastando a coluna FOTO (PHOTO) da visualização Dados da Página (Page Data) para o componente de imagem. Isso fará com que o componente de imagem exiba os dados de imagem localizados na coluna FOTO (PHOTO) de cada registro.Se a coluna PHOTO (ByteArray) não estiver listada, clique com o botão direito do mouse em all_recordlist (ADS) na visualização Dados da Página (Page Data) e selecione Configurar (Configure) no menu. Clique em OK para fechar a janela da URL, se estiver aberta. Na janela Configurar Lista de Registros Relacionais (Configure Relational Record List), clique em Avançar (Next). Selecione o ADS e, em seguida, clique em Avançar (Next). Clique para marcar a caixa próxima a FOTO (ByteArray) (PHOTO (ByteArray)) e em seguida, clique em Concluir (Finish).
  10. Clique no gráfico inserido. Na guia hx:graphicImageEx da visualização Propriedades (Properties), clique no botão Selecionar Objeto de Dados da Página (Select Page Data Object) próximo ao campo Tipo (Type). A janela Selecionar Objeto de Dados da Página (Select Page Data Object) será aberta.
  11. Clique para expandir all_recordlist (Objeto de Dados do Serviço) > all_recordlist (ADS).
  12. Clique em TIPO DE IMAGEM (IMAGETYPE) (Cadeia).
  13. Clique em OK e salve a página.
Sua página agora deve ser semelhante a esta:
Aparência atual da página (Current page appearance).

Refinar Layout com uma Grade da Caixa de Grupo

Uma caixa de grupo também pode organizar componentes em um formato semelhante a uma tabela. Uma caixa de grupo do tipo lista somente pode ter uma linha ou coluna, mas uma caixa de grupo de tipo grade pode ter qualquer número de linhas e colunas. Nestas etapas, você moverá os componentes {PRICE} e {PHONE} para a coluna DESCRIPTION da tabela de dados e incluirá etiquetas para eles.
  1. Arraste um componente Painel - Caixa de Grupo (Panel - Group Box) da gaveta Componentes Faces Avançados (Enhanced Faces Components) da Paleta para a coluna DESCRIÇÃO (DESCRIPTION) da tabela de dados. A janela Selecionar Tipo (Select Type) é aberta.
  2. Clique em Grade (Grid) como o tipo de componente a incluir e clique em OK.
  3. Clique na nova caixa de grupo de grade.
  4. Utilize a visualização Propriedades (Properties) para configurar o número de Colunas (Columns) para esta caixa de grupo como 2.
  5. Solte um componente de Saída (Output) da gaveta Componentes Faces da Paleta na caixa de grupo de grade. Esse componente de saída será uma etiqueta para a descrição do item à venda. Cada componente de saída terá uma etiqueta como essa na célula esquerda da tabela.
  6. Clique no componente Saída (Output) (ele aparece no Page Designer como outputText) e utilize a visualização Propriedades (Properties) para designá-lo como um Valor (Value) de Descrição: (Description:)
  7. Arraste o componente existente {DESCRIÇÃO (DESCRIPTION)} até a borda inferior da caixa de grupo em grade. Se tiver dificuldade em arrastar os componentes para o lugar certo na caixa de grupo, tente manter o botão do mouse pressionado e observar o cursor. A localização do cursor na caixa de grupo indica onde o componente aparecerá quando você soltar o botão do mouse. Para este exercício, você deve soltar o botão do mouse quando o cursor estiver à direita do componente anterior.
  8. Arraste outro componente de Saída (Output) da Paleta e solte-o no lado direito da caixa de grupo.
  9. Utilize a visualização Propriedades (Properties) para designar a ela um Valor (Value) de Preço:.
  10. Arraste o componente de saída {PREÇO (PRICE)} existente à direita da texto de saída Preço.
  11. Da mesma maneira, arraste um novo componente Saída (Output) para a etiqueta do componente {FONE (PHONE)} e rotule-o como Telefone: (Phone:).
  12. Arraste o componente existente {FONE (PHONE)} para a caixa de grupo em grade à direita do texto de saída Fone (Phone). Sua página agora deve ser semelhante a esta:
    Aparência atual da página (Current page appearance).
  13. Exclua as colunas vazias PREÇO (PRICE), FONE (PHONE) da tabela de dados. Para excluir uma coluna, clique na coluna e abra a visualização Propriedades (Properties). Em seguida, clique em h:dataTable na lista de tags HTML à esquerda da visualização, selecione a coluna que você deseja excluir da lista à direita da visualização e clique em Remover (Remove).
  14. Clique no cabeçalho da coluna Descrição e utilize a visualização Propriedades (Properties) para alterar seu campo de Valor (Value) para Detalhes. A página deve ser semelhante a esta:
    Aparência atual da página (Current page appearance).
  15. Salve a página e teste-a. Se você não estiver familiarizado com a execução de aplicativos no servidor, consulte Lição 1.3: Testar o Web site.
Quando você testar a página, ela deverá ser semelhante a esta:
Aparência atual da página durante o teste (Current page appearance during testing).

Quaisquer anúncios que não possuem uma imagem associada exibirão um link inválido. Na próxima lição, você aprenderá como incluir um componente de upload de arquivo à página, para incluir ou alterar uma imagem do anúncio.

Ponto de Verificação da Lição

Você concluiu a Lição 2.1. Na lição, você aprendeu como formatar a tabela de dados de diversas formas.
Você aprendeu como:
  • Alterar os títulos da coluna.
  • Classificar os dados na tabela.
  • Incluir um paginador para decompor os dados em diversas páginas da Web menores.
  • Usar caixas de grupo de diversas formas para alterar o layout da tabela na página da Web.
< Anterior | Próximo >
Feedback