DANCE WITH JAVA

开发出高质量的系统

常用链接

统计

积分与排名

好友之家

最新评论

优雅的解决web布局的问题 -- sitemesh的使用

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分种就搞定了

posted on 2006-12-05 17:17 dreamstone 阅读(4026) 评论(1)  编辑  收藏 所属分类: web框架

评论

# re: 优雅的解决web布局的问题 -- sitemesh的使用 2006-12-06 10:26 loocky

sitemesh的编码有些问题,我在移动的一个项目中用过,SITEmesh 主要用FILTER来DECORATE页面,其实很不错的,避免了FRAME,很不错的  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: