天天看點

優雅的解決web布局的問題 -- sitemesh的使用

[size=medium]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>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分種就搞定了[/size]

繼續閱讀