Exercício 1.2: Trabalhando com os Componentes Lista de Registros Relacionais e Tabela de Dados

Antes de iniciar, você precisa concluir o Exercício 1.1: Importando os Recursos Necessários.

O Web site da amostra utiliza páginas dinâmicas da Web para acessar origens de dados, como bancos de dados, e exibir informações dessas origens de dados na página. Neste exercício, você irá configurar a página all_records.jsp para exibir todos os anúncios classificados no banco de dados. Nos próximos exercícios, você irá conectar as outras páginas ao banco de dados para poder criar novos anúncios classificados, editar anúncios antigos e mostrar uma lista filtrada de anúncios.

Este tutorial utiliza dois componentes que conectam páginas a bancos de dados utilizando Java Server Faces: registros relacionais e listas de registros relacionais. Esses componentes representam os dados em um banco de dados para que os dados possam ser exibidos na página em forma de uma tabela de dados ou de uma tabela HTML comum. Esses componentes utilizam JavaBeans de acesso a dados; Aprender Mais sobre Beans de Acesso a Dados ou Aprender Mais sobre JavaServer Faces e Componentes Faces.

Criar uma Nova Lista de Registros Relacionais

Mostre-me

Nestas etapas, você criará uma lista de registros relacionais para representar todos os anúncios classificados no banco de dados. Em seguida, você se conectará ao banco de dados e selecionará a tabela que contém as informações de que você necessita na lista de registros relacionais. Por último, você exibirá essa lista de registros relacionais na página em uma tabela de dados.

  1. Na visualização Explorador de Projetos, expanda Projetos Dinâmicos da Web > ClassifiedsTutorial > WebContent.
  2. Na pasta WebContent, dê um clique duplo em all_records.jsp. O arquivo all_records.jsp é aberto no editor.
  3. Exclua o texto padrão Coloque o conteúdo aqui.
  4. Na visualização Paleta, clique na gaveta Dados para expandi-la.
  5. Arraste o componente Lista de Registros Relacionais da Paleta para a área de conteúdo em branco.

    Você pode ser avisado para salvar o arquivo all_records.jsp. Neste caso, clique em OK.

    A janela Incluir Lista de Registros Relacionais é aberta.

  6. No campo Nome, digite all_recordlist.

    Os nomes de listas de registros relacionais e de registros relacionais devem respeitar as convenções de nomenclatura padrão Java para nomes de variáveis (por exemplo, não podem conter espaços).

  7. Certifique-se de que a caixa Incluir controles de dados esteja marcada.

    Quando a caixa Incluir controles de dados estiver marcada, o assistente criará uma tabela de dados para exibir a lista de registros na página. Caso contrário, o assistente somente criará a lista de registros e não criará nenhuma representação desses dados na página. Por ora, o assistente criará a tabela de dados padrão e você a personalizará mais tarde. A janela Incluir Lista de Registros Relacionais deve ser semelhante a esta:

    Janela Incluir Lista de Registros Relacionais

  8. Clique em Avançar.
  9. No campo Nome da conexão,clique em Nova para criar uma nova conexão com o banco de dados.

    O diálogo Nova Conexão aparece. Observe que o campo Nome da conexão é preenchido automaticamente com o nome ClassifiedsTutorial_Con1.

  10. Clique em Criar Nova Conexão com o BD. A janela Nova Conexão com o Banco de Dados aparece.
  11. Clique em Avançar.

Especificando as Informações da Conexão com o Banco de Dados

Mostre-me

