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

O Web site neste tutorial 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 Dynamic Web Projects (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 Data (Dados) para expandi-la.
  5. Arraste o componente Relational Record List (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 Name (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 Add data controls (Incluir Controles de Dados) esteja selecionado.

    Quando Add data controls (Incluir Controles de Dados) for selecionado, o assistente criará uma tabela de dados para exibir a lista de registros na página. Caso contrário, o assistente criará somente a lista de registros e não uma representação dos dados na página. No momento, o assistente criará a tabela de dados padrão e você a personalizará posteriormente. A janela Incluir Lista de Registros Relacionais deve ser semelhante a esta:

    Janela Incluir Lista de Registros Relacionais

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

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

  10. Clique em Create New DB Connection (Criar Nova Conexão com o BD). A janela Nova Conexão com o Banco de Dados aparece.
  11. Certifique-se de que Choose a database manager and JDBC driver (Escolher um gerenciador de banco de dados e o driver JDBC) esteja selecionado e clique em Next (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 New Database Connection (Nova Conexão com o Banco de Dados). Nesse caso, você especificará o banco de dados Cloudscape incluso no arquivo que você importou no exercício anterior. 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. No assistente New Database Connection (Nova Conexão de Banco de Dados), especifique o gerenciador de banco de dados:
    1. Em Select a database manager (Selecionar um Gerenciador de Banco de Dados), expanda Cloudscape.
    2. Selecione V5.1.
  2. Especifique o local do banco de dados:
    1. Clique no botão Browse (Navegar) próximo a Database location (Local do Banco de Dados).
    2. Vá para o seguinte diretório:

      <workspace>\ClassifiedsTutorial\WebContent\cloudscapesampledata\database

      Em que <workspace> é o diretório que contém o espaço de trabalho no qual você está trabalhando atualmente.

    3. Selecione a pasta database e clique em OK.

    Não é necessário incluir um ID do usuário ou senha para acessar o banco de dados. O assistente New Database Connection (Nova Conexão com o Banco de Dados) deve ser semelhante a:

    Janela Nova Conexão com o Banco de Dados
  3. Clique em Finish (Concluir) para fechar o assistente New Database Connection (Nova Conexão com o Banco de Dados).
  4. No assistente New Connection (Nova Conexão), clique em Finish (Concluir). Você retornará ao assistente Add Relational Record List (Incluir Lista de Registros Relacionais).
  5. 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. O assistente Add Relational Record List (Incluir Lista de Registros Relacionais) mostra as tabelas no banco de dados. Para a maior parte deste tutorial, você utilizará a tabela W5SAMPLE.ADS.

  6. Clique na tabela W5SAMPLE.ADS no campo Table (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.
  7. Clique em Finish (Concluir).

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 Window (Janela) > Show View (Mostrar Visualização) > Properties (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 Label (Etiqueta) e, em seguida, clique em Remove (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 deve 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 Move Up (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.

Feedback
(C) Copyright IBM Corporation 2000, 2005. Todos os Direitos Reservados.