ICEfaces 2.0 – AJAX Push

Posted by Jadisha Yarif

Ajax Push permite crear aplicaciones colaborativas multiusuarios.  Ésta es una característica que ha estado presente en ICEfaces desde versiones anteriores, sigue el siguiente enlace para que tengas una idea previa de cómo trabaja el Ajax Push Server:

Ajax Push Server en ICEfaces - http://www.kamlov.site90.net/?p=803

Con Ajax Push, ante cualquier cambio de estado de la aplicación, todos los usuarios pueden estas informados, ante la actualización de las páginas de un grupo de usuarios.  Estas actualizaciones son enviadas a los navegadores de un grupo de clientes, gracias al Ajax Automático, otra característica de ICEfaces 2.0.

En ICEfaces 2.0, las APIS que utilizaba el Ajax Push han sido simplificadas para añadir fácilmente capacidades de colaboración en aplicaciones RIA.  Asimismo, se utiliza ahora un mecanismo de notificación asíncrona llamada ICEPush.

Este mecanismo utiliza un long polling para proveer notificaciones asíncronas sobre el estándar HTTP.  Y ¿qué es un long polling?, éste es una variación del polling (operaciones de consultas constantes para establecer una actividad síncrona) que básicamente emula información de un servidor a un cliente.  Sin embargo, cuando el servidor no dispone de información para enviar a un cliente, éste guarda la petición, hasta disponer de información y mandar una respuesta completa y satisfactoria al cliente, en lugar de mandar una respuesta vacía.

A continuación, se muestra la secuencia de los eventos con Ajax Push:

1. Esta secuencia inicia cuando se refleja un cambio en el estado de la aplicación, lo que genera un evento Ajax Push.

2. Luego, las notificaciones ICEpush son enviadas al navegador del Cliente, a través de una conexión ICEpush (ICEpush Bridge).

3. Estas notificaciones del navegador del Cliente generan una petición Ajax, lo cual implicará la ejecución del ciclo de vida JSF en el servidor.

4. Finalmente, el mecanismo de renderizado calculará las diferencias del nuevo y antiguo estado del Cliente y enviará las actualizaciones de la página, a través del JSF Ajax Bridge, al Navegador del Cliente para que se refresque.

Nota: Los paso 3 y 4 son parte del Ajax Automático, para más información seguir el siguiente enlace: Ajax Automático.

Además, esta tecnología funciona con cualquier aplicación Java, no necesariamente JSF, sino que también se puede utilizar con JQuery, GWT, JSP, Spring MVC, Wicket, Prototype, Grails, JavaScript y otros frameworks para Java.  Para ello, sólo es necesario importar a tu aplicación Java la librería icepush.jar.

De la misma manera, el uso de este característica es muy simple, ya que si se desea enviar una notificación a todo un grupo, se debe agregar la siguiente línea de código:

PushRenderer.render("miGrupo");

Si se desea enviar las actualizaciones en la sesión del usuario, se utiliza:

PushRenderer.addCurrentSession("miGrupo");

Y si se Si se desea enviar las actualizaciones a todas las vistas del usuario, se agrega:

PushRenderer.addCurrentView("miGrupo");

Ahora es mucho más fácil construir aplicaciones colaborativas con ICEfaces 2.0!

ICEfaces 2.0 – AJAX Autom@tico

Posted by Jadisha Yarif

Hasta antes de JSF 2.0, se tenía que utilizar controles como <f:ajax> para controlar las actualizaciones de los componentes en la interfaz del usuario final.  Esto degradaba el rendimiento de los desarrolladores y mucho más aún el mantenimiento se tornaba tedioso, complicado e inmanejable, puesto que si se necesitaba una gran cantidad de controles a actualizar, todo la página de presentación iba a tener tantos <f:ajax> como componentes a actualizar.  Por lo tanto, muchas veces teníamos como resultado una aplicación no escalable.

