ICEfaces è un prodotto leader nel mondo dei web framework basati sulla tecnologia Ajax e sullo standard JSF. Si integra facilmente con i container Java EE più diffusi e supporta tutti i maggiori browser web e per dispositivi mobili. Oltre a presentare un elevato numero di componenti grafici, ICEfaces introduce delle caratteristiche peculiari come il partial submit e il server push che migliorano l‘interazione con l‘utente.

Introduzione

ICEfaces [1] è un prodotto leader nel mondo dei framework complementari basati sullo standard JSF. È un prodotto Open Source (Mozilla Public License 1.1) e la società che produce ICEfaces è IceSoft Technologies Inc. [2], fondata nel 2001, con sede a Calgary (Canada), attivamente impegnata nel mondo Open Source (ICEfaces e IcePDF [3]) e in particolare nel mondo del Web 2.0.
ICEfaces implementa un renderer Direct-to-DOM (D2D) di componenti (che sostituisce quello standard basato su HTML e JSF) e introduce un “ponte Ajax” tra il server e il browser per comunicare cambiamenti all’interfaccia grafica.

ICEface è un’ottima libreria JSF “complementare”, cioè una libreria Java che arricchisce il framework JSF con componenti grafici Ajax semplici da usare e che rendono un sito web accattivante e più interattivo. Appartengono a questa categoria di framework anche: RichFaces, MyFaces Tomahawk e PrimeFaces.
ICEfaces si integra facilmente con l’implementazione di riferimento delle JSF della Sun, Mojarra, sia nella versione 1.2 che la nuova 2.0. La versione attuale di ICEfaces è la 1.8.2 che fa riferimento alla specifica JSF versione 1.2, mentre è in sviluppo la versione 2.0 che fa riferimento allo standard JSF 2.0.
Alternativamente a Mojarra, è possibile integrare ICEfaces anche con MyFaces.

Le funzionalità centrali di ICEfaces sono:

• Server Push: permette di aggiornare automaticamente i componenti della vista di una pagina web tramite il Renderer di ICEfaces;
• Partial Submit: permette di inviare al server dei form in maniera parziale evitando così la validazione della form completa. Questa tecnica è molto utile per implementare dei form divisi su più pannelli tabulati.

Le applicazioni Web 2.0 basate su ICEfaces sono compatibili con i maggiori browser, tra cui: Safari, Chrome, Firefox, Iexplorer ed Opera.
Inoltre sono supportati i più diffusi container Java EE tra cui: Tomcat 5.x e 6, Jetty, Glassfish, JBoss, Weblogic e WebSphere.
È possibile inoltre integrare ICEfaces con Spring Web Flow e JBoss Seam (i due framework più diffusi di gestione del flusso di navigazione) [4].

Architettura

L’architettura di base di ICEfaces [5] è mostrata in figura 1.

Figura 1 – Architettura di ICEfaces.

L’ambiente fornito da ICEfaces fornisce le seguenti funzionalità

Aggiornamenti incrementali della pagina web

Non si richiede un aggiornamento completo della pagina, ma solo parziale.

Conservazione del contesto durante l’update

Durante l’update parziale delle pagine, il contesto viene preservato: per esempio, viene mantenuta la posizione dello scroll della pagina, non cambia il componente sul quale era posizionato il focus, etc.

Elaborazione “intelligente” delle form

Grazie alla tecnica del “partial submit”, le form dell’utente vengono elaborate in maniera intelligente: questa tecnica consente di inviare solo parzialmente i dati inseriti e di limitare la validazione solamente ad alcuni dati (per esempio in caso di pannelli tabellari).

Ajax Push

Le applicazioni basate unicamente sullo standard JSF permettono di aggiornare le pagine web solamente in seguito alla risposta a un’azione dell’utente; il meccanismo dell’ ajax-push invece permette l’aggiornamento della pagina a seguito di un evento scaturito dal server per aggiornare la pagina automaticamente (per esempio con questa tecnica è possibile implementare delle chat; inoltre ICESoft ha implementato una sofisticata applicazione di “web-conferenza” [6]).

