>> Mais documentação do Visual Web Pack

Construindo uma árvore a partir dos dados de um banco de dados

Conteúdo -  Desenhando uma página de início -  Conectando ao banco de dados -  Construindo a árvore a partir da tabela de banco de dados -  Adicionando a página de detalhes -  Adicionando o código -  Definindo a navegação de página -  Fazendo mais: Vinculando os métodos de ação aos nós da árvore -  Uma observação sobre a seleção de nós da árvore

Este tutorial funciona com os recursos e tecnologias seguintes

Componentes JavaServer Faces/ Plataforma Java EE	1.2 com Java EE 5* 1.1 com J2EE 1.4
Banco de dados Viagem	Necessário
Biblioteca de componentes BluePrints AJAX	Desnecessária

* Na data em que o tutorial foi publicado, somente o servidor de aplicativos Sun Java System oferecia suporte ao Java EE 5.

Este tutorial foi adaptado para o Sun Java Application Server PE 9.0, versão de atualização 1, e o Tomcat 5.5.17. Se estiver usando outro servidor, consulte Notas da versão e FAQs para ver os problemas conhecidos e as soluções. Para obter informações detalhadas sobre os servidores suportados e a plataforma Java EE, consulte as Notas da versão.

Desenhando uma página de início

Você começa construindo uma página de início que apresente o componente Árvore e a tabela de banco de dados TRIP. A figura abaixo ilustra a página.

Figura 1: Design da página

1. Crie um novo projeto de aplicativo da Web visual e nomeie-o de ArvoreBancoDeDados.

2. Arraste um componente Árvore da seção Básico da Paleta para a página, digite Informações de viagens e pressione Enter. Na janela Propriedades, defina a propriedade id como displayTree e a propriedade clientSide como True.

   Quando clientSide for True, todos os nós filhos (expandidos ou não) são enviados ao cliente, mas se tornam visíveis somente quando o nó pai for expandido. Quando clientSide for False, somente os nós filhos dos nós pais expandidos são renderizados.

3. Selecione Nó de árvore 1, clique com o botão direito do mouse e escolha Excluir no menu pop-up.

   Para este aplicativo, não é necessário o nó inicial criado pelo IDE porque o preenchimento da árvore é realizado de forma programática. Se o nó não for removido, os valores definidos nos atributos da marca JSP têm prioridade sobre as configurações em tempo de execução e a página exibe o nó.
4. Arraste um componente Grupo de mensagens da Paleta para fora da página, como o canto superior direito desta.

Conectando ao banco de dados

1. Abra a janela Tempo de execução, 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 for exibida, digite viagem como Senha, selecione Lembrar senha durante esta sessão e clique em OK. Se você não vir um nó jdbc no banco de dados VIAGEM, consulte Instruções de instalação do NetBeans Visual Web Pack para obter informações sobre como disponibilizar o banco de dados para o IDE.

   Observação: Se estiver usando o Apache Tomcat, copie o arquivo derbyClient.jar no diretório <tomcat_install>/common/lib antes de tentar conectar-se ao banco de dados.

2. Expanda o nó jdbc do banco de dados VIAGEM e, em seguida, expanda o nó Tabelas conforme ilustrado na figura abaixo.

   Figura 2: Banco de dados Viagem

3. Arraste o nó TRIP para o Visual Designer.

   A janela Esboço mostra um nó tripDataProvider na seção Page1 e um nó tripRowSet na seção SessionBean1.

4. Na janela Esboço, 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 um diagrama da tabela TRIP.

5. Arraste o nó Viagem > Tabelas > PERSON da janela Tempo de execução e solte-o ao lado do diagrama da tabela Trip no Editor de consultas, conforme ilustrado na Figura 3.

   Outro diagrama de tabela é exibido com um vínculo, ou junção, entre os dois diagramas da tabela.
6. Na tabela PERSON, desmarque a caixa de seleção PERSONID.

7. Em Desenhar grade do Editor de consultas, localize a linha NAME da tabela TRAVEL.PERSON. Clique na célula Tipo de classificação e escolha Crescente na lista suspensa.

   Esta ação classifica os nomes de acordo com a ordem alfabética dos sobrenomes na tabela de banco de dados.

8. Localize a linha DEPDATE da tabela TRAVEL.TRIP. Clique na célula Tipo de classificação e escolha Crescente na lista suspensa.

   Esta ação classifica as datas das viagens da mais antiga à mais recente. A figura abaixo ilustra o Editor de consultas.

   Figura 3: Editor de consultas

Construindo a árvore a partir da tabela de banco de dados

