HOME / Docs & Support / NetBeans 6.0 / Web Application Documentation

Navegando páginas em uma aplicação Web

Este tutorial mostra como configurar a navegação de página no NetBeans IDE 6.0 e 6.1. Primeiro crie uma aplicação Web no IDE que use navegação simples entre duas páginas. Um botão na primeira página leva você para a segunda página. Depois, você modifica a aplicação para que determine, em tempo de execução, que páginas exibir com base no valor retornado por um componente Lista suspensa. Também são apresentadas alternativas e métodos mais avançados de navegação dinâmica, que permitem que a navegação de página ocorra assim que uma seleção seja feita na Lista suspensa.

Duração esperada: 20 minutos

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 a aplicação
Implementando navegação de página dinâmica avançada

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

Software ou recurso	Versão necessária
NetBeans IDE	Web e Java EE versão 6.1 ou 6.0
Java Development Kit (JDK)	versão 6 ou versão 5
Componentes do JavaServer Faces/ Plataforma Java EE	1.2 com Java EE 5* ou 1.1 com J2EE 1.4
Servidor da aplicação GlassFish	V2
Banco de dados Viagem	Não é necessário

* 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 a primeira página

Na primeira parte deste tutorial, você cria uma aplicação 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.

Primeiro, crie uma página que contenha um componente Texto estático e um componente Botão.

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

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:
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 Page One, digitando diretamente sobre o texto padrão no componente.
Arraste um componente Botão da Paleta, solte-o na página, e altere sua propriedade text para Go.
Observação: existe um problema conhecido que afeta a largura do componente Botão do JSF 1.2 no IE7. A solução alternativa é colocar o componente Botão em um componente de layout (Painel de grade, Painel de grupo ou Painel de layout). Redimensionar o componente de layout redimensiona automaticamente o componente Botão.

Navegando entre duas páginas

Depois, adicione outra página à aplicação e especifique a navegação entre a primeira e a segunda página criando um link ou um conector de página.

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.

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 fluxo de página exibe um ícone para Page1.jsp , que representa a página criada na seção anterior. Observe que esse ícone possui quatro recursos:
1. O emblema indica que tipo de página é representado pelo ícone. A seta verde indica que se trata da página principal do projeto.
2. O nome do arquivo representado pelo ícone distingue as páginas no produto.
3. O sinal de adição expande o ícone para exibir os componentes na página.
4. A porta do conector é usada para desenhar as linhas de navegação entre as páginas.
Crie uma nova página JSP, da seguinte forma:
1. Clique com o botão direito do mouse na área de edição e escolha Novo arquivo.
2. Na caixa de diálogo assistente para Novo arquivo, selecione Java Server Faces em Categorias e Página JSF Visual Web em Tipos de arquivo e clique em Próximo.
3. Aceite o nome padrão, Page2, e clique em Terminar.
  Page2.jsp é aberto no Visual Designer. Clique na aba Faces-config.xml para reabrir o editor de fluxo de página. A Figura 2 mostra o editor de fluxo de página com ambas as páginas.
Clique no sinal de adição no ícone Page1.jsp para aumentá-lo de forma que você possa ver o ícone button1.
Clique no ícone button1 e arraste uma linha para o ícone 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.
Clique duas vezes no nome do conector e altere o nome de case1 para Page 2.

A figura seguinte mostra o editor de fluxo de página com o conector entre as duas páginas.

Clique em XML na barra de ferramentas de edição para ver o código gerado nas duas últimas etapas. A regra de navegação em negrito abaixo é adicionada sob o código do bean gerenciado, representado por reticências (...).

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>Page 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 esta aplicação 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

Agora adicione um rótulo para a segunda página a fim de distingui-la visualmente da primeira página e execute a aplicação.

