Centro de Comercio y Servicios

Regional Cauca

GUIA #4. NAVEGACIÓN CON JSF

1. Definición proyecto
En el presente tutorial se va a realizar un proyecto web con 3 páginas en las cuales vamos a realizar la navegación,
para ir de un lado a otro dentro de nuestro sistema.

Las herramientas que se utilizarán para el desarrollo son:

- Entorno de desarrollo: Netbeans 7.3
- Servidor de Aplicaciones: Glassfish 3.1.2
- Frameworks JSF (PrimeFaces)

2. Creación de Proyecto Web

- En nuestro entorno de desarrollo creamos un nuevo proyecto web.

- El nombre de proyecto en nuestro caso será “NavegacionWeb”, y se elige el espacio de trabajo en donde se
guardará el proyecto.

- Se elige el servidor de aplicaciones y la versión del jdk

Oscar Viveros Egas. ohviveros@misena.edu.co

 Centro de Comercio y Servicios
Regional Cauca

- Se elige el framework y en la pestaña de componentes se elige como se marca en la imagen y se da click en

finalizar.

- Al proyecto, vamos a crearle tres páginas xhtml adicionales: personas y universidad. El proyecto verá de la
siguiente forma:

3. Creación del menú inicial

Ahora, necesitamos definir las interfaces web que nos permitan navegar de una página a otra. El diseño de este
tutorial va a ser lo más sencillo posible, ya que solo nos interesa trabajar la parte de navegación. De esta forma, el
archivo index.xhtml, que contendrá el menú, solo tendrá dos botones para direccionar a las respectivas páginas:

Y su código es como se muestra a continuación:

Oscar Viveros Egas. ohviveros@misena.edu.co

 Centro de Comercio y Servicios
Regional Cauca

De la misma forma, el diseño de las páginas y el código de “personas.xhtml” y “universidades.xhtml” se muestran a

continuación:

- personas.xhtml:

- universidades.xhmtl:

4. Creación de los MBeans, para el control de la vista.

Si bien no es obligatorio crear un MBean para cada una de las páginas, si es lo mas recomendable, ya que en
proyectos de gran tamaño se pueden presentar confusiones si se maneja un mismo MBean para controlar el
funcionamiento de varias páginas. Por esto, vamos a crear 3 clases MBeans (a continuación se muestra solamente
para el index, pero se debe repetir el proceso para persona y universidades):

Recordamos que en caso de no encontrar la opción en la lista, se debe elegir la opción “Other” y en la categoría
“Java Server Faces” debe encontrarse. En la ventana emergente, elegimos el nombre, el paquete y el tipo según se
muestra a continuación:

Oscar Viveros Egas. ohviveros@misena.edu.co

 Centro de Comercio y Servicios
Regional Cauca

Una vez se han creado los 3 MBeans, el proyecto debe verse de la siguiente manera:

Ahora, creamos el código de la clase MenuMBean.java y PersonaMBean.java (la clase Universidades no se va a

realizar, pero el procedimiento es prácticamente el mismo que para Persona):

- MenuMBean: agregamos dos métodos, los cuales corresponderán a las opciones de gestionar personas o
universidades:

Oscar Viveros Egas. ohviveros@misena.edu.co

 Centro de Comercio y Servicios
Regional Cauca

- PersonaMBean: creamos un método para la acción del botón volver.

Es necesario que tengamos especial cuidado con el retorno de cada uno de los métodos que hemos creado, ya que
será este el que usemos para la navegación, y en los archivos xhtml, debemos agregar la opción “action” a cada uno
de los botones, por ejemplo el archivo index.xhtml quedará así (debe hacerse lo mismo para los archivos xhtml de
Persona y de Universidades):

5. Creación de las reglas de navegación:

A partir de ahora, debemos crear el archivo que nos va a permitir navegar entre una página y otra. Para esto, sobre
el proyecto hacemos click derecho, elegimos la opción “New” y elegimos “Other”

Oscar Viveros Egas. ohviveros@misena.edu.co

 Centro de Comercio y Servicios
Regional Cauca

Dentro de la categoría “Java Server Faces” elegimos la opción “JSF Faces Configuration” y damos click en continuar:

En el paso que sigue, dejamos las opciones que están por defecto y damos click en finalizar. El proyecto debe quedar
de la siguiente forma (se debe haber creado el archivo “faces-config.xml”:

Dentro del archivo xml que se acabó de crear, agregamos el código para la navegación. Por ejemplo, en caso de que
en el menú principal (index) se de click sobre el botón “Gestionar Personas”, nuestra aplicación debe ir hacia la
página de personas. El código que nos permite esto es el siguiente:

Este código, indica que se está creando una regla de navegación (navegation-rule), la cual parte desde el archivo
index.xhtml (from-view-id), y especifica que en caso (navigation-case) de que haya un retorno con la palabra
“personas” (from-outcome) la vista debe redirigirse hacia la página personas.xhtml (to-view-id).

Ahora, vamos a agregar el caso en que desde la página de menú se elija la opción para gestionar universidades. El
código quedaría como se muestra:

Oscar Viveros Egas. ohviveros@misena.edu.co

 Centro de Comercio y Servicios
Regional Cauca

En esta parte, es de especial cuidado que los nombres de los archivos sean exactamente como aparecen en el
proyecto. De la misma forma, los valores que van dentro de la etiquete <from-outcome> corresponden a los valores
de retorno de los métodos que están en cada uno de los MBean que creamos en el numeral 4.

El código completo (suponiendo que hemos agregado el método de la clase UniversidadesMBean que quedó
pendiente en el numeral 4) del archivo “faces-config.xml” es como se muestra a continuación:

Finalmente, podemos ejecutar nuestro proyecto y probar la navegación.

¡¡¡GRACIAS!!!

Oscar Viveros Egas. ohviveros@misena.edu.co