---

Navegación de Páginas usando Visual JSF (NetBeans 6.1 / 6.5)

• Traducción de Navigating Pages in a Web Application
• Traducción y adaptación por: Diego Silva L.

Este tutorial muestra como realizar una navegación de páginas usando NetBeans 6.0/6.1. Primero crearemos una aplicación web con el IDE y tendrá una simple navegación entre dos páginas. Luego modificaremos la aplicación para que cambie de página de acuerdo a una selección de una lista desplegable. También aprenderemos una manera alternativa y más avanzada de navegación dinámica: cambiar de página ni bien se haya seleccionado un elemento de la lista desplegable.

Creando la primera página

Primero crearemos una página que contenga un componente Static Text y un Button.

1. Crearemos un proyecto de una aplicación web llamado NavigationExample que usará el servidor GlassFish V2 y el framework Visual Web JavaServer Faces.

2. De la sección Basic de la paleta de componentes, arrastremos el componente Static Text y lo soltamos en la página que acabamos de crear. Cambiemos el valor del texto a "Página uno".

3. Ahora arrastremos el componente Button al costado del Static Text que hemos soltado en el paso 2. Escribimos el texto "Ir".

El diseño de la página debería lucir así:

Navegando entre dos páginas

Ahora, crearemos una segunda página en la aplicación y especificamos un enlace que entre la primera y segunda página.

1. Clic derecho en una zona en blanco del editor visual de Page1.jsp y seleccionamos Page Navegation del menú desplegable. El editor de flujo de páginas (Page Flow Editor) mostrará un ícono para Page1.jsp

Este ícono tiene varias partes:

2. Crearemos una segunda página de la siguiente manera: a. Clic derecho en área de edición y seleccionamos New File b. En el asistente de New File, seleccionamos debajo de Categorías JavaServer Faces y debajo de File Types: seleccionamos Visual Web JSF Page.

Clic en Next

c. Aceptamos el nombre propuesto Page2.jsp haciendo clic en Finish. La página Page2.jsp se mostrará en el diseñador visual. Hacemos clic en la ficha faces-config.xml para reabrir la ventana de edición de navegación de páginas.

3. Hacemos clic en el signo "+" del ícono Page1.jsp para mostrar sus componentes. Veremos que aparece el botón button1

4. Hacemos clic en el ícono de button1, lo arrastramos y lo soltamos sobre el ícono de Page2.jsp. Mientras arrastramos el ícono, se mostrará una flecha:

Y cuando soltamos el ratón, se muestran los íconos de las páginas unidos por un conector.

5. Este conector tendrá como nombre por omisión "case1". Cambiaremos el nombre del conector haciendo doble clic sobre él y escribiremos Página 2

6. Podemos hacer clic en el botón "XML" de la barra de herramientas para ver el contenido generado en faces-config.xml. La navegación que hemos creado tendrá la siguiente anotación:

    <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>

Agregando componentes en la segunda página

1. Abriremos Page2.jsp 2. Pegaremos en esta página un componente Static Text y escribiremos Página 2. Así debería lucir en el editor visual de diseño:

3. Ejecutamos la aplicación presionando la tecla F6.

Se nos mostrará el navegador con la primera página (Page1.jsp) que contiene el texto y el botón:

Y cuando hacemos clic en el botín Ir, nos mostrará Page2.jsp

Agregando una lista desplegable para hacer una navegación dinámica.

Ahora aprenderemos a hacer una navegación dinámica. Agregamos un componente Drop Down List en Page1.jsp. El Drop Down List permite al usuario cambiar de página en tiempo de ejecución.

1. Abrimos Page1.jsp en el diseñador visual.

2. Pegamos un componente Drop Down List debajo del componente Static Text

3. Clic derecho sobre el Drop Down List que acabamos de soltar y seleccionar Configure Default Options.

4. En la ventana de diálogo que se muestra llamada Options Customizer - dropDown1, reemplazamos los valores de cada elemento con los valores que se muestra en la siguiente figura. Clic en cada celda para editar el valor, y presionar Intro después de editar en cada celda para que se acepten los cambios:

5. Clic en Ok para guardar los cambios.

Agregando una tercera página

Crearemos una nueva página llamada Page3.jsp y pondremos un Static Text con el valor Página 3

1. En la ventana de proyectos, hacemos clic derecho sobre el nodo NavigationExample > Web Pages y seleccionamos New > Visual Web JSF Page. En el asistente de New Visual Web JSF Page', hacemos clic en Finish. El IDE creará el archivo Page3.jsp y lo mostrará.

2. Pegamos un componente Static Text y colocamos como texto Página 3.

Implementado navegación dinámica

1. Abrimos el editor de navegación (Page Flow editor).

2. Hacemos clic en el ícono Page1.jsp para mostrar sus componentes, y arrastramos una línea de conexión desde el puerto de conector del botón hacía el ícono de Page3.jsp.

3. Cambiamos el nombre del conector de case1 a Página 3.

4. Doble clic en el ícono Page1.jsp para abrirlo en el editor de diseño.

5. Clic derecho sobre el Drop Down List que hemos pegado, y seleccionamos Add Binding Attribute.

6. Doble clic sobre el botón Ir para abrir el editor Java que corresponde a la acción asociada al botón.

7. Modificamos el contenido del método button1_action() con lo siguiente:

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

Ejecutando la aplicación

Ahora ejecutamos la aplicación presionando la tecla F6

1. Seleccionamos un elemento de la lista desplegamos - por ejemplo Página 2- , y hacemos clic en el botón Ir

2. Regresamos a la página anterior presionando Alt+Flecha Izquierda

3. Seleccionamos Página 3 y hacemos clic en el botón Ir.

Implementando navegación dinámica de páginas avanzada.

Ahora, no usaremos el botón Ir para cambiar de página. Cambiará de página cuando el usuario seleccione un nuevo elemento de la lista.

1. Clic en la ficha Page1 y clic en el botón superior Design para ir al diseñador visual.

2. Clic derecho en el botón Ir y seleccionar Delete para borrar el botón.

3. Doble clic en el Drop Down List para mostrar el código de la clase Page1.

4. Modificamos el código del método dropDown1_processValueChange()

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

    }

Podemos escribir el código e ir presionando Ctrl+Espacio para que nos complete el código necesario. O al terminar de escribir, presionamos Ctrl+Mayúscula+I para importar las clases utilizadas en el código.

Las dos primeras líneas del método obtienen la referencia al objeto de nuestra aplicación. Desde este objeto, obtenemos una instancia del manejador de navegación. Cuando se invoca al método handleNavigation() se le especifica el valor obtenido del Drop Down List el cual contiene el valor de la página a donde va a cambiar el sentido de la navegación.

5. Ejecutamos la aplicación para visualizar nuestro proyecto. Veremos que ni bien seleccionamos un elemento de la lista desplegable, la aplicación cambiará a la página correspondiente.

Trabajando con muchas más páginas

Lo que hemos hecho hasta ahora fue utilizando algunas páginas. Pero en la vida real las aplicaciones utilizan docenas de páginas. Veremos como se hace:

1. En el editor de navegación de páginas, clic en el botón superior 'XML'.

2. Agregamos el siguiente código como primera regla de navegación

    <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>

3. Luego, en todas los metodos que deberían cambiar de página, debería devolver el valor asociado al tag <from-outcome/>. Por ejemplo, si deseamos que desde cualquier página queramos ir a Page3.jsp, debemos realizar lo siguiente:

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

Recursos

El proyecto que utilicé en este ejemplo, lo puedes descargar desde aquí: http://diesil-java.googlecode.com/files/NavigationExample.tar.gz

Attachments