1

¿Qué es RichFaces?
En este capítulo, vamos a aprender sobre el proyecto RichFaces y cómo nos puede ayudar a
desarrollar mejores aplicaciones web Ajax más rápidamente.

En primer lugar, vamos a ver algo de su historia, su nacimiento y crecimiento. A partir de ahí
vamos a conocer su funcionamiento (en general), los componentes que están dentro de su
marco, así como lo que podemos hacer con ellos. Por último, vamos a explicar algunas
técnicas avanzadas y empezar a revisar el CDK (Component Development Kit) con un ejemplo
sencillo.

Una visión general de RichFaces

RichFaces es un marco muy útil de código abierto que le permite añadir capacidades de Ajax a
sus aplicaciones JSF (usando los componentes estándar JSF), sin la necesidad de escribir
código JavaScript y administrar la compatibilidad de JavaScript entre navegadores. Se integra
con el ciclo de vida de JSF y otras características de JSF estándar como la validación, la
conversión y administración de recursos.

Por otra parte, RichFaces ofrece el gran poder de la skinnability. Esta personaliza la
apariencia de las aplicaciones JSF. Se pueden definir diferentes esquemas de color para crear
temas personalizados o usar las predefinidas. Además, puede administrar los estilos
predefinidos CSS (o añadir los propios) para cambiar la apariencia de los componentes de
interfaz de usuario de la biblioteca de una manera sencilla y coherente (incluso se puede
utilizar de forma dinámica XCSS para personalizar los estilos CSS). La característica de
skinnability de RichFaces pueden aplicar temas a los elementos estándar de HTML, como
input, select, textarea, fieldset, y así sucesivamente.

RichFaces proporciona dos conjuntos de bibliotecas de componentes:

Core Ajax: la biblioteca principal contiene componentes que son útiles para "ajaxizar" páginas
JSF y componentes estándar de JSF. Es muy sencillo definir áreas de Ajax y para invocar
peticiones Ajax con el fin de actualizar las áreas (veremos cómo se hace esto muy pronto).
Además, proporciona un componente de generación de recursos binarios sobre la marcha (por
ejemplo, el código generado por las imágenes, archivos PDF, archivos CSV, y así
sucesivamente).

La interfaz de usuario: La biblioteca RichFaces interfaz de usuario es un conjunto de

componentes avanzados de JSF que Ajax utiliza para agregar características de la interfaz de
usuario ricas a sus aplicaciones. Los componentes Ajax fuera de la caja se integran
perfectamente con la biblioteca principal. Asimismo, apoyan plenamente los temas y pueden
ser adaptados según las necesidades de los usuarios.

Otra característica incluida en el marco RichFaces es el kit de desarrollo de componentes

(CDK)-el conjunto de herramientas utilizadas para la creación de la colección de la interfaz de
usuario que pueden utilizarse para hacer nuevos componentes con una función de Ajax y con
soporte para la skinnability.

Otros extras son el apoyo Facelets, la posibilidad de crear los componentes de código en Java
(con documentación de la API), la API de JavaScript de los componentes que interactúan con
ellos desde el lado del cliente (si desea utilizar JavaScript), y por último pero no menos
importante, es que tiene el apoyo una comunidad muy fuerte.

Como puede ver, RichFaces tiene un muchisimas características muy poderosas que pueden
ayudar con el desarrollo de aplicaciones ricas. En los párrafos siguientes, vamos a hacer una
breve reseña del marco para empezar a comprender todas las posibilidades que tiene.

Un poco de historia
RichFaces proviene del marco Ajax4JSF. Fue creado por Alexander Smirnov, quien se unió a
Exadel en 2005 con el fin de continuar con el desarrollo. La idea era juntar todas las
características de Ajax en el nuevo marco de JavaServer Faces.

La primera versión comercial fue lanzado en marzo de 2006 con el nombre de Exadel VCP. En
el mismo año, se dividió en dos proyectos Ajax4Jsf (open source) y RichFaces (versión
comercial).

Ajax4jsf proporcionan el marco básico y los componentes Ajax para "ajaxizar" los componentes
JSF en una página (soporte Ajax en las páginas JSF). RichFaces fue un componente JSF
comercial para las bibliotecas Ajax.

En marzo de 2007, Exadel y JBoss (una división de RedHat) anunciaron una alianza para abrir
el código fuente de RichFaces y los dos proyectos se fusionaron en un único proyecto de
fuente abierta llamado simplemente "RichFaces". Fue una buena decisión para resolver los
problemas de compatibilidad con la versión que tenían los dos proyectos por separado.

