ICEfaces

RECU-0133 (Recurso Referencia)

Descripción

ICEfaces es un framework de código abierto para construir aplicaciones web con AJAX tipo RIA (Rich Internet Application). Permite al programador incluir una serie de etiquetas Ajax (Ajax-tags) en sus JSP o xhtml de tal manera que el código Ajax es generado por el propio framework automáticamente.

ICEfaces aísla completamente al desarrollador de AJAX. No hacen falta etiquetas especiales: se ponen los controles en la pantalla e ICEfaces se encarga de enviar sólo la información necesaria entre cliente y servidor. Es decir, ya no se envían los formularios a la antigua usanza, en un POST de HTTP, sino que sólo se envían los cambios que ha hecho el usuario del cliente al servidor, y los cambios en la pantalla del servidor al cliente. Además, con la inclusión de la librería Scriptaculous en ICEfaces, se dispone de arrastrar+soltar y de efectos (fundidos, parpadeos, apariciones, ...) para los controles.

Conceptos clave

El framework de aplicaciones JSF proporciona la base para cualquier aplicación ICEfaces. Como tal, una página de la aplicación ICEfaces se compone de un árbol de componentes JSF que representa la presentación de esa página, y los beans de respaldo que contienen el modelo de solicitud de datos y la lógica de negocio. Todo los mecanismos estándar de JSF como la validación, la conversión y el procesamiento de eventos están disponibles para desarrollar aplicaciones ICEfaces. Las secciones siguientes exploran algunos de los conceptos clave y los mecanismos que ICEfaces aporta al desarrollador de aplicaciones.

Renderización Direct-DOM

Direct-to-DOM (D2D) es sólo lo que parece, la capacidad de renderizar un árbol de componentes JSF directamente en una estructura de datos estándar W3C DOM . ICEfaces proporciona un direct-a-DOM RenderKit para componentes estándar de HTML básicos disponibles en JSF.

Proceso incremental de cambios

Una de las características clave de Direct-to-DOM es la capacidad de realizar cambios incrementales a los DOM que se traduce, en editar en el lugar de la página y en el buen resultado. Las actualizaciones de la página se producen sin parpadeo y sin la necesidad de una actualización de página completa.

Actualización síncrona y asíncrona

Normalmente, las aplicaciones JSF actualizan la presentación como parte de la solicitud estándar / ciclo de la respuesta. Desde la perspectiva del servidor de aplicación, nos referimos a esto como una actualización sincrónica. El proceso de actualización se inicia desde el cliente y se maneja de forma sincrónica en el servidor mientras que la presentación es actualizada en la respuesta.Una deficiencia grave con actualizaciones sincrónicas es que la aplicación requiere un cliente generado por solicitud antes de que los cambios pueden afectar a la capa de presentación. Si un cambio de estado de la aplicación se produce durante una período de inactividad del cliente, no hay medios para cambiar la información actual para el usuario. ICEfaces supera esta deficiencia con un modo de actualización asíncrona que facilita los cambios en la presentación al cliente, basado en el servidor de aplicación de los cambios secundarios del Estado.

El desarrollador ICEfaces de la aplicación no se limita a la de solicitud / respuesta de un ciclo normal de solicitud JSF . Una vez más, Ajax facilita las actualizaciones en curso de forma asíncrona través del uso de XMLHttpRequests asíncronos que se cumplen cuando las actualizaciones estén disponibles en DOM.

Debido a la direct-DOM , se realiza el proceso de forma incremental y las actualizaciones para la presentación realizadas de forma asincrónica se puede esperar que ocurran de forma suave y sin parpadeos .

Manejo de conexiones

La conectividad de cliente / servidor es un requisito clave para que las aplicaciones ICEfaces puedan funcionar correctamente. Por esta razón, ICEfaces heartbeating proporciona la conexión y el estado de las instalaciones de control en el lado del cliente Ajax , y una conexión de componente de Estado para transmitir información de estado de la conexión a la interfaz de usuario. Además, ICEfaces proporciona la capacidad de redirigir automáticamente a una página de error cuando la conexión se ha perdido.

Push Ajax

