Introducción a Ajax4Jsf http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?

pagina=Ajax4Jsf

E-mail:

Contraseña:

Deseo registrarme
He olvidado mis datos de
acceso

Inicio Quiénes somos Tutoriales Formación Comparador de salarios Nuestro libro Charlas Más

Estás en:
Inicio Tutoriales Introducción a Ajax4Jsf

1 of 8 01/10/2010 06:00 p.m.

Introducción a Ajax4Jsf http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf

DESARROLLADO POR: Catálogo de servicios

Juan Alonso Ramos Autentia

Consultor tecnológico de desarrollo de proyectos

informáticos.

Ingeniero Técnico en Informática de Gestión e

Ingeniero en Informática, especialidad en Ingeniería
del Software

Puedes encontrarme en Autentia: Ofrecemos de

servicios soporte a desarrollo, factoría y formación

Somos expertos en Java/J2EE

Últimas Noticias

Fecha de publicación del tutorial: 2007-04-09 29.942 Entregamos nuestro

primer diploma ...
Share | Regístrate para votar Comic Flash de Head
Hunting
Introducción a Ajax4jsf XI Charla Autentia -
Mule - Recordatorio

Comparte el
Índice de contenidos Conocimiento en
Adictos
1. Introducción
2. Etiquetas ¡¡¡ Alcanzamos los
3. Entorno utizado 900 tutoriales !!!
4. Instalación
5. Pruebas
6. Conclusión
Histórico de
NOTICIAS
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
Últimos Tutoriales
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.
Rendimiento en
espacio y
2. Etiquetas transferencia de un
servidor Subversion
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 Liquibase-
enlace, una región específica de la pantalla, un cambio de estado de un componente, cada cierto Incorporación del
tiempo, etc. No nos tendremos que preocupar de crear el código Javascript y el objeto histórico de cambios en
XMLHttpRequest para que envíe la petición al servidor ya que esto lo hará por nosotros el una BBDD existente
framework. Lo más importante es conocer las distintas etiquetas que contiene, son las siguientes:
Cómo subir
<aj4:support> : Etiqueta que se puede añadir a cualquier otra etiqueta JSF para dotarla de tutoriales a Adictos
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 Spring + REST +
la página. JSON = SOAUI

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

Agilismo
<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.

Últimos Tutoriales del
<aj4:htmlCommandLink> : Muy parecida a la anterior etiqueta con pequeñas diferencias en la Autor
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. Generación de

Informes con
<aj4:status> : Muestra el estado de la petición Ajax. Hay 2 estados posibles: procesando petición y JasperReports en PHP
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 Múltiples
respuesta a la página se cambia el texto por "petición finalizada". datasources en
JasperReports
<aj4:form> : Similar al <h:form> con la diferencia de que se puede enviar previamente el contenido
al contenedor Ajax. JCaptcha -
Generación de

2 of 8 01/10/2010 06:00 p.m.

Introducción a Ajax4Jsf http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf

Captchas en Java
<aj4:actionparam> : Etiqueta que combina la funcionalidad de la etiqueta <f:param> y
<f:actionListener>. Instalar Puente
PHP-Java en Tomcat
<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. Sacar Release de un
proyecto con Maven
<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.
Síguenos a través de:
<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 Últimas ofertas de
que se haga en las reglas de navegación del faces-config. Es decir la siguiente página a cargar de empleo
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.
2010-08-30
<aj4:keepAlive> : Permite mantener un bean en un estado determinado durante peticiciones. Otras - Electricidad
- BARCELONA.
<aj4:mediaOutput> : Componente que permite mostrar contenido multimedia como imágenes,
2010-08-24
vídeos, archivos sonoros, etc.
Otras Sin catalogar -
Para conocer mucho más sobre el framework puedes visitar la documentación oficial aquí. LUGO.

2010-06-25
3. Entorno utizado T. Información -
Analista /
Para las pruebas he utilizado las siguientes herramientas: Programador -
JDK 5.0 BARCELONA.
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.

view plain print ?

01. <filter>
02. <display-name>Ajax4jsf Filter</display-name>
03. <filter-name>Ajax4jsf</filter-name>
04. <filter-class>org.ajax4jsf.Filter</filter-class>
05. </filter>
06.
07. <filter-mapping>
08. <filter-name>Ajax4jsf</filter-name>
09. <servlet-name>Faces Servlet</servlet-name>
10. <dispatcher>REQUEST</dispatcher>
11. <dispatcher>FORWARD</dispatcher>
12. <dispatcher>INCLUDE</dispatcher>
13. </filter-mapping>

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

view plain print ?

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

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

view plain print ?

01. <xmlns:a4jxmlns: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

3 of 8 01/10/2010 06:00 p.m.

Introducción a Ajax4Jsf http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf

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

view plain print ?

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

Código de la página JSP

view plain print ?

01. <%@page contentType="text/html" pageEncoding="UTF-8"%>