Sin embargo, con ICEfaces 2.0 y las capacidades de JSF 2.0, ya no se necesita más agregar el tag <f:ajax> a nuestros componentes, puesto que el Ajax Automático, utilizando la tecnología de renderizado Direct 2 DOM (D2D), se encarga de calcular eficientemente las diferencias entre una página y la siguiente.  Y así, utilizando el mecanismo de actualización incremental de página de JSF, se producen los cambios en el DOM del navegador Web del Cliente.

A continuación, se muestra un ejemplo de un campo de entrada, que cuando el usuario ingresa data alguna, se genera un campo de salida:

<h:form>
    <icecore:singleSubmit>
        <h:panelGrid columns="1">
            <h:inputText id="miInputText" value=""/>
            <h:outputText id="miOutputText" value=""/>
        </panelGrid>
    </icecore:singleSubmit>
</h:form>

La secuencia de actualización de los componentes de una página, se muestra en la siguiente figura:

1. Esta secuencia inicia con la Interacción del Usuario, cuando termina de ingresar data en el campo de texto.

2. Una vez que el usuario ya no tiene como objetivo el campo de texto, se dispara un Evento Ajax.

3. Se realiza una Petición Ajax, a través del puente estándar JSF (JSF Ajax Bridge).

4. El ciclo de vida JSF se ejecuta sólo en el componente de texto (imputText), pues se ha utilizado Single Submit en éste, actualizándose el modelo.

5. En el servidor, se construye el modelo, en donde se compara las diferencias entre el modelo anterior y el siguiente, a nivel de árboles, con el motor Direct 2 DOM (D2D).  Así, se construyen las actualizaciones necesarias automáticamente.

6. Las actualizaciones de página se envían al Cliente.

7. La actualización DOM se aplica para refrescar el navegador del Cliente.

Como se mostró en el ejemplo anterior, se utilizó una característica del Ajax Automático, que es el Single Submit, el cual permite básicamente especificar qué componentes se actualizarán, esto se utiliza para no tener actualizaciones de componentes no deseados.  A diferencia del Partial Submit, que permite que todos los componentes comprendidos en un formulario se actualicen, si sólo han pasado todos sus componentes por los validadores (validators), mostrando FacesMessages para componentes que el usuario muchas veces no ha interactuado aún.  En cambio, con Single Submit se garantiza que el componente se actualice si la data de entrada es la correcta; y sin causar FacesMessages erróneos.

En conclusión, esta característica trae simplicidad para el desarrollo, fácil mantenimiento, escalabilidad, menor costo de desarrollo.  Asimismo, ya no es necesario que el desarrollador se preocupe por las actualizaciones de página, puesto que con Ajax Automático y D2D se encargan de realizar esa tarea.

ICEfaces 2.0

Posted by Jadisha Yarif

ICEfaces 2.0 es un framework RIA basado en JSF 2 (Java Server Faces), que permite desarrollar aplicaciones amigables e interactivas para el usuario bajo la plataforma Java2EE.

Las versiones anteriores de este framework estuvieron basadas en JSF 1.1 y 1.2, estableciendo así características como Ajax Automático y Ajax Push.  Ahora, con JSF 2, estas características han mejorado notablemente.  Esto se debe a que AJAX está integrado en el núcleo de la arquitectura de JSF, lo cual permite que el procesamiento de las peticiones y actualizaciones de la interfaz de usuario se integren al ciclo de vida de JSF 2.0.

De la misma manera, otra de las novedades es que existe un soporte de desarrollo con Portlets en ICEfaces 2.0.  Esto se debe a Portletfaces Bridge, el cual ha sido adaptado para la versión JSF 2.0 y para el fácil desarrollo de Portlets con la tecnología ICEfaces.

Ahora, ICEfaces 2.0 ofrece más de 100 componentes RIA, incluyendo los componentes estándares de JSF 2.0.  Todos estos vienen integrados con Ajax Automático, lo cual significa que no se tendrá que usar más el control <f:ajax> de JSF para especificar cuáles de nuestros componentes se deben refrescar o actualizar; pues esta característica ahora utiliza la tecnología de Direct 2 DOM (D2D), con lo cual se logra calcular automáticamente qué componentes son necesarios de actualizar, siguiendo los estándares de JSF 2.0.  Todos estos componentes vienen divididos en 3 suites:

ICEfaces Components, el cual incluye todos los componentes de ICEfaces 1.8 y una capa de compatibilidad que permite el funcionamiento con ICEfaces 2.0 y por ende con JSF 2.0.  Todo ello, permite la fácil migración de ICEfaces 1.8 a una versión más reciente del framework.

ICEfaces Advanced Components, son los componentes que se basan en Advanced Component Environment (ACE), que básicamente son controles automatizados y optimizados, que tratan de cumplir con la funcionalidad de tareas de comunes y que el desarrollador utilice componentes JavaScript, sin la necesidad de aprender o usar directamente JavaScript.

ICEfaces Enterprise Components, son los componentes exclusivos de ICEfaces 2.0, que derivan de la versión de ICEfaces 1.8.  Sin embargo, sólo se pueden usar con la última versión, pues fueron adaptados a la nueva arquitectura de JSF 2.0.  Estos componentes disminuyen el tiempo de implementación.

Por otro lado, ICEfaces 2.0 introduce el término de "Window", el cual permitirá que cada ventana del explorador o pestaña tenga su propio ciclo de vida, como si se manejara una sesión diferente.

Asimismo, en esta versión del framework se están incluyendo nuevas anotaciones para el manejo de los Beans, pues en todos los casos el comportamiento de estos Beans no pueden ser intuitivos.  Ante ello, se agregan estas anotaciones que tienen como objetivo controlar el comportamiento de los Beans.

También, existe un Registro de los Recursos utilizados, el cual permite registrar instancias javax.faces.application.Resource en ejecución.  De esa manera, cada recurso es registrado en un ámbito diferente, como aplicación, sesión, vista, flash, ventana, entre otros.  Así, el garbage collector puede recolectar estos recursos cuando su ámbito expire.

Si deseas saber más sobre el funcionamiento de esta tecnología, revisa los siguientes enlaces:

• ICEfaces 2.0 - AJAX Automático
• ICEfaces 2.0 - AJAX Push

ICEfaces: Dual List

Posted by Jadisha Yarif

Muchas veces, en nuestras aplicaciones, necesitamos de un componente, control o widget que nos permita seleccionar uno o más elementos de una lista y transferirlos a otra.   En la actualidad, no existe un nombre estándar para éste.  En Struts2, este componente es conocido con el nombre de optionTransferSelect.  En OpenFaces, recibe el nombre de TwoListSelection.  Y en ICEfaces, se le conoce como DualList.  Sin embargo, todos presentan funcionalidades semejantes.  A continuación, te presentamos una imagen de este componente.

En este post, te enseñaremos cómo crear este componente y configurar los eventos de cada botón, para que todos los elementos se transfieran a la derecha o izquierda o únicamente los elementos seleccionados.

Ajax Push Server en ICEfaces

Posted by Larry Martin

Una característica de ICEfaces que me gustaría contarte es sobre el Ajax Push Server. La tecnología Push se basa en que las peticiones ahora se dan de lado del servidor, no como en los casos comunes donde la petición la hace el usuario.

De esa forma, un usuario puede observar como la web cambia de forma dinámica y presenta un gran atractivo para si mismo, en otras palabras, puedo apreciar una aplicación mucho más interactiva para el usuario.

Cuando varios usuarios están interactuando con los mismos datos, el Ajax Push habilita las funciones de colaboración en tiempo real, porque todo el mundo puede ser consciente de cada instante las acciones de otros. Ajax Push es una capacidad fundamental del marco ICEfaces, disponible en el primer lanzamiento

ICEfaces te permite que hagas uso de algunos demos. Te dejo el enlace a continuación:

• http://www.icefaces.org/main/community/projects-webmc.iface
• http://auctionmonitor.icefaces.org/auctionMonitor/

Las conferencias sincronizadas y la mensajería instantánea son ejemplos típicos de los servicios tipo 'push'. Los mensajes de chat y, en ocasiones archivos, son enviados al usuario tan pronto estos son recibidos por el sistema de mensajería.