Nella puntata precedente abbiamo installato e configurato SiteMesh, un potente framework per la decorazione di pagine web tramite template. Approfondiamo la conoscenza di questo strumento con alcuni esempi utilizzabili in situazioni reali.
Uso delle meta-informazioni
Uno dei punti di forza di Sitemesh è l’utilizzo furbo dei costrutti esistenti di HTML per ottenere funzionalità aggiuntive. Ad esempio è possibile inserire vere e proprie configurazioni sfruttando i tag <meta> nelle pagine da decorare; questo approccio consente di non “sporcare” le pagine originali con tag specifici e troppo legati al framework, rendendo fra l’altro possibile una ulteriore migrazione, in futuro, ad eventuali altre soluzioni.
Il merito di questa “magia” si realizza in gran parte con il tag <decorator:getProperty>. Il funzionamento è in realtà molto semplice:
- nella pagina dei contenuti bisogna aggiungere un tag <meta>, ad esempio:
<meta name="messaggio" content="Questo è un messaggio" /> - nel decorator (la pagina /WEB-INF/decorators/main.jsp della scorsa puntata) si accede alla proprietà tramite il tag:
<decorator:getProperty property="meta.messaggio"/>
Gestione dei layout
Uno degli utilizzi più utilizzati è impostare un layout particolare per alcune pagine, spesso infatti vorremmo poter nascondere facilmente alcuni elementi come barre laterali, banner pubblicitari, o altro. Vediamo come fare.
Per prima cosa apriamo la pagina src/main/webapp/page2.html e creata nella scorsa puntata e aggiungiamo questa linea di codice prima del tag di chiusura </head>:
<meta name="hideBanner" content="true"/>
Modifichiamo quindi il template /WEB-INF/decorators/main.jsp, in questo modo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="decorator" uri="http://www.opensymphony.com/sitemesh/decorator" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Il mio sito web | <decorator:title default="Nessun titolo" /></title>
<style type="text/css">@import "css/style.css";</style>
<decorator:head />
</head>
<c:set var="hideBanner"><decorator:getProperty property="meta.hideBanner" /></c:set>
<body>
<div id="container">
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</div>
<div id="content">
<c:if test="${hideBanner ne 'true'}">
<div style="border: 1px solid black; width: 468px; height: 60px">
Questo è un banner pubblicitario
</div>
</c:if>
<decorator:body />
</div>
</div>
</body>
</html>
Eseguiamo quindi il build:
mvn package
e facciamo partire la web application. Cliccando sulle varie pagine potremo notare che solamente la pagina page2.html non ha banner pubblicitari.
Sviluppi
Gli utilizzi delle configurazioni in <meta> di Sitemesh hanno molte applicazioni, nei prossimi appuntamenti vedremo qualche altro esempio pratico.
Linkografia
- Creare siti dinamici con Sitemesh – Parte I;
- SiteMesh.
