Applicazioni Web con JavaServer Faces (JSF)

Applicazioni Web con JavaServer Faces (JSF) a cura di Damiano Distante damiano.distante@unitelma.it Un po di storia Settembre 2002 pubblicazione della prima December 2003 - proposta di versione finale della specifica JSF Marzo 2004 versione finale 1.0 della specifica JS Marzo 2004 - J2EE 1.4 SDK supporta JSF Maggio 2004 - JSF 1.1 Dicembre 2004 - JSF 1.2 Marzo2005 MyFaces prima implementazione Open Source di JSF Oggi: Netbeans, Eclipse e JBoss Studio supportano JSF nativamente. 2/66 1

Evoluzione del J2EE web tier Ciscuna è costruita sul livello precedente Livelli di astrazione progressivamente crescenti Livello di programmazione più alto 3/66 Un applicazione JSF di base Un applicazione JSF di base consiste di: JSF UI components incapsulati in tag library JSP Navigation Model definisce le regole per la navigazione (da quale pagina vado in quale pagina in seguito a quale azione/risultato) Managed Beans per implementare la logica di business dell applicazione Helper Objects validazione, conversione, messaggi (internazionalizzazione), renderers (diversi dispositivi), eventi e listeners 4/66 2

Architettura di un applicazione JSF Le applicazioni costruite con JavaServer Faces sono concepite per seguire il pattern architetturale model-view-controller (MVC). Seguendo questo design pattern l applicazione JSF viene ad essere strutturata nelle componenti in figura. 5/66 Architettura JSF Model Incapsula lo stato e il comportamento dell applicazione (application business). Il Model consiste di componenti di business logic e di interfacce verso sistemi esterni come database. View Renderizza i dati del model all utente. La View è costituita da pagine JSP che sono costruite facendo uso di tag library specifiche tag library. Controller Processa gli eventi generati dall utente sulla view e controlla l aggiornamento del model e della view. Il Controller in JSF è rappresentato dalla servlet FacesServlet, che gestisce la navigazione e invoca i metodi del model a seguito delle azioni dell utente. 6/66 3

JSF: visione ad alto livello dell architettura 7/66 Cooperazione View-Model View Model (Bean) cooperation (inizializzata dalla View) La View può cooperare con il Model utilizzando l interfaccia dei bean: La View può inviare dati al model invocando metodi dei bean (metodi set ) (e.g., setlogin). La View può estrarre dati dal model usando i metodi dei bean s che iniziano con get (e.g., getlogin) Model (Bean) View cooperation (initializzata dal Model) La View è composta da UI components. Ciascun componente è un oggetto. I Bean possono cooperare con queste componenti using indicatori verso questi oggetti (binding operation). Il tutto avviene tramite il Controller 8/66 4