Clique em Fluxo de página na barra de ferramentas de edição.
Clique duas vezes no ícone de Page2.jsp.
A página se abre no Visual Designer.
Coloque um componente Texto estático na página e altere a propriedade text para Page Two, como mostrado na figura seguinte.
Implante a aplicação pressionando F6.
Depois de a aplicação Web ter sido implantada, a Página um se abre no navegador, como mostrado na figura abaixo:
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 da aplicação. 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 à aplicação 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:

Abra Page1.jsp no Visual Designer.
Coloque um componente Lista suspensa sob o componente Texto estático.
Clique com o botão direito do mouse em Lista suspensa e escolha Configurar opções padrão.
Na caixa de diálogo rotulada Personalizador 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.
Clique em OK para salvar todas as alterações.

Adicionando a terceira página

Em seguida, você cria uma terceira página para a qual a primeira página pode navegar.

Na janela Propriedades, clique com o botão direito do mouse no nó NavigationExample > Páginas da Web e escolha Novo > Página JSF Visual Web. No assistente para Nova página JSF Visual Web, clique em Terminar. O IDE cria Page3.jsp e a exibe.
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

Nesta seção, você ativa a navegação dinâmica da página. Com a navegação dinâmica da página, a aplicação determina em tempo de execução que página é exibida quando o usuário clicar no botão Ir da primeira página.

Abra o Editor de fluxo de página.
Clique no ícone Page1.jsp para mostrar seu conteúdo e arraste uma linha do conector a partir da porta do conector do botão para o ícone Page3.jsp.
Altere o nome do conector de case1 para Page 3.
Clique duas vezes no ícone Page1.jsp para abrir a página no Visual Designer.
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.

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

Observação: Vinculação sob demanda dos recursos do NetBeans IDE 6.1. Se estiver usando o NetBeans IDE 6.1, você deve adicionar manualmente um atributo de vinculação à Lista suspensa em Page 1. Para fazê-lo, clique com o botão direito do mouse no componente e escolha Adicionar atributo de vinculação. Para obter mais informações, consulte o On-demand Binding Attribute Wiki.

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

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

Implantando a aplicação

Teste a navegação entre as páginas.

Implante a aplicação pressionando F6.
Na primeira página, selecione Página 2 na lista suspensa e clique em Ir para ir para a segunda página.
Na Página 2, clique no botão Voltar do navegador para voltar para a primeira página.
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

Na seção anterior, a navegação dinâmica da página é manipulada de forma direta. O usuário seleciona a página para a qual navegar na lista suspensa e clica no botão Ir. Se quiser que a alteração da página se torne efetiva assim que o valor da lista suspensa for alterado, use as etapas a seguir para modificar o projeto criado nas seções anteriores.

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

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 da sua aplicação. A partir do objeto de aplicação, 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 do 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 linhas vermelhas aparecem para indicar que as classes Application, NavigationHandler e FacesContext não foram encontradas. Você importará estas classes na etapa seguinte.

Clique com o botão direito do mouse no Editor de código-fonte e escolha Corrigir 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 para o método do manipulador de navegação

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

Clique em Design na barra de ferramentas de edição para exibir Page1 no Visual Designer.
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.
Implante e execute a aplicação.
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.
Escolha o item Página 3 na lista suspensa para navegar da primeira página para a terceira.

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

O cenário descrito neste tutorial funciona para um número relativamente pequeno de páginas, mas diversas aplicações reais requerem a navegação de dezenas de páginas. Para estabelecer este tipo de navegação:

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

Adiciona uma regra de navegação como a primeira entrada no XML abaixo. Defina <from-view-id> como /*, defina <from-outcome> como alguma string de identificação, e defina <to-view-id> como a página de destino.

Amostra de código 5: Navegação de página XML para aplicações com um número grande 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.

Em todos os métodos de manipulação de ações dos componentes de ação que você deseja enviar para a página, faça os métodos retornarem from-outcome (nesse caso, "login"), como mostrado abaixo:
```
public String button1_action() {
        return "login";
    }
```

Resumo

O fluxo de trabalho típico para a implementação da navegação de página é o seguinte:

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