?
用Sitemesh控制頁(yè)面布局
摘要
? 我們?cè)陂_(kāi)發(fā)Web應(yīng)用特別是J2EE應(yīng)用的時(shí)候，由于Web頁(yè)面是由不同的人所開(kāi)發(fā)，所以開(kāi)發(fā)出來(lái)的界面通常是千奇百怪，通常讓項(xiàng)目管理人員苦笑不得。隨著項(xiàng)目的進(jìn)一步的開(kāi)發(fā)，要求統(tǒng)一的界面風(fēng)格的緊迫性逐漸浮現(xiàn)了出來(lái)。
雖說(shuō)我們可以使用Struts的Ttiles，但Tiles有著它的不足之處。本文介紹了一個(gè)基于Web頁(yè)面的布局、裝飾以及應(yīng)用整合的框架Sitemesh。它能幫助你為你的應(yīng)用創(chuàng)建一致的外觀。
主要內(nèi)容
1.Sitemesh簡(jiǎn)介
2.與Strust Tiles比較
3.基本原理
4.簡(jiǎn)單例子
5.總結(jié)
6.參考資料
1.Sitemesh簡(jiǎn)介
?????? Sitemesh是由一個(gè)基于Web頁(yè)面布局、裝飾以及與現(xiàn)存Web應(yīng)用整合的框架。它能幫助我們?cè)谟纱罅宽?yè)面構(gòu)成的項(xiàng)目中創(chuàng)建一致的頁(yè)面布局和外觀，如一致的導(dǎo)航條，一致的banner，一致的版權(quán)，等等。它不僅僅能處理動(dòng)態(tài)的內(nèi)容，如jsp，php，asp等產(chǎn)生的內(nèi)容，它也能處理靜態(tài)的內(nèi)容，如htm的內(nèi)容，使得它的內(nèi)容也符合你的頁(yè)面結(jié)構(gòu)的要求。甚至于它能將HTML文件象include那樣將該文件作為一個(gè)面板的形式嵌入到別的文件中去。所有的這些，都是GOF的Decorator模式的最生動(dòng)的實(shí)現(xiàn)。盡管它是由java語(yǔ)言來(lái)實(shí)現(xiàn)的，但它能與其他Web應(yīng)用很好地集成。
2.與Strust Tiles比較
?? 從使用角度來(lái)看，Tiles似乎是Sitemesh標(biāo)簽的一個(gè)翻版。其實(shí)sitemesh最強(qiáng)的一個(gè)特性是sitemesh將decorator模式用在過(guò)濾器上。任何需要被裝飾的頁(yè)面都不知道它要被誰(shuí)裝飾，所以它就可以用來(lái)裝璜來(lái)自php、asp、CGI等產(chǎn)生的頁(yè)面了。你可以定義若干個(gè)裝飾器，根據(jù)參數(shù)動(dòng)態(tài)地選擇裝飾器，產(chǎn)生動(dòng)態(tài)的外觀以滿足你的需求。它也有一套功能強(qiáng)大的屬性體系，它能幫助你構(gòu)建功能強(qiáng)大而靈活的裝飾器。相比較而言，在這方面Tiles就遜色許多。
3.基本原理
?? 一個(gè)請(qǐng)求到服務(wù)器后，如果該請(qǐng)求需要sitemesh裝飾，服務(wù)器先解釋被請(qǐng)求的資源，然后根據(jù)配置文件獲得用于該請(qǐng)求的裝飾器，最后用裝飾器裝飾被請(qǐng)求資源，將結(jié)果一同返回給客戶端瀏覽器。
下邊是由Jsp和CGI產(chǎn)生的兩個(gè)頁(yè)面，它們通過(guò)sitemesh裝飾后，形成了一致的用戶界面。
4.簡(jiǎn)單例子?
環(huán)境說(shuō)明：
Windows2k+ 、 Tomcat4.0+
1． ? ? 安裝：
將 sitemesh-2.1.jar 復(fù)制到 lib 目錄下；修改 web.xml 文件，也就是在 web.xml 中加入粗傾體標(biāo)記的部分；
|
<?xml version="1.0" encoding="GB2312"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> <web-app> <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> </web-app> |
?
2． ? ? 建立一個(gè)目錄，名字叫 decorators ，當(dāng)然你也可以取別的，用于放裝飾器 ( 也就是一個(gè)使用了 sitemesh 標(biāo)簽的 jsp 文件 ) 用 ;
3． ? ? 定義一個(gè)你的模板并把它放到 decorators 目錄下，我的文體名稱叫： mymain.jsp 文件內(nèi)容如下：
|
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %> <%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %> <html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>AP - ? <decorator:title default="Welcome to architecture pub!" /> </title> <decorator:head /> </head> <body> <table border="0" cellpadding="2" width="100%" height="151"> ? ? <tr> ??? ? <td width="20%" height="74"> ????? ? <p align="center"><font color="#000080" size="5">Test sitemesh</font></td> ??? ? <td width="73%" height="74"></td> ? ? </tr> ? ? <tr> <td width="20%" height="28" bgcolor="#F3F3F3" valign="top" > <page:applyDecorator page="/menu.jsp" name="panel" /> </td> ??? ? <td width="73%" height="28" bgcolor="#BED6FA"> <decorator:body /> </td> ? ? </tr> ? ? <tr> ??? ? <td width="100%" height="31" colspan="2" bgcolor="#F1F0ED"> ????? ? <p align="center">Powered by gagaghost</td> ? ? </tr> </table> </body> </html> |
?
說(shuō)明：
<decorator:title default="Welcome to test sitemesh!" /> ：讀取被裝飾頁(yè)面的標(biāo)題，并給出了默認(rèn)標(biāo)題。
<decorator:head /> ：讀取被裝飾頁(yè)面的 <head> 中的內(nèi)容；
<page:applyDecorator page="/menu.jsp" name="panel" /> ：把 menu.jsp 文件用 panel 指定的裝飾器裝飾，并把結(jié)果插入到該位置；
<decorator:body /> ：讀取被裝飾頁(yè)面的 <body> 中的內(nèi)容；
當(dāng)然還有很多的標(biāo)簽，這里不再詳細(xì)描述。
4． ? ? 在 docorators.xml 文件里配置剛寫好的模板 mymain.jsp ，內(nèi)容如下：
|
<?xml version="1.0" encoding="ISO-8859-1"?> <decorators defaultdir="/decorators"> ??? ? <decorator name="main" page="mymain.jsp"> ??????? ? <pattern>/*</pattern> </decorator> ? ??? ? <decorator name="panel" page="panel.jsp"/> ??? ? <decorator name="printable" page="printable.jsp"/> </decorators> |
這里我是把對(duì)所有的請(qǐng)求都用 mymail.jsp 來(lái)裝飾。
好了， run 一下你的“小板凳”！你會(huì)看到如下結(jié)果：
?5.總結(jié)
??? 使用sitemesh給我們帶來(lái)的是不僅僅是頁(yè)面結(jié)構(gòu)問(wèn)題，它的出現(xiàn)讓我們有更多的時(shí)間去關(guān)注底層業(yè)務(wù)邏輯，而不是整個(gè)頁(yè)面的風(fēng)格和結(jié)構(gòu)。它讓我們擺脫了大量用include方式復(fù)用頁(yè)面尷尬局面，它也提供了很大的靈活性以及給我們提供了整合異構(gòu)Web系統(tǒng)頁(yè)面的一種方案。我們期望它在未來(lái)的版本中會(huì)有更多的特性出現(xiàn)。
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
