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>
- META-INF
- pages
- WEB-INF
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
- classes
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:
| componente | api | implementazione |
|---|---|---|
| JSF | jsf-api.jar | jsf-impl.jar |
| JSTL | jstl-api.jar | jstl-impl.jar |
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:
1. prima schermata del wizard
(clic per ingrandire)
Target Runtime
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
Dynamic web module version
Configuration
2. Configurazione dell'ambiente
(clic per ingrandire)
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:
3. Gestione delle librerie
(clic per ingrandire)
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ì:
4. Struttura esplosa dell'applicazione JSF nel project explorer di Eclipse
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
private
setter/getter
this
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:
5. index.jsp Pagina autogenerata da Eclipse
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>
<h:outputLabel>
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:
6. index.jsp 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!
