SiteMesh的使用

一、SiteMesh簡介

iteMesh是由一個基於Web頁面佈局、裝飾以及與現存Web應用整合的框架。它能幫助我們在由大量頁面構成的項目中創建一致的頁面佈局和外觀,如一致的導航條,一致的banner,一致的版權,等等。 它不僅僅能處理動態的內容,如jsp,php,asp等產生的內容,它也能處理靜態的內容,如htm的內容,使得它的內容也符合你的頁面結構的要求。甚至於它能將HTML文件象include那樣將該文件作爲一個面板的形式嵌入到別的文件中去。所有的這些,都是GOF的Decorator模式的最生動的實現。儘管它是由java語言來實現的,但它能與其他Web應用很好地集成。


二、SiteMesh原理

SiteMesh框架是OpenSymphony團隊開發的一個非常優秀的頁面裝飾器框架,它通過對用戶請求進行過濾,並對服務器向客戶端響應也進行過濾,然後給原始頁面加入一定的裝飾(header,footer等),然後把結果返回給客戶端。通過SiteMesh的頁面裝飾,可以提供更好的代碼複用,所有的頁面裝飾效果耦合在目標頁面中,無需再使用include指令來包含裝飾效果,目標頁與裝飾頁完全分離,如果所有頁面使用相同的裝飾器,可以是整個Web應用具有統一的風格。


三、SiteMesh簡單例子

1.首先引入pom依賴包,如下:

<dependency>
<groupId>opensymphony</groupId>
<artifactId>sitemesh</artifactId>
<version>2.4.2</version>
</dependency>


2.在web.xml配置sitemesh,如下:

<filter>
<filter-name>sitemeshFilter</filter-name>
<filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>sitemeshFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>


3.在WEB-INF根目錄下新建decorators.xml文件,包含以下內容:

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

<!-- 這裏的defaultdir是裝飾頁面所在的路徑-->
<decorators defaultdir="/WEB-INF/jsp/common">
<excludes>

<!-- 此處用來定義不需要過濾的頁面-->
<pattern>/static/*</pattern>
<pattern>/cxf/*</pattern>
<pattern>/api/*</pattern>
</excludes>


<!-- 這裏的page是裝飾頁面的文件名稱-->
<decorator name="dashbord" page="INSPINIA_template_new.jsp">

<!-- 需要過濾的頁面-->
<pattern>/workspace/dashboard</pattern>
<pattern>/awards/personalAward</pattern>
</decorator>  
<decorator name="box" page="box_template.jsp">
<pattern>/*/box/*</pattern>
</decorator>
</decorators>


4.INSPINIA_template_new.jsp(裝飾者頁面)代碼如下:

  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3. <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%>  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  5. <html>  
  6.  <!-- 第一個裝飾頁面 -->  
  7.     <head>  
  8.  <!-- 從被裝飾頁面獲取title標籤內容,並設置默認值-->  
  9.  <title><decorator:title default="默認title"/></title>  
  10.  <!-- 從被裝飾頁面獲取head標籤內容 -->  
  11.         <decorator:head/>  
  12.     </head>  
  13.   
  14.     <body>  
  15.        <h2>SiteMesh裝飾header</h2>  
  16.        <hr />  
  17.     <!-- 從被裝飾頁面獲取body標籤內容 -->  
  18.     <decorator:body />  
  19.        <hr />  
  20.        <h2>SiteMesh裝飾footer</h2>  
  21.     </body>  
  22. </html>  

5.創建一個被裝飾着頁面index.jsp,包含以下內容:
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5.  <!-- 第一個被裝飾(目標)頁面  -->  
  6.  <head>  
  7.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  8.  <title>被裝飾(目標)頁面title</title>  
  9.  </head>  
  10.     
  11.  <body>  
  12.  <h4>被裝飾(目標)頁面body標籤內內容。</h4>  
  13.  <h3>使用SiteMesh的好處?</h3>  
  14.  <ul>  
  15.      <li>被裝飾(目標)頁面和裝飾頁面完全分離。</li>  
  16.      <li>做到真正的頁面複用,一個裝飾頁面裝飾多個被裝飾(目標)頁面。</li>  
  17.       <li>更容易實現統一的網站風格。</li>  
  18.       <li>還有。。。</li>  
  19.      </ul>  
  20.  </body>  
  21. </html>  
這樣就能將被裝飾者的頁面(index.jsp)填充到裝飾着頁面上(INSPINIA_template_new.jsp)。

四、總結
從以上的例子,可以看出通過SiteMesh裝飾,不需要在每個目標頁面中將header和footer等共同文件include進去,被裝飾(目標)頁面和裝飾頁面完全分離。
本文只對SiteMesh做一個簡單的介紹,SiteMesh可以Velocity,FreeMarker等開源模板工具結合使用,降低頁面開發複雜度。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章