Diferencia entre revisiones de «SiteMesh 2»
(→Cómo se implementa) |
(→Para qué se usa) |
||
| (No se muestran 13 ediciones intermedias del mismo usuario) | |||
| Línea 20: | Línea 20: | ||
Seguir estos 3 pasos: | Seguir estos 3 pasos: | ||
| − | + | 1. Agregar la biblioteca [http://wiki.sitemesh.org/display/sitemesh/Download SiteMesh jar] en WEB-INF/lib | |
| − | + | 2. Configurar el siguiente filtro en el archivo WEB-INF/web.xml, dentro del tag <web-app> | |
| − | |||
<pre> | <pre> | ||
<filter> | <filter> | ||
| Línea 35: | Línea 34: | ||
</pre> | </pre> | ||
| − | + | 3. Crear el archivo decorators.xml en el directorio WEB-INF con el siguiente contenido | |
| − | |||
<pre> | <pre> | ||
<?xml version="1.0" encoding="UTF-8"?> | <?xml version="1.0" encoding="UTF-8"?> | ||
| Línea 46: | Línea 44: | ||
=== Configurando SiteMesh === | === Configurando SiteMesh === | ||
| + | Según el propio sitio de [http://wiki.sitemesh.org/display/sitemesh/Home SiteMesh] la mejor forma para entender esta biblioteca es usándola. | ||
| + | |||
| + | En los siguientes pasos explicaremos como implementar un ejemplo simple en un proyecto existente: | ||
| + | |||
| + | 1. Crear la página '''menu.jsp''' dentro de una carpeta nueva llamada '''data''' en el directorio de contenido web (generalmente '''web''') con el siguiente contenido. | ||
| + | <pre> | ||
| + | <h1>Beverages</h1> | ||
| + | <p>Cappucino $3.25</p> | ||
| + | <p>Latte $3.35</p> | ||
| + | <p>Espresso $2.00</p> | ||
| + | <p>Mocha $3.50</p> | ||
| + | </pre> | ||
| + | |||
| + | 2. Crear la página '''hours.jsp''' en la misma ubicación que la página anterior con este contenido. | ||
| + | <pre> | ||
| + | <h1>Weekdays</h1> | ||
| + | <p>5:00pm - 10:00pm</p> | ||
| + | <p>Weekends</p> | ||
| + | <p>5:00pm - 10:00pm</p> | ||
| + | </pre> | ||
| + | |||
| + | 3. Crear la página de layout ('''basic-theme.jsp''')en la misma carpeta con el siguiente contenido. | ||
| + | <pre> | ||
| + | <?xml version="1.0" encoding="UTF-8" ?> | ||
| + | <%@ 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></title> | ||
| + | </head> | ||
| + | <body> | ||
| + | <h1>Header</h1> | ||
| + | <p><b>Navigation</b></p> | ||
| + | <hr /> | ||
| + | <decorator:body /> | ||
| + | <hr /> | ||
| + | <h1>Footer</b></h1> | ||
| + | </body> | ||
| + | </html> | ||
| + | </pre> | ||
| + | |||
| + | ''El tag decorator:body será reemplazado por el contenido de la página a "decorar".'' | ||
| + | |||
| + | 4. Configurar el archivo '''decorator.xml''' de la siguiente forma | ||
| + | <pre> | ||
| + | <?xml version="1.0" encoding="UTF-8"?> | ||
| + | <decorators defaultdir="/decorators"> | ||
| + | <decorator name="basic-theme" page="basic-theme.jsp"> | ||
| + | <pattern>/data/*</pattern> | ||
| + | </decorator> | ||
| + | </decorators> | ||
| + | </pre> | ||
| + | |||
| + | ''Con esta configuración estamos indicando que se aplique el decorador '''basic-theme.jsp''' a todas los contenidos previamente creados en la carpeta "/data".'' | ||
| + | |||
| + | 5. Por último es necesario reiniciar el servidor, para que tome los cambios realizados en el proyecto, y luego al acceder a alguna de las páginas '''menu.jsp''' o '''hours.jsp''' se visualizarán sus contenidos decorados con el layout configurado ('''basic-theme.jsp''') | ||
== Nuestra experiencia == | == Nuestra experiencia == | ||
| + | Antes de implementar '''SiteMesh''' en nuestro proyecto constaba de 5 páginas HTML las cuales tenían duplicado su contenido estático en las secciones de '''Cabecera''', '''Menu''' y '''Pie de página'''. | ||
| + | |||
| + | Esto nos generaba un inconveniente al momento de mantener estas páginas y tener que modificar el contenido estático en todas. | ||
| + | |||
| + | Por esta razón buscamos una biblioteca que nos permitiera definir una página layout que decore las páginas de contenido dinámico de nuestro sitio y nos permita reutilizar las páginas estáticas. | ||
| + | |||
| + | Encontramos esta biblioteca y pudimos implementarla en nuestro proyecto de forma sencilla. | ||
| + | |||
| + | Lo siguiente fue extraer los contenido estáticos a diferentes archivos jsp ('''cabecera.jsp''', '''menu.jsp''' y '''pie.jsp''') que luego pudimos incluir en la página de layout '''basic-theme.jsp''' de la siguiente forma. | ||
| + | <pre> | ||
| + | <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %> | ||
| + | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | ||
| + | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> | ||
| + | <head> | ||
| + | <%@ include file="/includes/meta.jsp" %> | ||
| + | </head> | ||
| + | <body> | ||
| + | <div class="contenedorPrincipal"> | ||
| + | <%@ include file="/includes/cabecera.jsp" %> | ||
| + | |||
| + | <%@ include file="/includes/menu.jsp" %> | ||
| + | <decorator:body /> | ||
| + | <%@ include file="/includes/pie.jsp" %> | ||
| + | </div> | ||
| + | </body> | ||
| + | </html> | ||
| + | </pre> | ||
| + | |||
| + | == Conclusión == | ||
| + | Como conclusión podemos decir que '''SiteMesh''' se puede implementar de forma rápida, sencilla y no invasiva en un proyecto existente y su configuración es intuitiva. | ||
| + | Además que resuelve la problemática de reutilización de contenido estático en un proyecto web. | ||
| + | |||
| + | Así que les recomendamos que visiten el sitio de [http://wiki.sitemesh.org/display/sitemesh/Home SiteMesh] para mayor información. | ||
Revisión actual del 19:20 10 oct 2012
Contenido
Qué es SiteMesh
Es un framework Java para aplicaciones web que aplica el patrón de diseño Decorator para permitir la separación de contenido en la capa de presentación.
Con este framework se puede definir la distribución de contenido (layout) de la vista y componerla en base a páginas simples, las cuales conformarán una página compleja (decorada) justo antes de enviarse al cliente.
Para qué se usa
SiteMesh utiliza Filters disponibles a partir de la versión 2.3 de Java Servlet.
- SiteMesh intercepta las peticiones de todas las paginas HTML generadas, procesa el contenido y lo "decora" para obtener el resultado final.
- También puede generar una pagina compleja a partir de varias pequeñas.
Cómo se implementa
Instalar SiteMesh Manualmente
Seguir estos 3 pasos:
1. Agregar la biblioteca SiteMesh jar en WEB-INF/lib 2. Configurar el siguiente filtro en el archivo WEB-INF/web.xml, dentro del tag <web-app>
<filter> <filter-name>sitemesh</filter-name> <filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class> </filter> <filter-mapping> <filter-name>sitemesh</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
3. Crear el archivo decorators.xml en el directorio WEB-INF con el siguiente contenido
<?xml version="1.0" encoding="UTF-8"?> <decorators> </decorators>
Hasta acá la aplicación debe seguir funcionando normalmente, ya que no se esta implementando ningún decorators aún.
Configurando SiteMesh
Según el propio sitio de SiteMesh la mejor forma para entender esta biblioteca es usándola.
En los siguientes pasos explicaremos como implementar un ejemplo simple en un proyecto existente:
1. Crear la página menu.jsp dentro de una carpeta nueva llamada data en el directorio de contenido web (generalmente web) con el siguiente contenido.
<h1>Beverages</h1> <p>Cappucino $3.25</p> <p>Latte $3.35</p> <p>Espresso $2.00</p> <p>Mocha $3.50</p>
2. Crear la página hours.jsp en la misma ubicación que la página anterior con este contenido.
<h1>Weekdays</h1> <p>5:00pm - 10:00pm</p> <p>Weekends</p> <p>5:00pm - 10:00pm</p>
3. Crear la página de layout (basic-theme.jsp)en la misma carpeta con el siguiente contenido.
<?xml version="1.0" encoding="UTF-8" ?>
<%@ 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></title>
</head>
<body>
<h1>Header</h1>
<p><b>Navigation</b></p>
<hr />
<decorator:body />
<hr />
<h1>Footer</b></h1>
</body>
</html>
El tag decorator:body será reemplazado por el contenido de la página a "decorar".
4. Configurar el archivo decorator.xml de la siguiente forma
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/decorators">
<decorator name="basic-theme" page="basic-theme.jsp">
<pattern>/data/*</pattern>
</decorator>
</decorators>
Con esta configuración estamos indicando que se aplique el decorador basic-theme.jsp a todas los contenidos previamente creados en la carpeta "/data".
5. Por último es necesario reiniciar el servidor, para que tome los cambios realizados en el proyecto, y luego al acceder a alguna de las páginas menu.jsp o hours.jsp se visualizarán sus contenidos decorados con el layout configurado (basic-theme.jsp)
Nuestra experiencia
Antes de implementar SiteMesh en nuestro proyecto constaba de 5 páginas HTML las cuales tenían duplicado su contenido estático en las secciones de Cabecera, Menu y Pie de página.
Esto nos generaba un inconveniente al momento de mantener estas páginas y tener que modificar el contenido estático en todas.
Por esta razón buscamos una biblioteca que nos permitiera definir una página layout que decore las páginas de contenido dinámico de nuestro sitio y nos permita reutilizar las páginas estáticas.
Encontramos esta biblioteca y pudimos implementarla en nuestro proyecto de forma sencilla.
Lo siguiente fue extraer los contenido estáticos a diferentes archivos jsp (cabecera.jsp, menu.jsp y pie.jsp) que luego pudimos incluir en la página de layout basic-theme.jsp de la siguiente forma.
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<%@ include file="/includes/meta.jsp" %>
</head>
<body>
<div class="contenedorPrincipal">
<%@ include file="/includes/cabecera.jsp" %>
<%@ include file="/includes/menu.jsp" %>
<decorator:body />
<%@ include file="/includes/pie.jsp" %>
</div>
</body>
</html>
Conclusión
Como conclusión podemos decir que SiteMesh se puede implementar de forma rápida, sencilla y no invasiva en un proyecto existente y su configuración es intuitiva. Además que resuelve la problemática de reutilización de contenido estático en un proyecto web.
Así que les recomendamos que visiten el sitio de SiteMesh para mayor información.
