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
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.
- Dê um clique duplo na página all_records.jsp na visualização Explorador de Projetos.
- Clique na coluna Maincategory na tabela de dados.
- Na visualização Propriedades, altere o campo de texto Value (Valor) de Maincategory para Categoria.
- Se quiser, renomeie as outras colunas.
- Salve a página.
Formatando Componentes de Saída JSF
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.
- Clique no componente de saída {PRICE} na página.
- Na visualização Propriedades, altere o Tipo de Decimal para Currency (Moeda).
- 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.
- Salve a página.
Ordenando 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.
- 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.
- Na guia Conditions (Condições) desta janela, clique na guia Order by (Ordenar por).
- Na área de janela Colunas Disponíveis, clique em MAINCATEGORY.
- Clique no botão > para mover a coluna MAINCATEGORY para a área de janela Ordenar por.
A janela deve ser semelhante à seguinte:

- 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
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.
- Clique em qualquer lugar dentro da tabela de dados.
- Na visualização Propriedades, clique em h:dataTable na lista de tags HTML à esquerda da visualização.
- Na visualização Propriedades. clique em Display options (Opções de Exibição) na lista de tags à esquerda.
- No campo Rows per page (Linhas por página), digite 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.
- 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
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.
- 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.
- 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.
- Clique na caixa de grupo para selecioná-la.
- Utilizando a visualização Propriedades, altere a Orientation (Orientação) para Vertical.
- 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.
- 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.
- Clique no componente de imagem recém-incluído.
- 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.
- 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.
- Na guia Basics (Básicos) da visualização Propriedades, clique no 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.
- Clique no símbolo + para expandir a lista de registros relacionais all_recordlist.
- Clique em IMAGETYPE (String).
- Clique em OK.
- Salve a página.
Sua página agora deve ser semelhante a esta:

Dispondo os Componentes em uma Caixa de Grupo como uma Grade
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.
- 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.
- Clique em Grid (Grade) como o tipo de componente a incluir e clique em OK.
- Clique na nova caixa de grupo de grade.
- Utilize a visualização Propriedades para definir o número de Columns (Colunas) para esta caixa de grupo como 2.
- 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.
- 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:.
- 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.
- Arraste outro componente de Output (Saída) da Paleta e solte-o no lado direito da
caixa de grupo.
- Utilize a visualização Propriedades para designar a ela um Value (Valor) de Preço:.
- Arraste o componente de saída {PRICE} existente à direita da texto de saída Preço.
- Da mesma maneira, arraste um novo componente Output (Saída) para a etiqueta do componente {PHONE} e rotule-o como Fone:.
- 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:

- 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
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.
- 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).
- 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:

- Salve a página.
Aplicando Regras de Folha de Estilo
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.
- Selecione a tabela de dados, clicando em um dos cabeçalhos das colunas.
- Na visualização Propriedades, clique em h:dataTable.
- Clique no botão All Attributes (Todos os Atributos)
na parte superior da visualização Propriedades.
- 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.
- 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.
- Expanda a folha de estilo e clique em .columnHeaderClass.
- Clique em OK.

- 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.
- 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.
- Clique em OK.
- 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:

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.