Exibir Informações Dinâmicas em Páginas da Web com JavaServer Faces > Módulo 1: Criar Páginas da Web com Conexões de Dados >
< Anterior | Próximo >

Lição 1.2: Conectar-se a um Banco de Dados e Exibir Dados em uma Página da Web

Nessa lição, você aprenderá como conectar-se a um banco de dados e exibir registros de dados em uma página da Web. Você também aprenderá como incluir uma lista de registros relacionais na sua página da Web.

O Web site neste tutorial utiliza páginas dinâmicas da Web com componentes do JavaServer Faces para acessar um banco de dados e exibir informações sobre a página. Esse tutorial utiliza registros relacionais e listas de registros relacionais para representar 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. Os beans de acesso Java são utilizados por esses componentes.

Aprenda Mais Sobre Beans de Acesso a Dados

Os beans de acesso a dados são representações de beans Java de beans corporativos. Normalmente, eles são utilizados em programas clientes que implementam os arquivos, servlets ou beans corporativos de JSP (JavaServer Pages) que fazem interface com outros beans corporativos. Os beans de acesso eliminam as complexidades de gerenciar ciclos de vida de enterprise beans. Isso significa que é possível programar para beans corporativos tão facilmente como pode programar para beans Java, o que simplifica seus programas clientes de beans corporativos e reduz o tempo total de desenvolvimento.

Aprenda Mais Sobre JavaServer Faces e Componentes Faces

JavaServer Faces é uma tecnologia que ajuda a construir interfaces com o usuário para aplicativos dinâmicos da Web que são executados em um servidor. A estrutura JavaServer Faces gerencia o estado da UI entre pedidos ao servidor e oferece um modelo simples para o desenvolvimento de eventos do lado do servidor que são ativados pelo cliente. JavaServer Faces se baseia em uma estrutura MVC (Model-View-Controller). Para o JavaServer Faces, isso significa que o controlador é um servlet, o modelo é representado por JavaBeans e a visualização é composta de componentes JavaServer Faces com pouco ou nenhum código de aplicativo. O objetivo desse modelo é separar o conteúdo da apresentação.

Ferramentas, como Componentes Faces, ajudam a utilizar essa tecnologia em seus aplicativos da Web. Os Componentes Faces incluem uma biblioteca de tags personalizadas JSP (JavaServer Page) para expressar uma interface JavaServer Faces em uma página. Esse assistente ajuda a criar arquivos JSP que são habilitados para utilizar os componentes Faces. Os componentes Faces permitem desenvolver um aplicativo da Web arrastando componentes de uma gaveta Faces na visualização Paleta (Palette) e soltando-os nas páginas da Web que estão sendo criadas.

Por exemplo, você pode arrastar um campo de texto de entrada e soltá-lo em um formulário na página. Em seguida, você pode arrastar e soltar um botão Submeter junto ao campo de texto de entrada. Finalmente, você pode conectar o campo de texto de entrada à origem de dados. Isso permitirá que os usuários finais digitem dados do aplicativo da Web em sua origem de dados.

Outro benefício de aplicativos construídos utilizando componentes Faces é que a interface com o usuário é apresentada independentemente da lógica do programa de base. Isso significa que seus aplicativos podem executar e acessar dados em diferentes plataformas, como navegadores ou dispositivos de mão.
Gaveta da Paleta de Componentes Faces Avançados.

Incluir uma Lista de Registros Relacionais

Nesta lição, 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 necessárias na lista de registros relacionais. Por último, você exibirá essa lista de registros relacionais na página em uma tabela de dados.
  • Os registros relacionais conectam-se a somente um registro de um banco de dados. Neste caso, um registro relacional representa um único anúncio classificado do banco de dados da amostra.Utilizando um registro relacional, é possível criar um novo registro, editar um registro existente ou excluir um registro antigo.
  • As listas de registros relacionais conectam-se a mais de um registro de um banco de dados. Neste caso, uma lista de registros relacionais representa de dois a todos os anúncios classificados no banco de dados da amostra.
  • As tabelas de dados exibem os dados de uma lista de registros relacionais na página. As tabelas de dados simplesmente designam um lugar para as listas de registros; elas não formatam os dados em linhas e colunas como faz uma tabela HTML.
    Aprenda Mais sobre Tabelas de Dados

    A tabela de dados é um componente em uma página Faces JSP que contém objetos de dados, como uma lista de registros relacionais. Embora uma tabela de dados pareça ter linhas e colunas como uma tabela HTML, ela não funciona como uma tabela HTML. Se você quiser formatar controles de entrada e saída como em uma tabela, deverá utilizar um ainel - Caixa de Grupo (Panel - Group Box) da gaveta Componentes Faces Avançados (Enhanced Faces Components) na Paleta. Isso é coberto no Exercício 2.2: Formatando uma Tabela de Dados.

    Como as tabelas de dados são componentes Faces e não componentes HTML, elas são controladas pela visualização Propriedades, não pela visualização Page Designer. Utilizando a visualização Propriedades, é possível personalizar uma tabela de dados de várias maneiras:
    • Incluir, remover e alterar a ordem de colunas
    • Formatar texto e segundo plano
    • Incluir cabeçalho, rodapé e margens
    • Incluir paginação para exibição de resultados

