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