使用SiteMesh簡化網頁布局

?

By Faith.Yan

?????? 2006-7-22

MSN: Yanchaomin@hotmail.com

?

在公司項目使用了 Appfuse ，其帶有 SiteMesh 對于網頁布局簡化讓我感覺很好用，本文旨在對對 Sitemesh 的基本原理和在項目中使用 Sitemesh 的實現流程、使用技巧的介紹。

1.?? 基本原理

SiteMesh 是以 Servlet 2.3API 為基礎。它包含一個引擎，用來解析輸出的網頁或者網頁片段，決定是否需要應用裝飾器以及合并合適的裝飾器。

?????? SiteMesh 與應用內容無關，適用的內容格式包括 Html 、 JSP 、 Servlet 、 XSL ，甚至 CGI 。

?

2.?? 實現流程

1）? 當為 Servlet 容器指定一個 Http 請求時， SiteMesh 截取請求，使用一個 Servlet Filter ，然后捕捉 Html 結果。

2）? 然后這個 Html 被解析，并且任何相關的內容都被提取到一個 Page 對象中。

3）? 詢問 DecoratorMapper 來確定那一個裝飾器需要被應用。

4）? Servlet 向包含裝飾器的 JSP 發送請求。

5 ）裝飾器生成帶有從 page 對象中獲得的內容的 Html 布局。

大致流程如下圖：

?

???????? Sitemesh 這樣的好處是，所有具體業務頁面的開發者無需考慮該頁面將處在最終輸出頁面的那個位置。無需 include 一大堆頁面，以后如果系統整體改版，那么只需要改寫裝飾器頁面及重新配置裝飾規則即可完成，方便快捷，可維護性極好。

?

3.?? 在項目中使用 Sitemesh

1.???????? 將 sitemesh_[version].jar 包加到 WEB-INF\lib 下

2.???????? 在 web.xml 中增加

?

??????? < filter > ?

?????????????? < 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 > /* </ url-pattern > ?

??????? </ filter-mapping > ?

?

?????? 表示對系統中所有 url 請求均使用 sitemesh Filter 進行攔截。

3.???????? 在 WEB-INF 下配置 sitemesh.xml 和 decorator.xml 配置文件。

Sitemesh.xml

?

< sitemesh > ?

???? < property? name ="decorators-file" ?value ="/WEB-INF/decorators.xml" /> ?

???? < excludes? file ="${decorators-file}" /> ?

???? < page-parsers > ?

???????? < parser? default ="true" ?class ="com.opensymphony.module.sitemesh.parser.HTMLPageParser" /> ?

???????? < parser? content-type ="text/html" ?

class ="com.opensymphony.module.sitemesh.parser.HTMLPageParser" /> ?

???????? < parser? content-type ="text/html;charset=ISO-8859-1" ?

class ="com.opensymphony.module.sitemesh.parser.HTMLPageParser" /> ?

???? </ page-parsers > ?

???? < decorator-mappers > ?

?????????????????? <!-- ?for?print? --> ?

???????? < 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.ConfigDecoratorMapper" > ?

???????????? < param? name ="config" ?value ="${decorators-file}" /> ?

???????? </ mapper > ?

???? </ decorator-mappers > ?

</ sitemesh > ?

?

?

Decorator.xml

?

< decorators? defaultdir ="/decorators" > ?

???? < excludes > ?

???????? < pattern > /demos/* </ pattern > ?

???????? < pattern > /resources/* </ pattern > ?

???????? < pattern > /test* </ pattern > ?

???????? < pattern > /FCKeditor/* </ pattern > ?

???? </ excludes > ?

????????? <!-- ?decorator?for?print(has?parameter:?printable=true) --> ?

???? < decorator? name ="printable" ?page ="decPrintable.jsp" /> ?

????????? < decorator? name ="login" ?page ="decLogin.jsp" > ?

??????????????????? < pattern > *login* </ pattern > ?????????? <! —url?映射模式?-- > ?

????????? </ decorator > ?

???? < decorator? name ="default" ?page ="decDefault.jsp" > ?

???????? < pattern > /* </ pattern > ???????????????? <! —?缺省的裝飾器?-- > ?

???? </ decorator > ?

</ decorators > ?

?

在 sitemesh.xml 中配置了兩個 DecoratorMapper ： PrintableDecoratorMapper 和 ConfigDecoratorMapper 。

PrintableDecoratorMapper 是供打印專用，在 url 后加上 printable=true 即會使用 decorator.xml 中指定的 printable 裝飾器來對頁面進行裝飾，一般來說打印頁面是只需要打印本頁面的內容，其余的如頭、腳、導航欄、左右菜單等是不需要打印的，通過裝飾器可以輕松實現打印頁面的過濾。

4.???????? 創建一個裝飾器 JSP 頁面，我建議所有裝飾器頁面放到 decorators 目錄，并且以 dec[ 功能 ].jsp 作為命名方式，如 decPrintable.jsp 、 decDefault.jsp 。

下面是一個裝飾器的代碼：

?

<! DOCTYPE?html?PUBLIC? " -//W3C//DTD?XHTML?1.0?Transitional//EN "
???? " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
????????
<%-- ?Include?common?set?of?tag?library?declarations? for ?each?layout? --%>
<% @?include?file = " /common/taglibs.jsp " %>

< html?xmlns = " http://www.w3.org/1999/xhtml " ?xml:lang = " en " >
???? < head >
???????? < decorator:head />
???? </ head >
< body
< decorator:getProperty?property = " body.id " ?writeEntireProperty = " true " />
< decorator:getProperty?property = " body.onload " ?writeEntireProperty = " true " />
< decorator:getProperty?property = " body.onunload " ?writeEntireProperty = " true " />
> ??????
???????? <% @?include?file = " /common/header.jsp " %>
?????????? ? < h1 >< decorator:getProperty?property = " page.heading " /></ h1 > ?
???????????? <% @?include?file = " /common/messages.jsp " ? %>
???????????? < decorator:body />
???????? < jsp:include?page = " /common/footer.jsp " />
</ body >
</ html >

?

注意其 <decorator:…> 標簽，這些標簽將被裝飾的 page 頁面的相應內容作為屬性傳入。 Page 頁面的相關內容將放在 decorator 標簽所指定的位置。

Title ：標題

Head ：頭部，一般是公共的 js 、 css 及 meta 。

Body ：被裝飾的 page 的主體內容。

5 、 Sitemesh 通過在 sitemesh.xml 中配置 DecoratorMapper 配置映射器，通過在 decorator.xml 中配置裝飾器文件及其匹配方式。當有頁面需要輸出到客戶端時，將根據這些配置選擇相應的裝飾器來進行裝飾，將裝飾結果返回給客戶界面。

?

4.?? 參考資料

關于 Sitemesh 的 api 及詳細使用說明可以參看其官方網站

http://www.opensymphony.com/sitemesh