SiteMesh基本用法及示例

SiteMesh是基于Servlet的filter的，即過濾流。它是通過截取reponse，并進行裝飾後再傳遞給客戶。

其中涉及到兩個名詞：裝飾頁面(decorator page)和 “被裝飾頁面(Content page)" , 即 SiteMesh通過對Content Page的裝飾，最終得到頁面布局和外觀一直的頁面，

并傳回給客戶

運作環境需要：servlet2.3 , JDK1.4 以上。

正常模式下的web通路流程

SiteMesh基本用法及示例

加入SiteMesh裝飾的web通路流程

SiteMesh基本用法及示例

一：搭建SiteMesh環境及簡單使用

1.1：準備資源

siteMesh2.4.jar, sitemesh-page.tld , sitemesh-decorator.tld 這個三個必要檔案

将jar包複制進/WEB-INF/lib目錄下，兩個tld檔案導入/WEB-INF下即可

在web.xml中加入siteMesh的filter和taglib

<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> 

 <!-- not required for containers that fully support JSP 1.2 -->
  <taglib>
    <taglib-uri>sitemesh-page</taglib-uri>
    <taglib-location>/WEB-INF/lib/sitemesh-page.tld</taglib-location>
  </taglib>
  <taglib>
    <taglib-uri>sitemesh-decorator</taglib-uri>
    <taglib-location>/WEB-INF/lib/sitemesh-decorator.tld</taglib-location>
  </taglib>

1.2 建立decorators.xml

在/WEB-INF下建立decorators.xml檔案，siteMesh通過該檔案來獲知"裝飾頁面"和"被裝飾頁面"的映射

decorators.xml

<?xml version="1.0" encoding="UTF-8"?>

<!-- 預設目錄 -->
<decorators defaultdir="/decorators">

    <!-- 預設裝飾頁 -->
    <decorator name="main" page="main.jsp">
        <pattern>/*</pattern>
    </decorator>
     
    <!-- 自定義裝飾頁,我們下面執行個體就是這部分起作用 -->
    <decorator name="mai" page="mai.jsp">
        <pattern>/mai.html</pattern>
    </decorator>

    <!-- 隻裝飾一個頁面也可用這種方式定義 -->
    <decorator name="panel" page="panel.jsp"/>

    <!-- 裝飾velocity模闆 -->
    <decorator name="velocity" page="velocity.vm">
        <pattern>/velocity.html</pattern>
    </decorator>
    
    <!-- 裝飾freeMarker模闆 -->
    <decorator name="freemarker" page="freemarker.ftl">
        <pattern>/freemarker.html</pattern>
    </decorator>

    <decorator name="test" page="test.jsp">
        <pattern>/agent.jsp</pattern>
    </decorator>
</decorators>

下邊是對上邊中所缺少的一些補充

<?xml version="1.0" encoding="utf-8"?>  
<decorators defaultdir="/decorators">  
    <!-- 此處用來定義不需要過濾的頁面 -->  
    <excludes>  
    </excludes>  
  
 <!-- 用來定義裝飾器要過濾的頁面 -->  
    <decorator name="main" page="main.jsp">  
        <pattern>/*</pattern>  
    </decorator>  
</decorators>

1.3 裝飾頁的建立

在web目錄(或者webContent)下建立檔案夾decorators，在檔案夾中建立mai.jsp檔案

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

/*這裡導入了SiteMesh的标簽庫 */

<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

OK,there is a decorator begin!<hr />
    /*這裡的意思是，被裝飾頁的title内容将會在這裡插入 */
    <decorator:title></decorator:title>
  
