Introducción a Sitemesh
0. Índice de
contenidos.
1. Entorno
Este tutorial está escrito usando el siguiente entorno:
- Hardware: Portátil Mac Book Pro 17″ (2,6 Ghz Intel Core i7, 8 GB DDR3)
- Sistema Operativo: Mac OS X Snow Leopard 10.6.4
- Sitemesh 2.4.2
- Maven 3.0.4
2. Introducción
En este tutorial os presentamos Sitemesh, un framework que permite, de una manera muy sencilla y nada intrusiva, separar de forma efectiva el contenido HTML de la presentación que es uno de los pilares fundamentales del diseño web adaptativo y un paso fundamental para mejorar la accesibilidad de nuestros sitos web.
Cuando creamos un sitio web siempre tenemos que mantener una coherencia en nuestras páginas, esto es definir zonas estáticas como la cabecera, el menú lateral de navegación, el pie de la página, etc… y otras zonas dinámicas donde vamos mostrando la información. Hay distintas alternativas para mantener esta coherencia en todas las páginas de un sitio web:
- 1. El Copy & paste. Lo primero que se nos ocurre a todos, hacemos un copy del fichero y modificamos lo que sea diferente. Esta es la peor aproximación ya que un pequeño cambio en la cabecera supondría tener cambiar todas las páginas del sitio web. Esta queda totalmente descartada.
- 2. Los JSPs includes: desde luego mucho mejor alternativa que la anterior, pero aún así tiene la pega de que acoplamos fuertemente los jsps y aumenta la complejidad en el mantenimiento.
- 3. Usar XSLT: podría servir pero es un lenguaje con mucha curva de aprendizaje y solo podemos ver el resultado en tiempo de ejecución.
Sitemesh ofrece la mejor alternativa introduciendo el concepto de decorador. Que no es más que un JSP con tags especiales. Este es un punto fuerte de Sitemesh y es que se integra con páginas completas. En otros motores de plantillas los desarrolladores tenemos que implementar como secciones de una página que el motor va componiendo. En el caso de Sitemesh dentro del decorador se definen una serie de tags como <decorator:body/> que coge toda la sección body de la página y la coloca en el lugar especificado del decorador. Lo vamos a ver más claro en el ejemplo.
3. Vamos al lío
Para poner en práctica este framework vamos a crear un proyecto web con Maven, al que en un alarde de originalidad, vamos a llamar sitemesh-test-web y lo importamos a Eclipse.
Ahora vamos a editar el fichero index.jsp para introducir el siguiente contenido:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Bienvenida</title>
</head>
<body>
<h2>Estamos probando Sitemesh!!!</h2>
</body>
</html>
Como véis es una página HTML completa. Ahora levantamos la aplicación web con un tomcat y este es el resultado:
Una página bien hecha a los ojos de un desarrollador y un poco «sosa» a los ojos de un diseñador. 🙂
Podemos hacer la prueba de validarla contra el validador de la W3C y veremos que es una página sin errores.
Ahora vamos a implementar el decorador principal del sitio web, aquí es donde entra en juego Sitemesh, para poder utilizarlo simplemente tenemos que añadir la siguiente dependencia a nuestro fichero pom.xml:
opensymphony sitemesh 2.4.2
Y definir el siguiente filtro en nuestro fichero web.xml:
Archetype Created Web Application
sitemesh
com.opensymphony.module.sitemesh.filter.PageFilter
sitemesh
/*
Con estos simples pasos estamos indicando que cualquier petición que se haga pase por el filtro de Sitemesh, que mirará la configuración que tengamos en el fichero decorators.xml para aplicar un decorador u otro en función de la petición.
Entonces creamos el fichero decorators.xml dentro de la carpeta WEB-INF con el siguiente contenido:
<?xml version="1.0" encoding="UTF-8"?>
/*
Con esta configuración estamos indicando que a cualquier página del sitio web se le aplique el decorador definido en main.jsp dentro de la carpeta WEB-INF/decorators.
Es el momento de llamar a los que tienen más gusto, los desarrolladores, para que nos creen algo bonito, indicándoles que pueden hacer uso de los siguientes tags:
- <decorator:body/> sirve para indicar en el decorador el espacio donde queremos incrustrar la sección body de la página decorada.
- <decorator:title/> sirve para indicar en el decorador el espacio donde queremos que se muestre el title definido en la página decorada.
- <decorator:head/> sirve para indicar en el decorador el espacio donde queremos incrustrar la sección head de la página decorada. Esto es compatible con el head del decorador lo que nos permite mantener estilos/javascript globales que definiríamos en el head del decorador y estilos/javascript locales que se definirían en cada página decorada.
Este podría ser el resultado, que conste que ningún diseñador real ha hecho esto.
<%@ taglib prefix="decorator" uri="http://www.opensymphony.com/sitemesh/decorator" %>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title><decorator:title/></title>
<style>
#container h2{
color: red;
}
</style>
</head>
<body>
<div id="container">
<decorator:body/>
</div>
</body>
</html>
Fijaos que este JSP perfectamente lo podemos visualizar en todo momento e incluso validar contra la W3C. Ahora levantamos el servidor y al visualizar nuestra página vemos como se le aplica el decorador definido.
Nuestra fantástica diseñadora Cristina Fernandez estoy seguro de que se lo hubiese currado mucho más 😉
4. Conclusiones
Con este framework ya no tenemos excusas para mantener la coherencia en nuestros sitios web y acercarnos un paso hacia la accesibilidad y descartar definitivamente la opción del copy & paste. Además de permitir que cada profesional se dedique a lo suyo.
En posteriores tutoriales veremos aspectos más avanzados de este framework como la aplicación de un decorador u otro en función del dispositivo, pero espero que esta introducción os sirva para tenerlo en cuenta en vuestros proyectos.
Cualquier duda o sugerencia en la zona de comentarios.
Saludos.
Con struts:
sitemesh
com.opensymphony.sitemesh.webapp.SiteMeshFilter
…
org.apache.struts2.dispatcher.ng.listener.StrutsListener
?
http://struts.apache.org/development/2.x/docs/sitemesh-plugin.html