El modo de actualización asíncrona en ICEfaces permite la actualización en servidores activos mediante la aplicación llamada Push Ajax. En ICEfaces, esto se logra haciendo que el ciclo de vida de JSF para renderizar se ejecute en reacción a algún cambio de estado de la aplicación. El PersistentFacesState proporcionado por la API, facilita a bajo nivel de servidor iniciado la renderización en función de cada cliente. Si bien este bajo nivel de renderización parece simple de usar, hay una serie de riesgos potenciales asociados a él relacionados con la concurrencia como el rendimiento y la escalabilidad.

Con el fin de superar estos posibles escollos, ICEfaces proporciona un alto rendimiento, un servidor escalable iniciado, representación de la API, y no recomienda el uso de las llamadas de bajo nivel para renderizar

Partial Submit

ICEfaces introduce una modelo de interacción del usuario para el procesamiento de formularios inteligentes dentro de un Aplicación ICEfaces. En JSF, el mecanismo normal de presentación inicia el ciclo de vida de aplicaciones JSF, y aspectos como la capacidad de validación en el cliente no son compatibles. Parcial Submit supera estas limitaciones mediante la vinculación de un mecanismo de eventos de JavaScript de nuevo en el ciclo de vida de JSF a través de una aplicación automática de presentación. Este automatismo de presentación es parcial en el sentido de que sólo la validación parcial del formulario lo va a provocar.

Ajax se centra ,de forma inteligente, en la supervisión e identificación del control asociado a la parcial presentación parcial (Partial Submit), y deshabilita la propiedad necesaria para el resto controles en el formulario. Desde aquí, se lleva a cabo un ciclo de vida de una JSF normal, después de que las propiedades requeridas se restauran a su estado anterior.

Drag and Drop

ICEFaces incluye soporte para realizar Drag and drop sobre los componentes, es decir permite arrastrar y soltar los componentes utilizando la biblioteca script.aculo.us.

Características

ICEFaces es considerado un framework que integra funcionalidad AJAX y permite a los desarrolladores Java EE crear aplicaciones RIA (Rich Internet Applications) de una manera sencilla. Las aplicaciones desarrolladas en ICEFaces no necesitan plugins de navegador o applets para ser vistas.

Estas aplicaciones están basadas en JavaServer Faces (JSF), así que permite el desarrollo de aplicaciones Java EE con la posibilidad de utilizar de forma fácil desarrollos basados en JavaScript.

Entorno a AJAX han surgido varios frameworks (Prototype, DWR, GWT, ...) que, si bien aportaban facilidad de uso, no acababan de convencer a la comunidad de programadores. Algunos porque sólo eran clientes Javascript, otros porque, si bien integraban la parte de servidor con la de cliente, no eran realmente frameworks, sino librerías de comunicación. Además, no estaba claro cómo combinarlos con la arquitectura JEE.

Con la llegada de JSF, se empezó a vislumbrar posibilidades de integración. Si JSF permitía al desarrollador aislarse de la arquitectura web y ver sus aplicaciones como algo parecido a una aplicación de escritorio, debería entonces ser sencillo utilizar AJAX para hacer estos controles más funcionales. Y así fue, empezaron a aparecer AJAX4JSF, ICEFaces, Tobago, ...

Sin embargo, de estas propuestas, ICEFaces fue una de las más acogidas ya que aísla completamente al desarrollador de AJAX. No hacen falta etiquetas especiales, se ponen los controles en la pantalla e ICEFaces se encarga de enviar entre cliente y servidor sólo la información necesaria.

Se presenta una figura con la arquitectura de una aplicación en JSF integrada con ICEFaces

Los principales elementos de la arquitectura ICEfaces incluyen:

  • Persistent Faces Servlet: Las URLs con extensión ".iface" son mapeadas por el servlet 'Persistent Faces Servlet'. Cuando se realiza una petición de la página inicial en la aplicación, este servlet se hace responsable de la ejecución del ciclo de vida JSF para petición asociada.
  • Blocking Servlet: Se encarga de la gestión de todos las peticiones de bloqueo y no-bloqueo después de las primeras páginas.
  • D2D ViewHandler: Se encarga de establecer el Direct-to-DOM, incluyendo la inicialización de la 'DOM Respuesta Writer'. El ViewHandler también invoca al Parser para analizar el árbol de componentes JSF en la página inicial.
  • Parseador D2D: Responsable del montaje de un componente de documentos JSP. El Parser ejecuta la etiqueta de JSP de procesamiento del ciclo de vida con el fin de crear el árbol, pero lo hace sólo una vez para cada página. La compilación del estándar JSP y el proceso de análisis no es compatible con ICEfaces.
  • DOM Response Writer: Se encarga de la escritura en el DOM. También inicia la serialización DOM para la primera prestación, y desbloquea el DOM Updater para actualizaciones incrementales.
  • DOM Serializer: Responsable de la serialización del DOM de la página inicial.
  • DOM Updater: Se encarga de conjuntar las de las 'DOM mutations' en una única actualización DOM.
  • Component Suite: Ofrece un conjunto de componentes 'rich JSF' con influencia AJAX y características del puente, proporcionando los elementos básicos para aplicaciones ICEfaces.
  • Client-side AJAX Bridge: Responsable de la actualización DOM en curso generada por la solicitud y la respuesta del proceso. También es el encargado de centrar la gestión y de presentar el proceso.

