Usando componentes de vinculação de dados para acessar um banco de dados

Neste tutorial, use o NetBeans IDE 6.5 para criar e implantar uma aplicação Web que exiba dados mestre-detalhe de um banco de dados incluído no IDE. No aplicativo, você seleciona uma pessoa em uma lista suspensa JSF 1.2 (Woodstock) e ele exibe uma tabela que mostra todos os registros de viagem dessa pessoa.

Antes de usar este tutorial, familiarize-se com as partes básicas do IDE e leia Introdução ao desenvolvimento do NetBeans JSF Visual Web para obter uma introdução sobre o ambiente de desenvolvimento do NetBeans IDE.

Duração esperada: 30 minutos

Conteúdo

• Criando uma página que inclua um componente Lista suspensa
• Configurando o banco de dados
• Conectando componente a um banco de dados
• Adicionando um componente Tabela
• Modificando a consulta SQL
• Controlando as linhas exibidas
• Fazendo mais
• Resumo

Para seguir este tutorial, você precisa dos seguintes recursos e softwares.

* Para tirar vantagem dos recursos Java EE 5 do NetBeans IDE , use um servidor da aplicação que seja totalmente compatível com a especificação Java EE 5, tal como o Servidor da aplicação GlassFish V2 UR2. Se você estiver usando um servidor diferente, consulte as Notas de versão e as Perguntas freqüentes para saber problemas conhecidos e soluções alternativas. Para obter informações detalhadas sobre os servidores suportados e a plataforma Java EE, consulte as Notas de versão.

Criando uma página que inclua um componente Lista suspensa

Neste tutorial, você constrói uma aplicação Central de Viagens como mostrado na figura da aplicação implantada abaixo.

Comece adicionando um componente Tabela e um componente Lista suspensa à página 1.jsp padrão criada com o novo projeto.

1. Crie um novo projeto de aplicação Web chamado DataboundComponents que use o servidor do aplicativo GlassFish V2 e o framework JavaServer Faces Visual Web.

   O IDE cria a primeira página, chamada Page1, e exibe a página no Visual Designer.
2. Expanda o nó Básico do Woodstock na janela Paleta e arraste um componente Rótulo para o lado esquerdo da página. Digite Nome: e pressione Enter.
3. Arraste um componente Lista suspensa para o lado direito do componente Rótulo.

4. Na janela Propriedades do componente Rótulo, selecione personIdDD como a propriedade for, como visto na figura seguinte.

   
5. Clique com o botão direito do mouse no componente Campo de texto e escolha Adicionar atributo de vinculação.

6. Arraste um componente Grupo de mensagens da janela Paleta para um lugar fora da página, como o canto superior direito desta.

   Este componente é útil para diagnosticar erros de programação. Você faz as mensagens de diagnóstico aparecerem neste componente, chamando o método info(String), error(String), warn(String) ou fatal(String). O componente Grupo de mensagens exibe o valor do argumento String. Além disso, as mensagens sobre erros de tempo de execução, erros de validação e erros de conversão aparecem por padrão neste componente.

Configurando o banco de dados

Nesta seção, você configura o banco de dados Viagem e o servidor de banco de dados MySQL no IDE.

1. Verifique se o servidor de banco de dados MySQL está instalado e em execução em sua máquina. Para obter mais informações sobre a conexão a um banco de dados MySQL, consulte Conectando a um banco de dados MySQL

2. Na janela Serviços, clique com o botão direito do mouse no nó Servidor MySQL e escolha Criar banco de dados.

   A caixa de diálogo Criar novo banco de dados se abre.

   

3. Na lista suspensa Novo nome do banco de dados, selecione Banco de dados de amostra: Viagem e clique em OK.

   Na janela Serviços, o banco de dados Viagem aparece sob o nó Servidor MySQL.

   

Conectando componente a um banco de dados

A janela Serviços, que aparece do lado esquerdo da área de trabalho do IDE, inclui um nó Bancos de dados. O nó Bancos de dados mostra todos os drivers e conexões do banco de dados que foram adicionados ao IDE.

