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
Iscriviti a:
Commenti sul post (Atom)
Nessun commento:
Posta un commento