La realizzazione di una pagina di template che dia forma alla varie pagine di una applicazione web è naturalmente indispensabile per diversi motivi che non stiamo qui ad esplicitare.
Con il Facelets la realizzazione di un template ed il suo utilizzo è reso davvero semplice nelle JavaServer Faces, grazie ad alcuni semplici tags come
<ui:insert name="header"/> , <ui:composition template="./template.xhtml"> e <ui:define name="header">
Facciamo un semplice esempio in cui consideriamo un template di pagina composto da un "header" standard e da un "content" variabile.
Dunque costruiamo una pagina chiamata header.xhtml di contenuto più o meno complesso che includeremo nella pagina template.xhtml. La pagina template.xhtml ha il seguente codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<link href="./resources/css/default.css"
rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css"
rel="stylesheet" type="text/css" />
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="top" class="top">
<ui:insert name="header">
<ui:include src="/layout/header.xhtml" />
</ui:insert>
</div>
<div id="content" class="content">
<ui:insert name="content">Main Content</ui:insert>
</div>
</h:body>
</html>
La porzione di codice
<ui:insert name="header">
<ui:include src="/layout/header.xhtml" />
</ui:insert>
definisce qual'è il tipo di contenuto in una specifica sezione della pagina, quella dell'header. In questo caso il file d'intestazine header.xhtml è incluso, in realtà avremmo potuto inserire tutto il suo codice direttamente in questo file, dipende naturalmente dalla complessità del codice.
L'altra sezione indicata con name="content" è quella che definisce il contenuto principale di ogni pagina.
Ogni pagina di tipo "content", cioè che contiene il codice che definisce il contenuto principale è costruita nel seguente modo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:body>
<ui:composition template="/layout/template.xhtml">
<ui:define name="content">
....
<h:outputText value="You are in the Main Content Section"/>
....
</ui:define>
</ui:composition>
</h:body>
</html>
Notiamo il tag "composition" con cui viene definito il template a cui si riferisce la pagina.
Il tag define con name = "content" stabilisce che la porzione di pagina inclusa nel tag va inserita nel template in corrispondenza del tag insert con neme = "content".
E' il percorso di questa pagina, che chiamiamo esempio.xhtml, che deve essere richiamato al fine di visualizzarne il contenuto nella sezione "content" ed il suo header nella sezione "header" definiti nel template.
In qualsiasi pagina che si riferisce ad uno specifico template mediante il tag:
<ui:composition template="layout/template.xhtml">
è possibile inserire porzioni di codice e definirli mediante il tag:
<ui:define name="content">
....
</ui:define>
Nel file template.xhtml ogni sezione è definita mediante il tag:
<ui:insert name="content">Main Content</ui:insert>
che per essere "riempita" deve avere lo stesso "name" del tag define nalla pagina dei contenuti.
lunedì 20 giugno 2011
Il templating con il Facelets nelle JavaServer Faces
giovedì 16 giugno 2011
JavaServer Faces Faclets: due differenti modalità per la composizione dei componenti
La facilità con cui effettuare il templating, non solo delle pagine ma anche dei componenti (tag composition), è uno dei vantaggi di cui la tecnologia JavaServer Faces ha usufruito grazie alla introduzione del Facelets.
Soffermiamoci sulla possibilità di creare delle composizioni di componenti espressi mediante tags riusabili in qualsiasi pagina come tag custom:
<mytaglib:mytag label="nome" value="#{miobean.nome}"></mytaglib:mytag>
Ci sono almeno due modi per creare composizioni di tag riutilizzabili nelle view JSF:
Mediante una taglibrary custom, e mediante la taglibrary http://java.sun.com/jsf/composite.
Vedremo che il secondo metodo risulta più immediato e non presenta problemi di autocompletamento che potrebbero verificarsi nell'editare gli attributi delle tag custom nell'editor dell'ide.
1)
Creiamo un tag custom che registreremo nella talibrary custom mediante il seguente codice di esempio:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html">
<ui:component>
<h:outputLabel value="#{label}: ">
<h:inputText value="#{value}"/>
</h:outputLabel>
</ui:component>
</html>
Abbiamo semplicemente composto una label con una inputText, ma eventualmente potremmo anche costruire una porzione di pagina vera e propria. Salviamo questo codice come file con estensione xhtml (miotag.xhtml).
La tag custom deve essere mappata in una taglibrary :
<!DOCTYPE facelet-taglib PUBLIC "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN" "http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
<facelet-taglib>
<namespace>http://www.facletsexample.it/tagcustom<;/namespace>
<tag>
<tag-name>mytag</tag-name>
<source>miotag.xhtml</source>
</tag>
</facelet-taglib>
Quindi occorre specificare la libreria che si sta utilizzando nel file web.xml
<context-param>
<param-name>facelets.LIBRARIES</param-name>
<param-value>/WEB-INF/facelets/mialibreria.taglib.xml</param-value>
</context-param>
Quindi è possibile usare il tag all’interno della pagina specificando il namespace della libreria
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f=”http://java.sun.com/jsf/core” xmlns:h="http://java.sun.com/jsf/html" xmlns:mytaglib=" http://www.facletsexample.it/tagcustom ">
<body>
<f:view>
<h:form>
<h:panelGrid columns="1">
<mytaglib:mytag label="nome" value="#{miobean.nome}"/>
</h:panelGrid>
</h:form>
</f:view>
</body>
</html>
2)
Vediamo ora invece come creare componenti riusabili mediante la taglibrary http://java.sun.com/jsf/composite
Creiamo la nostra composizione di tags che riutilizzeremo come tag custom inserendo il seguente codice nel file miotag.xtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>This content will not be displayed</title>
</h:head>
<h:body>
<composite:interface>
<composite:attribute name="value" required="false"/>
<composite:attribute name="label" required="false"/>
</composite:interface>
<composite:implementation>
<h:outputLabel value="#{cc.attrs.label}"></h:outputLabel>
<h:inputText value="#{cc.attrs.value}"></h:inputText>
</composite:implementation>
</h:body>
</html>
Si noti come la parola "cc" è riservata per i componenti composti
L'espressione #{cc.attrs.attribute-name} è utilizzata per identificare l'attributo definito per il componente nella sua interface. Nel nostro caso gli attributi definiti sono "label" e "value".
Per rendere il tag una risorsa disponibili non è necessario registrarlo in una taglibrary, ma è fondamentale inerire il file miotag.xhtml nella directory "resources/mycomp", sotto la root dell'application web. La sottodirectory "resources" infatti è considerata dal framework una vera e propria libreria.
Non ci resta che utilizzare il tag in una pagina del tipo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f=”http://java.sun.com/jsf/core” xmlns:h="http://java.sun.com/jsf/html" xmlns:mytaglib="http://java.sun.com/jsf/composite/mycomp/ ">
<body>
<f:view>
<h:form>
<h:panelGrid columns="1">
<mytaglib:miotag label="nome" value="#{miobean.nome}"/>
</h:panelGrid>
</h:form>
</f:view>
</body>
</html>
Nell'utilizzare il tag custom:
<mytaglib:miotag label="nome" value="#{miobean.nome}"></mytaglib:mytag>
Il nome del prefisso "mytaglib" è il nome della sottodirectory in cui è contenuto il file di definizione del tag, mentre il nome del tag "miotag" è il nome del file di definizione senza l'estensione .xhtml