Quando vincula um banco de dados a um componente, você cria duas camadas entre o componente e a tabela do banco de dados: a camada Conjunto de linhas e a camada Provedor de dados. A camada Conjunto de linhas faz a conexão ao banco de dados, executa as consultas e gerencia o conjunto de resultados. A camada Provedor de dados fornece uma interface comum para acessar muitos tipos de dados, de conjuntos de linhas a objetos Array e objetos Enterprise JavaBeans.

Geralmente, a única vez que você trabalha com o objeto Conjunto de linhas é quando precisa definir os parâmetros de consulta. Na maioria dos casos, você usa o Provedor de dados para acessar e manipular os dados. Você pode fazer declinar a sua curva de aprendizagem usando a API do provedor de dados, pois as mesmas APIs servem independentemente do tipo de dados que estão sendo empacotados (isto é, independentemente de qual implementação de provedor de dados você está usando).

Nesta seção do tutorial, você usa a tabela PESSOA do banco de dados Viagem para fornecer as opções do componente Lista suspensa.

1. Na janela Serviços, expanda o nó Bancos de dados e verifique se o banco de dados Viagem está conectado.

   Se o nó jdbc do emblema do banco de dados Viagem estiver quebrado e você não puder expandir o nó, o IDE não está conectado ao banco de dados. Para conectar ao banco de dados Viagem, clique com o botão direito do mouse no nó jdbc de viagem e escolha Conectar no menu pop-up.

2. Expanda o nó Viagem > Tabelas.

   Em Tabelas, você vê os nós de cada tabela no banco de dados, como aluguel de carro e vôo. A figura a seguir mostra a janela Serviços com o nó Tabelas expandido.

   

3. Arraste a tabela person da janela Serviços e solte na Lista suspensa.

   O texto abc aparece no componente Lista suspensa. O texto abc indica que o campo de exibição é vinculado a um objeto String que, no caso, é uma coluna de banco de dados do tipo de SQL varchar. Além disso, o IDE adiciona um componente personDataProvider não visual na tabela do banco de dados. O componente personDataProvider aparece na janela Navegador. O IDE adiciona também uma propriedade personRowSet ao SessionBean1.

4. Clique com o botão direito do mouse em Lista suspensa e escolha Vincular aos dados no menu pop-up. A caixa de diálogo Vincular aos dados é exibida, como mostrado na figura abaixo.

   
   Ao vincular dados a um componente Lista suspensa, você deve especificar o que será exibido na lista (o Campo de exibição) e que valores serão usados no programa subjacente (o Campo de valor). Geralmente, você deseja exibir algum valor significativo a partir da tabela do banco de dados, tal como o nome de uma pessoa, mas quer usar um identificador único no programa subjacente, tal como o ID da pessoa. Com este aplicativo, entretanto, vincule o campo Valor e o campo Exibir à mesma coluna do banco de dados, a coluna person.name, como descrito nas duas próximas etapas.
5. Na caixa de diálogo Vincular aos dados, selecione person.personid na lista Campo de valor para fazer com que o método getSelected do componente retorne person.personid para a seleção atual.
6. Selecione person.name na lista Campo de exibição para fazer com que o navegador preencha a lista suspensa com os valores da coluna de banco de dados person.name.
7. Clique em OK.

8. Clique em Executar > Executar projeto principal, na barra de ferramentas principal.

   Observação: Por padrão, o projeto foi criado com o recurso Compilar ao salvar ativado, assim, não é necessário compilar o código primeiro para executar a aplicação no IDE. Para obter mais informações sobre o recurso Compilar ao salvar, consulte a seção Compilar ao salvar no guia Criando, importando e configurando projetos Java.

   O IDE salva todas as alterações e, em seguida, constrói, implanta e executa a aplicação Web. Primeiramente, a janela Saída é exibida na parte inferior do IDE. O IDE escreve as informações de preparação para a compilação e deployment desta janela. (Assim, se houver qualquer tipo de problema com a construção, verifique primeiro a janela Saída.) Depois, uma caixa de diálogo exibe o status do deployment. Depois de terminado o deployment, o IDE abre o navegador da Web da aplicação. Quando o navegador renderiza a página, ele preenche a lista suspensa com os dados da coluna name da tabela person.

