Canigó - Sitemesh

SITEMESH 







Introducció

Introducció


SiteMesh és un sistema de layout per pàgines web i un sistema d'integració per aplicacions Web que ajuda a crear llocs que contenen un gran número de pàgines amb un look & fell, navegació i esquema de layout consistent.

Propòsit

El propòsit de la integració de Sitemesh en Canigó, és simplificar al màxim la creació de layouts per a pàgines.

Sitemesh o Tiles

Sitemesh tot i no tenir unes possibilitats tan obertes com Tiles ens dóna molta flexibilitat en quan al sistema de decoració de la pàgina i sobretot més simplicitat. Tiles i Sitemesh no són incompatibles entre ells i, per tant, es poden utilitzar conjuntament.

Dependències

Per a la instal- lació és necessaria la llibreria de Sitemesh. En el cas de exemple hem utilitzat la versió 2.3. Es pot descarregar el jar a la pàgina oficial: http://www.opensymphony.com/sitemesh/download.action

També podem utilitzar el repositori de maven. 

Documents i Fonts de Referència

Pàgina oficial Sitemesh: http://www.opensymphony.com/sitemesh/

Descripció Detallada

Components

JavaDoc llibreria Sitemesh: http://struts.apache.org/2.0.8/struts2-plugins/struts2-sitemesh-plugin/apidocs/index-all.html#_G_

Configuració


Haurem de seguir les 2 passes següents per a la correcte configuració. 

  1. Editar l'arxiu web.xml per tal de canviar els filtres. Afegirem el següent: 
    <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>*.do</url-pattern>
</filter-mapping>



D'aquesta manera afegim un nou filtre i especifiquem que totes les peticions .do que es facin les gestioni el nou filtre de Sitemesh.

  1. Actualment, al struts-config.xml declarem el plugin de Tiles per tal de poder utilitzar-lo i cridem a la classe "ExtendedDelegatingTilesRequestProcessor" per tal de controlar el procés de la request. 
    <plug-in className="org.apache.struts.tiles.TilesPlugin">
    <set-property property="definitions-config" value="/WEB-INF/classes/tiles/tiles-definitions.xml,
    /WEB-INF/classes/tiles/current/tiles-definitions.xml"/>
    <set-property property="moduleAware" value="true" />
</plug-in>


    <controller>
	<set-property property="processorClass"
		value="net.gencat.ctti.canigo.services.web.struts.
		ExtendedDelegatingTilesRequestProcessor"/>
</controller>


Si volem incorporar Sitemesh amb Tiles no hauríem de fer cap canvi. Si pel contrari només es vol la utilització del Sitemesh en primer lloc hauríem d'eliminar el plugin de Tiles i, per altra banda, fer que la crida per controlar el procés de la request sigui a la classe "ExtendedDelegatingSitemeshRequestProcessor".

Utilització Sitemesh

Basarem la explicació seguint el "canigo-env" que s'ha creat amb Sitemesh i que podreu trobar en la següent url: canigo-env-sitemesh-2.1.zip

Haurem de crear els següents arxius dins el projecte per gestionar Sitemesh. L'estructura pot no ser exactament la que es proposa en el següent exemple`.

-         Weppapp/WEB-INF/decorators.xml => En aquest arxiu definim tots els decorators o layouts que hem creat. També tenim la oportunitat de especificar quan utilitzar un layout o l'altre en funció de patterns.

-         Weppapp/WEB-INF/decorators/ => Dins aquesta carpeta és on guardarem tots els layouts que s'han definit en l'arxiu decorators.xml

-         Weppapp/WEB-INF/jsp/ => Directori on tindrem les nostres jsp i que en principi ja hauria de estar creat.

