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.