Adicionando um componente Tabela

A seguir, você adiciona um componente Tabela à sua aplicação e conecta o componente a um banco de dados de tabela.

1. Na Paleta, arraste um componente Tabela e coloque-o abaixo do componente Lista suspensa.
2. Na janela Serviços, expanda o nó viagem > Tabelas.

3. Arraste a tabela trip da janela Serviços e solte-a na barra de títulos do componente Tabela.

   Observação: se você soltar o banco de dados VIAGEM em outra parte do componente tabela, a caixa de diálogo Escolher destino é aberta. Na caixa de diálogo Escolher destino, selecione table1 e clique em OK.

4. Clique com o botão direito do mouse no componente Tabela e selecione Layout da tabela.

   A lista Selecionado na caixa Layout da tabela mostra todas as colunas da tabela. Os itens da lista Selecionado são usados para especificar que colunas devem aparecer no componente Tabela.
5. Use Ctrl-clique para selecionar todas as entradas na lista Selecionado, com exceção de trip.depdate, trip.depcity e trip.destcity.

6. Clique no botão <.

   As entradas selecionadas são deslocadas para a lista Disponível e as três entradas seguintes permanecem na lista Selecionado, como mostrado na figura abaixo:

   

7. Clique em OK.

   O Visual Designer exibe agora três colunas no componente Tabela, como mostrado na figura abaixo.

   

Modificando a consulta SQL

A seguir, você modifica a consulta SQL no objeto tripRowSet para que a consulta também retorne dados da tabela TRIPTYPE. Você modifica também o componente Tabela para que exiba a descrição do tipo de viagem.

1. Na janela Navegador, expanda o nó SessionBean1 se ele ainda não estiver expandido.

   

2. Na seção SessionBean1 da janela Navegador, clique com o botão direito do mouse no nó tripRowSet e escolha Editar instrução SQL.

   O Editor de consultas aparece na área de edição, com uma aba tripRowSet.

   Dica: se a janela de saída estiver aberta, feche-a para que você tenha mais espaço para trabalhar com o Editor de consultas.

3. Arraste a tabela triptype de Viagem > Tabelas > da janela Serviços e solte-a na visualização Design, como mostrado na figura abaixo.

   Outro diagrama de tabela é exibido com um vínculo entre os dois diagramas da tabela. Este vínculo representa uma junção. Note como o IDE modificou a instrução de seleção no painel Código-fonte.

4. Desmarque a caixa de verificação de triptypeid na tabela triptype.

   Esta ação remove a coluna do conjunto de resultados e da consulta SQL que está no painel Código-fonte, como mostrado na figura abaixo.

   
5. Deixe o Editor de consultas aberto.
6. Clique na aba Page1 na área de edição.

7. No Visual Designer, clique com o botão direito do mouse no componente Tabela e escolha Layout da tabela.

   A caixa de diálogo Layout da tabela é exibida. Devido à alteração realizada na consulta SQL de tripRowSet, há mais colunas do que é possível exibir.

8. Adicione a coluna triptype.description à lista Selecionado e clique em OK.

   Uma quarta coluna aparece no componente Tabela.

Controlando as linhas exibidas

No momento em que você adicionou um Provedor de dados na tabela TRIP, o IDE criou um objeto Conjunto de linhas com uma consulta SQL que retornasse todas as linhas de todas as colunas na tabela. Se você implantar e executar a aplicação neste ponto, o componente Tabela mostra todas as informações sobre a viagem na tabela TRIP.

