Tutorial desarrollado por

Juan Alonso Ramos

Consultor tecnológico de desarrollo de proyectos informáticos.

Ingeniero Técnico en Informática de Gestión (cursando Ingeniería Informática)

Puedes encontrarme en Autentia

Somos expertos en Java/J2EE

Catálogo de servicios de Autentia

Descargar (6,2 MB)

Descargar en versión comic (17 MB)

AdictosAlTrabajo.com es el Web de difusión de conocimiento de Autentia.

Catálogo de cursos

Descargar este documento en formato PDF: Ajax4Jsf.pdf

Introducción a Ajax4jsf

Índice de contenidos

• 1. Introducción
• 2. Etiquetas
• 3. Entorno utizado
• 4. Instalación
• 5. Pruebas
• 6. Conclusión

1. Introducción

Ajax4jsf es una librería open source que se integra totalmente en la arquitectura de JSF y extiende la funcionalidad de sus etiquetas dotándolas con tecnología Ajax de forma limpia y sin añadir código Javascript. Mediante este framework podemos variar el ciclo de vida de una petición JSF, recargar determinados componentes de la página sin necesidad de recargarla por completo, realizar peticiones al servidor automáticas, control de cualquier evento de usuario, etc. En definitiva Ajax4jsf permite dotar a nuestra aplicación JSF de contenido mucho más profesional con muy poco esfuerzo.

2. Etiquetas

El funcionamiento del framework es sencillo. Mediante sus propias etiquetas se generan eventos que envían peticiones al contenedor Ajax. Estos eventos se pueden producir por pulsar un botón, un enlace, una región específica de la pantalla, un cambio de estado de un componente, cada cierto tiempo, etc. No nos tendremos que preocupar de crear el código Javascript y el objeto XMLHttpRequest para que envíe la petición al servidor ya que esto lo hará por nosotros el framework. Lo más importante es conocer las distintas etiquetas que contiene, son las siguientes:

<aj4:support> :  Etiqueta que se puede añadir a cualquier otra etiqueta JSF para dotarla de funcionalidad Ajax. Permite al componente generar peticiones asíncronas mediante eventos (onclick, onblur, onchange,...) y actualizar campos de un formulario de forma independiente, sin recargar toda la página.

<aj4:poll> : Realiza cada cierto tiempo una petición al servidor.

<aj4:commandButton> :  Botón de envío de formulario similar a <h:commandButton> de JSF. La principal diferencia es que se puede indicar que únicamente actualice ciertos componentes evitando la recarga de todo el formulario.

<aj4:commandLink>: Comportamiento similar a <aj4:commandButton> pero en un link.

<aj4:htmlCommandLink> :  Muy parecida a la anterior etiqueta con pequeñas diferencias en la generación de links y cuando se utilizan etiquetas <f:param>.

<aj4:region> : Determina un área a decodificar en el servidor después de la petición Ajax.

<aj4:status> :  Muestra el estado de la petición Ajax. Hay 2 estados posibles: procesando petición y petición terminada. Por ejemplo mientras dure el proceso de la llamada al servidor y la evaluación de la petición se puede mostrar el texto " procesando..." y cuando termine la petición y se devuelva la respuesta a la página se cambia el texto por "petición finalizada".

<aj4:form> : Similar al <h:form> con la diferencia de que se puede enviar previamente el contenido al contenedor Ajax. 

<aj4:actionparam> : Etiqueta que combina la funcionalidad de la  etiqueta <f:param> y <f:actionListener>.

<aj4:outputPanel> :  Se utiliza para agrupar componentes para aplicarles similares propiedades, por ejemplo a la hora de actualizar sus valores tras la petición Ajax.

<aj4:ajaxListener> :  Similar a la propiedad actionListener o valueChangeListener pero con la diferencia de que la petición se hace al contenedor Ajax.

<aj4:jsFunction> : Se utiliza para pasarle un valor automáticamente a una función Javascript tras recibirlo del servidor.

<aj4:loadScript> :  Inserta en la página las funciones Javascript contenidas en un archivo .js

<aj4:loadStyle> : Igual que la anterior etiqueta pero para una hoja de estilos .css

<aj4:loadBundle> : Similar al <f:loadBundle> de JSF.

