CERCA SITEMAP FEED RSS 1280
Ultimo aggiornamento: 30 Agosto 2009

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
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html">
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
<f:view>
 
...
 
</f: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:
<h:inputText id="name" />
 
<h:message for="name" />

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:
<form  method="post" action="action.jsp" enctype="application/x-www-form-urlencoded">
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 <input type="text"< e viene visualizzato come un singolo campo di testo.
h:inputSecret rappresenta un elemento HTML <input type="password"<, tutto ciò che l’utente digita al suo interno viene mascherato da caratteri particolari come gli asterischi.
h:inputTextarea rappresenta invece un elemento HTML <textarea< in cui l’utente può inserire testo su più righe.
Alcuni dei più importanti attributi comuni a questi tre componeneti sono:
  • immediate: se posto a true anticipa la conversione e la validazione del componente alla fase di Apply Request
  • required: se posto a true genera un errore di validazione se l’utente non compila il campo
  • valueChangeListener: specifica un listener associato all’evento value-change del componente
oltre, naturalmente, a tutti gli attributi di base (binding, converter, id, rendered, value, validator, styleClass).

Visualizzare testo e immagini

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.
L’elemento h:outputText 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 styleClass viene tradotto in un elemento span.
Gli elementi h:outputText e h:outputFormat hanno un attributo escape che se posto a true trasforma i simboli < > e & in &lt;, &gt; e &mp;
L’elemento h:outputFormat viene utilizzato per comporre messaggi utilizzando parametri specificati dagli elementi f:param
<h:outputFormat value="{0} mangia una {1}">
  <f:param value="Marco"/>
  <f:param value="mela"/>
</h:outputFormat>
Infine l’elemento h:graphicImage viene tradotto nell’elemento html img utilizzato per visualizzare immagini.

Bottoni e link

La visualizzazione di bottoni e link avviene mediante gli elementi h:commandButton, h:commandLink e h:outputLink.
A differenza degli elementi h:commandButton e h:commandLink che agiscono entrambi come elementi comando producendo action event, l’elemento h:outputLink genera un link che punta ad una risorsa senza coinvolgere il framework JSF.
Alcuni degli attributi più importanti di h:commandButton e h:commandLink sono:
  • 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
  • actionListener: fa riferimento ad un metodo di un backing bean che gestisce l’evento action
  • value: contiene la stringa o l’espressione valore che determina il testo sul bottone o del link.
oltre naturalmente a tutti gli attributi di base.

Tag per la selezione

A volte può essere utile fornire all’utente la possibilità di effettuare delle scelte fra un insieme di opzioni proposte.
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.
I tag che iniziano con selectOne sono quelli che consentono all’utente di scegliere un solo valore da un insieme di valori proposti, mentre i tag che iniziano con selectMany sono quelli che permettono scelte multiple fra i valori proposti.
h:selectBooleanCheckbox corrisponde ad una checkbox il cui valore può essere collegato alla proprietà booleana di un bean
<h:selectBooleanCheckbox value="#{miobean.presente}" />
private boolean presente;
 
public void setPresente(boolean valore)
{
  presente = valore;
}
 
public boolean getPresente()
{
  return presente;
}
Per renderizzare un insieme di checkbox si fa uso del tag h:selectManyCheckbox il quale può contenere uno o più elementi h:selectItem (a ciascuno dei quali corrisponde una checkbox) o un singolo h:selectItems.
<h:selectManyCheckbox value="#{miobean.colori}">
  <f:selectItem itemValue="rosso"/>
  <f:selectItem itemValue="giallo"/>
  <f:selectItem itemValue="verde"/>
</h:selectManyCheckbox>
I bottoni radio sono specificati dall’elemento h:selectOneRadio le cui opzioni sono definite dagli elementi f:selectItem.

Menu e listbox

Menu e listbox sono rappresentati dagli elementi h:selectOneListbox, h:selectManyListbox, h:selectOneMenu, h:selectManyManu.
Menu e listbox si traducono in elementi HTML select, con la differenza che gli elementi h:selectOneMenu e h:selectManyMenu pongono l’attributo size pari a 1 visualizzando un solo elemento per volta.
Per selezioni multiple si fa uso di h:selectManyMenu e h:selectManyListbox i quali vengono renderizzati in elementi HTML select con attributo multiple.

Tabelle

L’elemento h:dataTable visualizza i dati referenziati dall’attributo value all’interno di una tabella (elemento HTML table).

L’attributo value può fare riferimento a:
  • un’array
  • un’istanza di java.util.List
  • un’istanza di java.sql.ResultSet
  • un’istanza di javax.servlet.jsp.jstl.sql.Result
  • un’istanza di javax.faces.model.DataModel
<h:dataTable value='#{items}' var='item'>
  <h:column>
    <h:outputText value='#{item.propertyName}'/>
  </h:column>
  <h:column>
    <h:outputText value='#{item.anotherPropertyName}'/>
  </h:column>
  
  ...
 
</h:dataTable>
L’elemento dataTable può contenere al suo interno solo elementi h:column rappresentanti le colonne della tabella: ogni colonna può contenere un numero illimitato di componenti oltre ad un header e ad un footer.
L’elemento h:dataTable corrisponde ad un elemento UIData con un renderer Table e l’attributo var contiene un nome che viene attribuito ai singoli item (elementi della lista ad esempio) per referenziarli all’interno della tabella.
Header e footer sono definiti da elementi h:facet.
<h:dataTable>
 
  ...
 
  <h:column>
    <f:facet name="header">
 
      ...
 
    </f:facet>
 
    ... 
 
    <f:facet name="footer">
 
      ...
 
    </f:facet>
  </h:column>
 
  ...
 
</h:dataTable>
Per definire lo stile della tabella si fa riferimento ai seguenti attributi:
  • styleClass: definisce lo stile dell’intera tabella
  • headerClass: definisce lo stile dell’header
  • footerClass: definisce lo stile del footer
  • columnClasses: definisce gli stili delle colonne
  • rowClasses: definisce gli stili delle righe
rowClasses e columnClasses sono mutuamente esclusivi, se entrambi sono definiti columnClasses ha la priorità.
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).
Se gli stili definiti sono in numero inferiore al numero delle colonne, gli stili vengono riutilizzati.