Nesta aplicação, o componente Tabela deve exibir somente as informações da viagem da pessoa cujo nome está selecionado no componente Lista suspensa. Você limita as informações exibidas na tabela editando a consulta do objeto tripRowSet para criar um relacionamento mestre-detalhe entre o componente Lista suspensa e o componente Tabela.

1. Clique na aba jdbc:derby://localhost:3306/travel na área de edição para alternar para o Editor de consultas.
2. Em Desenhar grade do Editor de consultas, clique com o botão direito do mouse em qualquer célula na linha PERSONID e escolha Adicionar critérios de consulta.
3. Defina a lista suspensa Comparação como =Igual, selecione o botão de opção Parâmetro e clique em OK.

4. Você vê =? na coluna Critérios de personid, o que adiciona a seguinte cláusula WHERE na consulta SQL.

   Exemplo de código 1: Cláusula WHERE na consulta SQL

   WHERE trip.personid = ?

   
   

5. Na Grade de Design do Editor de consultas, clique na célula Tipo de classificação na linha DEPDATE e escolha Crescente da lista suspensa.

   O IDE define automaticamente a Ordem de classificação e adiciona a expressão de classificação à consulta SQL.
6. Feche o Editor de consultas.

7. No Visual Designer, clique duas vezes no componente Lista suspensa.

   O código-fonte da classe Page1 é aberto no Editor Java, e o cursor é colocado no corpo do método personIdDD_processValueChange. O IDE cria o stub deste método manipulador de eventos na primeira vez que você clicar duas vezes no componente Lista suspendo.

8. Substitua o corpo do método personIdDD_processValueChange pelo código que aparece abaixo em negrito.

   Exemplo de código 2: Manipulação de eventos de alteração de valor para o Componente lista suspensa

   public void personIdDD_processValueChange(ValueChangeEvent event) { try { getSessionBean1().getTripRowSet().setObject( 1, personIdDD.getSelected()); tripDataProvider.refresh(); } catch (Exception e) { error("Não é possível alternar para pessoa " + personDataProvider.getValue( "PERSON.PERSONID")); log("Não é possível alternar para pessoa " + personDataProvider.getValue( "PERSON.PERSONID"), e); } }

   
   

   Este código vincula o valor do PERSONID do NAME atualmente selecionado na lista suspensa ao parâmetro na instrução SQL preparada do objeto tripRowSet, executa a consulta e obtém o novo conjunto de resultados.

   O método setObject substitui o ? na consulta com o valor do PERSONID. O método refresh envia a nova consulta e atualiza o conjunto de resultados. Para saber mais sobre ambos os métodos, clique com o botão direito na chamada do método e escolha Mostrar Javadoc no menu pop-up. Exiba o Provedor de dados e o Javadoc do conjunto de linhas escolhendo Ajuda > Referências de Javadoc > Provedor de dados e Ajuda > Referências de Javadoc > Conjunto de linhas.

   O método log envia uma mensagem e a pilha de chamadas associada ao registro do servidor da aplicação para ajudar no reconhecimento e no diagnóstico dos problemas do usuário. Você pode visualizar o log do servidor clicando com o botão direito do mouse no nó do servidor na janela Serviços e escolhendo Visualizar log do servidor do menu pop-up.
9. Pressione Alt-Shift-F para reformatar o código.
10. Localize o método prerender no código-fonte.

11. Substitua o corpo do método prerender pelo código que aparece abaixo em negrito.

    Exemplo de código 3: Sincronizando os dados mestre/detalhe quando a página é exibida pela primeira vez

    public void prerender() { if ( personIdDD.getSelected() == null ) { try { personDataProvider.cursorFirst(); getSessionBean1().getTripRowSet().setObject( 1, personDataProvider.getValue("PERSON.PERSONID")); tripDataProvider.refresh(); } catch (Exception e) { error("Não é possível alternar para pessoa " + personDataProvider.getValue("PERSON.PERSONID")); log("Não é possível alternar para pessoa " + personDataProvider.getValue("PERSON.PERSONID"), e); } } }

    
    O código no método prerender é chamado antes que um navegador Web comece a exibir a página.
