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 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 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 Configurar no menu de contexto. A janela Configurar Lista de Dados é aberta.

    Se aparecer uma mensagem de aviso dizendo 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 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 Condições desta janela, clique na guia 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 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 Opções de Exibição na lista de tags à esquerda.
  4. No campo Linhas por página, digite 5.
  5. Clique em 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 Painel - Caixa de Grupo da gaveta Componentes Faces da Paleta para a coluna TITLE da tabela de dados. A janela Selecionar Tipo é aberta.
  2. Escolha 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 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 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 Tamanho da visualização Propriedades para definir a Largura para 60 pixels e a 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 Básico da visualização Propriedades, clique no botão Selecionar Objeto de Dados da Página junto ao campo 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 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 Colunas para esta caixa de grupo como 2.
  5. Solte um componente de 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 Saída (ele aparece no Page Designer como outputText) e utilize a visualização Propriedades para designá-lo como um 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 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 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 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 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 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 Editar > 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 Remover.

  15. Clique no cabeçalho da coluna Descrição e utilize a visualização Propriedades para alterar seu campo de 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 Todos os Atributos na parte superior da visualização Propriedades.
  4. Em 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 Selecionar Classe que aparece no campo 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 Nome do Atributo e, em seguida, clique no botão Selecionar Classes no campo 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.

Termos de Uso | Feedback
(C) Copyright IBM Corporation 2000, 2004. Todos os Direitos Reservados.