Questo è il primo di una serie di articoli che ci aiuteranno a scoprire, pian piano, le caratteristiche di Java Server Faces (JSF), un framework java basato sul design pattern architetturale Model-View-Controller. Esistono diverse implementazioni del framework: oltre a quella Sun, sono disponibili anche le implementazioni di Apache (MyFaces) e di Oracle (ADF).
I vantaggi principali offerti dal framework sono i seguenti:
- JSF mette a disposizione dei componenti predefiniti, che lo sviluppatore deve semplicemente richiamare nelle proprie pagine Web. Ciò rende possibile sviluppare l'interfaccia Web di una applicazione secondo la logica RAD, Rapid Application Development, tipica degli ambienti di sviluppo .NET.
- JSF è basato sugli eventi. Gli eventi sono costituiti dalle azioni che l'utente effettua sui componenti di interfaccia. A questi eventi vengono registrati dei listener per la gestione lato server degli stessi.
- I componenti predefiniti sono considerati "intelligenti", cioè sono in grado di validare automaticamente i dati inseriti dall'utente e di memorizzare il proprio stato.
- Molti ambienti di sviluppo, tra i quali Eclipse e NetBeans, presentano tool per la gestione visuale, sia della parte relativa alla composizione delle pagine in JSF, sia per quanto riguarda la gestione dei suoi file di configurazione.
In questo articolo introduttivo proponiamo un semplicissimo esempio per iniziare a prendere confidenza con il framework. Prevediamo una semplicissima pagina contenente un campo di testo, nel quale l'utente dovrà inserire il proprio nome, e un bottone per accedere al sistema. In seguito al click sul bottone, verrà mostrato un messaggio di benvenuto seguito dal nome dell'utente precedentemente inserito.
Utilizzeremo l'implementazione JSF della SUN, le cui librerie sono incluse in forma nativa nella versione 5.0 della J2EE.
Il cuore del framework è il file faces-config.xml, nel quale è possibile definire le regole di navigazione all'interno delle pagine dell'applicazione.
<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xi="http://www.w3.org/2001/XInclude"
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_1_2.xsd">
<navigation-rule>
<from-view-id>/index.jsp</from-view-id>
<navigation-case>
<from-outcome>benvenuto</from-outcome>
<to-view-id>/welcome.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>uscita</from-outcome>
<to-view-id>/exit.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<managed-bean>
<managed-bean-name>utente</managed-bean-name>
<managed-bean-class>IT.html.jsf.bean.UtenteBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
</faces-config>
Nella prima sezione del file abbiamo definito una vista. Ciascuna vista può avere differenti regole di navigazione. La regola che abbiamo definito può essere tradotta così: "se mi trovo nella pagina index.jsp, e viene prodotta una action "benvenuto", allora viene caricata la vista welcome.jsp, se invece viene prodotta una action "uscita", allora viene caricata la vista exit.jsp.
Nella seconda parte del file abbiamo definito un bean, il cui nome logico è "utente". Questo bean, corrispondente alla classe IT.html.jsf.bean.UtenteBean, potrà essere richiamato all'interno delle pagine jsp, con una sintassi del tipo #{utente.proprietà}.
L'istanziamento, e la gestione di questo bean, è completamente a carico del framework. Naturalmente nella classe UtenteBean devono essere definiti tutti i metodi getter e setter, rispettivamente per leggere e scrivere le proprietà del bean.
package IT.html.jsf.bean;
public class UtenteBean
{
private String nome;
public String getNome() { return nome; }
public void setNome(String nome) { this.nome = nome; }
}
Nel file web.xml, della nostra applicazione, occorre configurare il framework JSF. È necessario definire, mediante il parametro javax.faces.CONFIG_FILES, il path del file faces-config.xml e occorre dichiarare la FacesServlet e il suo relativo URL-pattern.
Nell'esempio utilizziamo la Servlet di default del framework, javax.faces.webapp.FacesServlet, e impostiamo come pattern *.faces. In questo modo tutte le richieste inviate alla nostra applicazione, che hanno come estenzione .faces, vengono intercettate dal framework JSF.
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<context-param>
<param-name>javax.faces.CONFIG_FILES</param-name>
<param-value>/WEB-INF/faces-config.xml</param-value>
</context-param>
<servlet>
<servlet-name>FacesServlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>FacesServlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>/faces/index.jsp</welcome-file>
</welcome-file-list>
</web-app>
La versione standard di JSF prevede due taglibrary:
- core: definisce i tag di base di JSF, indipendenti dalla tecnologia di rendering della pagina;
- HTML: fornisce componenti riusabili specifici per renderizzare in HTML i componenti server di JSF.
Ciascuna implementazione di JSF mette a disposizione differenti taglibrary, ma nell'esempio utilizzeremo soltanto quelle standard. Naturalmente, per utilizzare le taglibrary all'interno delle pagine jsp, è necessario importarle.
La pagina index.jsp, che contiene il form con il campo di testo è la seguente:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>..:: JSF Esempio::..</title> </head> <body> <f:view> <h:form> <h:outputText value="Inserisci il tuo nome per accedere" /> <h:inputText value="#{utente.nome}" /> <h:commandButton value="Accedi" action="benvenuto" /> <h:commandButton value="Esci" action="uscita" /> </h:form> </f:view> </body> </html>
Mediante la taglib core creiamo una vista (<f:view>), mediante la taglib HTML creiamo un form (<h:form>).
Il form contiene i seguenti elementi:
<h:outputText>: un messaggio di testo statico.<h:inputText>: un campo di testo associato al campo nome del bean utente.<h:commandButton>: un bottone per inviare i dati (il classico tasto di submit). Questo button produce una action "benvenuto" che ridirigerà l'utente verso la pagina di benvenuto.<h:commandButton>: un bottone per uscire dall'applicativo. Questo button produce una action "uscita" che ridirigerà l'utente verso la pagina di uscita.
La pagina welcome.jsp, che contiene il messaggio di benvenuto, è la seguente:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>..:: JSF Esempio::..</title>
</head>
<body>
<f:view>
<h:outputText value="Benvenuto" />
<h:outputText value="#{utente.nome}" />
</f:view>
</body>
</html>
Questa pagina contiene un semplice messaggio costituito da una parte statica e una parte dinamica, corrispondente al nome inserito precedentemente dall'utente.
L'URL da richiamare per testare la nostra applicazione è:
http://server_name:port/appname/faces/index.jsp
