| Blog信息 |
|
blog名称:
日志总数:1304
评论数量:2242
留言数量:5
访问次数:7593507
建立时间:2006年5月29日 |
| |
|
 [OpenSymphony]优雅的解决web布局的问题 -- sitemesh的使用
软件技术
lhwork 发表于 2006/12/6 9:44:31 |
| 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
500)this.width=500'>
<%
@ page contentType
=
"
text/html; charset=utf-8
"
%>
2
500)this.width=500'>
this
is index.jsp.
3
500)this.width=500'>it
'
s a simple page
接着在webRoot下新建几个目录style2loginshared在login下建立目录style3然後把index.jsp分别复制到style2，login/style3,shared下现在访问下边的链接:http://localhost:8080/sitemesh/index.jsphttp://localhost:8080/sitemesh/style2/index.jsphttp://localhost:8080/sitemesh/login/style3/index.jsphttp://localhost:8080/sitemesh/shared/index.jsp得到的结果是一样的，那我们如何让这四个相同的index.jsp有不同的样式呢。除了每个里边加入include还有个解决办法，就是sitemesh2,在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.jsphttp://localhost:8080/sitemesh/style2/index.jsphttp://localhost:8080/sitemesh/login/style3/index.jsphttp://localhost:8080/sitemesh/shared/index.jsp看到变化了吧。这只是个简单的展示，仔细思考一下你的需求，你能作出更好的布局方式。sitemesh真不错。重要是学习简单20分种就搞定了 |
|
|