Diamo ora una occhiata più da vicino all’architettura di ICEfaces ed individuiamone i concetti chiave che saranno poi utili durante lo sviluppo di una applicazione basata su ICEfaces.

Figura 2 – Architettura dettagliata di ICEfaces.

Gli elementi più importanti che occorre tenere presente sono i seguenti.

ICEfaces Persistent Faces Servlet

Gli URL con l’estensione “.iface” sono mappati sulla servlet Persistent Faces Servlet, che è responsabile di eseguire il ciclo di vita delle JSF per la pagina richiesta[7].

Blocking Servlet

Questa servlet è responsabile per la gestione delle richieste bloccanti e non-bloccanti.

ViewHandler

È l’handler per il rendering Direct-to-DOM: il D2D è un elemento centrale nell’architettura di ICEfaces (è il responsabile del rendering delle pagine JSF).

Component Suite

È una collezione di componenti JSF aggiuntivi.

Ajax Bridge

È responsabile per la comunicazione con la parte client (browser).

Le funzionalità chiave di ICEfaces

Ecco di seguito un elenco delle funzionalità più importanti che offre ICEfaces.
La funzionalità più importante di ICEfaces è, senza dubbio, la possibilità di aggiornare una pagina web in modo asincrono e incrementale, permettendo anche di inviare una form in maniera parziale (e quindi abilitare solo una validazione parziale).
Inoltre con ICEfaces è facile aggiornare una pagina web direttamente dal server (server push): basta dichiare il managed bean corrispondente alla pagina come “Renderable” e dichiarare la frequenza di aggiornamento voluta.
Fate riferimento all’esempio “TimeZone” [8] per un tutorial su questo argomento.

Aggiornamenti incrementali

L’aggiornamento parziale delle pagine web permette di aggiornare solo alcune parti della pagina web senza doverla ricaricare completamente ogni volta (e quindi senza dover attendere il completamento del ciclo di vita di una pagina JSF). L’aggiornamento incrementale è effettuato in modo trasparente (dal punta di vista del programmatore) dal D2D renderer.

Aggiornamenti sincroni e asincroni

L’aggiornamento sincrono delle pagine JSF viene effettuato come parte dell’intero ciclo di vita di una pagina JSF (request/response). Le applicazioni ICEfaces non sono però costrette ad usare l’intero ciclo di vita di una pagina JSF: è possibile aggiornare in modo asincrono delle parti parziali di pagine attraverso l’uso di richieste XMLHttpRequest.
Per abilitare gli aggiornamenti asincroni basta configurare il synchronousUpdate a “false” nel file web.xml:

com.icesoft.faces.synchronousUpdate
false

Server-initiated rendering (Server Push)

L’aggiornamento asincrono di pagine web comprende anche l’uso del server push [9], che è forse il componente più importante per il web 2.0: permette di aggiornare una pagina web tramite una “iniziativa” della parte server. Questa operazione può essere facilmente abilitata nei propri managed beans utilizzando l’interfaccia Renderable che permette di associare il managed bean con il proprio stato (PersistentFacesState) di rendering.
Fate riferimento al tutorial “TimeZone” [5] (presente nella distribuzione di ICEfaces) dove viene implementato un orologio che si aggiorna automaticamente ad ogni secondo.

Figura 4 – Tutorial “TimeZone”.

L’applicazione definisce un managed bean (TimeZoneBean) collegato all’unica pagina del sito che implementa l’interfaccia Renderable e crea un IntervalRenderer per aggiornare l’orologio ogni secondo.

Partial submit (Intelligent form processing)

Questo meccanismo è usato per validare passo-passo i campi di una form: per esempio, quando vogliamo implementare un wizard, il partial submit permette di validare solo alcune proprietà e non tutte.