Hoy en día, el proyecto se está moviendo muy rápido con la ayuda de la comunidad de
usuarios que participan con el equipo RichFaces que también deciden la evolución futura que
el marco tendrá (como que carácterística se desarrollará más, que componente nuevo se debe
de hacer en primer lugar, etc.)

Para obtener más información, visite el sitio web principal en

http://www.jboss.org/jbossrichfaces/,

y el foro de usuarios en

http://jboss.com/index.html?module=bb&op=viewforum&f=261.

El marco Ajax
El marco Ajax RichFaces es una biblioteca de componentes JSF que añade la capacidad Ajax
a sus páginas, a diferencia del apoyo tradicional y limitada de los componentes Ajax. Esto
significa que usted puede utilizar componentes Ajax para invocar peticiones Ajax que se
sincronizan automáticamente con el árbol de componentes JSF y actualizan las áreas
individuales sin tener que recargar toda la página Web. En la imagen siguiente, tomada de la
documentación de Jboss, muestra el flujo del proceso de solicitud:
No es diferente de una página estándar de JSF, y ni siquiera necesita escribir código
JavaScript utilizando al utilizar los componentes Ajax RichFaces. Dentro de la página usted
puede definir las diferentes áreas que desea actualizar, después de la petición Ajax.

La arquitectura del marco se compone de cinco partes:

1. Ajax Filter: Esto es esencial para agregar capacidades Ajax para su aplicación JSF
utilizando RichFaces. Administra todas las solicitudes (tanto Ajax y JSF estándar), corrige y
valida el código de marcado enviado, administra la secuencia de comandos y la carga de estilo,
la caché de los recursos y así sucesivamente. Usted tiene que colocar el filtro en el archivo
web.xml.

2. Componentes de Acción Ajax: Son los componentes estándar de JSF que puede utilizar
para enviar peticiones Ajax (los veremos muy pronto).

3. Contenedores Ajax: El marco compatible con la interfaz AjaxContainer que describe un

área ( "región") de la página, que debe ser decodificada durante una petición Ajax. La mayor
región es toda la página de JSF, pero usted puede definir cuántas regiones desea tener dentro
de la página.

4. Skinnability: Esta es una parte muy útil de la estructura y añade la capacidad de cambiar el
aspecto a su aplicación (más tarde, vamos a verlo en detalle).

5. Motor JavaScript RichFaces: Se ejecuta en el navegador del cliente y administra las

peticiones Ajax así como las respuestas. Son administrados automáticamente por el marco, por
lo que no se tiene que utilizar directamente.

Puede decidir cuándo utilizar una petición JSF estándar (con una recarga completa de la
página web) o cuándo utilizar una solicitud Ajax. En este último caso, sólo la región que
participan Ajax es procesada, y el marcado Delta Ajax es enviado de vuelta al cliente después
de que el filtro se ha analizado y verificado.

La verificación se hará porque la función JavaScript XMLHTTPRequest envía la solicitud en

formato XML, el marcado dentro de la petición de XML no se valida ni se corrigen. El filtro XML
puede eliminar automáticamente los problemas de código HTML, pero es una buena práctica
escribir en los estándares compatible con XHTML y el código HTML.

Los componentes del marco RichFaces tienen una gran cantidad de atributos de Ajax, que son
muy útiles para administrar las opciones que Ajax tiene.

Los componentes de atributos siguientes son muy importantes y se puede encontrar en todos
los componentes Ajax permitidos en el marco RichFaces:

reRender: Con el fin de decidir qué área debe ser actualizado después de una petición
ajaxRendered: Si es cierto, el área se actualiza después de cada petición Ajax (incluso si no
es en el atributo reRender).
limitToList: con el fin de forzar el motor de JavaScript para actualizar las únicas áreas en
el atributo reRender.

Vamos a ver, estos atributos en una gran cantidad de componentes del marco. Por lo tanto, es
útil saber cómo funcionan.

Componentes de Acción Ajax

Como hemos dicho, estos componentes se utilizan para enviar peticiones Ajax al servidor.
Algunos ejemplos de estos componentes son:

a4j:commandButton: Es la versión de Ajax del estándar JSF h:commandButton. Esto

