Exercício 2.2: Formatando uma Tabela de Dados

É preciso concluir todo o Módulo 1: Criando páginas da Web com conexões de dados ou o Exercício 2.1: Importando os recursos necessários antes de poder iniciar a formatação da 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 coisas tais como um paginador, regras de estilo e imagens dos itens à venda.

Renomeando Cabeçalhos de Colunas

Mostre-me

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 de Projetos.
  2. Clique na coluna Maincategory na tabela de dados.
  3. Na visualização Propriedades, altere o campo de texto Value (Valor) de Maincategory para Categoria.
  4. Se quiser, renomeie as outras colunas.
  5. Salve a página.

Formatando Componentes de Saída JSF

Mostre-me

Também é possível formatar os componentes de saída. Nestas etapas, você formatará o componente de saída {PRICE} para aparecer como um valor monetário em vez de como um número comum.

  1. Clique no componente de saída {PRICE} na página.
  2. Na visualização Propriedades, altere o Tipo de Decimal para Currency (Moeda).
  3. 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, como um número de telefone.

  4. Salve a página.

Ordenando os Dados

Mostre-me

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 e clique em Configure (Configurar) no menu de contexto. A janela Configurar Lista de Dados é 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 em Parando o Servidor no Exercício 1.3: Testando o Web Site.

  2. Na guia Conditions (Condições) desta janela, clique na guia Order by (Ordenar por).
  3. Na área de janela Colunas Disponíveis, clique em MAINCATEGORY.
  4. Clique no botão > para mover a coluna MAINCATEGORY para a área de janela Ordenar por.

    A janela deve ser semelhante à seguinte:

    Janela Configurar Lista de Dados

  5. Clique em Close (Fechar) para aplicar as alterações à ordem.

    Agora os dados serão ordenados por categoria. É possível classificar por qualquer coluna no banco de dados.

Incluindo um Paginador

Mostre-me

Em vez de exibir todos os registros de um só vez na tabela de dados, você pode 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, clique em h:dataTable na lista de tags HTML à esquerda da visualização.
  3. Na visualização Propriedades. clique em Display options (Opções de Exibição) na lista de tags à esquerda.
  4. No campo Rows per page (Linhas por página), digite 5.
  5. Clique em Add a web style pager (Incluir um paginador de estilo de Web). 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.

Dispondo os Componentes em uma Caixa de Grupo como uma Lista

