Sono disponibili anche un kit per lo sviluppo di interfacce utente per applicazioni web mobile, PrimeMobile e un discreto insieme di temi predefiniti, come si puo’ vedere in questa themes gallery.
PrimeFaces contro tutti
Primefaces si pone in diretta concorrenza con i ben noti e già maturi RichFaces e IceFaces. Tuttavia sta suscitando un enorme interesse grazie ad alcuni punti di forza che lo rendono assai competitivo nei confronti degli altri progetti.
-
Facilità per iniziare:
Come vedremo è sufficiente una sola libreria e zero configurazione. -
Ajax e Jquery:
Supporto Ajax e utilizzo non intrusivo di JavaScript, basato sulla più recente versione di JQuery. -
Maggior numero di componenti:
Come abbiamo detto più di 100 componenti disponibili basati su JQueryUI (HTMLEditor, Dialog, DataTable, Menu,AutoComplete,Charts e molto altro), in più con compatibilità dichiarata con altre librerie di componenti JSF. -
Performance:
PrimeFaces è una libreria leggera, tutte le scelte prese sono basate sul mantenere PrimeFaces il più leggero possibile. -
Facilità d’uso:
I Componenti in PrimeFaces sono sviluppati segondo il seguente principio di design: “Un componente UI buono dovrebbe nascondere la complessità, ma mantenere la flessibilità”. -
Documentazione e supporto:
Infine una ricca documentazione e pieno supporto per gli sviluppatori, grazie anche ad una attiva community
-
Quanto detto trova riscontro nel seguente articolo PrimeFaces vs RichFaces vs IceFaces.
Come si puo vedere dal seguente risultato su :
ad oggi, Marzo 2012, l’interesse della comunità di sviluppatori nei confronti di questo framework è in netta crescita, tanto da aver in pochi anni raggiunto e surclassato la concorrenza, nonostante il progetto sia piuttosto giovane. Altra controprova di questo interesse per PrimeFaces è il risultato del seguente sondaggio.
Tranquilli miei cari fan di RichFaces, non è ancora tempo di buttare tutto alle ortiche, per adesso il mercato sembra che sia ancora dominato dalle vostre amate ricche facce di JBoss, come risulta su indeed.com.
Nel frattempo sarebbe forse il caso di cominciare a smanettare con il nuovo che avanza, che non si sa mai, che ne dite? 😉
Getting Start
Vediamo come creare la nostra prima applicazione con Primefaces. Per cominciare come server di riferimento utilizzeremo Tomcat (ma potete, se preferite, provare anche su JBoss o su GlassFish) e naturalmente L’IDE utilizzato sarà Eclipse versione Indigo.
Prima di tutto ci occorrono le seguenti librerie:
- javax.faces-2.1.7.jar core JSF
- jstl-api-1.2.jar JavaServer Pages Standard Tag Library
- jstl-impl-1.2.jar JavaServer Pages Standard Tag Library
- primefaces-3.2.jar core PrimeFaces
Se usate JBoss o GlassFish invece che Tomcat, allora è sufficiente solo l’ ultimo jar, cioè primefaces-3.2.jar.
Ma procediamo con la creazione del nostro progetto. In Eclipse clicchiamo su File -> New -> Project, nel wizard per il New Project, selezioniamo Web -> Dynamic Web Project:
Nella fase successiva inseriamo il nome del Progetto, lo chiameremo PrimeFacesTest, selezioniamo il runtime target (abbiamo scelto Tomcat 7) e poi clicchiamo su finish.
Includiamo ora nel Build Path le librerie che abbiamo scaricato. Per farlo possiamo copiare le librerie direttamente nel folder /WebContent/WEB-INF/lib tramite drag and drop dalla cartella in cui le abbiamo scaricate, così facendo ritroveremo le librerie sotto Web App Libraries:
Adesso procediamo alla creazione della seguente struttura di riferimento:
Per prima cosa modifichiamo il web.xml in modo da includere la servlet javax.faces.webapp.FacesServlet ed il relativo mapping, così come segue:
PrimeFacestest index.xhtml Faces Servlet javax.faces.webapp.FacesServlet 1 Faces Servlet /faces/* Faces Servlet *.jsf Faces Servlet *.faces Faces Servlet *.xhtml
Di seguito aggiungiamo la pagina index.xhtml dove inseriremo dei componenti PrimeFaces per testarne il funzionamento:
PrimeFaces Test
Cui segue il corrispettivo backing bean:
package it.cosenonjaviste;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean(name="passwordBean")
@RequestScoped
public class PasswordBean {
private String username;
private String password;
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
}
Se tutto è stato eseguito correttamente, avviamo l’applicazione sul server e proviamo a collegarci a questo indirizzo:
PrimefacesTest/
Ci troveremo ora di fronte ad una form web che chiede di inserire nome utente e password, nonchè di ripetere la password per conferma.
In pratica è implementato un realizzato con Primefaces e reso possibile grazie all’attributo match del componente p:password.
Infatti la filosofia di PrimeFaces come abbiamo visto, considera cosa fondamentale la facilità d’uso dei suoi componenti, dunque con un semplice riferimento sul primo campo password, cioè pwd1, al secondo campo password match="pwd2", sarà il framework a farsi interamente carico della validazione, sollevando lo sviluppatore da ulteriori interventi.
Se popolate adesso i campi della form e se le password inserite coincidono, cliccando su Salva, apparirà una simpatica finestra riepilogativa (quando la chiuderete capirete perchè dico “simpatica”), altrimenti in questa vi apparirà un messaggio di errore. Notate bene che sia il campo Username che i due campi Password sono required="true", cioè sono campi obbligatori, dunque se li omettete non passeranno la validazione e sarà visualizzato per questo il relativo messaggio di errore.
Un’ultima considerazione, nel p:commandButton è presente un attributo update, vi starete chiedendo a cosa serve?
Orbene l’attributo update serve semplicemente per aggiornare, al termine di una richiesta Ajax, lo stato di uno più componenti, i cui id sono specificati come valore.
JQuery
Come già accennato all’inizio dell’articolo, la suite Primefaces offre una integrazione nativa con JQuery. Provate adesso ad aggiungere il seguente codice nella head del file index.xhtml:
All’avvio della pagina apparirà un alert che vi dà il benvenuto. “Ovvio!”, direte voi, “è la tecnica JQuery per eseguire del codice al caricamento della pagina!”. Ma allora che c’è di strano? Un momento… JQuery non è stato importato nella pagina? E allora da dove viene?
Viene naturalmente da Primefaces. Infatti come abbiamo detto all’inizio di questo articolo, JQuery è integrato nel framework e dunque che ragione ci sarebbe di non poterlo avere a nostra disposizione anche per altro? Comodo, non trovate?
Pingback: ()