produce peticiones Ajax en lugar de los estándar y tiene atributos para manejar las opciones de
Ajax.
a4j:commandLink: La versión Ajax de h:commandLink. Funciona como
a4j:commandButton, pero crea un enlace (HTML <a>) en lugar del elemento input.
a4j:poll: El uso de este componente, periódicamente, puede revisar si hay cambios de
datos en el servidor de datos y actualizar la página mediante una petición Ajax.
a5j:push: Simula el envío de datos desde el servidor.
a4j:support: El componente más importante de la biblioteca Ajax, es como un derivado
Ajax que añade las capacidades de los componentes estándar de JSF.

Contenedores Ajax
El marco Ajax RichFaces contiene componentes específicos que describen las áreas Ajax e
implementan la interfaz AjaxContainer. El contenedor Ajax principal es la raíz de la vista por
defecto, por lo tanto, no es necesario definir un contenedor Ajax para toda la página. Sin
embargo, es muy útil saber cómo utilizar el componente a4j:region para crear nuevas
regiones Ajax y así optimizar las peticiones Ajax.

Marcadores de posición Ajax

Un concepto muy importante a tener en cuenta durante el desarrollo es que el marco Ajax no
puede agregar o eliminar elementos, sólo puede reemplazar los elementos existentes en la
página. Por lo tanto, si desea añadir algo de código que necesita para utilizar un marcador de
posición.

RichFaces tiene un componente que puede ser utilizado como un marcador de posición:
a4j:outputPanel.

Dentro de componente a4j:outputPanel, puede colocar otros componentes que utilizan el

atributo “renderer” para decidir si son visibles o no. Cuando quiera volver a reconstruir a todos
los componentes incluidos, sólo reconstruye el panel de salida y todo funcionará sin problemas.

Validadores Ajax
Otra característica del marco Ajax son los validadores Ajax. Estos trabajan con el sistema de
validación de JSF. Sin embargo, como están basados en eventos se puede utilizar para activar
la validación mientras se está escribiendo, o cuando se cambia a otro campo, y así
sucesivamente. Puede mezclar los validadores estándar así como los personalizados y
también utilizar el marco Hibernate Validator (sólo tiene que anotar las propiedades de todo
para añadir nuevos validadores).

Componentes RichFaces
El marco RichFaces contiene muchos componentes JSF para Ajax añadir a nuestras
aplicaciones de una manera muy sencilla, sin necesidad de saber nada de JavaScript (pero si
lo conoce, tiene muchas características para utilizar el marco dentro de su código
personalizado JS).
Hay muchisimos componentes para distintos tipos de tareas (como la interacción, entrada,
salida, arrastrar y soltar, validación, y así sucesivamente). Vamos a explicar cómo funcionan
conforme los vayamos utilizando en los próximos capítulos.

A lo largo del libro, vamos a desarrollar una aplicación que utiliza RichFaces. Mientras hacemos
esto, vamos a ver cómo funcionan esos componentes en la práctica, utilizando ejemplos reales
que cubren todas las funcionalidades.

La carácterística skinnability en RichFaces

En CSS estándar, no se puede definir un valor concreto (por ejemplo, un color o un tamaño de
fuente) para "reutilizarlo" en más de un seleccionador se tiene que copiar y pegar en donde sea
necesario.

Por lo tanto, si necesita cambiarlos, entonces hay que buscar el valor y reemplazarlo
manualmente cada vez que sea necesario. Como puede imaginar, este es un proceso
propenso a errores que pueden traer muchos problemas e inconsistencias de diseño.

Además, si necesita una interfaz que soporta varios conjuntos de color y se deben ajustar
sobre la marcha, necesitas trabajar con varios archivos CSS que tienen las mismas
declaraciones pero diferentes colores, además de mantener otras actualizaciones .

La característica skinnability de RichFaces entra aquí para ayudarnos, no es un reemplazo de

CSS, pero se integra perfectamente añadiendo más capacidades.

Resumen
En este capítulo, hemos aprendido los objetivos del marco RichFaces, ¿cuáles son sus
componentes (el marco Ajax, los componentes de RichFaces y skinnability), y lo que puede
hacer al usarlo en una aplicación web.

En el próximo capítulo, vamos a aprender a utilizar esos componentes, mientras desarrollamos

una aplicación AJAX real. También vamos a aprender modelos de programación más útiles y
técnicas de optimización, a fin de utilizar este marco en su mejor momento para nuestras
aplicaciones web Ajax.