>> Mais documentação do Visual Web Pack

Configurando a navegação de página

Conteúdo -  Criando a primeira página -  Navegando entre duas páginas -  Adicionando componentes a uma segunda página -  Adicionando uma lista suspensa na navegação dinâmica -  Adicionando a terceira página -  Implementando navegação de página dinâmica -  Implantando o aplicativo -  Implementando navegação de página dinâmica avançada

Este tutorial funciona com as tecnologias e os recursos seguintes:

Componentes JavaServer Faces/ Plataforma Java EE	1.2 com Java EE 5* 1.1 com J2EE 1.4
Banco de dados Viagem	Não é necessário
Biblioteca de componentes BluePrints Ajax	Não é necessário

* Na data da publicação deste tutorial, somente o servidor de aplicativos Sun Java System oferecia suporte ao Java EE 5.

Este tutorial foi adaptado para ser usado com o Servidor de aplicativos Sun Java System PE 9.0, versão atualizada 1, e o Tomcat 5.5.17. Se você estiver usando um servidor diferente, consulte as Notas de versão e as Perguntas freqüentes para obter informações sobre problemas conhecidos e soluções sugeridas. Para obter informações detalhadas sobre os servidores suportados e a plataforma Java EE, consulte as Notas de versão.

Criando a primeira página

Na primeira parte deste tutorial, você cria um aplicativo da Web com duas páginas e navega entre estas duas páginas usando um botão. Depois, você adiciona um componente Lista suspensa que permite ao usuário escolher a página de destino em tempo de execução.

1. Crie um novo projeto de aplicativo da Web visual e nomeie-o ExemploNavegação.

   O novo projeto aparece com a página inicial aberta no Visual Designer. A figura abaixo ilustra a página que você criará nas etapas a seguir:

   Figura 1: Design da página 1

2. Arraste um componente Texto estático da seção Básico da Paleta e solte-o na página. Altere a propriedade text do componente para Página um digitando diretamente sobre o texto padrão do componente.
3. Arraste um componente Botão da Paleta, solte-o na página e altere a propriedade text para Ir.

Navegando entre duas páginas

1. Clique com o botão direito do mouse em um espaço vazio na área de edição do Editor visual e escolha Navegação de página no menu pop-up.

   O Editor de navegação de página exibe um ícone para Page1.jsp, que representa a página criada na seção anterior. Você também pode abrir o Editor de navegação de página clicando no nó Navegação de página da janela Projetos.
2. Clique com o botão direito do mouse na área de edição e escolha Adicionar página.

3. Clique em OK na caixa de diálogo Selecionar nome da página para aceitar o nome padrão, Page2.

   É exibido um ícone para Page2.jsp no Editor de navegação, como mostrado na Figura 2, e o nó Page2.jsp é adicionado na janela Projetos no nó ExemploNavegação > Páginas da Web.
4. Clique no ícone de Page1.jsp para ampliá-lo a fim de poder ver o ícone button1. Observe o ícone azul ao lado do nome button1. Este ícone é a porta do conector.
5. Clique na porta do conector e arraste uma linha para o ícone de Page2.jsp. É exibido um conector que está ancorado na primeira página e termina na segunda página. Por padrão, o conector recém-criado é denominado case1.

6. Clique duas vezes no nome do conector e altere-o de case1 para Página 2.

   A figura abaixo ilustra o Editor de navegação de página com o conector entre as duas páginas.

   Figura 2 Editor de navegação de página

7. Clique em XML na barra de ferramentas de edição para ver o código gerado nas duas últimas etapas.

   Amostra de código 1: Código gerado

   <?xml version="1.0" encoding="UTF-8"?> <faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"> <navigation-rule> <from-view-id>/Page1.jsp</from-view-id> <navigation-case> <from-outcome>Página 2</from-outcome> <to-view-id>/Page2.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>

   
   O código adicionado dentro das marcas faces-config especifica uma regra de navegação simples para este aplicativo da Web. Cada regra de navegação especifica um página de origem e uma ou mais páginas de destino.

Adicionando componentes a uma segunda página

1. Clique em Navegação na barra de ferramentas de edição.

2. Clique duas vezes no ícone de Page2.jsp.

   A página se abre no Visual Designer.
3. Coloque o componente Texto estático na página e altere a propriedade text para Página dois, como mostrado na figura abaixo.
   
   

   Figura 3: Layout da página 2

4. Implante o aplicativo pressionando F6.

5. Depois de o aplicativo da Web ter sido implantado, a Página um se abre no navegador, como mostrado na figura abaixo:

   Figura 4: Aplicativo da Web de navegação simples

6. Clique no botão Ir, que leva você da primeira página para a segunda.

Nesta seção, você criou duas páginas e estabeleceu a navegação simples de uma para a outra. Na próxima seção, você irá estabelecer a navegação baseada nas seleções de um componente Lista suspensa.

Adicionando uma lista suspensa na navegação dinâmica

Agora você irá aprender sobre a navegação dinâmica de página. Você adiciona um componente Lista suspensa à primeira página do aplicativo. O componente Lista suspensa permite ao usuário escolher a página de destino em tempo de execução. Depois, você adiciona uma terceira página ao aplicativo para que a lista suspensa contenha duas opções de destino.

A figura abaixo ilustra as modificações que você fará na Página 1 nas etapas a seguir:

Figura 5: Layout da primeira página modificada

1. Abra Page1.jsp no Visual Designer.
2. Coloque o componente Lista suspensa embaixo do componente Texto estático.
3. Clique com o botão direito do mouse em Lista suspensa e escolha Configurar opções padrão.

