Gestión de eventos en el cliente con el soporte Ajax de PrimeFaces

Gestión de eventos en el cliente con el soporte Ajax de PrimeFaces

0. Índice de contenidos.

1. Introducción

Hace ya algún tiempo, nuestro compañero José Manuel nos presentó cómo hacer la Gestión de eventos en el cliente con el soporte Ajax de RichFaces. La idea de este tutorial es la misma pero con el framework de PrimeFaces. Es decir, el objetivo es conseguir enviar un parámetro de respuesta a una petición Ajax desde el servidor al cliente para que este sepa si la petición se realizó correctamente o hubo algún tipo de error.

Así que dada la analogía voy a seguir prácticamente el mismo ejemplo.

2. Entorno

Este tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 15′ (2 GHz Intel Core i7, 8GB DDR3 SDRAM).
  • Sistema Operativo: Mac OS X Lion 10.7.1
  • Primefaces 2.2.1
  • JSF 2.1.2

3. Atributo “oncomplete”

Teniendo un botón que envía el formulario, nos planteamos como objetivo que cuando se reciba la respuesta del servidor muestre un mensaje de alerta. Al igual que en RichFaces la solución es bantante sencilla; basta con incluir también un atributo “oncomplete” al componente para realizar nuestras acciones javascript al terminar de procesar la petición.

4. Condicionando el evento.

Ahora vamos a ir a por la segunda parte, que es condicionar el mensaje de respuesta. Para ello, tenemos que hacer dos pasos, el primero será añadir en el servidor un atributo a la respuesta para indicar que todo ha ido correctamente. Después, en el cliente debemos controlar este atributo para saber que mensaje mostrar.

El código del controlador sería:

Como podeís ver, es bastante sencillo, basta con recuperar el contexto de la petición de Primefaces y añadirle un parámetro de “Callback”.

En el cliente modificamos el código quedando de la siguiente forma:

Lo realmente llamativo en el cliente es la llamada a la función handleRequest(xhr, status, args). Donde los parámetros son:

  • xhr: Es la respuesta ajax en XML con el código de los componentes a actualizar.
  • status: Es el código de la respuesta HTTP (ej. 200 es ok)
  • args: Son los parámetros adicionales. Donde también estará nuestro parámetro, que como podéis ver accedemos a el directamente con “args.ok”.

Aquí os pongo el código XML de las respuestas para los casos de error y éxito.

Respuesta con error.

Respuesta de ejecución correcta.

Como podéis ver en la respuesta correcta, lo que cambia es que se ha añadido nuestro parámetro de “ok”.

5. Conclusiones

Esta forma de controlar los errores de las peticiones al servidor no sólo resulta bastante útil, si no que a veces es necesario para realizar según que acciones en el cliente dependiendo del resultado de la ejecución en el servidor.

Espero que os sirva a alguno y ya véis que es bastante sencillo.

Saludos.