Ejemplo crear reglas de navegación

Descripción:  En este artículo vamos a ver un ejemplo sobre cómo crear reglas de navegación paso a paso.
En el siguiente ejemplo vamos a crear una página de menú que nos permitirá ir a otras páginas según la opción seleccionada.

Nota: Puedes descargar el ejemplo en este enlace: Descargar ejemplo

Creamos una primera página que llamamos "menuPrincipal.jspx".
En esta página añadimos dos Links (commandLinks) que nos permitirá luego ver un listado de trabajadores de la empresa o bien el listado de departamentos.

vista menuPrincipal.jspx

Si observamos el atributo action (attribute action) que se nos muestra el inspector de propiedades (Property Inspector), podemos ver las reglas de navegación que nos ofrece para esa página.

vista Property Inspector del componente Link

Opciones disponibles al pulsar el atributo action

Procedemos a crear las nuevas páginas para el proyecto vistaTrabajadores.jspx y vistaDepartamentos.jspx.

vista de diseño faces-config.xml

El funcionamiento de la página va a permitir ir del menu principal a cualquiera de las nuevas página creadas, de éstas al menú principal.
Para añadir una nueva regla de navegación tomamos el JSF Navigation Case.
Lo arrastramos a la página "Origen", y una vez ahí seleccionamos el destino de nuestra regla de navegacion.

JSF Navigation Case desde Component Palette

asignando la regla de navegación

asigna nombre a regla de navegación

A continuación se nos solicita un nombre para esta regla de navegación. Este nombre es el que nos referiremos para aplicar una regla en vez de otra. No se va a utilizar en el resto de la aplicación la página de destino, sino el nombre de la regla.
Si observamos en el property Inspector podemos ver algo más de la regla.

atributos navigation case

aviso por la nueva regla de navegación

En este caso aparece un triángulo amarillo indicándonos que una de las páginas no está creada completamente. Que está creada en el diagrama pero que ésta no tiene correspondencia con un fichero.

Hacemos doble click en la página de destino y se nos muestra la siguiente ventana, para crear la página.
Lo dejamos tal cual y le damos al "OK".

cuadro Create JSF Page

Tras hacerlo vemos que el icono de la nueva página se ha modificado, y también ha desaparecido el triángulo amarillo.

Si vamos a la página menuPrincipal, y seleccionamos el enlace de "ver Listado Trabajadores". Podemos ir a su atributo action, y comprobar cómo la nueva regla ya se encuentra disponible.

vista página menuPrincipal

Ahora hacemos lo mismo para la otra página, para que pueda ser accedida desde "menuPrincipal".

Sobre el nombre de la regla, no tiene por qué ser el mismo nombre que la página a donde se va. Simplemente, debe ser lo suficientemente sencillo como para que podamos tenerlo en mente.
Recomendación: Aunque hay libertad para escribir la regla de navegación como queramos, mantener siempre una misma forma de escribirla (todo minúsculas, por ejemplo, o minúscula y el segundo nombre en mayúscula, como con las funciones en Java). 

asignar la regla de navegación al atributo action

resultado vista diseño faces-config

Si vamos al faces-config, podemos observar en el apartado "Overview", cómo se han creado las reglas de navegación.

vista Navigation rules dentro de overview

Si observamos el fuente (source), podemos ver el código generado. Es interesante estudiar este código, porque nos permite conocer bien su estructura, y también porque en el caso de que queramos modificar a través de código las reglas de navegación, sepamos dónde hacerlo.

código de las reglas de navegación en faces-config

Enlace para Descargar ejemplo

Otros artículos relacionados:
- Reglas de navegación - Navigation Rules