Upload
hoangdien
View
251
Download
0
Embed Size (px)
Citation preview
1
1
Web Application EngineeringWeb Application EngineeringJava Server FacesJava Server Faces
cristian lucchesi
IIT-CNR
Pescara, 15-16 Maggio 2007Alei – Ud’A
22Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
Web application: Web application: evoluzioneevoluzione
2
33Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
Java Server Faces (JSF)Java Server Faces (JSF)
la tecnologia JSF è una framework a componenti lo sviluppo di interfacce utentei componenti principali della tecnologia JSF sono:
una API per rappresentare i componenti della UI un sistema di gestione gli eventi, validazione server-side, e conversione dei datiun sistema di definizione della navigazionesupporto all'internazionalizzazionemetodi per legare i componenti della UI a oggetti server-side
la prima versione delle specifiche è del 2003, la versioneattuale è del 2006 (JSF 1.2 JSR-252)
44Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
JSF: JSF: tecnologietecnologie prepre--esistentiesistenti
Servletsono il fondamento delle web application nell'architettura J2EE.l'approccio a basso livello per la produzione del markup (lo sviluppo diuna pagina web richiede, sostanzialmente, allo sviluppatore dicodificare un programma che produca come output i tag della paginahtml Le servlet API forniscono un insieme di funzionalità di base (session tracking, security, logging, filtering, lifecycle events, ecc) di cui si giovail framework JSF
JSPrappresentano il meccanismo di template standard definitonell'architettura J2EE.le pagine JSP sono orientate ai tag: utilizzano, cioè, oltre ai consuetimarcatori HTML i cosiddetti custom tag per introdurre comportamentodinamico nella pagina. Di più, consentono di inserire nella paginacodice Java embedded alternato ai tag descritti.
3
55Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
JSF OverviewJSF Overview
66Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
EsempioEsempio con JSFcon JSF
costruiremo unaapplicazione di tipo"Hello, world" predisporremo due pagine:
inputname.jsp: chiedeall'utente di inserire ilproprio nomegreeting.jsp: mostra un saluto all'utente
4
77Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
StrutturaStruttura tipicatipica didi un un progettoprogetto JSFJSF
rootFolder/ant
build.xml -> ant build script
/src -> contiene le classi Java ed i file properties
/WebContent/WEB-INF
/classes -> ospiterà classi Java compilate e file properties/lib
jsf-impl.jarjsf-api.jar
faces-config.xml -> lista dei bean gestiti e regole di navigazioneweb.xml -> descrittore servlet e di altri componenti
/pages -> folder che ospiterà le pagine jsf
88Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
NavigationNavigation
la navigazione è il cuoredelle applicazioni JSF la navigazione è definitanel file faces-config.xml
la regola dice che se l' "outcome" eseguito dainputname.jsp è greeting si passa dalla view (pagina) inputname.jspalla view (pagina) greeting.jsp
<navigation-rule> <from-view-id>
/pages/inputname.jsp</from-view-id> <navigation-case>
<from-outcome>greeting</from-outcome> <to-view-id>/pages/greeting.jsp</to-view-id>
</navigation-case> </navigation-rule>
5
99Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
CreareCreare i Managed Beani Managed Bean
la classe è un sempliceJava Bean con un attributo e i metodisetter/getter il bean cattura il nomeinserito dall'utente dopol'invio della form il bean fornisce un pontetra la pagina JSP e la logica dell'applicazioneil nome della proprietàdeve corrispondere al nome del campo nella JSP
package examples.jsf;
public class PersonBean {
String personName;
public String getPersonName() {return personName;
}
public void setPersonName(String name) {personName = name;
}…
}
1010Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
DichiarareDichiarare i bean in facesi bean in faces--config.xmlconfig.xml
in faces-config.xml sidescrivono i Java bean cheutilizzeremo nell'applicazioneJSF i bean sono identificati con un nome tramite elementomanaged-bean-namedeve essere specificato il nomequalificato della classe tramiteelemento managed-bean-classdeve essere specificato lo scopodel bean (request, session) tramite elemento managed-bean-scope
<managed-bean>
<managed-bean-name>personBean
</managed-bean-name>
<managed-bean-class>examples.jsf.PersonBean
</managed-bean-class>
<managed-bean-scope>request
</managed-bean-scope>
</managed-bean>
6
1111Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
facesfaces--config.xmlconfig.xml
<?xml version="1.0"?> <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"><faces-config>
<navigation-rule><from-view-id>/pages/inputname.jsp</from-view-id> <navigation-case>
<from-outcome>greeting</from-outcome> <to-view-id>/pages/greeting.jsp</to-view-id>
</navigation-case> </navigation-rule> <managed-bean>
<managed-bean-name>personBean</managed-bean-name> <managed-bean-class>jsfks.PersonBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope>
</managed-bean> </faces-config>
1212Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
file propertiesfile properties
un file properties è un file composto da coppieparametro=valorecontiene i messaggi (le stringhedi testo utilizzate) delle nostrepagine JSP mantenere i messaggi separatidalla pagina JSP permette unarapida modifica dei messaggisenza modificare la pagina JSP tipicamente si chiamanomessages.properties, sonomessi nella directory deisorgenti e ricopiati dal build script nella directory WEB-INF/classes
messages.properties
inputname_header=JSF KickStartprompt=Tell us your name: greeting_text=Welcome to JSF button_text=Say Hello sign=!
7
1313Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
inputname.jspinputname.jsp
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <f:loadBundle basename="examples.jsf.messages" var="msg"/>
<html> <head> <title>enter your name page</title> </head> <body>
<f:view> <h1> <h:outputText value="#{msg.inputname_header}"/> </h1> <h:form id="helloForm">
<h:outputText value="#{msg.prompt}"/> <h:inputText value="#{personBean.personName}" /> <h:commandButton action="greeting" value="#{msg.button_text}" />
</h:form> </f:view>
</body> </html>
1414Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
inputname.jspinputname.jsp: : spiegazionispiegazioni
la prima riga indica dove trovare la definizione dei tag JSF che definiscono gli elementiHTML la seconda riga indica dove trovare i tag JSF chedefiniscono gli elementi base (ilcore) delle JSF la terza riga carica il file messages.properties nellavariabile msg
questo tag indica di guardarenell'oggetto msg che abbiamodefinito sopra, cercare il valoreper inputname_header e distamparlo nell'html
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundlebasename="jsfks.bundle.messages" var="msg"/>
<h:outputTextvalue="#{msg.inputname_header}"/>
8
1515Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
inputname.jspinputname.jsp: : spiegazionispiegazioni
Riga 1crea una form HTML utilizzando i tag JSF
Riga 2stampa un messaggio prelevando dalfile properties il valore di prompt
Riga 3. crea un campo input HTML. L'attributovalue viene legato (bind) all'attributopersonName del Managed Bean che sichiama personBean
Riga 4 tag JSF per il botton HTML per la submit il valore del bottone è prelevato dal file properties l'attributo action è impostato a greeting checorrisponde al navigation-outcome nel file faces-config.xmlil valore dell'action è utilizzato dalla jsf per sapere la prossima pagina da mostrare
1 <h:form id="helloForm">
2 <h:outputTextvalue="#{msg.prompt}"/>
3 <h:inputText id="name" value="#{personBean.personName}" />
4 <h:commandButtonaction="greeting“value="#{msg.button_text}" />
5 </h:form>
cont.cont.
1616Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
greeting.jspgreeting.jsp
le prime tre righe sonoidentiche a quelle diinputname.jsp
l'elemento
<h:outputTextvalue="#{personBean.personName}" />
accede all'attributopersonName del bean personBean, attributoprecedentemente impostato, e lo stampa
<%@ taglib uri=http://java.sun.com/jsf/htmlprefix="h" %>
<%@ taglib uri=http://java.sun.com/jsf/coreprefix="f" %>
<f:loadBundle basename="jsfks.bundle.messages“var="msg"/>
<html> <head> <title>greeting page</title> </head> <body> <f:view> <h3> <h:outputText
value="#{msg.greeting_text}" />,<h:outputText
value="#{personBean.personName}" /> <h:outputText
value="#{msg.sign}" /> </h3>
</f:view> </body>
</html>
9
1717Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
web.xmlweb.xml
essendol'applicazione JSF una web application J2EE, è necessarioconfigurarel'applicazionemediante web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5"
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-app_2_5.xsd"><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>*.jsp</url-pattern>
</servlet-mapping> </web-app>
1818Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
UtilizzareUtilizzare i i validatorivalidatori standardstandard
per rendere il nomedella persona obbligatorio è sufficientespecificare l'attributorequired="true"
... <f:view> <h1> <h:outputText value="#{msg.inputname_header}"/>
</h1> <h:form id="helloForm"> <h:outputText value="#{msg.prompt}"/> <h:inputText value="#{personBean.personName}"
required="true" /> <h:commandButton action="greeting"
value="#{msg.button_text}" /> </h:form>
</f:view> ...
10
1919Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
VerificareVerificare la la lunghezzalunghezza didi un campoun campo
Validatori standard DoubleRangeValidatorverifica l'intervallo diun double (in virgolamobile) LengthValidatorverifica la lunghezza diuna stringaLongRangeValidatorverifica l'intervallo di
un long
... <h:form id="helloForm">
<h:outputText value="#{msg.prompt}"/> <h:inputText value="#{personBean.personName}"
required="true"> <f:validateLength minimum="2"
maximum="10"/></h:inputText> <h:commandButton action="greeting"
value="#{msg.button_text}" /></h:form> ...
2020Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
Custom Custom validatorvalidator
è possibile definire propri validatori:
implementando l'interfaccia
javax.faces.validator.Validator, in particolarepublic void validate(FacesContext cxt, UIComponent comp, Object value);
definendo il validatore in faces-config.xml
<validator><validator-id>MyValidator<validator-id><validator-class>validator.MyValidator<validator-class>
<validator>
utilizzando nella jsf l'elemento
<f:validate validatorId="myValidator" />
11
2121Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
JSF: component treeJSF: component tree
quando la pagina jsp (nel nostro caso inputname.jsp) viene invocata, i tag handler associati ai tag presenti nella pagina vengono eseguitii vari tag handler collaborano per realizzare il cosiddetto component tree il component tree è una struttura dati che contiene oggetti Java per tutti gli elementi UI di una pagina JSF
2222Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
JSF: renderingJSF: rendering
successivamente la pagina HTML viene renderizzatatutto ciò che non è un tag JSF viene scritto sul output i tag riconosciuti (perché associati ad un definitonamespace) vengono invece processati producendoomologhi tag HTML Il renderer associato all'oggetto UIInput invoca ilframework JSF per ottenere il valore correntedell'espressione personBean.personName (con cui aggiorna il componente inputText per mantenere la sincronizzazione con il backing bean personBean) la pagina html generata viene restituita al browser
12
2323Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
JSF lifeJSF life--cyclecycle
2424Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
JSF lifeJSF life--cycle: le cycle: le fasifasi inizialiiniziali
fase di Restore Viewviene ricercato il component tree della paginarichiesta, se si tratta della prima richiesta (initial request) il component tree viene creato. se la request non presenta dati in POST, l'implementazione JSF porta alla fase Render Response (accade per esempio quando la paginaviene richiesta la prima volta)
fase di Apply Request ValuesJSF itera sui componenti affinché ciascuno di essimemorizzi i dati di pertinenza (submitted values).
13
2525Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
JSF lifeJSF life--cycle: Process Validationcycle: Process Validation
fase di Process Validationse sono definiti validatori su uno o più componentiviene attivato il processo di validazionese ci sono errori di conversione o validazione, vieneinvocata direttamente la fase Render Response cheporta al ri-display della pagina per garantire all'utentedi correggere i datise non ci sono errori si aggiorna il modello dei dati. Durante la fase Update Model i "local values" sonoutilizzati per aggiornare le proprietà dei bean associatiai componenti
2626Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
JSF lifeJSF life--cycle: cycle: fasifasi finalifinali
fase di Invoke Applicationil metodo indicato nell'attributo action viene eseguitoquesto metodo tipicamente implementa la logica dibusiness associata all'azione dell'utenteil metodo ritorna un outcome string che viene passataal navigation handler il quale provvede al look up della pagina successiva
fase di Render Responseeffettua l'encoding della risposta e la spedisce al browserquando l'utente genera una nuova richiesta il cicloricomincia
14
2727Alei/Ud’A - Pescara, 15-16 maggio 2007 – cristian lucchesi, IIT-CNR
RiferimentiRiferimenti
JavaServer Faces (JSF) Tutorial: http://www.exadel.com/tutorial/jsf/jsftutorial-kickstart.html
The Java EE 5 Tutorial: http://java.sun.com/javaee/5/docs/tutorial/doc/index.html
28
grazie per grazie per l’attenzione l’attenzione