1. Abra Page1 para que a janela Esboço esteja visível. Clique com o botão direito do mouse no nó RequestBean1 na janela Esboço e escolha Adicionar > Propriedade. Nomeie a propriedade personId, introduza Integer como tipo e clique em OK.

   Esta propriedade armazena o ID de um viajante, conforme ilustrado na figura abaixo. Posteriormente, você constrói uma página de detalhes Trip que usa esta propriedade a fim de passar o id do viajante para Page 1. Quando esta propriedade for definida, Page1 expande o nó de tal pessoa.

   Figura 4: Adicionando uma nova propriedade

   
   Observação: Devido a um erro nesta versão do produto, pode ser necessário fechar o menu pop-up e clicar com o botão direito do mouse no nó RequestBean uma segunda vez para ativar o submenu Adicionar.

2. Abra Page1 no Editor Java e vá até o método prerender. Substitua o corpo do método prerender pelo código que aparece abaixo em negrito:

   Amostra de código 1: Método prerender de Page1

   public void prerender() { // Se personId do Bean de solicitação estiver definido, então // acabamos de voltar da página Trip // e exibia uma viagem selecionada. // Usamos personId posteriormente para determinar se // o nó de uma pessoa será expandido Integer expandedPersonId = getRequestBean1().getPersonId(); try { // Definir as variáveis que necessitaremos Integer currentPersonId = new Integer(-1); // Se nbrChildren não é 0 então isto é um // postback e já temos nossa árvore int nbrChildren = displayTree.getChildCount(); if (nbrChildren == 0) { // Lista dos nós (pessoas) externos List outerChildren = displayTree.getChildren(); // Apagar conteúdo anterior outerChildren.clear(); // Lista de nós (viagens) internos List innerChildren = null; // Executar a consulta SQL tripDataProvider.refresh(); // Repetir nas linhas do conjunto de resultados. // Sempre que encotrarmos uma nova pessoa, adicionar um nó no primeiro nível. // Adicionar nós de viagens no segundo nível do nó pai de pessoas. boolean hasNext = tripDataProvider.cursorFirst(); while (hasNext) { Integer newPersonId = (Integer) tripDataProvider.getValue( "TRIP.PERSONID"); if (!newPersonId.equals(currentPersonId)) { currentPersonId = newPersonId; TreeNode personNode = new TreeNode(); personNode.setId("pessoa" + newPersonId.toString()); personNode.setText( (String)tripDataProvider.getValue( "PERSON.NAME")); // Se o Bean de solicitação passou o id de uma pessoa, // expanda o nó desta pessoa personNode.setExpanded(newPersonId.equals (expandedPersonId)); outerChildren.add(personNode); innerChildren = personNode.getChildren(); } // Criar um novo nó de viagem TreeNode tripNode = new TreeNode(); tripNode.setId("viagem" + tripDataProvider.getValue("TRIP.TRIPID").toString()); tripNode.setText( tripDataProvider.getValue("TRIP.DEPDATE").toString()); tripNode.setUrl("/faces/Trip.jsp?tripId=" + tripDataProvider.getValue("TRIP.TRIPID").toString()); innerChildren.add(tripNode); hasNext = tripDataProvider.cursorNext(); } } } catch (Exception ex) { log("Exceção ao coletar os dados da árvore", ex); error("Exceção ao coletar os dados da árvore: " + ex); } }

   
   Este código lê os registros da viagem, que estão ordenados pelo id das pessoas. Para cada personId, o código cria um novo nó no primeiro nível da árvore. O código cria, conseqüentemente, um nó no segundo nível (nó aninhado) para cada viagem associada a tal personId. Finalmente, o código vincula o nó de viagem do segundo nível ao método tripNode_action, que você criará posteriormente nesta seção.
3. Pressione Alt-Shift-F para corrigir os erros de classe não encontrada. Na caixa de diálogo Fixar importações, certifique-se de que java.util.List apareça no campo Nome totalmente qualificado e clique em OK.

4. Execute o projeto.

   O navegador da Web se abre e exibe um componente Árvore com todos os nós do primeiro nível mostrando o nome de uma pessoa, conforme ilustrado na figura abaixo. Expanda um nó e veja as datas das viagens desta pessoa. Observe que os nomes aparecem ordenados alfabeticamente pelo sobrenome e as datas, em ordem cronológica, conforme ilustrado na figura abaixo. Na próxima seção, você adiciona o código para navegar até a segunda página quando o usuário clicar em um nó de viagem. A segunda página mostra detalhes da viagem selecionada pelo usuário.

   Figura 5: Nó de árvore dinâmico

Adicionando a página de detalhes

Aqui você adiciona uma segunda página ao aplicativo, conforme ilustrado na figura abaixo. Esta página usa um componente Folha de propriedades para mostrar dinamicamente os detalhes da viagem selecionada pelo usuário na primeira página.

Figura 6: Página de detalhes

1. Abra a janela Projetos, clique com o botão direito do mouse no nó Páginas da Web e escolha Novo > Página no menu pop-up. Nomeie a nova página de Trip.

2. Abra a janela Tempo de execução e arraste o nó Tabelas > TRIP para o Visual Designer da página Trip. Na caixa de diálogo, selecione o botão de opção Criar SessionBean1 tripRowSet1, conforme ilustrado na figura abaixo. Clique em OK.

   Figura 7 : Adicionando um novo provedor de dados com RowSet

   
   A janela Esboço mostra um nó tripDataProvider1 na seção Trip e um nó tripRowSet1 na seção SessionBean1.
3. Na janela Esboço, clique com o botão direito do mouse no nó tripRowSet1 e escolha Editar instrução SQL.

4. Em Desenhar grade do Editor de consultas, clique com o botão direito do mouse em qualquer célula na linha TRIPID e escolha Adicionar critérios de consulta. Na caixa de diálogo, defina a lista suspensa Comparação como =Equals e selecione o botão de opção Parâmetro. Clique em OK.

   Na coluna Critérios de PERSONID aparece =?, que adiciona a seguinte expressão WHERE na consulta SQL.

   WHERE TRAVEL.TRIP.TRIPID = ? 

5. Abra a página Trip no Visual Designer. Arraste um componente Hyperlink da seção Básico da Paleta para a página, digite Início e pressione Enter.

6. Na janela Propriedades do componente Hyperlink, clique no botão de reticências (...) da propriedade action, selecione hyperlink1_action na lista suspensa e clique em OK.

   O IDE adiciona um manipulador de eventos hyperlink1_action ao código-fonte Java.
7. Arraste um componente Grupo de mensagens da Paleta para a página e coloque-o à direita do componente Hyperlink.

8. Arraste um componente Folha de propriedades da seção Layout da Paleta para a página. Coloque-o abaixo do componente Hyperlink.

   O componente Folha de propriedades proporciona um recipiente para a colocação das informações de viagens. O componente Folha de propriedades contém uma Seção de folha de propriedades que, por sua vez, contém um componente Propriedade.

9. Selecione Seção de folha de propriedades 1. Na janela Propriedades, defina a propriedade label como Detalhes da viagem.

   Observação: Se a versão do código-fonte do projeto estiver definida como 1.4, o rótulo da folha de propriedades não é atualizado depois que você fizer as alterações na janela Propriedades.
10. Na janela Esboço, expanda propertySheet1 > section1 e selecione o nó property1. Na janela Propriedades, defina a propriedade label como Data de partida: e pressione Enter.
11. Na janela Esboço, selecione section1, clique com o botão direito do mouse e escolha Adicionar propriedade no menu pop-up. Na janela Propriedades, defina a propriedade label como Cidade de partida: e pressione Enter.

12. Arraste um componente Texto estático da janela Paleta e solte-o no nó property1 da janela Esboço.

    O Texto estático se transforma em um subnó de property1. E também é exibido no Visual Designer.

13. Clique com o botão direito do mouse no componente Texto estático escolha Vincular aos dados no menu pop-up. Se for necessário, clique na guia Vincular ao provedor de dados para trazer a guia para o primeiro plano da tela. Na caixa de diálogo, selecione TRIP.DEPDATE no campo Dados, conforme ilustrado na figura abaixo, e clique em OK.

    A data atual é exibida no componente Texto estático no Visual Designer.

    Figura 8: Caixa de diálogo Vincular aos dados

14. Adicione um componente Texto estático a property2. Vincule o texto estático a TRIP.DEPCITY.

Adicionando o código

1. Abra a página Trip no Editor Java e vá até o método prerender. Adicione o código seguinte (em negrito) para que o método obtenha o tripId armazenado em Page1.

   Amostra de código 2: Método prerender da página Trip

   public void prerender() { // Obter o id da pessoa a partir dos parâmetros de solicitação String parmTripId = (String) getExternalContext().getRequestParameterMap().get("tripId"); if (parmTripId != null) { Integer tripId = new Integer(parmTripId); try { getSessionBean1().getTripRowSet1().setObject(1, tripId); tripDataProvider1.refresh(); } catch (Exception e) { error("Não é possível exibir a viagem " + tripId); log("Não é possível exibir a viagem " + tripId, e); } } else { error("Não há nenhum id de viagem especificado "); } }

   
   O método setObject define o primeiro argumento da consulta de viagem como o tripId. Isto é, o método substitui ? por tripId na consulta. Esta consulta tem somente um argumento, de modo que setObject precisa ser chamado apenas uma vez. A chamada a tripDataProvider1.refresh() chama CachedRowSet.release() e redefine o cursor do CachedRowSetDataProvider. Dessa vez, o CachesRowSet não é executado.

2. Vá até o método hyperlink1_action. Adicione o código seguinte (em negrito) a fim de passar o personId para Page1:

   Amostra de código 3: Método hyperlink1_action da página Trip

   public String hyperlink1_action() { getRequestBean1().setPersonId( (Integer)tripDataProvider1.getValue("trip.personid")); return null; }

Definindo a navegação de página

1. Abra a janela Projetos e clique duas vezes no nó Navegação de página.
2. Clique na porta do conector ao lado do ícone de Page1.jsp e arraste um conector até o ícone de Trip.jsp.

3. Clique no ícone de Trip.jsp para ampliá-lo e arraste um conector do componente Hyperlink para o ícone de Page1.jsp. A figura abaixo ilustra a configuração de navegação de página.

   Figura 9 : Navegação de página

4. Execute o aplicativo. Na página Início, expanda o nome de um viajante e clique em uma data de viagem.

   A página Trip se abre com os detalhes desta viagem, conforme ilustrado na figura abaixo.

   Figura 10: Página de detalhes em tempo de execução

5. Na página Trip, clique no vínculo Início. Observe que, na página Início, o nó do primeiro nível da última viagem selecionada ainda está expandido.
6. Continue explorando o aplicativo expandindo e recolhendo os nós de árvore do primeiro nível e clicando nas datas das viagens.

Fazendo mais: Vinculando os métodos de ação aos nós da árvore

1. Adicione uma propriedade tripId ao Bean de solicitação de tipo Integer.

2. Adicione o método seguinte ao código-fonte Java de Page1:

   Amostra de código 4: Método tripNode_action de Page1

   public String tripNode_action() { // Obter o id do nó de árvore atualmente selecionado String nodeId = displayTree.getSelected(); // Localizar o componente do nó de árvore com determinado id TreeNode selectedNode = (TreeNode) this.getForm1().findComponentById(nodeId); try { // A propriedade id do nó está formada pela "viagem" mais o id da viagem // Extrair o id da viagem e salvá-lo para a próxima página Integer tripId = Integer.valueOf(selectedNode.getId().substring(4)); getRequestBean1().setTripId(tripId); } catch (Exception e) { error("Não é possível converter o id do nó em Integer: " + selectedNode.getId().substring(4)); return null; } return "case1"; }

3. No método prerender da página 1, substitua o código seguinte pelo código de amostra 5.

        tripNode.setUrl("/faces/Trip.jsp?tripId=" +
   		     tripDataProvider.getValue("TRIP.TRIPID").toString());

   Amostra de código 5: Aperfeiçoando o método prerender

   ExpressionFactory exFactory = getApplication().getExpressionFactory(); ELContext elContext = getFacesContext().getELContext(); tripNode.setActionExpression( exFactory.createMethodExpression( elContext, "#{Page1.tripNode_action}", String.class, new Class<?>[0]));

4. Pressione Alt-Shift-F para corrigir as importações.

5. No método prerender() da página Trip, substitua o corpo pelo seguinte método:

   Amostra de código 6: Método prerender da página Trip

   public void prerender() { Integer tripId = getRequestBean1().getTripId(); try { getSessionBean1().getTripRowSet1().setObject(1, tripId); tripDataProvider1.refresh(); } catch (Exception e) { error("Não é possível exibir a viagem " + tripId); log("Não é possível exibir a viagem " + tripId, e); } }

6. Execute o aplicativo.

Uma observação sobre a seleção de nós da árvore

Se o seu projeto for J2EE 1.4, veja abaixo algumas informações importantes sobre a seleção de nós de árvore:

• O componente Árvore de JavaServer Faces 1.1 não pode usar os métodos getSelected ou getCookieSelectedTreeNode para determinar que nós foram selecionados. Se os usuários tiverem os cookies do navegador desativados, estes métodos não retornarão os valores corretos. Da mesma forma, nos navegadores com cookies ativados, o cookie pode retornar valores incorretos na primeira vez que o usuário visitar uma página e clicar em um nó. Se houver cookies restantes de uma visita anterior, o valor selecionado previamente pode ser retornado. A versão JavaServer Faces 1.2 do componente Árvore não usa cookies para salvar os valores selecionados, por essa razão esse problema não existe na versão 1.2.
• O realce dos nós de árvore não está claro entre uma sessão e outra. Se este programa for executado mais de uma vez neste tutorial, o nó selecionado na última sessão é realçado na nova sessão quando a página é aberta pela primeira vez. Este problema se deve ao uso de cookies para transmitir o ID do nó selecionado.

Resumo

Neste tutorial, você construiu uma estrutura em árvore a partir de dados de um banco de dados. Construiu um aplicativo de duas páginas, das quais a primeira apresentava um componente Árvore. Preencheu os nós do primeiro nível da árvore com os nomes provenientes de um banco de dados e os nós do segundo nível, com as viagens de tal pessoa. Vinculou cada viagem da primeira página a uma segunda página, que exibia os detalhes de tal viagem.

Consulte também:

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