12. Pressione Alt-Shift-F para reformatar o código.
13. Clique em Design na barra de ferramentas de edição para voltar ao Visual Designer.

14. Clique com o botão direito do mouse no componente Lista suspensa e escolha Enviar automaticamente ao alterar.

    Na janela Propriedades, aparece o seguinte código na propriedade onchange.

    Exemplo de código 4: Código da propriedade onchange

    webuijsf.suntheme.common.timeoutSubmitForm(this.form, 'personIdDD');

    
    A partir de agora, quando o usuário alterar a seleção da lista suspensa na aplicação Web em execução, o navegador da Web enviará a página automaticamente.

15. Clique em Executar projeto principal na barra de ferramentas principal.

    Observação: Por padrão, o projeto foi criado com o recurso Compilar ao salvar ativado, assim, não é necessário compilar o código primeiro para executar a aplicação no IDE. Para obter mais informações sobre o recurso Compilar ao salvar, consulte a seção Compilar ao salvar no guia Criando, importando e configurando projetos Java.

16. Selecione um pessoa do componente Lista suspensa para ver como o componente Tabela sincroniza os dados mestre e detalhe. Clique no cabeçalho da coluna DESTCITY para ver como componente Tabela classifica as linhas.

Fazendo mais

Tente. Adicione um componente Texto estático à direita do componente Lista suspensa a aproximadamente 2 cm. Clique com o botão direito do mouse no componente Texto estático e escolha Adicionar atributo de vinculação. Clique com o botão direito do mouse no componente Texto estático novamente e escolha Vincular aos dados. Selecione personDataProvider na lista suspensa Provedor de dados e vincule o componente a person.jobtitle. Execute o programa e escolha um nome diferente na lista suspensa. Observe que o cargo não se altera porque o aplicativo precisa sincronizar o personDataProvider com o item selecionado na lista suspensa. Adicione o código mostrado abaixo em negrito ao método prerender e execute a aplicação novamente. Os títulos do trabalho devem corresponder agora ao nome selecionado.

public void prerender() {
    if ( personIdDD.getSelected() == null ) {
        try {
            personDataProvider.cursorFirst();
            getSessionBean1().getTripRowSet().setObject(
                1, personDataProvider.getValue("PERSON.PERSONID"));
            tripDataProvider.refresh();
        } catch (Exception e) {
            error("Não é possível alternar para pessoa " +
                    personDataProvider.getValue("PERSON.PERSONID"));
            log("Não é possível alternar para pessoa " +
                    personDataProvider.getValue("PERSON.PERSONID"), e);
        }
    }
    else {
        try {
            // Synchronize data provider with current selection
            personDataProvider.setCursorRow(
                    personDataProvider.findFirst(
                    "PERSON.PERSONID", personIdDD.getSelected()));
        } catch (Exception e) {
            error("Não é possível alternar para pessoa " +
                    personIdDD.getSelected());
            log("Não é possível alternar para pessoa " +
                    personIdDD.getSelected(), e);
        }
    }
}
                

Tente. Brinque com as opções de layout da tabela. Clique com o botão direito do mouse no componente Tabela e escolha Layout da tabela no menu pop-up. Altere o Texto do cabeçalho por Data de partida, Cidade de partida, Cidade de destino e Descrição. Use a tabela Opções da caixa de diálogo para definir o título da tabela como Viagens. Selecione Ativar paginação e defina o Tamanho da página como 3. Execute o aplicativo e veja como as alterações afetam a forma em que a tabela é exibida.

Observação: se você utilizar a opção de paginação, adicione o seguinte código após a instrução tripDataProvider.refresh() no método personIdDD_processValueChange: tableRowGroup1.setFirst(0);. Isto garante que a primeira página seja sempre exibida quando outro nome for selecionado na lista suspensa. Na janela Navegador, expanda Page1 > html1 > body1 > table1, clique com o botão direito do mouse em tableRowGroup1 e escolha Adicionar atributo de vinculação.