Mostre-me

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 uma 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. Arraste um componente Panel (Painel) - Group Box (Caixa de Grupo) da gaveta Componentes Faces da Paleta para a coluna TITLE da tabela de dados. A janela Selecionar Tipo é aberta.
  2. Escolha List (Lista) como o tipo da caixa de grupo na janela Selecionar Tipo e clique em OK.

    Uma caixa de grupo de lista dispõe os componentes colocados dentro dela em um única coluna ou linha e pode ser orientada verticalmente ou horizontalmente.

  3. Clique na caixa de grupo para selecioná-la.
  4. Utilizando a visualização Propriedades, altere a Orientation (Orientação) para Vertical.
  5. Arraste o componente {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 Image (Imagem) da gaveta Componentes Faces 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 Size (Tamanho) da visualização Propriedades para definir a Width (Largura) para 60 pixels e a Height (Altura) 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 PHOTO de all_recordlist, arrastando a coluna PHOTO da visualização Dados da Página para o componente de imagem. Isso fará com que o componente de imagem exiba os dados de imagem localizados na coluna PHOTO de cada registro.
  10. Na guia Basics (Básicos) da visualização Propriedades, clique no botão Select Page Data Object (Selecionar Objeto de Dados da Página) botão Select Page Data Object (Selecionar Objeto de Dados da Página) próximo ao campo Type (Tipo). A janela Selecionar Objeto de Dados da Página será aberta.
  11. Clique no símbolo + para expandir a lista de registros relacionais all_recordlist.
  12. Clique em IMAGETYPE (String).
  13. Clique em OK.
  14. Salve a página.

    Sua página agora deve ser semelhante a esta:

    Aparência da Página Atual

Dispondo os Componentes em uma Caixa de Grupo como uma Grade

Mostre-me

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 da gaveta Componentes Faces da Paleta para a coluna DESCRIPTION da tabela de dados. A janela Selecionar Tipo é aberta.
  2. Clique em Grid (Grade) 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 para definir o número de Columns (Colunas) para esta caixa de grupo como 2.
  5. Solte um componente de Output (Saída) 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 Output (Saída) (ele aparece no Page Designer como outputText) e utilize a visualização Propriedades para designá-lo como um Value (Valor) de Descrição:.
  7. Arraste o componente existente {DESCRIPTION} da página 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 Output (Saída) da Paleta e solte-o no lado direito da caixa de grupo.
  9. Utilize a visualização Propriedades para designar a ela um Value (Valor) de Preço:.
  10. Arraste o componente de saída {PRICE} existente à direita da texto de saída Preço.
  11. Da mesma maneira, arraste um novo componente Output (Saída) para a etiqueta do componente {PHONE} e rotule-o como Fone:.
  12. Arraste o componente existente {PHONE} para a caixa de grupo em grade à direita do texto de saída Telefone. A página agora deve ser semelhante a esta:

    Aparência da Página Atual

  13. Arraste o hyperlink Update Listing (Atualizar Listagem) existente e solte-o na coluna DESCRIPTION, mas não dentro da caixa de grupo de grade.

    A melhor maneira de fazer isso é clicar e segurar o próprio ícone do link ícone do link e arrastá-lo diretamente para baixo da caixa de grupo de grade. Dessa maneira, tanto a etiqueta do texto quanto o ícone do link se moverão, mantendo o link funcional. Se somente o link ou somente o texto se mover, o link não funcionará mais. Se isso acontecer, clique em Edit (Editar) > Undo (Desfazer) na barra de menus e tente novamente.

  14. Exclua as colunas vazias PRICE, PHONE e UPDATE da tabela de dados.

    Para excluir uma coluna, clique na coluna e abra a visualização Propriedades. 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 Remove (Remover).

  15. Clique no cabeçalho da coluna Descrição e utilize a visualização Propriedades para alterar seu campo de Value (Valor) para Detalhes.

    A página deve ser semelhante a esta:

    Aparência da Página Atual

  16. Salve a página.

Aplicando Regras de Folha de Estilo

Mostre-me

Não só as CSSs (Cascading Style Sheets) são uma das melhores maneiras de controlar a aparência e o comportamento de um site, elas também podem controlar a aparência e o comportamento dos componentes JavaServer Faces individuais. Na próxima seção, você utilizará o arquivo CSS fornecido no projeto para alterar a aparência dessa página. Especificamente, você aplicará uma regra aos cabeçalhos de colunas e aplicará duas regras às linhas para criar um efeito de cor alternativo que distinguirá cada linha na tabela de dados.

  1. Selecione a tabela de dados, clicando em um dos cabeçalhos das colunas.
  2. Na visualização Propriedades, clique em h:dataTable.
  3. Clique no botão All Attributes (Todos os Atributos) na parte superior da visualização Propriedades.
  4. Em Attribute Name (Nome do Atributo), clique no item headerClass. Essa configuração controla a aparência da linha de cabeçalho da tabela de dados.
  5. Em seguida, clique no botão Select Class (Selecionar Classe) que aparece no campo Value (Valor) por headerClass.

    A janela Selecionar Classe é aberta, mostrando todos os estilos disponíveis nas folhas de estilo do projeto. Atualmente, existe somente uma folha de estilo neste projeto.

  6. Expanda a folha de estilo e clique em .columnHeaderClass.
  7. Clique em OK.

    Janela Selecionar Classe

  8. Em seguida, clique no item rowClasses em Attribute name (Nome do Atributo) e, em seguida, clique no botão Selecionar Classes no campo Value (Valor) para abrir novamente a janela Selecionar Classes. A opção rowClasses controla como as linhas na tabela de dados aparecerão.
  9. Expanda a folha de estilo e, desta vez, escolha as regras .rowClass1 e .rowClass2, pressionando a tecla Ctrl enquanto clica nelas. Essas duas regras têm esquemas de cores diferentes e selecionar ambas resultará em cores de linhas alternadas.
  10. Clique em OK.
  11. Finalmente, salve a página e execute-a no servidor de teste.

    Se você não estiver familiarizado com a execução de aplicativos no servidor, consulte o Exercício 1.3: Testando o Web Site.

    Quando você testar a página, ela deverá ser semelhante a esta:

    Aparência da Página Atual

Agora você sabe alguns truques que poderá utilizar para transformar uma tabela de dados em algo um pouco mais interessante.

Você agora está pronto para iniciar o Exercício 2.3: Utilizando o Componente Upload de Arquivo.

Feedback
(C) Copyright IBM Corporation 2000, 2005. Todos os Direitos Reservados.