Integración de jQuery en RichFaces.

0
20112

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?

  <rich:jQuery selector="form :input:visible:enabled:first" timing="onload" query="focus()" />

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?


...
<rich:dataTable id="entitiesList" ...>
  ...
</rich:dataTable>

<rich:jQuery selector="#entitiesList tr:odd" timing="onload" query="addClass(odd)" />


<rich:jQuery selector="#carList tr" 
   query="mouseover(function(){jQuery(this).addClass('active')})"/>
<rich:jQuery selector="#carList tr" 
   query="mouseout(function(){jQuery(this).removeClass('active')})"/>

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?


    
    <a4j:outputPanel id="gallery">
        <h:graphicImage value="/richfaces/jQuery/images/pic1.jpg" />
        <h:graphicImage value="/richfaces/jQuery/images/pic2.jpg" />
        <h:graphicImage value="/richfaces/jQuery/images/pic3.jpg" />
    </a4j:outputPanel>  
    
    
    <rich:jQuery selector="#gallery img" query="addClass('pic-normal')"/>
    
    
    <rich:jQuery selector="#gallery img" query="mouseover(function(){enlargePic(this)})"/>
    <rich:jQuery selector="#gallery img" query="mouseout(function(){normalPic(this)})"/>
    
    
    <rich:jQuery name="enlargePic" timing="onJScall" query="stop().animate({width:'180px'})" />
    <rich:jQuery name="normalPic" timing="onJScall" query="stop().animate({width:'120px'})" />
    

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?

	
    <rich:panel id="calendarPanel">
        <f:facet name="header">
        	<h:outputText value="RichFaces ajaxSingle Demo" />
        </f:facet>
	    
    <rich:panel>
    

    <rich:jQuery name="toogleSlide" timing="onJScall" query="slideToggle('slow');" />
	
    <rich:jQuery selector="#calendarPanel_header" timing="onload" query="click(function(){toogleSlide(this.next())})"/>
    

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

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