优雅的解决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
------------------------------------------------------------------------------

  sitemesh
  com.opensymphony.module.sitemesh.filter.PageFilter



  sitemesh
  /*



  sitemesh-decorator
  /WEB-INF/sitemesh-decorator.tld



  sitemesh-page
  /WEB-INF/sitemesh-page.tld

--------------------------------------------------------------------------------
在WEB-INF下建立一个decorators.xml，内容如下
excludes代表不使用的部分
其它三个是匹配url，使用style
--------------------------------------------------------------------------

   
        /shared/*   
   
   
        /*
   
   
        /style2/*
   
   
   
        /*/style3/*
   

--------------------------------------------------------------------------
在WebRoot下新建一个目录decorators
然後在下边建立三个jsp文件,内容如下
------------------------------------------------------------------
<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="sitemesh-decorator" prefix="decorator" %>

 
   
   
 
 
   

this is style2's header

   

---

   
   

---

   

this is style1's footer

 

------------------------------------------------------------------

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="sitemesh-decorator" prefix="decorator" %>


 
   
   
 
 
   

this is style2's header

   

---

   
   

---

   

this is style2's footer

 


------------------------------------------------------------------
<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="sitemesh-decorator" prefix="decorator" %>


 
   
   
 
 
   

this is style3's header

   

---

   
   

---

   

this is style3's footer

 

------------------------------------------------------------------
再次访问
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分种就搞定了