Model (beans time life properites) Ciascun bean ha il suo time lifeche è indicato come scope: Request scope (il bean può essere solo letto una volta utilizzando http request ) Session scope (il bean ha una durata per tutta la sessione http dell utente) Application scope (il bean è valido, ed è lo stesso, per tutte le sessioni utente fino allo shutdown dell applicazione) None scope (il bean è stateless (e.g. non può ricordare dati) 9/66 Esempio Model View 10/66 5

View.. La View è la user interface (UI) che si focalizza sull interazione con l utente. Ciascuna View è rappresentata da una pagina JSP e si compone di un albero di UI components. L albero delle componeti di UI consente relazioni di tipo padre-figlio, così che è ad esempio possibile avere in form che contiene una label, un campo di testo, e un pannello con due bottoni innestati 11/66 Esempio Client side HTML rendering dei componenti Server side JavaServer Faces (component tree) View Form outputtext inputsecret panelgroup commandbutton commandlink 12/66 6

Server side JavaServer Faces Client side HTML 13/66 View: Proprietà delle User Interface components La funzionalità centrale di JSF è il suo supporto per le componenti UI Una componente può essere semplice, come un pulsante, oppure composto, come una tabella, che può essere composta da molte altre componenti. Le componenti UI hanno delle proprietà, metodi ed eventi (quindi sono configurabili) Le componenti UI vivono lato server (non sul client), sono gestite dal controller e sono renderizzare sul client (ad esempio e tipicamentre mediante tag HTML). Esse sono stateful e riusabili 14/66 7

15/66 Controller Validators Il framework JSF fornisce una insiene di classi per validare l input fornito dall utente nelle componenti UI. queste classi sono chiamate validators. Un Validator è una classe che controlla un valore di input e invia un messaggio di errore se l input non è valido. JSF fornisce un insieme di validatori standard. Lo sviluppatore ne può sviluppare di specifici. Se il validatore interpreta l input come non valido il controller JSF (la JSF FacesServlet) mostra (renderizza) nuovamente la stessa view (pagina JSP) da cui sono stati sottomessi i dati non validi, senza modificare il model. La validazione dell input è eseguita server-side. In questo modo non si necessita ad esempio che il client supporti necessariamente Javascript. 16/66 8

Controller...Validators JSF consente di eseguire la validazione dell input in tre modi diversi: A livello di UI component (UI components generalmente gestiscono validazioni di tipo semplice, come controllare se un valore è richiesto, o validazione specifica per quel componente e che non puà essere riusata con altre componenti. In validator class Validatori esterni utili per implementare controlli di tipo generale come la veirfica della lunghezza di un campo o il range di un valore inserito. Esse sono classi pluggable, il che significa che possono essere riutilizzate per diverse componenti UI. Via metodi di validazione nei backing beans Metodi Validator sono utili quando occorre validare più campi di input e non si tratta di controlli generici che ricorrono e occorre riutilizzare in diverse UI components. 17/66 Controller Navigation Il navigation handler di JSF (implementato dalla Faces Servlet di controller) è responsabile di decidere quale pagina deve essere caricata in risposta a un risultato logico dell invocazione di un metodo, valore costante, attributo di un bean, etc. Una navigation rule definisce una regola di navigazione. Ciascuna specifico mapping fra un valore di outcome una pagina è chiamato navigation case. Le regole sono definite nel file di configurazione del controller, chiamato faces-config.xml. 18/66 9

Controller Navigation (esempio) public String login() { If (this.iduser==userbean.checkdata()){ return "err"; }else{ return "menu"; } } <navigation-case> <from-outcome> err </from-outcome> <to-view-id> /err.jsp </to-view-id> </navigation-case> <navigation-case> <from-outcome> menu </from-outcome> <to-view-id> /menu.jsp </to-view-id> </navigation-case> 19/66 Controller Converters Le componenti UI JSF possono essere associate a oggetti server-side (i Javabens). Quando ciò avviene, l applicazione ha due viste dei dati del componente: La vista del model, in cui i dati sono rappresentati come data types, come ad esempio int o long. La vista della view, in cui i dati sono rappresentati in maniera da poter essere letti dall utente. Per esempio, un tipo java.util.date potrebbe essere rappresentato da una strings di testo nel formato mm/dd/yyyy o un insieme di tre stringhe. JSF consente di convertire i tipi di dati fra le componenti UI e i tipi utilizzati dai bean del model. I converters trasformano un oggetto in una stringa per visualizzarlo all utente attraverso un UI Component, e un input di tipo stringa in un oggetto per poter essere utilizzato dai bean. 20/66 10

Controller Converters (Esempio) 21/66 JSF: struttura tipica di un progetto JSF rootfolder /ant build.xml /src /WebContent /WEB-INF /classes properties /lib jsf-impl.jar jsf-api.jar faces-config.xml web.xml /pages -> ant build script -> contiene le classi Java ed i file properties -> ospiterà classi Java compilate e file -> lista dei bean gestiti e regole di navigazione -> descrittore servlet e di altri componenti -> folder che ospiterà le pagine jsf 22/66 11

JSF: Una JSP di esempio (login.jsp) 23/66 JSF: Il risultato del rendering della pagina login.jsp 24/66 12

JSF: Analisi della pagina login.jsp Nell esempio, un certo numero di tag è rappresentato da standard HTML tag: body, table, ecc. Alcuni tag hanno prefissi, come f:view e h:inputtext. Si tratta di JSF tag. Le due direttive taglib dichiarano le tag libraries JSF. I tag h:inputtext, h:inputsecret e h:commandbutton corrispondono rispettivamente a un campo di testo, un campo password e un bottone di submit I campi di input sono collegati a proprietà di oggetti. Per esempio, l attributo value= #{user.name} consente, avvalendosi del framework JSF, di collegare il campo di testo con la proprietà name dell oggetto user Tutti i tag JSF sono inclusi in f:view. In luogo del tag form HTML si utilizza h:form e in esso si includono tutti i componenti JSF In luogo dei consueti input tag HTML si utilizzano h:inputtext, h:inputsecret, h:commandbutton 25/66 JSF: Un applicazione di esempio (controllo credenziali utente) Componenti Due pagine JSP che rappresentano altrettante Virew: index.jsp e welcome.jsp Un bean che gestisce i dati utente (nome e password). Il bean è una semplice classe Java con attributi e metodi setter/getter Un file di configurazione per l applicazione che configura i bean utilizzati e esprime le regole di navigazione. Di default questo file è chiamato faces-config.xml in faces-config.xml si descrivono i Java bean che utilizzeremo nell'applicazione JSF i bean sono identificati con un nome tramite elemento managedbean-name deve essere specificato il nome qualificato della classe tramite elemento managed-bean-class deve essere specificato lo scopo del bean (request, session) tramite elemento managed-bean-scope Un file web.xml di configurazione dell applicazione 26/66 13

JSF: un esempio di bean (UserBean) Le properties del bean sono name e password. E lecito che qualcuna di queste properties possa essere solo leggibile o, viceversa, solo scrivibile. Tale risultato si ottiene omettendo i corrispondenti metodi di accesso e/o di modificazione (getter e setter). 27/66 JSF: la pagina welcome.jsp 28/66 14

JSF: il risultato del rendering di welcome.jsp 29/66 JSF: la navigazione JSF consente di specificare dichiarativamente le regole di navigazione della web application in un opportuno config file: Il contenuto dell elemento from-outcome coincide col valore dell attributo action nel tag: <h:commandbutton value="login" action="login"/> Oltre alle regole di navigazione, nel file di configurazione è presente anche la definizione del bean. Il nome del bean e delle sue proprietà coincidono con i nomi utilizzati nei componenti UI. I delimitatori #{ } definiscono una value binding expression : <h:inputtext value="#{user.name}"/> 30/66 15

JSF: il file faces-config.xml Contiene le regole di navigazione e le definizioni dei bean: 31/66 JSF: servlet configuration Essendo l applicazione JSF una web application J2EE, è necessario configurare l applicazione mediante il file web.xml : 32/66 16

JSF: Faces Servlet configuration Sì può anche definire un prefix mapping in alternativa al mapping sull estensione delle URL (.faces). In questo caso si utilizza, per la mappatura delle URL sul front controller JSF, il seguente frammento XML nel file web.xml: Nel caso in cui si voglia utilizzare l estensione.jsf per i file delle pagine, è necessario adottare qualche accorgimento sul file web.xml: 33/66 JSF: dietro le quinte (request processing lifecycle) 34/66 17

JSF: Managed Beans I Managed bean vengono configurati nel file facesconfig.xml: <managed-bean> <managed-bean-name>user</managed-bean-name> <managed-bean-class>it.unibo.deis.userbean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> Il frammento di codice XML riportato consente al framework JSF di costruire un oggetto della classe it.unibo.deis.userbean, attribuirgli il nome user e memorizzarlo in sessione Dopo che il bean è stato definito esso può essere acceduto dai vari componenti JSF. Lettura e aggiornamento della property password del bean user si effettua nel modo visto (la notazione #{ } viene detta JSF Expression Language: è basata su JSP 2.0 EL) <h:inputsecret value="#{user.password}"/> 35/66 JSF: EL JSF Expression Language, di cui abbiamo visto qualche esempio nelle JSP, consente di referenziare o aggiornare proprietà di bean, o valutare semplici statement, senza scrivere codice Java full-fledged. JSF EL viene valutato a runtime (tipicamente quando avviene il processo di rendering) e non in fase di compilazione JSF EL è two-way, nel senso che consente non solo di leggere properties ma anche aggiornarle Le espressioni JSF EL possono essere valutate usando codice Java tradizionale, e quindi non è legato a JSP Come marcatore utilizza # anziché $ (utilizzato da JSP 2.0 EL da cui deriva) L oggetto di JSF che si occupa di risolvere EL è VariableResolver 36/66 18

JSF: EL 37/66 JSF: EL 38/66 19

JSF: Message Bundles Tipicamente nello sviluppo di una web application si centralizza la gestione dei messaggi utilizzati nelle interfacce utente utilizzando file di properties: currentscore = Your current score is: guessnext = Guess the next number in the sequence! Il processo di lettura delle properties presenti in tali file è estremamente semplificato in JSF. Il file di properties viene tipicamente inserito nella directory WEB-INF/classes della web application. E obbligatorio l estensione.properties. Nella pagina JSF viene agganciato il bundle con il seguente core tag: <f:loadbundle basename= messages var= msgs /> E possibile ora usare JSF EL per accedere ai messaggi: <h:otputtext value="#{msgs.guessnext}"/> 39/66 JSF: Message Bundles Quando si localizza un bundle file è necessario aggiungere un suffisso (che esprime il locale) al nome del file: un underscore seguito da 2 lettere in minuscolo che rappresentano il codice della lingua standardizzato da ISO-639 (http://www.loc.gov/standards/iso639-2/): messages_it.properties messages_en.properties Il supporto all internazionalizzazione presente in Java (i18n) consente di caricare il bundle che soddisfa il locale corrente (java.util.locale; java.util.resourcebundle) Quando si prepara la traduzione si tenga in considerazione che i file di bundle non sono codificati in UTF-8! I caratteri UNICODE oltre il 127 devono essere codificati con sequenze di escape \uxxxx. La utilility native2ascii presente nel JDK semplifica la creazione di questi file 40/66 20

JSF: Message Bundles Una volta preparati i bundle vi sono 3 opzioni per settare il locale: 1. utilizzando l attributo locale per il tag f:view: <f:view locale= es > 2. mediante il file faces-config.xml. Quando il browser si connette ad una applicazione tipicamente include Accept-Language come header HTTP che indica la lingue accettate <faces-config> <application> <locale-config> <default-locale>en</default-locale> <supported-locale>de</supported-locale> </locale-config> </application> </faces-config> 3. A livello applicativo: UIViewRoot viewroot = FacesContext.getCurrentInstance().getViewRoot(); 41/66 viewroot.setlocale(new Locale("de")); JSF: Navigazione Possiamo avere una navigazione statica oppure dinamica Nella Navigazione statica il navigation handler porta ad una pagina JSF predefinita a fronte di un azione da parte dell utente (click di un componente button o link) Nella maggior parte delle web application la navigazione è dinamica: <h:commandbutton label="login" action="#{logincontroller.verifyuser}"/> Nell esempio riportato logincontroller referenzia un bean di una qualche classe che implementa il metodo verifyuser String verifyuser() { if (...) return "success"; else return "failure"; } 42/66 21

JSF: esempio di navigazione 43/66 JSF: esempio di navigazione 44/66 22

JSF: esempio di navigazione (index.jsp) 45/66 JSF: esempio di navigazione (done.jsp) 46/66 23

JSF: esempio di navigazione (Problem.java) 47/66 JSF: esempio di navigazione (QuizBean.java) 48/66 24

JSF: esempio di navigazione (QuizBean.java) 49/66 JSF: esempio di navigazione (QuizBean.java) 50/66 25

JSF: esempio di navigazione L applicazione presenta una sequenza di quiz. Vi sono al massimo 2 possibilità per ogni domanda. Dopo la seconda risposta viene posta la domanda successiva. Ad ogni risposta corretta viene aggiornato lo score 51/66 JSF: esempio di navigazione 52/66 26

JSF: esempio di navigazione 53/66 JSF: esempio di navigazione 54/66 27

JSF: Standard Core Tags (f:) 55/66 JSF: standard HTML Tags (h:) 56/66 28

JSF: standard HTML Tags (h:) Si tenga presente che i tag JSF rappresentano un componente e delegano la generazione del markup (HTML in questo caso) al renderer. Questo fatto garantisce circa la possibilità di adattare JSF a tecnologie di display dei dati alternative (ciò accade, per esempio, per le wireless JSF application) 57/66 JSF: form Il tag JSF form non prevede un attributo action, a differenza dell omologo tag HTML form. Se si utilizza il tag <h:form> senza alcun attributo in una pagina denominata ad esempio- /index.jsp, il renderer associato al componente Form genera il seguente HTML: <form id="_id0" method="post" action="/forms/faces/index.jsp" enctype="application/x-www-form-urlencoded"> 58/66 29

JSF: form e javascript 59/66 JSF: text field e text area (attributi) 60/66 30

JSF: text field e text area (Esempi) 61/66 JSF: display di testo e immagini JSF fornisce 3 modalità per il display di testo e immagini h:outputtext h:outputformat h:graphicimage Attributi per h:outputtext e h:outputformat 62/66 31

JSF: display di testo e immagini Attributi per h:graphicimage 63/66 JSF: display di testo e immagini Alcuni esempi: <h:outputformat value="{0} is {1} years old"> <f:param value="bill"/> <f:param value="38"/> </h:outputformat> 64/66 32

JSF: campi hidden Il tag JSF che genera un elemento HTML hidden è: h:inputhidden 65/66 JSF: bottoni e link JSF fornisce i seguenti tag per la gestione di bottoni e link h:commandbutton h:commandlink h:otputlink I tag h:commandbutton e h:commandlink rappresentano componenti JSF di tipo command il framework JSF lancia eventi e invoca azioni quando il bottone o il link è attivato. Il tag h:outputlink 66/66 33