Creare siti dinamici con Sitemesh – Parte II

SitemeshNella 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