webwork的開發團隊opensymphony提供了一種優雅的解決頁面布局的方法sitemesh。
sitemesh應用Decorator模式,用filter截取request和response,把頁面組件head,content,banner
結合為一個完整的視圖。通常我們都是用include標簽在每個jsp頁面中來不斷的包含各種header,
stylesheet, scripts and footer,現在,在sitemesh的幫助下,我們可以開心的刪掉他們了
下邊是創建一個簡單實例的步驟:
1,新建一個標準的web工程叫sitemesh
在WebRoot下新建一個index.jsp,內容如下
1
<% @ page contentType = " text/html; charset=utf-8 " %>
2
this is index.jsp.
3
it ' s a simple page
接著在webRoot下新建幾個目錄
style2
login
shared
在login下建立目錄style3
然後把index.jsp分別復制到style2,login/style3,shared下
現在訪問下邊的鏈接:
http://localhost:8080/sitemesh/index.jsp
http://localhost:8080/sitemesh/style2/index.jsp
http://localhost:8080/sitemesh/login/style3/index.jsp
http://localhost:8080/sitemesh/shared/index.jsp
得到的結果是一樣的,那我們如何讓這四個相同的index.jsp有不同的樣式呢。除了每個里邊加入include
還有個解決辦法,就是sitemesh
2,在opensymphony.sourceforge.net下載sitemesh.jar ,sitemesh-decorator.tld,sitemesh-page.tld
三個文件。
復制sitemesh.jar到WEB-INF/lib下,
復制sitemesh-decorator.tld,sitemesh-page.tld到WEB-INF下
把下邊這部分加入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>
<taglib>
<taglib-uri>sitemesh-decorator</taglib-uri>
<taglib-location>/WEB-INF/sitemesh-decorator.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>sitemesh-page</taglib-uri>
<taglib-location>/WEB-INF/sitemesh-page.tld</taglib-location>
</taglib>
--------------------------------------------------------------------------------
在WEB-INF下建立一個decorators.xml,內容如下
excludes代表不使用的部分
其它三個是匹配url,使用style
--------------------------------------------------------------------------
<decorators defaultdir="/decorators">
<excludes>
<pattern>/shared/*</pattern>
</excludes>
<decorator name="style1" page="style1.jsp">
<pattern>/*</pattern>
</decorator>
<decorator name="style2" page="style2.jsp">
<pattern>/style2/*</pattern>
</decorator>
<decorator name="style3" page="style3.jsp">
<pattern>/*/style3/*</pattern>
</decorator>
</decorators>
--------------------------------------------------------------------------
在WebRoot下新建一個目錄decorators
然後在下邊建立三個jsp文件,內容如下
------------------------------------------------------------------
<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="sitemesh-decorator" prefix="decorator" %>
<html>
<head>
<title><decorator:title default="裝飾器頁面..." /></title>
<decorator:head />
</head>
<body>
<p><font color="red">this is style2's header</font></p>
<hr>
<decorator:body />
<hr>
<p><font color="red">this is style1's footer</font></p>
</body>
</html>
------------------------------------------------------------------
<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="sitemesh-decorator" prefix="decorator" %>
<html>
<head>
<title><decorator:title default="裝飾器頁面..." /></title>
<decorator:head />
</head>
<body>
<p><font color="green">this is style2's header</font></p>
<hr>
<decorator:body />
<hr>
<p><font color="green">this is style2's footer</font></p>
</body>
</html>
------------------------------------------------------------------
<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="sitemesh-decorator" prefix="decorator" %>
<html>
<head>
<title><decorator:title default="裝飾器頁面..." /></title>
<decorator:head />
</head>
<body>
<p><font color="blue">this is style3's header</font></p>
<hr>
<decorator:body />
<hr>
<p><font color="blue">this is style3's footer</font></p>
</body>
</html>
------------------------------------------------------------------
再次訪問
http://localhost:8080/sitemesh/index.jsp
http://localhost:8080/sitemesh/style2/index.jsp
http://localhost:8080/sitemesh/login/style3/index.jsp
http://localhost:8080/sitemesh/shared/index.jsp
看到變化了吧。這只是個簡單的展示,仔細思考一下你的需求,你能作出更好的布局方式。
sitemesh真不錯。重要是學習簡單20分種就搞定了