Para criar uma nova lista de registros relacionais:

  1. Na visualização Project Explorer da perspectiva da Web, expanda 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 Conteúdo padrão para área principal (Default content of bodyarea).
  4. Na visualização Paleta (Palette), expanda a gaveta Dados (Data).
  5. Arraste o componente Lista de Registros Relacionais (Relational Record List) da Paleta para a área de conteúdo em branco. A janela Incluir Lista de Registros Relacionais é aberta.
  6. No campo Nome (Name), 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 Incluir Controles de Dados (Add data controls) esteja selecionado. Quando Incluir Controles de Dados (Add data controls) 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 (Add Relational Record List) deve ser semelhante a esta:
    Janela Incluir Lista de Registros Relacionais (Add Relational Record List).

    Clique em Avançar (Next).

  8. No campo Nome da conexão (Connection name) na próxima página do assistente, clique em Novo (New) para criar uma nova conexão com o banco de dados. O diálogo Nova Conexão JDBC (New JDBC Connection) será aberto. Selecione o botão de opção Criar uma nova conexão (Create a new connection) e, em seguida, clique em Avançar (Next).
  9. Na lista Selecionar um Gerenciador de Banco de Dados (Select a database manager), expanda Derby e, em seguida, selecione 10.1.
  10. No campo Local do Banco de Dados (Database location), clique em Procurar (Browse) e selecione <workspace_location>\ClassifiedsTutorial\WebContent\\database, em que <workspace_location> é o diretório do espaço de trabalho atual. Clique em OK para fechar a janela Procurar Pasta (Browse For Folder).
  11. No campo Local da Classe (Class location), digite o local do JAR ou JARs que implementa(m) a classe de driver JDBC ou clique em Procurar (Browse) para selecionar o local do sistema de arquivo. Quando você tiver escolhido o local dos arquivos JAR, clique em Abrir (Open).
  12. Talvez seja necessário digitar um ID de Usuário para acessar o banco de dados. Não é necessária uma senha. O assistente Nova Conexão com o Banco de Dados deve ser semelhante a este:
    Janela Nova Conexão com o Banco de Dados.
  13. No assistente Nova Conexão JDBC (New JDBC Connection), clique em Concluir (Finish). Você retornará ao assistente Incluir Lista de Registros Relacionais (Add Relational Record List).
  14. Clique em Configurar Conexões do Banco de Dados do Projeto (Configure project's database connections). A janela Propriedades das Conexões JDBC é aberta.
  15. Clique em Editar (Edit), próximo à seção de detalhes das conexões de tempo de execução. Selecione Utilizar Conexão do Gerenciador de Driver (Use driver manager connection) como o tipo de conexão de tempo de execução. Clique em Concluir (Finish) e clique em OK para retornar ao diálogo diálogo Incluir Lista de Registros Relacionais. Agora que você criou uma conexão com o banco de dados Derby, é 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.
  16. Expanda W5SAMPLE e selecione ADS. Clique em Avançar (Next). 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.
    Diálogo Incluir Lista de Registros Relacionais.
  17. Na página Incluir Registro Relacional (Add Relational Record) do diálogo, especifique as colunas que você deseja incluir na lista de registros relacionais. Clique em Avançar (Next).
  18. 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. Por padrão, todas as colunas são selecionadas; clique para limpar todas, exceto as seguintes colunas, da exibição:
    • CATEGORIA PRINCIPAL (MAINCATEGORY): Cadeia
    • TÍTULO (TITLE): Cadeia
    • DESCRIÇÃO (DESCRIPTION): Cadeia
    • PREÇO (PRICE): BigDecimal
    • FONE (PHONE): Cadeia
  19. Você pode refinar a organização da exibição da tabela de dados na página da Web. Para reordenar as colunas, selecione uma coluna e clique nas setas para cima e para baixo até que a coluna esteja na posição desejada.
    Organize as colunas na seguinte ordem:
    • TÍTULO (TITLE)
    • DESCRIÇÃO (DESCRIPTION)
    • CATEGORIA PRINCIPAL (MAINCATEGORY)
    • PREÇO (PRICE)
    • FONE (PHONE)
    Clique em Concluir (Finish).
    Sua página da Web será semelhante a esta:
    Aparência atual da página (Current appearance of the page).
  20. Salve a página.
Na próxima lição, você verá como esta página aparecerá em um 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. Pode-se, também, explorar a visualização Propriedades (Properties) 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).

Ponto de Verificação do Exercício

Você concluiu a Lição 1.2. Nela, você aprendeu como conectar-se com um banco de dados e exibir registros de dados em uma página da Web utilizando uma lista de registros relacionais.

< Anterior | Próximo >