使用SiteMesh簡化網(wǎng)頁布局

?

By Faith.Yan

?????? 2006-7-22

MSN: Yanchaomin@hotmail.com

?

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

1.?? 基本原理

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

?????? SiteMesh 與應(yīng)用內(nèi)容無關(guān)，適用的內(nèi)容格式包括 Html 、 JSP 、 Servlet 、 XSL ，甚至 CGI 。

?

2.?? 實(shí)現(xiàn)流程

1）? 當(dāng)為 Servlet 容器指定一個(gè) Http 請求時(shí)， SiteMesh 截取請求，使用一個(gè) Servlet Filter ，然后捕捉 Html 結(jié)果。

2）? 然后這個(gè) Html 被解析，并且任何相關(guān)的內(nèi)容都被提取到一個(gè) Page 對象中。

3）? 詢問 DecoratorMapper 來確定那一個(gè)裝飾器需要被應(yīng)用。

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

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

大致流程如下圖：

?

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

?

3.?? 在項(xiàng)目中使用 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 進(jìn)行攔截。

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 中配置了兩個(gè) DecoratorMapper ： PrintableDecoratorMapper 和 ConfigDecoratorMapper 。

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

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

下面是一個(gè)裝飾器的代碼：

?

<! 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:…> 標(biāo)簽，這些標(biāo)簽將被裝飾的 page 頁面的相應(yīng)內(nèi)容作為屬性傳入。 Page 頁面的相關(guān)內(nèi)容將放在 decorator 標(biāo)簽所指定的位置。

Title ：標(biāo)題

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

Body ：被裝飾的 page 的主體內(nèi)容。

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

?

4.?? 參考資料

關(guān)于 Sitemesh 的 api 及詳細(xì)使用說明可以參看其官方網(wǎng)站

http://www.opensymphony.com/sitemesh