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