É 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.
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.
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.
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.
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.
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.
A janela deve ser semelhante à seguinte:
Agora os dados serão ordenados por categoria. É possível classificar por qualquer coluna no banco de dados.
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.
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.
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.
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.
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.
Sua página agora deve ser semelhante a esta:
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.
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.
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.
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.
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.
A página deve ser semelhante a esta:
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.
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.
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:
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.