Flujos de navegación JSF en Eclipse

En la aplicación de ejemplo que mostramos en la introducción a Jsf 2.0, ya vimos la navegación implícita. En este artículo hablaremos sobre los distintos mecanismos para movernos entre las distintas páginas de nuestra aplicación.

Navegación implícita

En el ejemplo comentado anteriormente, se mostraba un botón que contenía una acción:

Al pulsar dicho botón, si existe una página “confirmar” con la misma extensión que la página actual en la que estamos, se nos mostrará dicha página. Hay cuatro componentes que nos permiten realizar la navegación, estos son:

  • h:commandButton y h:commandLink → Con el atributo “action
  • h:button y h:link  Con el atributo “outcome

La principal diferencia entre los componentes “commandButton y “button consiste en que el primero, realiza un HTTP POST, mientras que el segundo, realiza un HTTP GET, donde, si por ejemplo tenemos un formulario, el valor de los campos no sería enviado. Lo mismo ocurre en el caso de los enlaces.

El valor de los atributos puede ser un literal, una expresión EL que devuelva un String, o un objeto Java con su método toString().

Navegación basada en reglas

Se pueden definir flujos de navegación basados en reglas editando el fichero “faces-config.xml”, analicemos el siguiente ejemplo:

Como se puede ver en el código anterior, se define una regla de navegación “navigation-rule” que tiene su origen en una página llamada “pagina_de_origen.xhtml”, desde esa página se inicia la navegación. Las reglas de navegación, tienen un origen y n casos de navegación “navigation-case que contienen los siguientes elementos:

  • from-action → Un método de acción que devuelve un String, que se compara con la cadena definida en “from-otucome”, si los valores son iguales, nos moveríamos a la vista “to-view-id”.
  • from-outcome → Este valor se compara con “form-action” si se ha definido, o con el atributo “action” del “commandButton” o del “commandLink” que lance el evento.
  • to-view-id → La página de destino
Navegación basada en reglas en Eclipse

Vamos a realizar un ejemplo sencillo que consistirá en un formulario de login que nos enviará a una página de bienvenida, si el usuario o el password es correcto, o a la página de error en caso contrario. Además se añade un enlace que nos llevará a una página de despedida. La aplicación tendrá esta pinta:

Ejemplo de aplicación de loging en JSF

Ejemplo de aplicación de loging en JSF (pinchar para agrandar)

Como se ha comentado podemos centralizar la información de la navegación en un único archivo “faces-config.xml”. Esto nos permite utilizar herramientas para definir los flujos de manera visual. Por ejemplo, si abrimos el archivo anterior con la herramienta “Faces config editor” de Eclipse, se nos mostrará una ventana como la siguiente:

The Faces Configuration Editor

The Faces Configuration Editor (pinchar para agrandar)

Como se puede ver, en la parte inferior, se muestran una serie de pestañas (Introduction, Overview… Etc.), que nos permiten definir nuestros flujos de manera visual. Vamos a ver un ejemplo de esto. Partiremos del proyecto de ejemplo que creamos en este post. En primer lugar, vamos a crear tres archivos: “bienvenido.xhtml”, “error.xhtml” y “hastapronto.xhtml”, para ello podemos copiar y pegar en la misma carpeta “webapp” el archivo “login.xml” y cambiarle el nombre.

Vamos a editar todos estos archivos. La primera vista, “login.xhtml” quedará así:

Si analizamos el código anterior, vemos que se utiliza un “h:panelGrid” para colocar los componentes. Hemos definido un botón que invoca a la función “validaUsuario” del managed-bean, lo que nos permite definir un flujo dinámico en función del valor que devuelva esta función.

Por otro lado, y a modo de ejemplo, hemos colocado un enlace para realizar una navegación estática, de modo que cuando se pinche en el enlace, nos muestre la página “hastapronto.xhtml”.

La vista “bienvenido.xhtml” quedará de este modo:

Las páginas “error.xhtml” y “hastapronto.xhtml” serán sililares, y mostrarán simplemente un mensaje, creo que no merece la pena poner el código.

Crear la regla de navegación

Desde el “Faces Configuration Editor” de Eclipse que mostramos anteriormente, seleccionaremos la pestaña “Navigation Rule”. En la parte derecha, tenemos una paleta que podemos mostrar u ocultar. Dentro de la paleta, pinchamos una vez en “Page” y a continuación pinchamos en el área de trabajo de la derecha donde queramos que se represente la vista. Se nos abrirá un cuadro de dialogo donde podremos elegir el archivo “login.xhtml”. Hacemos lo mismo con el resto de vistas.

Seguidamente, en la paleta pinchamos en “Link” y enlazamos “login.xhtml” con “bienvenido.xhtml”. A continuación, seleccionamos la flecha que se ha pintado y en la vista de propiedades, en el apartado “From Action” introducimos el método del managed-bean que queremos invocar: “#{loginBean.validaUsuario}”. En el campo “Form Outcome”, introducimos “usuarioCorrecto”.

