Tag standard in JavaServer Faces

Lo sviluppo di applicazioni JavaServer Faces richiede un’ottima conoscenza delle librerie di tag core e html utilizzate quasi sempre contemporaneamente.
La libreria di tag html definisce tag che rappresentano i componenti HTML comunemente usati nella creazione di interfacce utente mentre la libreria core definisce tag che consentono di specificare convertitori, validatori, gestori di eventi ed in generale aspetti indipendenti dal render utilizzato.
Per utilizzare i tag è necessario fare riferimento alle libreria di tag in cima alla pagina mediante la direttiva taglib nel caso di JavaServer Page

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

o specificando i namespace nel caso di facelet

Nel caso delle pagine JSP l’attributo uri identifica univocamente il Tag Library Descriptor e l’attributo prefix viene usato per distinguere i tag a seconda della libreria di appartenenza.
Per le facelets il namespace serve allo stesso scopo cioè a identificare univocamente il TLD e a definire il prefisso da utilizzare per i tag.
Una pagina che contiene tag JSF è rappresentata da un albero di componenti, alla radice si ha un componente UIViewRoot e il tag view rappresenta questo componente sulla pagina: tutti i tag dei componenti devono essere racchiusi nel tag view

 
...
 

Tag HTML

I tag HTML possono essere raggruppati nelle seguenti categorie: input, output, command, selezione, layout, data table, errori e messaggi.

La maggior parte dei tag HTML condivide un certo numero di attributi:

• id: contiene un identificatore univoco per il componente
• binding: collega il componente ad un oggetto lato-server
• rendered: un booleano che se posto a false evita che il componente venga visualizzato
• styleClass: consente di specificare una classe CSS per determinare lo stile del componente
• value: viene utilizzato per collegare il valore del componente ad una proprietà di un backing bean dello stesso tipo
• valueChangeListener: permette di specificare il metodo di un backing bean che si occupa di gestire l’evento value-change sul componente
• converter: permette di specificare un convertitore per i dati del componente
• validator: consente di specificare un validatore per i dati del componente
• required: un booleano che se posto a true produce un errore di validazione se l’utente non inserisce un valore

Fra questi l’attributo id è particolarmente importante perché:

• consente di accedere a componenti JSF da altri componenti JSF
• consente di fare riferimento a componenti all’interno di metodi java

Per quanto riguarda il primo aspetto, i tag message ad esempio prevedono la presenza di un attributo for contenente l’id del componente al quale si riferisce il messaggio:

Form

L’utente di una web application tipicamente invia dati mediante form.
In JavaServer Faces, un form è rappresentato dal tag h:form.
Se si inserisce in una pagina il tag h:form senza alcun attributo il render infatti produce il seguente codice html:

Di default JSF effettua il submit di un form mediante POST.

Campi testo e textarea