Cascading Style Sheet Styling

La tecnologia CSS serve per separare completamente la parte di dichiarazione degli stili dalla pagina web. ICEfaces permette (e incoraggia) l’uso dei CSS: tutti i componenti forniti da ICEfaces (ICEfaces Component Suite) utilizzano delle classi di definizioni di stile comuni a tutti i componenti che ne permettono facilmente la sostituzione con altri “skins” coerenti con le definizioni supportate.

Drag and Drop

ICEfaces include il supporto per il drag and drop tramite la libreria javascript script.aculo.us.
Ogni istanza ice:panelGroup può essere sorgente o destinataria del drag, basta definire l’attributo draggable (dropTarget) a true.
Per esempio, per definire un pannello sorgente di drag basta la seguente:

Oppure per rendere un pannello destinatario del drag:

È possibile utilizzare delle animazioni con il drag and drop come:

• revert: quando il pannello che viene trascinato viene poi riportato nella posizione iniziale;
• ghosting: durante il drop viene visualizzata una copia trasparente del pannello che si sta trasciando;
• solid: durante il drop viene visualizzato il componente che si sta trascinando senza trasparenza.

Effetti di animazione

Gli effetti sono ereditati dalla libreria script.aculo.us e possono essere invocati tramite l’attributo effect come da esempio:

Supporto per viste concorrenti

Si tratta in pratica della possibilità di aprire più pagine del browser con la stessa sessione. ICEfaces supporta infatti la capacità di aprire più finestre (tramite browser) utilizzando la stessa sessione. Quando l’utente apre più pagine, il renderer DOM memorizza un numero progressivo di vista per ogni pagina: in questo modo è possibile condividere gli stessi oggetti (managed bean) con più viste (e senza corrompere il DOM che rappresenta la pagina).

Per attivare il supporto per le viste concorrenti basta configurare correttamente ICEfaces nel file web.xml:

com.icesoft.faces.concurrentDOMViews
true

Busy indicator

ICEfaces permette di utilizzare una “clessidra” che blocca l’interfaccia dell’utente fintantoche’ il submit (parziale o totale) non sia completato.

Per attivare il supporto basta aggiungere le seguenti righe nel file web.xml:

com.icesoft.faces.blockUIOnSubmit
true

Supporto per i portali

ICEfaces suporta i seguenti portali:

• Liferay Portal
• JBoss Portal
• WebLogic Portal
• Apache Jetspeed-2
• Apache Pluto

Il file da scrivere per configurare l’integrazione con un portale è portlet.xml dove si definiscono i portali da integrare con i loro parametri di inizializzazione. Fate riferimento alla documentazione di ICEfaces per una dettagliata descrizione dei parametri da usare [10].

Integrazione con i gestori di flusso

JBoss Seam

JBoss Seam è una tecnologia “middleware” che integra le JSF con gli EJB3. JBoss Seam è un ottimo middleware per gestire la sessione di un flusso di lavoro con o senza EJB3 (tipicamente Seam è usato tramite il contenitore JBoss o Tomcat); ha il vantaggio di non richiedere dei grossi file XML di configurazione.  Per maggiori informazioni fate riferimento alla bibliografia [11].

Spring Web Flow

SWF è un middleware che permette di implementare dei flussi di navigazione all’interno di un sito web basandosi sulla tecnologia Spring MVC. In pratica SWF e Seam sono “competitor”: la scelta dell’uno o dell’altro è puramente arbitraria. Fate riferimento alla bibliografia [12] su SWF e sull’integrazione di ICEfaces con SpringFramework.

Integrazione con le Facelets

La tecnologia delle Facelets si occupa della costruzione dei componenti JSF. Le Facelets vengono usate per sostituire la tecnologia delle JSP che poco si adatta alle JSF (le JSF e le JSP gestiscono due diversi cicli di vita delle pagine, e questo crea dei problemi risolti utilizzando le Facelets).
L’integrazione delle applicazioni basate su ICEfaces con le Facelets viene assicurata dal View Handler D2DFaceletViewHandler che deve essere dichiarato nel file faces-config.xml; inoltre occorre cambiare il valore del suffisso di default (DEFAULT_SUFFIX) definito nel file web.xml con .jspx o anche .xhtml. Tramite questi cambiamenti le Facelets risultano integrate allo stesso modo che accade con le JSF standard. La tecnologia delle Facelets enfatizza il riuso delle componenti grafiche tramite il “facelets templating” (fate riferimento a [14]).

Conclusioni

ICEfaces è senza dubbio una importante libreria per la scrittura di siti Web 2.0 basati sulla tecnologia JSF.
I componenti grafici [13] definiti da ICEfaces permettono di scrivere un sito web complesso in poco tempo, inoltre (cosa da non sottovalutare quando occorre valutare un framework JSF) un’applicazione basata su ICEfaces è direttamente utilizzabile in qualsiasi contenitore Java EE e con qualsiasi browser.
I prossimi articoli su ICEfaces saranno più “pratici”: faremo vedere come si integra ICEfaces con Mojarra e con le Faceletes; inoltre implementeremo un semplice esempio di login form composto da una pagina con un header dove verrà scritta l’ora di sistema sempre aggiornata (server push), un body che conterrà una form per il login (integrazione con le Facelets e binding automatico), e un footer che conterrà lo stato di connessione (connesso/disconnesso/working).
In caso di login corretto mostreremo una pagina in cui sarà possibile effettuare il drag’n’drop con delle immagini e abilitare degli effetti di animazione. Quindi… appuntamento ai prossimi numeri di MokaByte

Riferimenti

[1] Home page di ICEfaces
http://www.icefaces.org/main/home/

[2] Home page di ICESoft
http://www.icesoft.com/

[3] Home page di ICEPDF (rilasciato con licenza open source Mozilla Public License 1.1)
http://www.icepdf.org/

[4] Panoramica su ICEfaces
http://www.icefaces.org/main/ajax-java/jsf-ajax.iface

[5] Documentazione ufficiale di ICEfaces(“ICEfacesDevelopersGuide.pdf”, file compreso nel binario della distribuzione)

[6] Applicazione demo Webinar
http://webmc.icefaces.org/

[7] Riferimenti vari sulle JSF
http://java.sun.com/javaee/javaserverfaces/
https://www.mokabyte.it/cms/article.run?articleId=XER-MML-L7M-3YX_7f000001_28844331_bc942787
http://java.sun.com/j2ee/1.4/docs/tutorial/doc/JSFIntro10.html

[8] Il tutorial TimeZone è presente nella distribuzione di ICEfaces (icefaces/samples/tutorial/timezone)

[9] Introduzione dell’Ajax-push
http://www.icefaces.org/main/ajax-java/ajaxpush.iface

[10] Integrazione di ICEfaces con i portali
http://www.icefaces.org/main/ajax-java/portals.iface

[11] Forum di discussione sull’integrazione di JBoss Seam con ICEfaces
http://www.icefaces.org/JForum/posts/list/4399.page
http://seamframework.org/Community/ICEfacesSeamIntegration

[12] Riferimenti vari per l’integrazione tra Spring, SWF e ICEfaces
http://www.icefaces.org/docs/v1_7_2/htmlguide/devguide/AdvancedTopics11.html
http://www.theserverside.com/tt/knowledgecenter-is/knowledgecenter-is.tss?l=ICEFacesandSpringJavaEE
http://www.icefaces.org/JForum/posts/list/8812.page

[13] Component show case: demo dei componenti Ajax di ICEfaces
http://component-showcase.icefaces.org/

[14] Riferimenti sulle Facelets e sulla loro integrazione con ICEfaces
https://facelets.dev.java.net/
http://facestutorials.icefaces.org/tutorial/facelets-tutorial.html