1. 程式人生 > >SiteMesh頁面裝飾器的配置和使用

SiteMesh頁面裝飾器的配置和使用

1 .  Sitemesh 定義

         是一個網頁佈局和修飾的框架,利用它可以將網頁的內容和頁面結構分離,以達到頁面結構共享的目的。 

 SiteMesh是OpenSymphony團隊開發的JEE框架之一,它是一個非常優秀的頁面裝飾器框架,它通過對所有的使用者請求進行過濾,並對伺服器向客戶端響應也進行過濾,從而給原始的伺服器響應加入一定的裝飾,可以是header,footer等,然後將經過裝飾後的頁面送回瀏覽者.對於被裝飾的頁面而言,它無需知道自身被誰裝飾,也無從知道自身被誰裝飾,SiteMesh通過配置檔案來配置指定的裝飾器,用於過濾某些頁面,則該裝飾器會裝飾這些頁面,從而提供更好的頁面效果,通過SiteMesh的頁面裝飾,可以提供更好的程式碼複用,所有的頁面裝飾效果耦合在目標頁面中,無需使用include指令來顯式包含裝飾效果,目標頁面與裝飾頁面完全分高.提供更好的解耦,而且可以應用中所有的頁面都使用相同的裝飾頁面,整個Web應用會有更統一的風格,會提供更好的整體效果.

SiteMesh通過Filter來擷取request和response,然後給原始的頁面加入一定的裝飾,再把結果返回給客戶端.

2 . Sitemesh 3 下載

最新版本:3.0.0-SNAPSHOT

② maven:

1 <dependency>
2   <groupId>org.sitemesh</groupId>
3   <artifactId>sitemesh</artifactId>
4   <version>3.0.0</version>
5 </dependency>

3 . 配置 Sitemesh 3 過濾器

在 web.xml 中新增 Sitemesh Filter: 

複製程式碼
 1 <web-app>
 2 
 3   ...
 4 
 5   <filter>
 6     <filter-name>sitemesh</filter-name>
 7     <filter-class>org.sitemesh.config.ConfigurableSiteMeshFilter</filter-class>
 8   </filter>
 9   <filter-mapping>
10     <filter-name
>sitemesh</filter-name> 11 <url-pattern>/*</url-pattern> 12 </filter-mapping> 13 14 </web-app>
複製程式碼

4 . 準備兩個頁面:demo.html 和 decorator.html

① demo.html - “被裝飾的頁面”,實際要呈現的內容頁。

複製程式碼
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>內容頁的標題</title>
5 </head>
6 <body>
7     內容頁的body部分
8 </body>
9 </html>
複製程式碼

② decorator.html - “裝飾頁面”,所謂的“母版頁”。

複製程式碼
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>
 5     <sitemesh:write property='title' /> - ltcms
 6 </title>
 7 <sitemesh:write property='head' />
 8 </head>
 9 <body>
10     <header>header</header>
11     <hr />
12     demo.html的title將被填充到這兒:
13     <sitemesh:write property='title' /><br />
14     demo.html的body將被填充到這兒:
15     <sitemesh:write property='body' />
16     <hr />
17     <footer>footer</footer>
18 </body>
19 </html>
複製程式碼

5 . 新增 /WEB-INF/sitemesh3.xml

複製程式碼
1 <?xml version="1.0" encoding="UTF-8"?>
2 <sitemesh>
3     <!-- 指明滿足“/*”的頁面,將被“/WEB-INF/views/decorators/decorator.html”所裝飾 -->
4     <mapping path="/*" decorator="/WEB-INF/views/decorators/decorator.html" />
5 
6     <!-- 指明滿足“/exclude.jsp*”的頁面,將被排除,不被裝飾 -->
7     <mapping path="/exclude.jsp*" exclue="true" />
8 </sitemesh>
複製程式碼

6 . 執行效果

訪問 demo.html 頁面,實際效果如下:

7 . sitemesh3.xml 配置詳解

複製程式碼
 1 <sitemesh>
 2     <!--預設情況下,
 3         sitemesh 只對 HTTP 響應頭中 Content-Type 為 text/html 的型別進行攔截和裝飾,
 4         我們可以新增更多的 mime 型別-->
 5   <mime-type>text/html</mime-type>
 6   <mime-type>application/vnd.wap.xhtml+xml</mime-type>
 7   <mime-type>application/xhtml+xml</mime-type>
 8   ...
 9   
10   <!-- 預設裝飾器,當下面的路徑都不匹配時,啟用該裝飾器進行裝飾 -->
11   <mapping decorator="/default-decorator.html"/>
12   
13   <!-- 對不同的路徑,啟用不同的裝飾器 -->
14   <mapping path="/admin/*" decorator="/another-decorator.html"/>
15   <mapping path="/*.special.jsp" decorator="/special-decorator.html"/>
16 
17   <!-- 對同一路徑,啟用多個裝飾器 -->
18   <mapping>
19     <path>/articles/*</path>
20     <decorator>/decorators/article.html</decorator>
21     <decorator>/decorators/two-page-layout.html</decorator>
22     <decorator>/decorators/common.html</decorator>
23   </mapping>
24 
25   <!-- 排除,不進行裝飾的路徑 -->
26   <mapping path="/javadoc/*" exclue="true"/>
27   <mapping path="/brochures/*" exclue="true"/>
28   
29   <!-- 自定義 tag 規則 -->
30   <content-processor>
31     <tag-rule-bundle class="com.something.CssCompressingBundle" />
32     <tag-rule-bundle class="com.something.LinkRewritingBundle"/>
33   </content-processor>
34   ...
35 
36 </sitemesh>
複製程式碼

8 . 自定義 tag 規則

Sitemesh 3 預設只提供了 body,title,head 等 tag 型別,我們可以通過實現 TagRuleBundle 擴充套件自定義的 tag 規則:

複製程式碼
 1 public class MyTagRuleBundle implements TagRuleBundle {
 2     @Override
 3     public void install(State defaultState, ContentProperty contentProperty,
 4             SiteMeshContext siteMeshContext) {
 5         defaultState.addRule("myHeader", new ExportTagToContentRule(contentProperty.getChild("myHeader"), false));
 6         
 7     }
 8     
 9     @Override
10     public void cleanUp(State defaultState, ContentProperty contentProperty,
11             SiteMeshContext siteMeshContext) {
12     }
13 }
複製程式碼

最後在 sitemesh3.xml 中配置即可:

1 <content-processor>
2     <tag-rule-bundle class="com.lt.common.ext.sitemesh3.MyTagRuleBundle" />
3 </content-processor>