<aj4:log> : Carga en la página una consola que muestra las trazas de los logs que devuelve el contenedor Ajax.

<aj4:include> : Se utiliza para incluir en la página el contenido de otra de acuerdo a la definición que se haga en las reglas de navegación del faces-config. Es decir la siguiente página a cargar de acuerdo a la navegación especificada se cargaría en la vista actual.

<aj4:repeat> :  Etiqueta para iterar sobre una colección y mostrar todos sus campos. 

<aj4:keepAlive> : Permite mantener un bean en un estado determinado durante peticiciones.

<aj4:mediaOutput> :  Componente que permite mostrar contenido multimedia como imágenes, vídeos, archivos sonoros, etc. 

Para conocer mucho más sobre el framework puedes visitar la documentación oficial aquí.

3. Entorno utizado

• Para las pruebas he utilizado las siguientes herramientas:
• JDK 5.0
• Apache MyFaces 1.1.5
• Ajax4jsf  1.1.0
• Eclipse 3.2.1
• Navegador Mozilla Firefox 2.0

Puedes también utilizar el plugin de eclipse Exadel Studio que incluye soporte para Ajax4jsf (http://www.exadel.com/web/portal/download/es).

4. Instalación

Partiendo de que se tiene instalada la JDK de Sun y Apache MyFaces nos descargamos el paquete Ajax4Jsf de la web oficial (http://labs.jboss.com/portal/jbossAjax4jsf/downloads). Abrimos el archivo comprimido y copiamos los fuentes Ajax4jsf.jar y oscache-2.3.jar en el directorio WEB-INF/lib de  nuestro proyecto. La librería oscache-2.3.jar se utiliza para añadir al proyecto funcionalidad de cache.

Añadimos al web.xml el siguiente filtro para que todas las peticiones al Faces Servlet pasen previamente por el filtro de Ajax4jsf.

<filter> <display-name>Ajax4jsf Filter</display-name> <filter-name>Ajax4jsf</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter> <filter-mapping> <filter-name>Ajax4jsf</filter-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> </filter-mapping>

En cada página JSP tenemos que incluir la directiva taglib siguiente:

<%@ taglib uri="https://Ajax4jsf.dev.java.net/Ajax" prefix="a4j"%>

Si utilizamos páginas XHTML debemos añadir esta otra directiva:

<xmlns:a4j="https://Ajax4jsf.dev.java.net/Ajax">

5. Pruebas

Vamos a hacer una prueba con algunas etiquetas para ver cómo funcionan. Creamos un formulario donde pedimos el nombre, apellidos y aficiones. En los campos de texto se captura el evento onkeyup con la etiqueta <a4j:support event="onkeyup" ... /> que llama al bean homeBean recuperando los valores del formulario. En el caso del nombre y apellidos se convierten los caracteres a mayúsculas.

También mediante la etiqueta <a4j:status for="inputData"> se muestra una imágen mientras se está procesando la petición y otra imágen cuando la petición está finalizada. Para comprobar las llamadas al contenedor Ajax se pueden ver las trazas de log mediante la etiqueta

<a4j:log level="ALL" popup="false" width="1000" height="100" />

Código de la página JSP

<%@page contentType="text/html" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%> <f:view> <h:form> <h:panelGrid columns="2"> <a4j:region id="inputData"> <h:panelGrid columns="2"> <h:outputText value="Nombre:" /> <h:inputText id="name" value="#{homeBean.name}"> <a4j:support event="onkeyup" reRender="outputName" /> </h:inputText> <h:outputText value="Apellidos:" /> <h:inputText id="lastName" value="#{homeBean.lastName}"> <a4j:support event="onkeyup" reRender="outputLastname" /> </h:inputText> <h:outputText value="Aficiones:" /> <h:selectManyListbox value="#{homeBean.hobbies}"> <f:selectItems value="#{homeBean.hobbiesItems}"/> <a4j:support event="onchange" reRender="outputHobbies" /> </h:selectManyListbox> </h:panelGrid> <h:panelGrid columns="2"> <h:outputText value="Estado de la peticion: "/> <a4j:status for="inputData"> <f:facet name="start"> <h:graphicImage value="/img/procesando.jpg" /> </f:facet> <f:facet name="stop"> <h:graphicImage value="/img/ok.jpg" /> </f:facet> </a4j:status> </h:panelGrid> </a4j:region> <h:panelGrid columns="2"> <h:outputText value="Has introducido" /><h:outputText value=":" /> <h:outputText value="Nombre:" /> <h:outputText id="outputName" value="#{homeBean.name}" /> <h:outputText value="Apellidos:" /> <h:outputText id="outputLastname" value="#{homeBean.lastName}" /> <h:outputText value="Aficiones:" /> <h:outputText id="outputHobbies" value="#{homeBean.hobbies}"/> </h:panelGrid> </h:panelGrid> <a4j:log level="ALL" popup="false" width="1000" height="100" /> </h:form> </f:view>

Código del Bean

Al arrancar la aplicación se muestra la página de inicio con la imágen de petición procesada ya que actualmente el contenedor está esperando a que el usuario introduzca algo en el formulario.

Introducimos el nombre y vemos cómo se muestra en mayúsculas en la salida de la derecha. Empezamos a introducir los apellidos y mientras se está procesando la información en el bean, lo que vemos es la imágen procesando.jpg que nos indica que aún no hemos recibido la respuesta.

Finalmente seleccionamos los valores del listado de aficiones. Podéis ver cómo van saliendo las trazas que devuelve el contenedor Ajax en la parte inferior.

6. Conclusión

A menudo es importante utilizar todos los recursos que tenemos a nuestro alcance para conseguir los efectos deseados en nuestras aplicaciones pero hay que tener cuidado a la hora de elegirlas. Si quieres añadir tecnología Ajax a tu aplicación JSF sin demasiado esfuerzo, este framework está bastante bien ya que resulta muy sencillo de utilizar. Quizá se queda corto en algunas cosas pero parece que en el futuro irán añadiéndole más funcionalidad. Sin duda es una aportación más al mundo open source que siempre es bienvenida.

Tutoriales recomendados

Nombre	Resumen	Fecha	Visitas	Valoración	Votos	Pdf
Creación de un componente JSF, basádonos en un plugin de jQuery, con el soporte de RichFaces.	Usando un plugin para jQuery que ya conocemos, jcarousel, vamos a generar un componente JSF (facelets) con el soporte de RichFaces	2010-02-04	200	Bueno	2
Integración de jQuery en RichFaces.	En este tutorial analizamos cómo podemos tener soporte de jQuery dentro del ámbito de componentes JSF de RichFaces.	2010-02-03	179	-	-
AjaxSingle: el partialSubmit de RichFaces.	En este tutorial vamos a examinar la posibilidad de hacer uso del atributo ajaxSingle, en los componentes de RichFaces, que funciona como el atributo partialSubmit de ICEfaces.	2010-02-02	258	Muy bueno	2
Introducción a RichFaces.	RichFaces es una librerí­a de componentes visuales para JSF con soporte para Ajax4JSF.	2010-02-01	461	-	-
JMeter. Uso de funciones.	En este tutorial tratamos el uso de las funciones más habituales de la herramienta JMeter.	2010-01-26	464	-	-
Cómo consumir un servicio web RESTful con el soporte de Ajax y JSON de jQuery.	En este tutorial vamos a seguir analizando cómo explotar las funcionalidades de jQuery.	2010-01-18	526	-	-
jQuery: cómo crear nuestros propios plugins.	En este tutorial vamos a ver cómo crear un plugin para jQuery sencillo, para sentar las bases, y otro un poco más elaborado.	2010-01-18	603	-	-
Introducción a jQuery UI.	En los tutoriales anteriores hemos hecho una introducción a jQuery y hemos visto cómo crear plugins para jQuery. Ahora se trata de seguir ampliando conocimientos, haciendo uso de una librería que se basa en la misma.	2010-01-18	812	-	-
Introducción a jQuery.	jQuery es una librería javascript ligera, rápida y concisa que simplifica el tratamiento de documentos HTML, el manejo de eventos, la creación de animaciones y las interacciones vía Ajax, para agilizar el desarrollo de aplicaciones web.	2010-01-18	828	Bueno	1
JMeter. Gestión de usuarios	En este tutorial tratamos la simulación de distintos usuarios, en la herramienta JMeter, mediante el archivo externo users.xml o mediante la función Counter.	2010-01-14	698	-	-