Introducción a Ajax4Jsf

1
67864

Introducción a Ajax4jsf

Índice de contenidos

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:

<a4j: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.

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

<a4j: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.

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

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

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

<a4j: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».

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

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

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

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

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

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

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

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

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

<a4j: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.

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

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

<a4j: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.

  
    Ajax4jsf Filter
    Ajax4jsf
    org.ajax4jsf.Filter
  
  
  
    Ajax4jsf
    Faces Servlet
    REQUEST
    FORWARD
    INCLUDE
  

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:

  

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

  

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"%>


    
      
          
              
                  
                  
                     
                 
                
                           
                 
                     
                 
                
                 
                 
                    
                    
                 
              
  
              
                  
                  
                      
                          
                      
          
                      
                          
                      
                  
              
          
      
          
              
               
               
               
          
      

      
    

Código del Bean

    package com.tutoriales.ajax4jsf.bean;
    import java.util.ArrayList;
    import java.util.List;
    import javax.faces.model.SelectItem;
    import org.apache.myfaces.component.html.ext.HtmlSelectManyListbox;
  
    public class HomeBean {
  
      private String name;
      private String lastName;
      private List hobbiesItems = new ArrayList();
      private List hobbies = new ArrayList();
    
      public HomeBean() {
          hobbiesItems.add(new SelectItem("Cine"));
          hobbiesItems.add(new SelectItem("Teatro"));
          hobbiesItems.add(new SelectItem("Television"));
          hobbiesItems.add(new SelectItem("Lectura"));
          hobbiesItems.add(new SelectItem("Deporte"));
          hobbiesItems.add(new SelectItem("Fotografia"));
          hobbiesItems.add(new SelectItem("Viajes"));
      }
  
      public List getHobbiesItems() {
          return hobbiesItems;
      }
      
      public void setHobbiesItems(List hobbiesItems) {
          this.hobbiesItems = hobbiesItems;
      }
      
      public String getLastName() {
          return lastName;
      }
      
      public void setLastName(String lastName) {
          this.lastName = lastName.toUpperCase();
      }
      
      public String getName() {
          return name;
      }
      
      public void setName(String name) {
          this.name = name.toUpperCase();
      }
      
      public List getHobbies() {
          return hobbies;
      }
      
      public void setHobbies(List hobbies) {
          this.hobbies = hobbies;
      }
  }

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.

1 COMENTARIO

  1. 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 😛 (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 <> probé anteponiendo faces/ a la respuesta de mi Bean pero tampoco funciono.
    Serias tan amable de darme una ayudadita, de antemano gracias y te felicito por tus tutoriales.

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