Buenas prácticas y recomendaciones de uso

A continuación se muestran algunas buenas prácticas en la validación de formularios:

 

Mensajes de error y validación

Suele ser una fuente de errores el que los mensajes de validación o error desaparezcan debido a que esos campos no tengan el atributo inmediate situado a true. Este problema es debido a que sólo se hace submit de una parte del formulario. JSF permite que se modifiquen el texto de los mensajes de error. A continuación se muestra cómo se recomienda realizar esta acción:

Se indica la lista de mensajes que se pretenden reemplazar, por ejemplo para validar la longitud:

javax.faces.validator.LengthValidator.MAXIMUM_MESSAGE_ID = Tu mensaje

Por último sólo es necesario agregar en el faces-config.xml el bundle de los mensajes:

<application>
<message-bundle>com.yourcompany.resources</message-bundle>
</application>

Ejemplos

Creando un proyecto de ejemplo

En esta sección se realiza una aplicación de ejemplo utilizando eclipse y el plugin de ICEfaces instalado en pasos anteriores. A continuación se procede a realizar un tutorial paso a paso para realizar un nuevo proyecto con características de ICEfaces:

  • Ejecutar el eclipse, seleccionar un workspace y crear un nuevo proyecto del tipo Dynamic Web Project:

  • Indicar el nombre del proyecto, seleccionando en la sección de Configurations que va a ser un proyecto ICEfaces:

  • Seleccionar siguiente y marcar las facets del proyecto:

  • Indicar la configuración del módulo web y hacer clic en siguiente:

  • Por último seleccionar las librerías que se van a utilizar, en este caso se indicaría que serán las Sun JSF ir v1.2_04 y agregar la librería referida a ICEfaces versión 1.6.1:

Por último, indicar que las librerías de ICEfaces serán desplegadas con la aplicación, para realizar esto marcamos el check asociado a estas librerías en el wizard que apareció. Con esto la configuración del proyecto se daría por finalizada:

Creando una página de ejemplo

En esta sección se procede a crear una página de ejemplo y a mostrar algunas de las características que ofrece ICEfaces.

  • Lo primero es abrir el proyecto de ejemplo denominado EjemploICE, a continuación pulsar sobre la carpeta WebContent, pulsar el botón derecho del ratón y seleccionar New y página JSP.
  • En la ventana que aparece, seleccionar el nombre de la nueva página (con extensión .jspx) y su ubicación.

  • Pulsar sobre siguiente y seleccionar el patrón para la página que va a utilizarse. Seleccionar New ICEfaces Facelets JSPX file o New ICEfaces JSPX File. Tras seleccionar la plantilla realizar clic sobre finalizar.

Tras ésto, el proyecto ya contaría con una página con características ICEfaces. Este proyecto puede ser desplegado en cualquier servidor para ir observando los resultados de las acciones que realizadas. Acto seguido se la da funcionalidad a la página creada.

Una vez que se tenga una página creada, utilizar un editor visual con funcionalidad 'drag and drop' para ir agregando los componentes deseados e ir viendo el resultado de manera visual utilizando un editor WYSIWYG.

Este editor no se encuentra por defecto asociado a las páginas ICEfaces, para habilitarlo habrá que pulsar sobre la página a editar, haciendo clic con el botón derecho y seleccionando “Open With” / “Other”. En la ventana que aparece, seleccionar “Internal Editor” y “Web Page Editor”.

Tras esto se obtendrá el editor que sigue, en el que se disponen de una paleta con la que podrán pincharse y arrastrarse componentes a su ubicación de una manera visual:

Enlaces externos