SiteMesh è un progetto molto interessante, creato per le applicazioni web scritte in Java; si tratta di un framework per la decorazione delle pagine web, pensato per la gestione di siti anche molto grandi.
Design pattern in azione
Il framework basa il suo funzionamento sul design pattern chiamato Decorator, il cui funzionamento è piuttosto intuitivo: si definisce un componente che prende l’output che li viene passato e lo modifica a suo piacimento, inserendosi nel normale workflow dell’applicazione. Nella fattispecie il Decorator di SiteMesh è un Servlet Filter che modifica il contenuto dell’output normalmente fornito dall’elaborazione di una richiesta HTTP.
Installazione e configurazione
Le librerie sono scaricabili liberamente dal sito ufficiale, oppure se usate Maven potete aggiungere una dipendenza nella sezione <dependencies> del file pom.xml:
[xml]<dependency>
<groupId>opensymphony</groupId>
<artifactId>sitemesh</artifactId>
<version>2.4.2</version>
<type>jar</type>
<scope>compile</scope>
</dependency>[/xml]
Per prima cosa bisogna poi configurare il filtro nel file WEB-INF/web.xml:
[xml]<filter>
<filter-name>sitemesh</filter-name>
<filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>[/xml]
Inoltre aggiungiamo index.html alla lista dei welcome file:
[xml]<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
<welcome-file>index.html</welcome-file>
</welcome-file-list>[/xml]
Ora dobbiamo creare il file di configurazione dei decoratori, WEB-INF/decorators.xml:
[xml]<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/WEB-INF/decorators">
<decorator name="main" page="main.jsp">
<pattern>/*.html</pattern>
<pattern>/*.jsp</pattern>
</decorator>
</decorators>[/xml]
Questa configurazione dice a SiteMesh che:
- i template si trovano nella directory /WEB-INF/decorators (che creeremo più avanti);
- il decoratore chiamato main utilizzerà il file /WEB-INF/decorators/main.jsp;
- questo decorator agirà solo ed esclusivamente sulle pagine che hanno estensione .html oppure .jsp
Creiamo quindi il file di template /WEB-INF/decorators/main.jsp:
[html]
<!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" %>
<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>
<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">
<decorator:body />
</div>
</div>
</body>
</html>
[/html]
Alcuni elementi da notare:
- la dichiarazione della tag library, in cima alla pagina;
- il tag <decorator:title>: questo tag inserisce il valore presente nel tag <title> della pagina richiesta;
- il tag <decorator:body /> invece inserisce tutto il contenuto del tag <body> della pagina originale.
L’ultimo passo è la creazione dei contenuti veri e propri. Create queste tre pagine html: index.html, page2.html e page3.html. Come contenuti metteteci qualcosa del tipo:
[html]<html>
<head>
<title>Homepage</title>
</head>
<body>
Bla bla bla
</body>
</html>[/html]
In azione
È arrivato il momento di testare la vostra web application: come per magia tutte le vostre pagine avranno la struttura HTML delineata in /WEB-INF/decorators/main.jsp!
Questa “magia” è semplice ma molto potente: modificando un solo file di template potete aggiornare un sito intero, senza nemmeno ricorrere ad un CMS.
Linkografia
- SiteMesh;
- definizione di Decorator design pattern su Wikipedia;