Tente. Construa uma aplicação Web com um componente Lista suspensa e um componente Tabela. Faça o componente Lista suspensa exibir triptype.description. Faça o componente Tabela mostrar todos os registros trip que possuem o mesmo TRIPTYPEID que o TRIPTYPE selecionado.

Tente. Você pode se questionar se o código duplicado nos métodos prerender e personIdDD_processValueChange causa uma dupla atualização do conjunto de linhas de detalhe. A resposta é não. Para ilustrar, adicione uma instrução log(nome do método) ao construtor, o método prerender e o personIdDD_processValueChange. Na janela Serviços, clique com o botão direito do mouse em um nó do servidor e escolha Visualizar log do servidor. Execute o programa e selecione um novo nome. No registro do servidor (na janela Esboço), você vê que os métodos são chamados na seguinte ordem:

1. constructor
2. prerender
3. constructor
4. personIdDD_processValueChange

Quando o navegador solicita a página pela primeira vez, a aplicação cria uma instância de Page1 e chama prerender. O servidor envia a resposta (a página HTML) e a instância de Page1 é eliminada. A aplicação não chama o manipulador de eventos de alteração de valor porque a aplicação gera eventos de alteração de valor somente quando um página é enviada (neste caso, quando uma nova pessoa é selecionada).

Quando você escolhe um novo nome na lista suspensa, o navegador envia a página. A aplicação cria uma nova instância de Page1 e restaura os valores da instância anterior (eles são passados na solicitação). Como este é um postback (um envio), e como o nome foi alterado, a aplicação gera um evento de alteração de valor. Assim, personIdDD_processValueChange é chamado e a aplicação atualiza o conjunto de linhas.

Depois que o manipulador de eventos de alteração de valor é chamado, a aplicação chama o método prerender. Como a lista suspensa agora possui um valor selecionado, a aplicação ignora a seção if no método prerender.

Resumo

As etapas para a vinculação de um componente a uma tabela de banco de dados são as seguintes:

1. Você vincula um componente a uma tabela de banco de dados soltando o nó da tabela de banco de dados no componente ou escolhendo Vincular aos dados no menu pop-up e selecionando um provedor de dados existente na lista suspensa.
2. A caixa de diálogo Vincular aos dados é usada para configurar as colunas de banco de dados que o componente irá exibir e, em um componente do tipo lista, que coluna ele irá retornar. O menu de ação Layout da tabela também pode ser usado para configurar que colunas da tabela de banco de dados o componente Tabela irá exibir.
3. Para modificar uma consulta para um objeto de conjunto de linhas, abra o Editor de consultas nesse objeto da janela Navegador.
4. Você chama o método setObject do objeto Conjunto de linhas para definir os valores dos parâmetros de consulta. Você chama o método refresh do provedor de dados para executar a consulta e atualizar o conjunto de resultados.
5. Use o menu de ação Enviar automaticamente ao alterar para que a página seja enviada automaticamente sempre que o valor de um componente for alterado.

6. Realize as etapas seguintes para sincronizar um componente detalhe com um componente mestre:

   1. Adicione código ao método prerender do bean de página para chamar o método setObject do objeto de conjunto de linha de detalhe para definir algum padrão para os parâmetros de consulta, como a primeira pessoa em uma lista suspensa. Em seguida, chame o método refresh para executar a consulta.
   2. Vincule o componente mestre a um método processValueChanged. Faça este método chamar o método setObject do objeto Conjunto de linhas detalhe para definir os novos parâmetros de consulta. Em seguida, chame o método refresh para executar a consulta.

Consulte também

• Desenvolvendo uma aplicação JSF Visual Web
• Construindo uma árvore de dados de banco de dados
• Executando inserções, atualizações e exclusões
• Conectando-se a um banco de dados MySQL
• Caminho do aprendizado das aplicações Web de Java