02. <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
03. <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
04. <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
05.
06. <f:view>
07. <h:form>
08. <h:panelGrid columns="2">
09. <a4j:region id="inputData">
10. <h:panelGrid columns="2">
11. <h:outputText value="Nombre:" />
12. <h:inputText id="name" value="#{homeBean.name}">
13. <a4j:support event="onkeyup" reRender="outputName" />
14. </h:inputText>
15.
16. <h:outputText value="Apellidos:" />
17. <h:inputText id="lastName" value="#{homeBean.lastName}">
18. <a4j:support event="onkeyup" reRender="outputLastname" />
19. </h:inputText>
20.
21. <h:outputText value="Aficiones:" />
22. <h:selectManyListbox value="#{homeBean.hobbies}">
23. <f:selectItems value="#{homeBean.hobbiesItems}"/>
24. <a4j:support event="onchange" reRender="outputHobbies" />
25. </h:selectManyListbox>
26. </h:panelGrid>
27.
28. <h:panelGrid columns="2">
29. <h:outputText value="Estado de la peticion: "/>
30. <a4j:status for="inputData">
31. <f:facet name="start">
32. <h:graphicImage value="/img/procesando.jpg" />
33. </f:facet>
34.
35. <f:facet name="stop">
36. <h:graphicImage value="/img/ok.jpg" />
37. </f:facet>
38. </a4j:status>
39. </h:panelGrid>
40. </a4j:region>
41.
42. <h:panelGrid columns="2">
43. <h:outputText value="Has introducido" /><h:outputText value=":" />
44. <h:outputText value="Nombre:" /> <h:outputText id="outputName" value
{homeBean.name}" />
45. <h:outputText value="Apellidos:" /> <h:outputText id="outputLastname"
{homeBean.lastName}" />
46. <h:outputText value="Aficiones:" /> <h:outputText id="outputHobbies"
{homeBean.hobbies}"/>
47. </h:panelGrid>
48. </h:panelGrid>
49.
50. <a4j:log level="ALL" popup="false" width="1000" height="100" />
51. </h:form>
52. </f:view>

Código del Bean

4 of 8 01/10/2010 06:00 p.m.

Introducción a Ajax4Jsf http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf

view plain print ?

01. package com.tutoriales.ajax4jsf.bean;

02. import java.util.ArrayList;
03. import java.util.List;
04. import javax.faces.model.SelectItem;
05. import org.apache.myfaces.component.html.ext.HtmlSelectManyListbox;
06.
07. public class HomeBean {
08.
09. private String name;
10. private String lastName;
11. private List<SelectItem> hobbiesItems = new ArrayList<SelectItem>();
12. private List<HtmlSelectManyListbox> hobbies = new ArrayList<HtmlSelectManyListbox>();
13.
14. public HomeBean() {
15. hobbiesItems.add(new SelectItem("Cine"));
16. hobbiesItems.add(new SelectItem("Teatro"));
17. hobbiesItems.add(new SelectItem("Television"));
18. hobbiesItems.add(new SelectItem("Lectura"));
19. hobbiesItems.add(new SelectItem("Deporte"));
20. hobbiesItems.add(new SelectItem("Fotografia"));
21. hobbiesItems.add(new SelectItem("Viajes"));
22. }
23.
24. public List<SelectItem> getHobbiesItems() {
25. return hobbiesItems;
26. }
27.
28. public void setHobbiesItems(List<SelectItem> hobbiesItems) {
29. this.hobbiesItems = hobbiesItems;
30. }
31.
32. public String getLastName() {
33. return lastName;
34. }
35.
36. public void setLastName(String lastName) {
37. this.lastName = lastName.toUpperCase();
38. }
39.
40. public String getName() {
41. return name;
42. }
43.
44. public void setName(String name) {
45. this.name = name.toUpperCase();
46. }
47.
48. public List<HtmlSelectManyListbox> getHobbies() {
49. return hobbies;
50. }
51.
52. public void setHobbies(List<HtmlSelectManyListbox> hobbies) {
53. this.hobbies = hobbies;
54. }

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.

5 of 8 01/10/2010 06:00 p.m.

Introducción a Ajax4Jsf http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf

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 of 8 01/10/2010 06:00 p.m.

Introducción a Ajax4Jsf http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf

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.

Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Puedes opinar o comentar cualquier sugerencia que quieras comunicarnos sobre este tutorial; con
tu ayuda, podemos ofrecerte un mejor servicio.

(Sólo para usuarios registrados)

» Registrate y accede a esta y otras ventajas «

COMENTARIOS
2010-07-14 - 08:33:53
WRoberto

Hola Juan, déjame contarte que hace poco le perdí el miedo a las JSF y
pues leyendo tú tutorial quede fascinado con ajax4jsf cuya fascinación me
llevo al encuentro de Richfaces :P (buen sabor de boca jeje..); actualmente
me encuentro desarrollando una aplicación utilizando esté framework y me
tope con un pequeño problema, el cuál espero me puedas aclarar, te
comento: Usando rich:panelMenuItem junto con ajax4jsf deseo que al
momento de elegir alguna opción pues el valor del atributo de la siguiente
etiqueta cambie:

No se si se pueda hacer ya que al momento de actualizar la pagina me sale

que el recurso no se encuentra disponible; me percate que en la dirección
del recurso no se encuentra << faces/* >> probé anteponiendo faces/ a la
respuesta de mi Bean pero tampoco funciono.
Serias tan amable de darme una ayudadita, de antemano gracias y te

7 of 8 01/10/2010 06:00 p.m.

Introducción a Ajax4Jsf http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=Ajax4Jsf

felicito por tus tutoriales.

Pato
2008-04-03 - 05:39:02 PM
Hola, Realice el ejemplo pero no me funciono, no realiza las funcionalidades
que dice que hace.- Bueno.. saludos...

8 of 8 01/10/2010 06:00 p.m.