É preciso instruir à lista de registros onde localizar os dados que você deseja que ela represente. Isso é feito com a janela Nova Conexão com o Banco de Dados. Neste caso, você especificará o banco de dados Cloudscape que foi incluído no arquivo importado no exercício 1.1. Depois de criada, esta conexão será utilizada para todo o Web site, portanto, você somente precisará fazer isso uma vez para este tutorial.

  1. Na janela Nova Conexão com o Banco de Dados, em Selecionar um Gerenciador de Banco de Dados, expanda Cloudscape e clique em V5.1.
  2. Clique no botão Procurar no início da página. Este é o botão Procurar próximo a Local do Banco de Dados. A janela Procurar Pasta é aberta
  3. Em Selecionar um diretório do banco de dados, navegue até o seguinte diretório: <pasta-espaço-trabalho>\ClassifiedsTutorial\WebContent\cloudscapesampledata\database, em que <pasta-espaço-trabalho> é o diretório que contém o espaço de trabalho no qual você está trabalhando atualmente.
  4. Clique na pasta database e, em seguida, clique em OK.
  5. Não é necessário incluir um ID do usuário ou senha para acessar o banco de dados. A janela Nova Conexão com o Banco de Dados deve ser semelhante a esta:

    Janela Nova Conexão com o Banco de Dados
  6. Clique em Concluir. Você retorna para a janela Nova Conexão.
  7. Na janela Nova Conexão, clique em Concluir. Você retorna para a janela Incluir Lista de Registros Relacionais.
  8. Agora que você criou uma conexão com o banco de dados Cloudscape, é necessário escolher uma tabela ou a lista de registros a ser representada. A janela Incluir Lista de Registros Relacionais mostra as tabelas no banco de dados. Para a maior parte deste tutorial, você utilizará a tabela W5SAMPLE.ADS.

  9. Clique na tabela W5SAMPLE.ADS no campo Tabela.

    Janela Incluir Lista de Registros Relacionais

    As páginas restantes no assistente permitem excluir colunas da lista de registros e executar opções avançadas, como definir a chave primária, incluir relacionamentos a outras tabelas e especificar condições de filtragem e de classificação. Você aprenderá mais sobre essas páginas em exercícios posteriores.
  10. Clique em Finalizar.

Ajustando a Tabela de Dados Padrão

Mostre-me

A visualização Dados da Página mostra agora uma lista de colunas na tabela ADS, e o arquivo all_records.jsp contém a visualização desses dados dentro de uma tabela de dados. Neste momento, a tabela de dados padrão contém as demais informações. Para este tutorial, é necessário mostrar somente o título, a descrição, a categoria, o preço e o número de telefone de cada anúncio classificado. Siga estas etapas para ajustar e reorganizar a tabela de dados:

  1. Clique em qualquer lugar na tabela de dados.
  2. Abra a visualização Propriedades.

    A visualização Propriedades em geral está no centro da parte inferior do workbench. Se você não conseguir localizar a visualização Propriedades, vá para a barra de menus e clique em Janela > Mostrar Visualização > Propriedades.

  3. Na visualização Propriedades, clique em h:dataTable na lista de tags HTML à esquerda da visualização.
  4. No lado direito da visualização, clique na coluna ID sob Etiqueta e, em seguida, clique em Remover. A coluna de ID é removida da tabela de dados.
  5. Repita esse processo para remover todas as colunas na tabela de dados exceto as seguintes: TITLE, DESCRIPTION, MAINCATEGORY, PRICE e PHONE. A visualização Propriedades agora deverá ser semelhante a esta:

    Visualização Propriedades

    Sua página agora deverá ser semelhante a esta:

    Aparência Atual da Página

    A ordem das colunas não é apropriada para um anúncio Classificado. Esta ordem será mais significativa:

    1. TITLE
    2. DESCRIPTION
    3. MAINCATEGORY
    4. PRICE
    5. PHONE
  6. Para reordenar as colunas, retorne à lista de colunas na visualização Propriedades. Clique na etiqueta TITLE e clique em Mover para Cima até que TITLE chegue ao topo da lista. A coluna TITLE é agora a primeira coluna na tabela de dados.
  7. Da mesma forma, selecione as outras colunas uma a uma e reordene-as. A seção Colunas da visualização Propriedades deveria ser semelhante a esta:

    Colunas na Visualização Propriedades

  8. Salve a página.

    No próximo exercício, Exercício 1.3: Testando o Web site, você verá como esta página aparecerá num servidor da Web real.

    Existem muitas opções para formatar tabelas de dados e componentes JavaServer Faces. Algumas dessas opções são abrangidas no próximo módulo, Módulo 2: Incluindo Recursos Avançados. Você também pode explorar a visualização Propriedades por conta própria para descobrir os diversos componentes JavaServer Faces na página (por exemplo, a tabela de dados e os componentes de saída individuais).

Você está pronto para iniciar o Exercício 1.3: Testando o Web site.

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