使用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 發(fā)送請求。

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

大致流程如下圖：

?

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

?

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

?

?????? 表示對系統(tǒng)中所有 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.???????? 創(chuàng)建一個裝飾器 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