Lição 2.1: Formatar uma Tabela de Dados

1. Dê um clique duplo na página all_records.jsp na visualização Explorador de Projetos (Project 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.

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.

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

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.

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

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

Quaisquer anuncios que não possuem uma imagem associada exibirá 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 anuncio.

Você concluiu a Lição 2.1. Na lição, você aprendeu como formatar a tabela de dados de diversas formas.