JavaServer Faces supporta tre tipi differenti di input testuali: h:inputText, h:inputSecret e h:inputTextarea.
h:inputText rappresenta un elemento HTML h:inputSecret rappresenta un elemento HTML h:inputTextarea rappresenta invece un elemento HTML Alcuni dei più importanti attributi comuni a questi tre componeneti sono: <ul class="item_list"> <li>immediate: se posto a true anticipa la conversione e la validazione del componente alla fase di Apply Request</li> <li>required: se posto a true genera un errore di validazione se l’utente non compila il campo</li> <li>valueChangeListener: specifica un listener associato all’evento value-change del componente</li> </ul>oltre, naturalmente, a tutti gli attributi di base (binding, converter, id, rendered, value, validator, styleClass). <h2>Visualizzare testo e immagini</h2>La visualizzazione di testo in una pagina avviene mediante gli elementi h:outputText e h:outputFormat mentre l’elemento h:graphicImage è preposto alla visualizzazione di immagini.<br> L’elemento <strong class="rosso">h:outputText</strong> non corrisponde ad alcun elemento HTML, esso infatti si limita ad inserire del testo all’interno della pagina e solo se si specifica uno stile CSS mediante l’attributo <strong class="rosso">styleClass</strong> viene tradotto in un elemento <strong class="rosso">span</strong>.<br> Gli elementi <strong class="rosso">h:outputText</strong> e <strong class="rosso">h:outputFormat</strong> hanno un attributo escape che se posto a true trasforma i simboli < > e & in <, > e ∓<br> L’elemento h:outputFormat viene utilizzato per comporre messaggi utilizzando parametri specificati dagli elementi <strong class="rosso">f:param</strong><br> <pre class="brush: xml; toolbar: false; gutter:false"> <outputformat value="{0} mangia una {1}"> <param value="Marco"> <param value="mela"> </outputformat> </pre>Infine l’elemento <strong class="rosso">h:graphicImage</strong> viene tradotto nell’elemento html img utilizzato per visualizzare immagini. <h2>Bottoni e link</h2>La visualizzazione di bottoni e link avviene mediante gli elementi h:commandButton, h:commandLink e h:outputLink.<br> A differenza degli elementi <strong class="rosso">h:commandButton</strong> e <strong class="rosso">h:commandLink</strong> che agiscono entrambi come elementi comando producendo action event, l’elemento <strong class="rosso">h:outputLink</strong> genera un link che punta ad una risorsa senza coinvolgere il framework JSF.<br> Alcuni degli attributi più importanti di h:commandButton e h:commandLink sono: <ul class="item_list"> <li>action: contiene una stringa o il riferimento ad un metodo che produce una stringa utilizzata come valore logico dal processo di navigazione della web-application</li> <li>actionListener: fa riferimento ad un metodo di un backing bean che gestisce l’evento action</li> <li>value: contiene la stringa o l’espressione valore che determina il testo sul bottone o del link.</li> </ul>oltre naturalmente a tutti gli attributi di base. <h2>Tag per la selezione</h2>A volte può essere utile fornire all’utente la possibilità di effettuare delle scelte fra un insieme di opzioni proposte.<br> Per fare ciò JavaServer Faces mette a disposizione gli elementi h:selectBooleanCheckbox, h:selectManyCheckbox, h:selectOneRadio, h:selectOneListbox, h:selectManyListbox, h:selectOneMenu e h:selectManyMenu.<br> I tag che iniziano con <strong class="rosso">selectOne</strong> sono quelli che consentono all’utente di scegliere un solo valore da un insieme di valori proposti, mentre i tag che iniziano con <strong class="rosso">selectMany</strong> sono quelli che permettono scelte multiple fra i valori proposti.<br> <strong class="rosso">h:selectBooleanCheckbox</strong> corrisponde ad una checkbox il cui valore può essere collegato alla proprietà booleana di un bean <pre class="brush: xml; toolbar: false; gutter:false"> <selectbooleancheckbox value="#{miobean.presente}"></selectbooleancheckbox> </pre> <pre class="brush: java; toolbar: false; gutter:false"> private boolean presente; public void setPresente(boolean valore) { presente = valore; } public boolean getPresente() { return presente; } </pre>Per renderizzare un insieme di checkbox si fa uso del tag <strong class="rosso">h:selectManyCheckbox</strong> il quale può contenere uno o più elementi <strong class="rosso">h:selectItem</strong> (a ciascuno dei quali corrisponde una checkbox) o un singolo <strong class="rosso">h:selectItems</strong>. <pre class="brush: xml; toolbar: false; gutter:false"> <selectmanycheckbox value="#{miobean.colori}"> <selectitem itemvalue="rosso"></selectitem> <selectitem itemvalue="giallo"></selectitem> <selectitem itemvalue="verde"></selectitem> </selectmanycheckbox> </pre>I bottoni radio sono specificati dall’elemento <strong class="rosso">h:selectOneRadio</strong> le cui opzioni sono definite dagli elementi f:selectItem. <h2>Menu e listbox</h2>Menu e listbox sono rappresentati dagli elementi h:selectOneListbox, h:selectManyListbox, h:selectOneMenu, h:selectManyManu.<br> Menu e listbox si traducono in elementi HTML <strong class="rosso">select</strong>, con la differenza che gli elementi <strong class="rosso">h:selectOneMenu</strong> e <strong class="rosso">h:selectManyMenu</strong> pongono l’attributo <strong class="rosso">size</strong> pari a 1 visualizzando un solo elemento per volta.<br> Per selezioni multiple si fa uso di <strong class="rosso">h:selectManyMenu</strong> e <strong class="rosso">h:selectManyListbox</strong> i quali vengono renderizzati in elementi HTML select con attributo <strong class="rosso">multiple</strong>.<br> <h2>Tabelle</h2>L’elemento <strong class="rosso">h:dataTable</strong> visualizza i dati referenziati dall’<strong class="rosso">attributo value</strong> all’interno di una tabella (elemento HTML table).<br> <br> L’attributo value può fare riferimento a: <ul class="item_list"> <li>un’array</li> <li>un’istanza di java.util.List</li> <li>un’istanza di java.sql.ResultSet</li> <li>un’istanza di javax.servlet.jsp.jstl.sql.Result</li> <li>un’istanza di javax.faces.model.DataModel</li> </ul> <pre class="brush: xml; toolbar: false; gutter:false"> <datatable value="#{items}" var="item"> <column> <outputtext value="#{item.propertyName}"></outputtext> </column> <column> <outputtext value="#{item.anotherPropertyName}"></outputtext> </column> ... </datatable> </pre>L’elemento <strong class="rosso">dataTable</strong> può contenere al suo interno solo elementi <strong class="rosso">h:column</strong> rappresentanti le colonne della tabella: ogni colonna può contenere un numero illimitato di componenti oltre ad un header e ad un footer.<br> L’elemento h:dataTable corrisponde ad un elemento <strong class="arancio">UIData</strong> con un renderer <strong class="arancio">Table</strong> e l’attributo <strong class="rosso">var</strong> contiene un nome che viene attribuito ai singoli item (elementi della lista ad esempio) per referenziarli all’interno della tabella.<br> Header e footer sono definiti da elementi <strong class="rosso">h:facet</strong>.<br> <pre class="brush: xml; toolbar: false; gutter:false"> <datatable> ... <column> <facet name="header"> ... </facet> ... <facet name="footer"> ... </facet> </column> ... </datatable> </pre>Per definire lo stile della tabella si fa riferimento ai seguenti attributi: <ul class="item_list"> <li>styleClass: definisce lo stile dell’intera tabella</li> <li>headerClass: definisce lo stile dell’header</li> <li>footerClass: definisce lo stile del footer</li> <li>columnClasses: definisce gli stili delle colonne</li> <li>rowClasses: definisce gli stili delle righe</li> </ul> <strong class="rosso">rowClasses</strong> e <strong class="rosso">columnClasses</strong> sono mutuamente esclusivi, se entrambi sono definiti columnClasses ha la priorità.<br> rowClasses e columnClasses prevedono come valori la lista delle classi CSS da utilizzare una dopo l’altra per il rendering delle righe o delle colonne (separate da virgola).<br> Se gli stili definiti sono in numero inferiore al numero delle colonne, gli stili vengono riutilizzati.