Exemple decorators.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<decorators defaultdir="/WEB-INF/decorators/">
    <decorator name="login" page="login.jsp">
      <pattern>*/pagelogin.do*</pattern>
    </decorator>

    <decorator name="text" page="text.jsp">
        <pattern>*/pagelogoff.do*</pattern>
        <pattern>*/pageerror.do*</pattern>
    </decorator>


    <decorator name="main" page="main.jsp">
        <pattern>/*</pattern>
    </decorator>
</decorators>















En aquest cas és molt important tenir en compte l'ordre en la definició dels decorators. S'ha de tenir en compte que la prioritat és major si un decorator està definit en primer lloc.

Exemple Weppapp/WEB-INF/decorators/login.jsp

<%@ page contentType="text/html;charset=ISO-8859-1"%>
<%response.setHeader("Cache-Control", "no-cache");
            response.setHeader("Pragma", "no-cache");
            response.setDateHeader("Expires", 0);

        %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ include file="/WEB-INF/jsp/includes/fwkTagLibs.jsp"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<html>
<head>
<title><decorator:title /></title>
<link rel="stylesheet" href='<c:url value="/css/import.css"/>' type="text/css" />
<script>
    var contextPath = '<c:url value="/"/>'.substring(0,'<c:url value="/"/>'.length-1);
    </script>
<fwk:configuration styleId="defaultConfiguration" />
</head>
<body>
<div id="outer">
    <div id="top-section">
        <%@ include file="../jsp/includes/header.jsp" %>
    </div>

    <div id="mid-section">
        <div id="mid-col-1">
            <div id="menu">
                <%@ include file="../jsp/includes/menu.jsp" %>
            </div>
        </div>
        <div id="mid-col-2">
            <div id="mid-col-2-row-1" style="visibility:hidden;">
                <%@ include file="../jsp/includes/messages.jsp" %>
            </div>
            <decorator:body />
        </div>
    </div>

    <div id="bottom-section">
        <div id="bottom-col-1">
            <%@ include file="../jsp/includes/footer.jsp" %>
        </div>
    </div>
</div>
</body>
</html>















Això seria un exemple de layout. Ens hem de fixar especialment en les dues següent entrades:

<title><decorator:title /></title>

Aquí s'introduirà el text de tota la jsp que estigui dins els tags title.

<title><decorator:body/></title>

Aquí s'introduirà el text de tota la jsp que estigui dins els tags title.

Podeu trobar informació amb totes les possibilitats a la següent url: http://www.opensymphony.com/sitemesh/tags.html

Exemple Weppapp/WEB-INF/jsp/login.jsp

<html>
<head>
        <title>Login</title>
</head>
<body>
    <%@ include file="/WEB-INF/jsp/includes/fwkTagLibs.jsp"%>
    <link rel="stylesheet" href='<c:url value="/css/import.css"/>' type="text/css" />
    <div id="outer">
    <table border="0" cellpadding="0" cellspacing="1" width="100%">
    <tr>
    <td align="center" valign="top" style="text-align:center"><BR>
    <center>
    <table border="0" cellpadding="2">
    <tr>
    <td width="100%" valign="top" style="text-align:center"><!-- Contenido principal -->
    <%@ page import="net.sf.acegisecurity.ui.AbstractProcessingFilter"%>
    <%@ page
    import="net.sf.acegisecurity.ui.webapp.AuthenticationProcessingFilter"%>
    <%@ page import="net.sf.acegisecurity.AuthenticationException"%>
    <c:if test="${not empty param.login_error}">
    <font color="red"> <fmt:message key="jsp.login.error" /><BR>
    <%=session.getAttribute(AbstractProcessingFilter.ACEGI_SECURITY_LAST_EXCEPTION_KEY)%>
    </font>
    </c:if>
    <div class="Container">
    <div id="imatge">
    <img src="<c:url value="/images/logo.gif"/>" border="0" alt="logo_ctti" width="207">
    </div>
    <div id="separador"></div>
    <div id="Dialog">
    <form action="<c:url value="/j_acegi_security_check"/>" method="post">
    <fieldset style="border:0">
    <table width="300" border="0">
    <tr>
    <td align="right">
    <font class="asterisc">*&nbsp;</font><fmt:message key="jsp.login.user" />:</td>
    <td><input class="textLogin" type='text' name='j_username' value="usuario_admin1"
    <c:if test="${not empty param_error}">value='<%= session.getAttribute(
    AuthenticationProcessingFilter.ACEGI_SECURITY_LAST_USERNAME_KEY) %>'
    </c:if>></td>
    </tr>
    <tr>
    <td align="right"><font class="asterisc">*&nbsp;</font><fmt:message key="jsp.login.password" />:</td>
    <td><input class="textLogin" type='password' name='j_password' value="password1"></td>
    </tr>
    <tr>
    <td colspan="2" align="center"><br><input class="botoLogin" type="submit" value="
    <fmt:message key="jsp.login.sumbit"/>          " /></td>
    </tr>
    </table>
    </fieldset>
    </form>
    </div>
    </td>
    </tr>
    </table>
    <fmt:message key="jsp.login.disclaimer" />
    <br>
    <br>
    &nbsp;
    </td>
    </tr>
    </table>
    </div>
</body>
</html>