Repetimos lo anterior para el caso de la página “error.xhtml” y “hastapronto.xhtml” y guardamos los cambios con “Ctrl+S”. El resultado será similar a este:

Navigation Rule en Eclipse

Navigation Rule en Eclipse (pinchar para agrandar)

Si pulsamos en la pestaña “Source” para ver el código fuente, vemos que se ha creado una regla de navegación por cada uno de los enlaces. Podemos dejar un único “navigation-rule”, de este modo:

from-view-id

Vamos a prestar atención al nodo, from-view-id, definida en la regla de navegación. En lugar de indicar una página de origen en particular, es posible utilizar comodines para hacer referencia a un grupo de páginas, a páginas dentro de un directorio, a todas las páginas, etc. Por ejemplo, si queremos colocar un enlace en todas las páginas de nuestra aplicación, que nos envíe a la página de login, podríamos configurarlo del siguiente modo:

navigation-case

Siguiendo con el análisis del código anterior, podemos ver que existen una serie de casos de navegación “navigation-case”. Todos estos casos se evalúan por orden de aparición, de modo que “el primero gana”, esto es, el primero que casa sus propiedades retorna su “to-view-id” para la navegación. Se pueden usar condiciones “if”, de modo que no es suficiente con que case el evento, sino que además debe cumplir la condición para que se envíe a su vista. Veamos un ejemplo de esto:

Por otra parte, otra de las opciones que podemos utilizar es la etiqueta “redirect“, lo que provoca que el navegador del cliente realice una nueva petición HTTP, en lugar de presentar la respuesta sin realizar esa solicitud. Si en el ejemplo que estamos implementando en este artículo, pulsamos el enlace para salir de la aplicación, comprobaremos que la url de nuestro navegador sigue apuntando a login.xhtml, si queremos que cambie, tendremos que añadir “redirect“en la configuración del caso de navegación.

También se pueden incluir en el “navigation-case” parámetros que estarán presentes en la redirección, del siguiente modo:

NOTA: Se puede indicar en la navegación implícita que realice “redirect”, añadiendo el parámetro “faces-redirect”. Por ejemplo:

<h:commandButton value=”Botón” action=”destino?faces-redirect=true” />

Crear el Managed Bean

Para crear el bean manejado, pulsaremos en la pestaña “ManagedBean” y a continuación pulsaremos el botón “Add”. Se nos abrirá una ventana de diálogo, donde podremos seleccionar una clase existente o bien crearla. Seleccionaremos esta última opción y pulsaremos siguiente:

Nuevo Managed Bean

Nuevo Managed Bean (pinchar para agrandar)

Seleccionamos el paquete “com.notodocodigo” de nuestro proyecto de ejemplo y llamamos a nuestra clase “LoginBean” y  pulsamos en siguiente. Dejamos los valores por defecto en la pantalla que se nos muestra y pulsamos en finalizar. Volvemos a guardar con “Ctrl+S”, si pulsamos de nuevo en la pestaña “Source” comprobamos que se ha creado la configuración del bean manejado.

Editamos el managed-bean y lo dejamos del siguiente modo:

Como se puede ver en el método “validaUsuario()”, si se introduce el usuario “Notodocodigo” y el password “pass” se devuelve la cadena de texto utilizada en la regla de navegación para mostrar la página de bienvenida. El resultado de ejecutar el código es el siguiente:

Ejecutando la aplicación de login

Ejecutando la aplicación de login (pinchar para agrandar)

Tratamiento de excepciones en los flujos de navegación

Para tratar las excepciones que se puedan dar, de manera que se envíen a una determinada página en el caso de que se produzcan, hay que definir lo siguiente en el web.xml:

Aquí termina este artículo. Puedes descargar el proyecto de ejemplo desde aquí. Si os ha gustado o tenéis alguna duda, podéis dejar un comentario. En el próximo artículo hablaremos sobre los componentes, validaciones y conversiones de datos en Jsf

3 comentarios:

  1. Tengo el siguiente ejemplo en mi faces-config.xml y no me funciona, ni entra al metodo y ya probe la direccion de varias formas…agradeceria su ayuda

    home.xhtml

    #{loginBean.actionMethod()}
    LogON
    /home.xhtml

    #{ManagedBean.actionMethod()}
    LogOFF
    /login.xhtml

    • Hola Yudiel,

      En la expresión # debe de ir el nombre del managed bean name que quieras utilizar.
      <managed-bean-name>miBean</managed-bean-name>

      Si sigues paso a paso el ejemplo te debe funcionar.
      Un saludo

  2. Me pareció excelente!!! Muchas gracias por tu aporte, fue de gran ayuda…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *