PrimeFaces: una suite di componenti Open Source per Java Server Faces

In questo articolo utilizzeremo la suite di componenti per Java Server Faces denominata PrimeFaces, che possiamo trovare a questo indirizzo: http://www.primefaces.org/.PrimeFaces è una suite di componenti open source per Java Server Faces con più di 100 componenti JSF Ajax enabled. L'ulteriore modulo TouchFaces rende disponibile un kit per lo sviluppo di interfacce utente per applicazioni web di tipo mobile. Obiettivo principale di PrimeFaces è quello di creare una suite di componenti per JSF di riferimento.

In questo articolo utilizzeremo la suite di componenti per Java Server Faces denominata PrimeFaces, che possiamo trovare a questo indirizzo: http://www.primefaces.org/.

PrimeFaces è una suite di componenti open source per Java Server Faces con più di 100 componenti JSF Ajax enabled. L’ulteriore modulo TouchFaces rende disponibile un kit per lo sviluppo di interfacce utente per applicazioni web di tipo mobile. Obiettivo principale di PrimeFaces è quello di creare una suite di componenti per JSF di riferimento.

Le principali features sono:

più di 100 componenti (HTMLEditor, Dialog, completamento automatico,grafici e altro);
Built-in Ajax con Lightweight rendering a pagina parziale;
Native Ajax Push / supporto Comet, tramite il framework Atmosphere;
un Kit per interfacce utente Mobile, per creare applicazioni web mobile per dispositivi palmari dotati di browser basati su WebKit (iPhone, Palm, Android Phones, Nokia S60 e altri);
Un solo jar, zero-configurazioni e nessuna dipendenza richiesta;
Skinning Framework con 30 temi pre-progettati;
Ampia documentazione.

Come di consueto per la nostra prova utilizzeremo Eclipse (in versione web Developers).

Scarichiamo Primefaces

Scarichiamo la suite PrimeFaces (un solo jar) da questo indirizzo:

http://www.primefaces.org/downloads.html

Potremo scegliere tra varie versioni, utilizziamo in questo articolo l’ultima disponibile (versione 2.2).

Dalla barra dei menu di Eclipse clicchiamo su File -> New -> Project…, nel wizard per il New Project, selezioniamo Web -> Dynamic Web Project:

Clicchiamo su Next si aprirà questo pannello:

Diamo un nome al nostro progetto, scegliamo in Configuration Java Server faces v1.2 e clicchiamo su Next

Inseriamo il nome del Progetto (TestPrimeFaces), il runtime Target (abbiamo scelto Tomcat) e per Configuration selezioniamo dalla tendina il valore JavaServer Faces v1.2.

Clicchiamo su Next finchè non arriviamo alla finestra JSF Capabilities:

Includiamo la libreria JSF 2.0 Mojarra e clicchiamo su Finish.

Procediamo includendo ora nel Build Path la libreria PrimeFaces che abbiamo scaricato precedentemente (nel mio caso primefaces-2.2.jar). Per farlo possiamo copiare la libreria direttamente nel folder /WebContent/WEB-INF/lib tramite drag and drop dalla cartella in cui l’abbiamo scaricata, così facendo ritroveremo la libreria sotto Web App Libraries:

Includiamo la libreria PrimeFaces nel nostro Build Path

Se stiamo usando Tomcat includiamo anche la libreria jstl.jar nel nostro build Path:

I jar che abbiamo incluso nel nostro progetto.

Utilizziamo la libreria

Creiamo una pagina jsp di nome index.jspche sarà la nostra entry del progetto e che ci indirizzerà verso la pagina di prova che utilizza le componenti PrimeFaces:

<html>
<head> </head>
<body>
<jsp:forward page="/faces/PrimeFacesPage.xhtml" />
</body>
</html>

Infine creiamo una pagina PrimeFacesPage.xhtml dove inseriremo dei componenti PrimeFaces per testarne il funzionamento:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui">

<h:head>
<title>PrimeFaces Test</title>
<style>
.ui-widget{
font-size: 12px !important;
}
</style>
</h:head>
<h:body>
<div id="header">
</div>
<div id="content">
<h:form id="form">
<p:themeSwitcher initialText="Cambia Skin" buttonPreText="Skin: "/>
<p:panel header="Test PrimeFaces" footer="Un test per..." toggleable="true" closable="true" >
<h:outputText value="PrimeFaces su AppuntiSoftware.it ..." />
<p:spinner value="0" min="0" max="100"/>
<p:calendar mode="inline" locale="it" />
</p:panel>
</h:form>
</div>
</h:body>
</html>

Modifichiamo il web.xml in modo da includere la servlet javax.faces.webapp.FacesServlet ed il relativo mapping, è un’operazione che dovrebbe già eseguire l’IDE Eclipse quindi accertiamoci che vengano incluse:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">

<display-name>TestPrimeFaces</display-name>

<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>

<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>

<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>

<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>

<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
</web-app>

In questo modo tutto le risorse richiamate con l’url precedute dal prefisso /faces/ saranno processate dalla Faces Servlet.

Il risultato finale:

Una serie di componenti PrimeFaces inclusi in un Pannello

Su alcuni ambienti (in particolare Linux) i componenti potrebbero avere un font size non standard (superiore ai 12 px), in questo caso è possibile ovviare al problema andando a “forzare” il font size aggiungendo questo codice nei tag style:

<style>
.ui-widget{
font-size: 12px !important;
}
</style>

E’ possibile scaricare il progetto .war a questo indirizzo http://www.appuntisoftware.it/codeexamples/warfiles/TestPrimeFaces.war

Per una disamina completa dei componenti utilizzabili con PrimeFaces si visiti il seguente indirizzo web: http://www.primefaces.org/showcase/ui/home.jsf

COMMENTS

WORDPRESS: 2

Flavio 12 anni ago

Salve, ho seguito passo passo tutte le istruzioni, ma quando vado ad eseguire su TomCat il progetto mi da il seguente errore:
“The requested resource (/TestPrimeFaces/WEB-INF/PrimeFacesPage.jsf) is not available.”

(Faccio notare che nella cartella WEB-INF ho 2 files: index.jsp e PrimeFacesPage.xhtml; il file PrimeFacesPage.jsf non c’è, perché lo cerca?)

Da cosa potrebbe dipendere?

Forse occorre apportare qualche modifica al file web.xml?
Grazie

PS: Complimenti per il blog, i vostri tutorial e articoli sono davvero interessanti e utilissimi.

angeloonline 12 anni ago
Ciao Flavio, grazie per aver letto il mio articolo, come tu giustamente dici non esiste e non deve esistere alcuna pagina con suffisso .jsf, dunque potrebbe essere un problema nel web.xml, forse non è dichiarata la Faces Servlet, in ogni caso ho aggiunto all’articolo la definizione del web.xml, prova a copiarlo e fammi sapere se adesso funziona.
ciao e grazie ancora