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

1
28148

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.

	<h:form id="reportsForm" prependId="false">
		<p:commandButton oncomplete="alert('Informe generado correctamente');" 
			action="#{reportGenerator.generateReport('reportReference')}"
			value="Generar informe"/>
	</h:form>

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:

package com.autentia.tutoriales;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

import org.primefaces.context.RequestContext;

@ManagedBean
@ViewScoped
public class ReportGenerator implements Serializable{

	public void generateReport(final String reference){
		try{
			.....
			//lógica de generación de informe
			.....
			addOkToCallback();
		}catch(Exception e){
			//lógica del error
		}
	}

	private void addOkToCallback() {
		RequestContext.getCurrentInstance().addCallbackParam("ok", true);
	}
}

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:

	<h:form id="reportForm" prependId="false">
	
		<p:commandButton oncomplete="handleRequest(xhr, status, args);" 
			action="#{reportGenerator.generateReport('reportReference')}"
			value="Generar informe" />
			
		<script type="text/javascript">
			function handleRequest(xhr, status, args) {
				if (args.ok) {
					alert('Informe generado correctamente');
				}else{
					alert('Ha ocurrido un error en la generación del informe');
				}
			}
		</script>
	</h:form>

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.

	<?xml version='1.0' encoding='UTF-8'?>
	<partial-response>
		<changes>
			<update id="javax.faces.ViewState"><![CDATA[6851042266821962388:8101407853107118250]]></update>
			<extension primefacesCallbackParam="validationFailed">{"validationFailed":false}</extension>
		</changes>
	</partial-response>

Respuesta de ejecución correcta.

	<?xml version='1.0' encoding='UTF-8'?>
	<partial-response>
		<changes>
			<update id="javax.faces.ViewState"><![CDATA[6851042266821962388:8101407853107118250]]></update>
			<extension primefacesCallbackParam="validationFailed">{"validationFailed":false}</extension>
			<extension primefacesCallbackParam="ok">{"ok":true}</extension>
		</changes>
	</partial-response>

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.

1 COMENTARIO

  1. Como estas Rafael, felicidades por tu tutorial de hecho servira para validar mis eventos en ajax, bueno tengo una pregunta veo que devuelves un parametro con salida XML atraves del metodo handleRequest(xhr, status, args). queria saber si existe una forma de devolver una pagina xhtml en vez de un parametro.. logico tendria que pintarse en algun div. asi como el xhr arroja XML, existe otro evento para arrojar en HTML?. gracias de todas formas.

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad