JSF: primi passi con Eclipse e MyFaces

In questo articolo verrà proposta e descritta passo passo la creazione di un semplice progetto in Eclipse con MyFaces. MyFaces è una tra le possibili implementazioni di Java Server Faces, il noto framework per la realizzazione di applicazioni web basate sul paradigma MVC. L'idea è quella di fornire un buon punto di partenza per chi non avesse le idee chiare su come cominciare ad utilizzare queste tecnologie, e strada facendo illustrare alcune peculiarità del framework JSF, una selezione di configurazioni necessarie dell'ambiente, ed alcune funzionalità di base.

Struttura di una applicazione JSF

Un'applicazione JSF segue le convenzioni usate per le applicazioni java per il web, ed ha generalmente una struttura di questo tipo:

+ - <Applicazione>/
      + - META-INF/
      + - pages/
      + - WEB-INF/
            + - lib/
            + - classes/
            | - faces-config.xml
            | - web.xml

• <Applicazione>/ : è la cartella di base della propria applicazione
• META-INF/ : può contenere risorse di vario tipo
• pages/ : il nome non è obbligatorio, ma di solito viene creata per tenere al suo interno tutte le pagine .jsp
• WEB-INF/ : la cartella fondamentale dell'applicazione, al suo interno si possono trovare due file cruciali:
  • faces-config.xml : è il file di configurazione per il framework JSF, il suo collocamento all'interno della WEB-INF/ è obbligatorio. In seguito verrà spiegato meglio il suo funzionamento.
  • web.xml : è il file di configurazione che cerca il web server per configurarsi.
  • lib/ : è la cartella dentro la quale infilare tutte le librerie richieste (vedere sopra per l'elenco delle librerie).
  • classes/ : contiene le classi complilate (.class) dell'applicazione.

Nel caso non ci si voglia avvalere del supporto di Eclipse, prendere spunto dallo schema di cui sopra per realizzare l'applicazione descritta dal tutorial, durante il quale si userà principalmente il wizard per la creazione di progetti web, che imposta una struttura leggermente diversa (ma che poi, all'atto della pubblicazione sul server risulta identica).

Per cominciare: un po' di librerie

Per creare l'applicazione JSF di esempio utilizzeremo Eclipse ("Helios", con Web Tool Developer Kit), e per testare le pagine web dell'applicazione sul proprio PC è necessario aver installato un web container, ad esempio Apache Tomcat.

Per poter utilizzare le JSF bisogna includere almeno una implementazione di JSF (sottoforma di librerie Jar) e il JSTL Tag Library.

Quindi:

Nel caso di questo tutorial verrà inoltre utilizzata l'implementazione JSF MyFaces fornita da Apache che comprende:

• commons-beanutils
• commons-codec
• commons-collections
• commons-digester
• commons-discovery
• commons-logging
• myfaces-api
• myfaces-impl

Preparazione del progetto in Eclipse con Wizard

Per creare il progetto selezionare File > New > Project > Web > Dynamic Web Project.
Dynamic Web Project può essere impostato per diversi tipi di tecnologie Web. L'immagine di sotto mostra la schermata di Eclipse per il progetto del tutorial:

Target Runtime: il web-container per il progetto, nel mio caso ho selezionato Apache Tomcat 7.0.
Da notare che, una volta scaricato e installato il web server, Eclipse non crea in automatico il runtime, ma bisogna crearne uno nuovo apposito col comando New Runtime, che aprirà un'altra schermata ove scegliere il tipo di webserver installato. Se avete tomcat andate sulla cartella apache e selezionate la versione installata sul pc. Cliccando quindi su Next sarà possibilie selezionare il nome da dare al Runtime e bisognerà selezionare la cartella di installazione del web-server (NOTA: la cartella padre della cartella bin) se questa non viene automaticamente individuata da Eclipse.

Dynamic web module version: il default è il 3.0. Per utilizzare versioni di java precedenti alla 1.6 bisognerà utilizzare invece il 2.5.

Configuration: è l'insieme delle impostazioni per le jsf. Quella che si vede selezionata è un insieme di impostazioni personalizzate che appare così: (cliccare su modify per visualizzare)

Da notare che sebbene verrà utilizzata la versione 2 di JSF, sia disponibile anche la 1.2 per l'utilizzo con il web module versione 2.5.

Cliccando su next si passerà allo step successivo, dove definire la cartella in cui l'ide di Eclipse visualizzerà i sorgenti e quella fisica nella quale verranno salvati (vedere la struttura dell'applicazione i Eclipse più avanti). Si può lasciare tutto com'è e cliccare su Next per determinare il Context root e il Content directory (il nome della cartella dentro la quale mettere l'applicazione web, ovvero la cartella padre di /WEB-inf.

Infine, nell'ultima schermata del wizard, bisogna impostare le librerie, mentre gli ultimi 4 parametri non verranno toccati per questo tutorial.

Come spiegato nel precedente paragrafo relativo alle librerie, verrà utilizzata l'implementazione delle Jsf fornita a Apache.
Per ottenerla si può sfruttare l'icona a destra della schermata a forma di dischetto (vedere immagine), che permette di scaricare la libreria da internet. Selezionata e scaricata la libreria MyFaces manca solo la JSTL. Questa va prima scaricata "a mano" da internet (reperibile su http://jstl.java.net/) dopodiché cliccando sull'icona sopra a quella del dischetto (vedere immagine), si aprirà un menù per le librerie personali. Fare click su New e nominare la nuova libreria JSTL, una volta creata, selezionarla e cliccare su "Add JARs.." dove sarà possibile, raggiungendo la cartella che contiene le JSTL scaricate da internet, aggiungere i due Jar, jstl-api e jstl-impl, alla libreria personale.

Terminate le configurazioni delle librerie si dovrebbe avere una schermata come questa:

A questo punto è possibile terminare la fase di settaggio dell'applicazione. Le prossime volte che verrà creato un progetto, basterà selezionare la configurazione personalizzata (vedi immagine 1.1) per ottenere queste impostazioni.

Struttura dell'applicazione dentro Eclipse

E' opportuno soffermarsi un attimo sulle differenze tra la struttura descritta sopra (paragrafo sulla struttura dell'applicazione) e quello che appare nel package (o project, a seconda delle preferenze) explorer di Eclipse che dovrebbe essere così:

In questa prospettiva si vede che le cartelle chiave dell'applicazione sono sotto /WebContent, e manca la cartella classes, mentre la cartella lib è vuota. Tuttavia, le librerie che sono state selezionate compaiono sotto la cartella base TutorialJSF. Come accennato nel precedente capitolo sulla struttura dell'applicazione, la creazione di una cartella /pages è facoltativa, tuttavia le pagine .jsp vanno messe sotto a /WebContent, mentre le classi .java verranno posizionate sotto la cartella /src creata in alto.

Questa prospettiva è tale solo per l'ambiente di sviluppo, in quanto sarà Eclipse, al momento di "far girare" l'applicazione, a rimontare i pezzi, ricostruendo una struttura come quella presentata all'inizio. Questo argomento verrà trattato meglio più avanti, affrontando la fase di deploy.

Il primo progetto: l'inevitabile Hello World

Il primo bean

Sotto la cartella /src creiamo il package it.html.bean e dentro creiamo una nuova classe java chiamandola HelloWorldBean.java che avrà il seguente codice:

package it.html.bean;
public class HelloWorldBean {
	private String messaggio = "Ciao Mondo!";
	public HelloWorldBean() {}
	public void setMessaggio(String messaggio) {
		this.messaggio = messaggio;
	}
	public String getMessaggio() {
		return this.messaggio;
	}
}

La variabile messaggio è stata dichiarata private seguendo le usuali convenzioni sui bean. Allo stesso modo per una corretta integrazione con JSF i metodi setter/getter devono seguire le convenzioni: ovvero il nome dev'essere set o get seguito dal nome esatto della variabile di classe con la prima lettera maiuscola, devono avere un modificatore d'accesso public e, al proprio interno, si deve far riferimento alle rispettive variabili membro di classe l'identificatore this in modo da evitare ambiguità, come nell'esempio.

Il faces-Config.xml

Questo file è fondamentale: contiene le configurazioni per le jsf.
La sua collocazione obbligatoria è in /WebContent/WEB-INF.
Tramite Eclipse possiamo generare automaticamente un faces-config minimale simile a questo:

<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd" version="2.0">
	<managed-bean>
	    <managed-bean-name>helloWorldBean</managed-bean-name>
	    <managed-bean-class>it.html.bean.HelloWorldBean</managed-bean-class>
	    <managed-bean-scope>request</managed-bean-scope>
	</managed-bean>
</faces-config>

dove per ora abbiamo aggiunto a mano soltanto la configurazione per il <managed-bean>.

All'interno del tag <managed-bean> si specifica un bean (un tag per ogni bean): il primo tag è il nome che vogliamo dare al bean, per convenzione si usa il nome della classe del bean con l'iniziale maiuscola, ma nulla vieta di nominare i bean in tutt'altro modo; il secondo tag è la classe a cui il bean fa riferimento (va utilizzato l'intero percorso del package); infine il terzo tag descrive lo scope del bean: per l'esempio abbiamo usato il valore request, ma è possibile usare anche session e none.

Il file web.xml

Questo file, altrettanto fondamentale del faces-config.xml si occupa della configurazione nel web-container. Anche in questo caso Eclipse si occupa di servire una configurazione iniziale funzionante. In particolare ci interessano la parte:

<display-name>TutorialJSF</display-name>
<welcome-file-list>
	<welcome-file>faces/index.jsp</welcome-file>
</welcome-file-list>
<display-name>NomeApplicazione</display-name>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
</servlet-mapping>

Una pagina localizzata sotto a /WebContent una volta pubblicata sarà raggiungibile all'indirizzo:

http://host:porta/NomeApplicazione/faces/nomePagina

che tiene conto del context /faces. Questa è in generale una buona pratica per applicazioni che necessitino di una certa modularità di configurazione (pensiamo ad esempio ad un'area utente ed un'area amministrazione). Per semplificare un po' le cose possiamofare in modo che venga aperto direttamente l'indirizzo della nostra index page tramite l'impostazione in welcome-file-list proposta.

La prima pagina: index.jsp

La prima pagina da creare è la index.jsp. Utilizzando Eclipse si può usufruire di un template base per le pagine .jsp. Il template non è indispensabile, è comunque il risultato è piuttosto semplice:

Il primo passo fondamentale è aggiungere due righe prima del tag <html>:

<%@ taglib prefix="f"  uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h"  uri="http://java.sun.com/jsf/html"%>

queste specificano la presenza di due prefissi i quali si riferiscono alle definizioni contenute negli indirizzi alla loro destra. I prefissi vengono usati per al posto dei tag per riferirsi a dei componenti più complessi i quali sfruttano le possibilità del framework.

All'interno del tag <body> aggiungere il seguente codice:

<f:view>
	<h:outputLabel value="#{helloWorldBean.messaggio}"></h:outputLabel>
</f:view>

Il primo tag, <f:view>, è necessario per poter usare gli altri tag jsf, senza di esso infatti il seguente comando <h:outputLabel> non potrebbe funzionare, e in generale il framework lancerebbe un messaggio, lamentando l'assenza di un tag "root".

Molto importante è notare come ci si riferisce alle proprietà dei bean. HelloWorldBean è la classe creata in precedenza, mentre helloWorldBean (l'iniziale minuscola) è il Bean registrato nel faces-config e riferito alla nostra classe java. Quest'ultimo, come si può vedere, è in grado di riferirsi direttamente all'attributo della nostra classe, avendo infatti nominato correttamente i getter ed i setter, sarà il framework a richiamarli opportunamente per ritornare il valore della variabile. Senza getter e setter impostati questo meccanismo non può funzionare (anche se alcune volte è possibile utilizzare solo il getter).

Questa pagina apparirà così sul browser:

Per arrivare a veder stampato il messaggio del bean manca ancora un passo: il Deploy.

Deploy

Il primo passo per effettuare il deploy in Eclipse è verificare la presenza del web-server.

Nella finestra posizionata in basso dovrebbe essere già presente un tab nominato server (nel caso non ci fosse si può visualizzare da Window -> Show View -> Other... e selezionare server tra le possibili scelte). Se sono stati seguiti i passi descritti nella prima parte durante la configurazione, dovrebbe apparire la configurazione creata (Apache-Tomcat 7.0). Le parentesi dopo il nome del server informano sullo stato dello stesso (attualmente dovrebbe essere su stopped).

Soddisfatta la verifica si tratta ora di cliccare sul tasto destro sul file appena creato (index.jsp), scegliere Run As -> Run on server e nella finestra che compare scegliere il server sul quale lanciare l'applicazione.
Cliccando su Finish si aprirà sulla schermata centrale il browser di Eclipse visualizzando il messaggio contenuto nel bean.

Per chi invece non volesse utilizzare l'IDE per il deploy è possibile scegliere di creare da Eclipse l'archivio war contenente l'applicazione, ed effettuarne il deploy manualmente nella cartella di pubblicazione del container (/webapps per tomcat), o utilizzando l'apposita applicazione manager fornita dal server. Infine si può naturalmente anche far riferimento a tool come Ant o Maven.

Complimenti, avete appena creato la vostra prima applicazione jsf!

approfondimenti

• Sito del progetto MyFaces
• Introduzione a Java Server Faces
• Introduzione a PrimeFaces (una implementazione alternativa di JSF)