SiteMesh：一個(gè)優(yōu)于A(yíng)pache Tiles的Web頁(yè)面布局、裝飾框架
Posted on 2007-09-28 15:34 kangxm 閱讀(163) 評論(0) 編輯 收藏 所屬分類(lèi): J2EE一、SiteMesh項目簡(jiǎn)介
OS(OpenSymphony)的SiteMesh是一個(gè)用來(lái)在JSP中實(shí)現頁(yè)面布局和裝飾（layout and decoration）的框架組件，能夠幫助網(wǎng)站開(kāi)發(fā)人員較容易實(shí)現頁(yè)面中動(dòng)態(tài)內容和靜態(tài)裝飾外觀(guān)的分離。
Sitemesh是由一個(gè)基于Web頁(yè)面布局、裝飾以及與現存Web應用整合的框架。它能幫助我們在由大
量頁(yè)面構成的項目中創(chuàng )建一致的頁(yè)面布局和外觀(guān)，如一致的導航條，一致的banner，一致的版權，等等。
它不僅僅能處理動(dòng)態(tài)的內容，如jsp，php，asp等產(chǎn)生的內容，它也能處理靜態(tài)的內容，如htm的內容，
使得它的內容也符合你的頁(yè)面結構的要求。甚至于它能將HTML文件象include那樣將該文件作為一個(gè)面板
的形式嵌入到別的文件中去。所有的這些，都是GOF的Decorator模式的最生動(dòng)的實(shí)現。盡管它是由java語(yǔ)言來(lái)實(shí)現的，但它能與其他Web應用很好地集成。
官方：http://www.opensymphony.com/sitemesh/
下載地址：http://www.opensymphony.com/sitemesh/download.action 目前的最新版本是Version 2.3；
二、為什么要使用SiteMesh?
我們的團隊開(kāi)發(fā)J2EE應用的時(shí)候，經(jīng)常會(huì )碰到一個(gè)比較頭疼的問(wèn)題：
由于Web頁(yè)面是由不同的人所開(kāi)發(fā)，所以開(kāi)發(fā)出來(lái)的界面通常是千奇百怪，通常讓項目管理人員苦笑不得。
而實(shí)際上，任何一個(gè)項目都會(huì )要求界面的統一風(fēng)格和美觀(guān)，既然風(fēng)格統一，那就說(shuō)明UI層肯定有很多可以抽出來(lái)
共用的靜態(tài)或動(dòng)態(tài)部分；如何整合這些通用的靜態(tài)或動(dòng)態(tài)UI呢？Apache Tiles框架站了出來(lái)很好的解決了這一問(wèn)題，
再加上他與struts的完美集成，導致大小項目都把他作為UI層的首選框架，
但是：
Tiles確實(shí)有著(zhù)它很多的不足之處,下文我會(huì )介紹,本文想說(shuō)的是，除了Apache Tiles框架,其實(shí)我們還有更好的解
決方案，那就是:SiteMesh；
本文
介紹了一個(gè)基于Web頁(yè)面的布局、裝飾以及應用整合的框架Sitemesh，它能幫助你為你的應用創(chuàng )建一致的外觀(guān)，
很好的取代Apache Tiles;
三、SiteMesh VS Apache Tiles
用過(guò)struts的朋友應該對Apache Tiles的不會(huì )陌生，我曾經(jīng)有一篇文章介紹過(guò)struts中tiles框架的組合與繼承，
現在怎么看怎么覺(jué)得復雜;
從使用角度來(lái)看，Tiles似乎是Sitemesh標簽<page:applyDecorator>的一個(gè)翻版。其實(shí)sitemesh最強的
一個(gè)特性是sitemesh將decorator模式用在過(guò)濾器上。任何需要被裝飾的頁(yè)面都不知道它要被誰(shuí)裝飾，所以它就
可以用來(lái)裝璜來(lái)自php、asp、CGI等產(chǎn)生的頁(yè)面了。你可以定義若干個(gè)裝飾器，根據參數動(dòng)態(tài)地選擇裝飾器，
產(chǎn)生動(dòng)態(tài)的外觀(guān)以滿(mǎn)足你的需求。它也有一套功能強大的屬性體系，它能幫助你構建功能強大而靈活的裝飾器。
相比較而言，在這方面Tiles就遜色許多。
個(gè)人覺(jué)得在團隊開(kāi)發(fā)里面，Apache Tiles框架會(huì )導致所有人不僅僅要了解并且清楚Apache Tiles的存在，
并且要特別熟悉每一個(gè)Tiles layout模板的作用，否則就可能出現用錯模板的情況；除此之外，每個(gè)人涉及到
的所有WEB頁(yè)面都需要去配置文件里面逐個(gè)配置，不僅麻煩出錯的幾率還高；
而以上所有的不足都是SiteMesh所不存在的；
四、SiteMesh的基本原理
一個(gè)請求到服務(wù)器后，如果該請求需要sitemesh裝飾，服務(wù)器先解釋被請求的資源，然后根據配置文件
獲得用于該請求的裝飾器，最后用裝飾器裝飾被請求資源，將結果一同返回給客戶(hù)端瀏覽器。
五、如何使用SiteMesh
這里以struts2+spring2+hibernate3構架的系統為例
1、下載SiteMesh
下載地址：http://www.opensymphony.com/sitemesh/download.action 目前的最新版本是Version 2.3；
2、在工程中引入SiteMesh的必要jar包，和struts2-sitemesh-plugin-2.0.8.jar；
3、修改你的web.xml,在里面加入sitemesh的過(guò)濾器，示例代碼如下：
注意過(guò)濾器的位置：應該在struts2的org.apache.struts2.dispatcher.FilterDispatcher過(guò)濾器之前org.apache.struts2.dispatcher.ActionContextCleanUp過(guò)濾器之后，否則會(huì )有問(wèn)題；
4、在下載的SiteMesh包中找到sitemesh.xml，(\sitemesh-2.3\src\example-webapp\WEB-INF目錄下就有)
將其拷貝到/WEB-INF目錄下；
5、在sitemesh.xml文件中有一個(gè)property結點(diǎn)(如下)，該結點(diǎn)指定了decorators.xml在工程中的位置，讓sitemesh.xml能找到他;
按照此路徑新建decorators.xml文件，當然這個(gè)路徑你可以任意改變，只要property結點(diǎn)的value值與其匹配就行；
6、在WebRoot目錄下新建decorators目錄，并在該目錄下新建一個(gè)模板jsp，根據具體項目風(fēng)格編輯該模板，
如下示例：我的模板：main.jsp
<%@taglib prefix="decorator"
uri="http://www.opensymphony.com/sitemesh/decorator"%>
<%@taglib prefix="page" uri="http://www.opensymphony.com/sitemesh/page"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
%>
<html>
<head>
<title><decorator:title default="kangxm test" />
</title>
<!-- 頁(yè)面Head由引用模板的子頁(yè)面來(lái)替換 -->
<decorator:head />
</head>
<body id="page-home">
<div id="page-total">
<div id="page-header">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div class="topFunc">
我的賬戶(hù)
|
退出
</div>
</td>
</tr>
</table>
</div>
</div>
<!-- end header -->
<!-- Menu Tag begin -->
<div id="page-menu" style="margin-top: 8px; margin-bottom: 8px;">
<div>
這里放菜單
</div>
</div>
<!-- Menu Tag end -->
<div id="page-content" class="clearfix">
<center>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<decorator:body /><!-- 這里的內容由引用模板的子頁(yè)面來(lái)替換 -->
</td>
</tr>
</table>
</center>
</div>
<!-- end content -->
<div id="page-footer" class="clearfix">
這里放頁(yè)面底部
<!-- end footer -->
</div>
<!-- end page -->
</body>
</html>
這就是個(gè)簡(jiǎn)單的模板，頁(yè)面的頭和腳都由模板里的靜態(tài)HTML決定了，主頁(yè)面區域用的是<decorator:body />標簽；
也就是說(shuō)凡是能進(jìn)入過(guò)濾器的請求生成的頁(yè)面都會(huì )默認加上模板上的頭和腳，然后頁(yè)面自身的內容將自動(dòng)放到<decorator:body />標簽所在位置；
<decorator:title default="Welcome to test sitemesh!" />：讀取被裝飾頁(yè)面的標題，并給出了默認標題。
<decorator:head />：讀取被裝飾頁(yè)面的<head>中的內容；
<decorator:body />：讀取被裝飾頁(yè)面的<body>中的內容；
7、說(shuō)到這里大家就要想了，那如果某個(gè)特殊的需求請求路徑在過(guò)濾器的范圍內，但又不想使用模板怎么辦？
你總不能這么不講道理吧！
大家放心吧，SiteMesh早就考慮到這一點(diǎn)了，上面第5步說(shuō)道的decorators.xml這個(gè)時(shí)候就起到作用了！
下面是我的decorators.xml：
<pattern>/login/*</pattern>
decorators.xml有兩個(gè)主要的結點(diǎn)：
decorator結點(diǎn)指定了模板的位置和文件名，通過(guò)pattern來(lái)指定哪些路徑引用哪個(gè)模板
excludes結點(diǎn)則指定了哪些路徑的請求不使用任何模板
如上面代碼，/index.jsp和凡是以/login/開(kāi)頭的請求路徑一律不使用模板；
另外還有一點(diǎn)要注意的是：decorators結點(diǎn)的defaultdir屬性指定了模板文件存放的目錄;
六、實(shí)戰感受
剛剛做完一個(gè)用到sitemesh的項目，跟以前用tiles框架相比，最大的感受就是簡(jiǎn)單，系統設計階段
就把模板文件和sitemesh框架搭好了！哪些頁(yè)面使用框架哪些不使用，全部都通過(guò)UI Demo很快就定義出來(lái)了；
在接下來(lái)的開(kāi)發(fā)中所有成員幾乎感受不到sitemesh的存在，各自?xún)H僅關(guān)心自己的模塊功能實(shí)現；
使用sitemesh給我們帶來(lái)的是不僅僅是頁(yè)面結構問(wèn)題，它的出現讓我們有更多的時(shí)間去關(guān)注底層業(yè)務(wù)
邏輯，而不是整個(gè)頁(yè)面的風(fēng)格和結構。它讓我們擺脫了大量用include方式復用頁(yè)面尷尬局面，也避免了tiles
框架在團隊開(kāi)發(fā)中的復雜度，它還提供了很大的靈活性以及給我們提供了整合異構Web系統頁(yè)面的一種方案。
