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

Neste tutorial, use o NetBeans IDE 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.

Conteúdo

• Criando uma página que inclua um componente Lista suspensa
• 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.

Observação para usuários do NetBeans IDE 6.1:

• Criar um projeto no NetBeans 6.1 inclui novas opções que podem ser deixadas como padrão. Por exemplo, a caixa de verificação Usar pasta dedicada para armazenar bibliotecas pode ficar desmarcada.
• Vinculação sob demanda dos recursos do NetBeans IDE 6.1. Onde os componentes requerem codificação de Java, agora você deve adicionar manualmente o atributo de vinculação aos componentes em uma aplicação Visual Web JSF. Para fazê-lo, clique com o botão direito do mouse em cada componente e escolha Adicionar atributo de vinculação. Para obter mais informações, consulte o On-demand Binding Attribute Wiki.

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.

Observação: Vinculação sob demanda dos recursos do NetBeans IDE 6.1. Onde os componentes requerem codificação de Java, agora você deve adicionar manualmente o atributo de vinculação aos componentes em uma aplicação Visual Web JSF. Para fazê-lo, clique com o botão direito do mouse em cada componente e escolha Adicionar atributo de vinculação. Para obter mais informações, consulte o On-demand Binding Attribute Wiki.

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

   O IDE cria a primeira página com o nome Page1 e exibe a página no Visual Designer.

   Observação: Criar um projeto no NetBeans 6.1 inclui novas opções que podem ser deixadas como padrão. Por exemplo, a caixa de verificação Usar pasta dedicada para armazenar bibliotecas pode ficar desmarcada.

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, altere o id para personIdDD.

5. Use Ctrl-Shift-arrastar do componente Lista suspensa para o componente Rótulo para criar uma relação entre os dois componentes.

   A propriedade for do componente Rótulo agora é definida como personIdDD.

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.

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.

O NetBeans IDE vem com um banco de dados Viagem de amostra que aparece sob o nó Bancos de dados.

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 partido 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. Se a caixa de diálogo Conectar aparecer, indique viagem para Usuário e senha, selecione Lembrar senha durante esta sessão e clique em OK. Caso você não veja um nó jdbc para o banco de dados VIAGEM, consulte as perguntas freqüentes Como ativo o banco de dados de amostra Viagem para MySQL no NetBeans IDE para obter informações sobre como disponibilizar o banco de dados para o IDE.

2. Expanda o nó Viagem > Tabelas.

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

   

3. Arraste 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, você deseja vincular 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.

   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.

Observação: Vinculação sob demanda dos recursos do NetBeans IDE 6.1. Onde os componentes requerem codificação de Java, agora você deve adicionar manualmente o atributo de vinculação aos componentes em uma aplicação Visual Web JSF. Para fazê-lo, clique com o botão direito do mouse em cada componente e escolha Adicionar atributo de vinculação. Para obter mais informações, consulte o On-demand Binding Attribute Wiki.

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

3. Arraste VIAGEM 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 o nó Viagem > Tabelas > TRIPTYPE da janela Serviços e solte-o na visualização Design, conforme 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:1527/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. Na coluna Critérios de PERSONID aparece =?, que adiciona a seguinte expressão WHERE na consulta SQL.

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

   WHERE TRAVEL.TRIP.PERSONID = ?

   
   Dica de solução de problemas: neste ponto, você pode verificar se a sua consulta está definida corretamente. Clique com o botão direito do mouse no Editor de consultas e escolha Executar consulta. Na caixa de diálogo Especificar valores de parâmetros, digite 1 para o valor do parâmetro TRAVEL.TRIP.PERSONID e clique em OK. A saída da sua consulta para a Pessoa 1 está no painel de resultados do editor de consultas.

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.

    O IDE salva todos os arquivos alterados, reconstrói e reimplanta a aplicação no servidor.
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. Clique com o botão direito do mouse no componente Texto estático 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 título do trabalho não se altera. A razão de que não se altere é que à aplicação precisa sincronizar 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.

Observação: Vinculação sob demanda dos recursos do NetBeans IDE 6.1. Onde os componentes requerem codificação de Java, agora você deve adicionar manualmente o atributo de vinculação aos componentes em uma aplicação Visual Web JSF. Para fazê-lo, clique com o botão direito do mouse em cada componente e escolha Adicionar atributo de vinculação. Para obter mais informações, consulte o On-demand Binding Attribute Wiki.

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.

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