SiteMesh, muy simple pero muy poderoso

SiteMesh es un framework de decoración y layout para páginas web, que apunta a la creación de grandes sitios que contienen una gran cantidad de páginas, lo cuales requieren un consistente “look and feel”, navegación y layout.

Descripción

Sin dudas, una de las cosas más llamativas de SiteMesh es la simpleza que tiene para configurarlo y para usarlo. Uno podría pensar en Tiles para struts, o Faceletes para JSF (Ver Post sobre este tema); pero SiteMesh se independiza de cualquier Framework, lo que lo hace muy poderoso y, sin duda, algo para tener en cuenta a la hora de decorar nuestro sitio.

¿Cómo trabaja?

Es en este aspecto en donde se puede ver lo mejor de este framework. Simplemente se crea una página Layout donde se define en qué lugar se insertará el cointenido y listo. Con definir un tag “body” en cualquier página e incluir ahi los datos, SiteMesh hará el resto y tendremos nuestro sitio consistente.

Configuración y ejemplo

Configurar y ejecutar SiteMesh será la tarea más simple que tendremos que hacer en todo el desarrollo.

1 – Descarguen e instalen todos los archivos necesarios a su classpath. Deberán descargar el archivo sitemesh.jar. Dirigirse a la página oficial de SiteMesh para bajarlo.

2 - Configurar el archivo decorators.xml. Abrir el directorio WebRoot/WEB-INF/ de nuestro proyecto. Ahí crear un archivo XML, decorators.xml, e insertar el siguiente contenido:

SiteMesh is a layout and decoration Framework for web pages, thought for the creation of large sites which manage a lot of pages, and need a goof “look and feel”, navegation and layout.

Description

Without questions, one of the best features of SiteMesh is how easy is to configure it and use it. You could think of Tiles for struts, or Faceletes for JSF (See Post about this subject); but SiteMesh is independent of any Framework, which makes it quite powerfull, something to pay attention to when decorating our site.

How does it work?

This is where you will see the best of this framework. Just create a Layout page where you define where to insert the content and you are done. By defining a “body” tag on any page and including the content there, SiteMesh will do the rest and we will have a consistent web site.

Configuration and example

Configuring and executing SiteMesh will be the easiest task that we will have to do during the complete development process.

1 – Download and install all the necessary files into your classpath. You will have to download sitemesh.jar. Go to the SiteMesh official web site to do this.

2 -Configure a decorators.xml file. Open the WebRoot/WEB-INF/ directory of our proyect. Create there a XML file, decorators.xml, and insert the following content:

1
2
3
4
5
6
7
8
9
10
11
12
13

 
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/decorators">
 
     <excludes>
         <pattern>/login.jsp</pattern>
    </excludes>
 
    <decorator name="layout" page="layout.jsp">
  	  <pattern>/*</pattern>
    </decorator>
 
</decorators>

Just as simple as that. In the WebRoot/decorators directory, we will have all the decorators we define, in this case we have created only one, layout.jsp.
We define it with the “decorator” tag and by specifying the “/*” “pattern”, we tell SiteMesh to apply it to all the pages of the application.
But we may not want to decorate all the pages (for example the login it is accustomed to have a complete different design from the rest of the pages), therefore, that page that we do not want to decorate we add it to the “excludes” and we are done.

3 – Define a decorator. Create a layout.jsp file in the WebRoot/decorators directory.

Tan simple como eso. En el directorio WebRoot/decorators tendremos todos nuestros decorators, en este caso tenemos uno solo, layout.jsp.
Lo definimos con el tag “decorator” y al definir el “pattern” “/*” le decimos a SiteMesh que se lo aplique a todas las páginas de la aplicación.
Pero puede ser que no querramos decorar todas las páginas (por ejemplo el login suele tener un diseño completamente diferente al resto de las páginas), por lo tanto esa página que no queremos decorar la agregamos a la lista de “excludes” y listo.

3 – Definir un decorator. Crear un archivo layout.jsp en la el directorio WebRoot/decorators.

layout.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!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">
	<head>
 
	<title><decorator:title default="SiteMesh" /></title>
	<decorator:head />
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/styles/styles.css"/>
	<script language="javascript" src="<%=request.getContextPath() %>/js/menu.js"></script>
	</head>
	<body>
		<div id="mainLayout">
			<%@ include file="header.jsp"%>
			<decorator:body/>
			<%@ include file="footer.jsp"%>
		</div>
	</body>
</html>

En el decorator tendremos que agregar la url para poder usar los tags de SiteMesh. Después es simplemente definir nuestros estilos y el html para después definir el tag “decorator:body”. Este tag insetará en ese lugar el contenido del tag “body” de todos nuestros jsp´s.

4 – Crear una página. Crear un archivo de prueba para aplicar SiteMesh, por ejemplo test.jsp.

In the decorator we will have to add the url in order to use SiteMesh´s tags. After that, we just have to define our styles and the htlm code so we can define the “decorator:body” tag. This tag will insert in that place the content of the “body” tag of all our jsp´s.

4 – Create a page. Create a file to test SiteMesh, for example test.jsp.

test.jsp

1
2
3
4

 
<body>
	SITEMESH APP
</body>

Nuestro decorator insertará el contenido del tag “body” dentro del “decorator:body” layout.jsp y listo!

Para más información dirigirse al sitio oficial de SiteMesh.

Our decorator will insert the content of the “body” tag into the “decorator:body” tag on the layout.jsp and that´s all!

For further information go to SiteMesh´s official site.