4. Na caixa de diálogo rotulada Perzonalizador de opções - dropDown1, substitua os valores de cada um dos itens padrão pelos valores ilustrados na figura abaixo. Clique em cada uma das células da tabela para editar o valor e pressione Enter depois de editar cada campo para que a alteração seja aceita.

   Figura 6: Caixa de diálogo Personalizador de opções

5. Clique em OK para salvar todas as alterações.

Adicionando a terceira página

Crie a terceira página para a qual a primeira página poderá navegar. A figura abaixo ilustra a página que você criará nas etapas a seguir:

Figura 7: Layout da terceira página

1. Na janela Projetos, clique com o botão direito do mouse no nó ExemploNavegação > Páginas da Web e escolha Novo > Página. No assistente para Nova página, clique em Finalizar. O IDE cria Page3.jsp e a exibe.
2. Arraste um componente Texto estático da janela Paleta e solte na página. Defina o texto deste componente como Página três.

Implementando navegação de página dinâmica

1. Abra o Editor de navegação de página.
2. Clique no ícone de Page1.jsp para exibir o seu conteúdo e arraste uma linha a partir da porta do conector do botão para o ícone de Page3.jsp.
3. Altere o nome do conector de case1 para Página 3.
4. Clique duas vezes no ícone de Page1.jsp e clique em Design na barra de ferramentas Edição para exibir o layout da Página 1.
5. Clique duas vezes no componente de botão Ir para exibir o código-fonte do método manipulador de ações no editor de Java.

6. Substitua a instrução prerender no método pelo código que aparece abaixo em negrito.

   Amostra de código 2: Instrução Return

   public String button1_action() { return (String) dropDown1.getValue(); }

Implantando o aplicativo

1. Implante o aplicativo pressionando F6.
2. Na primeira página, selecione Página 2 na lista suspensa e clique em Ir para ir para a segunda página.
3. Na Página 2, clique no botão Voltar do navegador para voltar para a primeira página.
4. Agora selecione Página 3 na lista suspensa e clique em Ir para ir para a terceira página.

Implementando navegação de página dinâmica avançada

1. Clique na guia Page1 e em Design na barra de ferramentas de edição para alternar para o Visual Designer.
2. Clique com o botão direito do mouse no botão Ir e selecione Excluir.
3. Clique duas vezes no componente Lista suspensa para ver o código da classe da Page1 no editor de Java.

4. Adicione o código seguinte em negrito ao método manipulador dropDown1_processValueChange(). As duas primeiras linhas do código recuperam uma referência de objeto do seu aplicativo. A partir do objeto de aplicativo, você pode obter uma instância do Manipulador de navegação. Chamar o método handleNavigation() neste objeto especifica o valor que é recuperado do componente Lista suspensa, que especifica a página para a qual navegar.

   Amostra de código 3: Método manipulador de navegação

   public void dropDown1_processValueChange(ValueChangeEvent event) { Application application = getApplication(); NavigationHandler navigator = application.getNavigationHandler(); FacesContext facesContext = getFacesContext(); navigator.handleNavigation(facesContext, null,(String) dropDown1.getValue()); }

   
   Observe que as linhas onduladas vermelhas aparecem para indicar que não é possível encontrar as classes Application, NavigationHandler e FacesContext. Você importará estas classes na etapa seguinte.

5. Clique com o botão direito do mouse no Editor de fontes e escolha Fixar importações para adicionar automaticamente as seguintes instruções de importação próximas à parte superior do arquivo de origem:

   Amostra de código 4: Instruções de importação do método manipulador de navegação

   import javax.faces.application.Application; import javax.faces.application.NavigationHandler; import javax.faces.context.FacesContext;

6. Clique em Design na barra de ferramentas de edição para exibir Page1 no Visual Designer.
7. Clique com o botão direito do mouse no componente Lista suspensa e selecione Enviar automaticamente ao alterar para indicar que o item selecionado será enviado automaticamente na seleção.
8. Implante e execute o aplicativo.
9. Escolha o item Página 2 na lista suspensa para navegar da primeira página para a segunda. Clique no botão Voltar para voltar à primeira página.
10. Escolha o item Página 3 na lista suspensa para navegar da primeira página para a terceira.
    

Fazendo mais: Trabalhando com um grande número de páginas

1. No editor de Navegação de página, clique no botão XML na barra de ferramentas de edição.

2. Adiciona uma regra de navegação como a primeira entrada no XML abaixo. Defina <from-view-id> como /*, defina <from-outcome> como uma seqüência identificadora, e defina <to-view-id> como a página de destino.

   Amostra de código 5: XML de navegação de página para aplicativos com um grande número de páginas

   <?xml version="1.0" encoding="UTF-8"?> <faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"> <navigation-rule> <from-view-id>/*</from-view-id> <navigation-case> <from-outcome>login</from-outcome> <to-view-id>/Page3.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <from-view-id>/Page1.jsp</from-view-id> <navigation-case> <from-outcome>case1</from-outcome> <to-view-id>/Page2.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>

   
   

   Quando você voltar para o editor de Navegação de página, este irá mostrar erros, mas pode ignorá-los.

3. Em todos os métodos de manipulação de ação para componentes de ação que você deseja enviar para a página, os métodos devem retornar from-outcome (neste caso, "login"), como mostrado abaixo:

   public String button1_action() {
           return "login";
       }

Resumo

1. Criar as páginas.
2. Colocar na página os componentes que oferecem suporte à navegação, como botões e listas suspensas.
3. Arrastar os conectores entre componentes e páginas usando o Editor de navegação.
4. Implementar navegação mais avançada usando o método manipulador dropDown1_processValueChange().
   

Consulte também:

• Guia de introdução do NetBeans Visual Web Pack 5.5
• Usando componentes de vinculação de dados para acessar um banco de dados
• Usando os fragmentos de página