Integración de jQuery en RichFaces.

Integración de jQuery en RichFaces.


0. Índice de contenidos.


1. Introducción

Ya tenemos nociones de jQuery y RichFaces, ahora vamos a analizar como podemos tener soporte del primero dentro del ámbito de componentes visuales JSF del segundo.

El componente <rich:jQuery> permite aplicar estilos y comportamiento a objetos del árbol DOM, expone la funcionalidad javascript del framework jQuery y permite aplicarla a componentes JSF.

El componente trabaja sin conflictos con prototypejs, la librería en la que se basa RichFaces, sin necesidad de habilitar el módulo de compatibilidad con prototypejs de jQuery, puesto que no hace uso de la función dolar $(“”), trabaja con directamente con la factoría jQuery(“”).


2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 17′ (2.93 GHz Intel Core 2 Duo, 4GB DDR3 SDRAM).
  • Sistema Operativo: Mac OS X Snow Leopard 10.6.1
  • jQuery 1.3.2.
  • RichFaces 3.3.2.GA
  • Maven 2.2.1.
  • Eclipse 3.5: Ganymede, con IAM (plugin para Maven).
  • Apache Tomcat 6.0.20 con la jdk 1.5.

3. El componente <rich:jQuery>.

El componente <rich:jQuery> se puede usar de dos formas distintas:

  • como una query o consulta que se aplica en el momento o cuando la página ha cargado completamente,
  • como una función de javascript que se puede invocar desde código javascript,

Dicho comportamiento se indica mediante el atributo “timing”, que acepta los siguientes valores:

  • immediate: aplicando la query inmediatamente,
  • onload: aplicando la query cuando el documento está totalmente cargado,
  • onJScall: aplicando la query cuando sea invocada a la función nombrada por el atributo “name”. La asignación del atributo name es pues obligatoria.

El atributo “selector” define un objeto o una lista de objetos y la query es la definida en el atributo “query”.

Lo más interesante es que en el atributo “selector” se puede indicar el identificador de un componente JSF, sin necesidad de indicar su clientId. Sabemos que cuando se renderiza un componente JSF en el árbol DOM que se interpreta en cliente, el valor de su identificador final dependerá de su ubicación dentro del árbol puesto que si se encuentra dentro de un formulario se antepone el identificador del mismo y si se encuentra dentro de una iteración se incluye un sufijo con el índice. En el atributo “selector” se puede indicar tanto el id del componente JSF como el id final del mismo en el árbol DOM.


4. Ejemplos de uso.

Veamos unos ejemplos prácticos de uso.

¿Cómo asignar el foco al primer campo visible de entrada de texto de un formulario?

Si pensamos en facelets, lo podríamos incluir en la pantilla del layout de mantenimiento de nuestras entidades y aplicaría a todos los formularios.

¿Cómo “zebrear” un dataTable?

No es más que trasladar lo que ya usamos con jQuery a los atributos adecuados del componente <rich:jQuery>.

¿Cómo añadir un efecto zoom a una colección de imágenes?

Es un ejemplo de cómo declarar funciones con timing onJScall para ser reutilizadas.

¿Cómo añadir un efecto persiana para mostrar/ocultar el contenido de un panel decorado pulsando sobre la cabecera del mismo?

Otro ejemplo de cómo declarar funciones con timing onJScall para ser reutilizadas.

Podríamos continuar, invocando a todas las funciones del api de jQuery desde componentes JSF 😉


5. Referencias.


6. Conclusiones.

El componente <rich:jQuery os abre un abanico de posibilidades para hacer uso la inyección de estilos y comportamiento de jQuery en componentes JSF, sin bajar a nivel de javascript, o por lo menos sin la necesidad de mantenerlo en librerías separadas, puesto que lo escribiremos dentro de un componente JSF.

También nos abre las puertas a la integración de plugins propios de jQuery dentro de componentes JSF y, si pensamos en facelets, puede convertirse en una herramienta muy potente.

Si estáis interesados en el contenido de nuestros tutoriales y tenéis una necesidad formativa al respecto no dudeis en poneros en contacto con nosotros. En Autentia nos dedicamos, además de a la consultoría, desarrollo y soporte a desarrollo, a impartir cursos de formación de las tecnologías con las que trabajamos.

Un saludo.

Jose

jmsanchez@autentia.com