</head>
<body>
    /*被修飾頁的body内容将在這裡插入
    <decorator:body></decorator:body>

<hr />Yse,there is a decorator end !

</body>
</html>

1.4 被修飾頁的建立

在web目錄(或webContent)下建立mai.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
this is the Content Page !!!
</body>
</html>

1.5 使用tomcat進行示例運作，通路http://localhost:8080/{your project name}/mai.html ，運作結果如下：

SiteMesh基本用法及示例

1.6 sitemesh.xml的配置(可選, 示例中沒有用到該檔案)

該配置檔案用于進階元素的配置，有具體需要的可以配置

<sitemesh>
    <property name="decorators-file" value="/WEB-INF/decorators.xml"/>
    <excludes file="${decorators-file}"/>

    <page-parsers>
        <parser content-type="text/html" class="com.opensymphony.module.sitemesh.parser.HTMLPageParser" />
    </page-parsers>

    <decorator-mappers>

        <mapper class="com.opensymphony.module.sitemesh.mapper.PageDecoratorMapper">
            <param name="property.1" value="meta.decorator" />
            <param name="property.2" value="decorator" />
        </mapper>

        <mapper class="com.opensymphony.module.sitemesh.mapper.FrameSetDecoratorMapper">
        </mapper>

        <mapper class="com.opensymphony.module.sitemesh.mapper.AgentDecoratorMapper">
            <param name="match.MSIE" value="ie" />
            <param name="match.Mozilla [" value="ns" />
            <param name="match.Opera" value="opera" />
            <param name="match.Lynx" value="lynx" />
        </mapper>

        <mapper class="com.opensymphony.module.sitemesh.mapper.PrintableDecoratorMapper">
            <param name="decorator" value="printable" />
            <param name="parameter.name" value="printable" />
            <param name="parameter.value" value="true" />
        </mapper>

        <mapper class="com.opensymphony.module.sitemesh.mapper.RobotDecoratorMapper">
            <param name="decorator" value="robot" />
        </mapper>

        <mapper class="com.opensymphony.module.sitemesh.mapper.ParameterDecoratorMapper">
            <param name="decorator.parameter" value="decorator" />
            <param name="parameter.name" value="confirm" />
            <param name="parameter.value" value="true" />
        </mapper>

        <mapper class="com.opensymphony.module.sitemesh.mapper.FileDecoratorMapper">
        </mapper>

        <mapper class="com.opensymphony.module.sitemesh.mapper.ConfigDecoratorMapper">
            <param name="config" value="${decorators-file}" />
        </mapper>

    </decorator-mappers>

</sitemesh>

使用總結：整個過程配置是相對簡單的，先導入所需資源，然後再配置filter，之後是derator page和content page的建立以及他們之間的映射關系，配置指令是相對簡單的，簡單的需求上面這些已經足矣。

二：使用示例

2.1 例子1

在{myapp}/WEB-INF/decorators.xml檔案中添加以下decorator

<decorator name="mydecorator1" page="mydecorator1.jsp">
        <pattern>/test1.jsp</pattern>
    </decorator>

在{myapp}/decorators目錄下添加mydecorator1.jsp檔案，内容如下:

<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<html>
    <head>
        <title>My Site - <decorator:title default="Welcome!" /></title>
        <decorator:head />
    </head>
    <body>
        <decorator:body />
        <p>This message is in /decorators/mydecorator1.jsp</p>       
    </body>
</html>

在{myapp}目錄下添加test1.jsp檔案，内容如下：

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>This is test1</title>
    </head>
    <body>
    <b>This is test1</b>
    </body>
</html>

打開浏覽器，通路http://localhost:8080/myapp/test1.jsp，将會出現一下内容：

This is test1

This message is in /decorators/mydecorator1.jsp

2.2 例子2（decorator:getProperty）

有時候，我們期望修改頁面中某個有固定标記的片段，例如我們的jsp中有一個标記<mytag>...</mytag>，此時可以用如下方法實作：

在{myapp}/WEB-INF/decorators.xml檔案中添加以下decorator

<decorator name="mydecorator2" page="mydecorator2.jsp">
        <pattern>/test2.jsp</pattern>
    </decorator>

在{myapp}/decorators目錄下添加mydecorator2.jsp檔案，内容如下:

<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>

<html>
    <head>
        <title>My Site - <decorator:title default="Welcome!" /></title>
        <decorator:head />
    </head>

    <body>
        <decorator:body />
        <decorator:getProperty property="page.content1"/>
        <decorator:getProperty property="page.content2"/>
        
        <!-- do nothing -->
        <decorator:getProperty property="page.content3"/>
        <p>This message is in /decorators/mydecorator2.jsp</p>
    </body>
</html>

在{myapp}目錄下添加test2.jsp檔案，内容如下：

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>This is test2</title>
    </head>
   
    <body>
    <b>This is test2</b>
    <b>Use <decorator:getProperty> tag</b>
   
    <content tag="content1"><p>This is content1</p></content>
    <content tag="content2"><p>This is content2</p></content>
    <content tag="content4"><p>This is content4, it shouldn't be display</p></content>
    </body>
</html>

打開浏覽器，通路http://localhost:8080/myapp/test2.jsp，将會出現一下内容：

This is test2

Use <decorator:getProperty> tag

This is content1

This is content2

This message is in /decorators/mydecorator2.jsp

2.3 例子3 （page:applyDecorator tag）

在{myapp}/WEB-INF/decorators.xml檔案中添加以下decorator：

<decorator name="mydecorator3" page="mydecorator3.jsp">
        <pattern>/test3.jsp</pattern>
    </decorator>
    <decorator name="mydecorator31" page="mydecorator31.jsp">
    </decorator>

在{myapp}/decorators目錄下添加mydecorator3.jsp檔案，内容如下:

<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>
<html>
    <head>
        <title>My Site - <decorator:title default="Welcome!" /></title>
        <decorator:head />
    </head>

    <body>
        <decorator:body />
        <page:applyDecorator name="mydecorator31">
            <content tag="content1"><p>This is content1</p></content>
            <content tag="content2"><p>This is content2</p></content>
        </page:applyDecorator>
    </body>
</html>

在{myapp}/decorators目錄下添加mydecorator31.jsp檔案，内容如下:

<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>

<p><i>begin</i></>
<decorator:getProperty property="page.content1"/>
<decorator:getProperty property="page.content2"/>
<p><i>end</i></>
在{myapp}目錄下添加test3.jsp檔案，内容如下：
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>This is test3</title>
    </head>
   
    <body>
    <b>This is test3</b>
    <b>Use <page:applyDecorator> tag</b>
    </body>
</html>

注意：相對于例子2，這裡已經沒有了<content tag="XXX"/>标簽。

打開浏覽器，通路http://localhost:8080/myapp/test3.jsp，将會出現一下内容：

This is test3

Use <page:applyDecorator> tag

begin

This is content1

This is content2

end

這裡，我在mydecorator3.jsp中應用了mydecorator31.jsp的的decorator，并且将原來在test2.jsp中的 <content />标簽複制到mydecorator3.jsp中，此時對于<content tag="xxx"/>的标簽将會由mydecorator31.jsp了裝飾。

2.4 例子4（page:parm tag）

在{myapp}/WEB-INF/decorators.xml檔案中添加以下decorator:

<decorator name="mydecorator4" page="mydecorator4.jsp">
        <pattern>/test4.jsp</pattern>
    </decorator>
    
    <decorator name="mydecorator41" page="mydecorator41.jsp">
    </decorator>

在{myapp}/decorators目錄下添加mydecorator4.jsp檔案，内容如下:

<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>

<html>
    <head>
        <title>My Site - <decorator:title default="Welcome!" /></title>
        <decorator:head />
    </head>
    <body>
        <decorator:body />
        <page:applyDecorator name="mydecorator41" >
            <content tag="content1"><p>This is content1</p></content>
            <content tag="content2"><p>This is content2</p></content>
            <page:param name="page.content1"><p>This content1 has been replaced</p></page:param>
        </page:applyDecorator>
    </body>
</html>

在{myapp}/decorators目錄下添加mydecorator41.jsp檔案，内容如下:

<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>

<p><i>begin</i></>
<decorator:getProperty property="page.content1"/>
<decorator:getProperty property="page.content2"/>
<p><i>end</i></>

在{myapp}目錄下添加test4.jsp檔案，内容如下：

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>This is test4</title>
    </head>
   
    <body>
    <b>This is test4</b>
    <b>Use <page:param> tag</b>
    </body>
</html>

打開浏覽器，通路http://localhost:8080/myapp/test4.jsp，将會出現一下内容：

This is test4

Use <page:param> tag

begin

This content1 has been replaced

This is content2

end

這裡，我在mydecorator4.jsp中應用了mydecorator41.jsp的的decorator，并且添加了<page:param name="page.content1">标簽，那麼此時頁面上将會用<page:param>标簽中的内容替換原來在<decorator:getProperty property="page.content1"/>中的内容，是以頁面将不在“This is content1”而顯示“This content1 has been replaced”

SiteMesh的一個重要特性是使用原始HTML的meta标簽（例如<meta name="foo" content="bar">）從基礎頁面傳遞資訊到裝飾器。作為一個例子，下面我們使用一個meta标簽來定義HTML頁面的作者。

< html > 
     < meta name = " author "  content = " [email protected] " > 
     < head > 
         < title > Simple Document </ title > 
     </ head > 
     < body > 
        Hello World !   < br  /> 
         <%=   1 + 1   %> 
     </ body > 
</ html >

我們定義一個“smart”裝飾器來研究meta标簽，如果出現這個标簽，則可以得到一個相應的HTML：

<% @ taglib uri = " sitemesh-decorator "  prefix = " decorator "   %> 
< decorator:usePage id = " myPage "   /> 
< html >
     < head > 
         < title > 
            My Site  -   < decorator:title  default = " Welcome! "   /> 
         </ title > 
         < decorator:head  /> 
     </ head > 
     < body > 
         < h1 >< decorator:title  default = " Welcome! "   /></ h1 > 
         < h3 > 
             < a href = " mailto: <decorator:getProperty property= " meta.author "   default= " [email protected] "  /> " > 
                 < decorator:getProperty property = " meta.author "   default = " [email protected] "   /> 
             </ a > 
         </ h3 > 
         < hr  /> 
         < decorator:body  /> 
         < p > 
             < small >   ( < a href = " /?printable=true " > printable version </ a > )   </ small > 
         </ p > 
     </ body > 
</ html >

可以看到我們使用了 getProperty标簽的一個預設屬性——如果沒有指定author，我們就設定其為staff。如果你決定使用這個模型儲存頁面的meta資料，你或許需要和你的開發夥伴一起來确定将使用什麼标簽以及如何使用他們。簡單的，你或許想要使用meta标簽來描述諸如頁面作者及時間戳之類的東西。更複雜一些，你或許會想像XML檔案一樣标準化的管理你的站點導航，同時使用meta标簽來通過頁面節點轉到裝飾器。

參考資料：http://my.oschina.net/thinkinginc/blog/76180

參考資料：http://www.cnblogs.com/mailingfeng/archive/2011/12/21/2296041.html

SiteMesh基本用法及示例

繼續閱讀

龍珠訓練營task04

趕工心得（一）

（C# 程式設計指南）

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

C#多線程——前台線程和背景線程

CSS之折疊菜單

web開發之前後端渲染

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

IE8 CSS設定DIV居中，添加“margin:0 auto”

Small tricks

403 Forbidden，You don't have permission to access / on this server.Forbidden