SiteMesh基本用法及示例

时间：2022-08-25 22:16:45

SiteMesh是基于Servlet的filter的，即过滤流。它是通过截取reponse，并进行装饰后再交付给客户。

其中涉及到两个名词： 装饰页面(decorator page)和 “被装饰页面(Content page)" , 即 SiteMesh通过对Content Page的装饰，最终得到页面布局和外观一直的页面，

并返回给客户

运行环境需要：servlet2.3 , JDK1.4 以上。


正常模式下的web访问流程

SiteMesh基本用法及示例

加入SiteMesh装饰的web访问流程 

SiteMesh基本用法及示例

一：搭建SiteMesh环境及简单使用

1.1：准备资源

siteMesh2.4.jar, sitemesh-page.tld , sitemesh-decorator.tld 这个三个必要文件

将jar包复制进/WEB-INF/lib目录下， 两个tld文件导入/WEB-INF下即可

在web.xml中加入siteMesh的filter和taglib

[html]  view plain copy
  1. <filter>  
  2.    <filter-name>sitemesh</filter-name>  
  3.    <filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class>  
  4.  </filter>  
  5.   
  6.  <filter-mapping>  
  7.    <filter-name>sitemesh</filter-name>  
  8.    <url-pattern>/*</url-pattern>  
  9.  </filter-mapping>   
  10.   
  11. <!-- not required for containers that fully support JSP 1.2 -->  
  12.  <taglib>  
  13.    <taglib-uri>sitemesh-page</taglib-uri>  
  14.    <taglib-location>/WEB-INF/lib/sitemesh-page.tld</taglib-location>  
  15.  </taglib>  
  16.  <taglib>  
  17.    <taglib-uri>sitemesh-decorator</taglib-uri>  
  18.    <taglib-location>/WEB-INF/lib/sitemesh-decorator.tld</taglib-location>  
  19.  </taglib>  

1.2 建立decorators.xml

在/WEB-INF下创建decorators.xml文件，siteMesh通过该文件来获知"装饰页面"和"被装饰页面"的映射 

 decorators.xml

[html]  view plain copy
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2.   
  3. <!-- 默认目录 -->  
  4. <decorators defaultdir="/decorators">  
  5.   
  6.     <!-- 缺省装饰页 -->  
  7.     <decorator name="main" page="main.jsp">  
  8.         <pattern>/*</pattern>  
  9.     </decorator>  
  10.        
  11.     <!-- 自定义装饰页,我们下面实例就是这部分起作用 -->  
  12.     <decorator name="mai" page="mai.jsp">  
  13.         <pattern>/mai.html</pattern>  
  14.     </decorator>  
  15.   
  16.     <!-- 只装饰一个页面也可用这种方式定义 -->  
  17.     <decorator name="panel" page="panel.jsp"/>  
  18.   
  19.     <!-- 装饰velocity模板 -->  
  20.     <decorator name="velocity" page="velocity.vm">  
  21.         <pattern>/velocity.html</pattern>  
  22.     </decorator>  
  23.       
  24.     <!-- 装饰freeMarker模板 -->  
  25.     <decorator name="freemarker" page="freemarker.ftl">  
  26.         <pattern>/freemarker.html</pattern>  
  27.     </decorator>  
  28.   
  29.     <decorator name="test" page="test.jsp">  
  30.         <pattern>/agent.jsp</pattern>  
  31.     </decorator>  
  32. </decorators>  

下边是对上边中所缺少的一些补充

[html]  view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <decorators defaultdir="/decorators">    
  3.     <!-- 此处用来定义不需要过滤的页面 -->    
  4.     <excludes>    
  5.     </excludes>    
  6.     
  7.  <!-- 用来定义装饰器要过滤的页面 -->    
  8.     <decorator name="main" page="main.jsp">    
  9.         <pattern>/*</pattern>    
  10.     </decorator>    
  11. </decorators>    


 1.3 装饰页的创建

在web目录(或者webContent)下创建文件夹decorators，在文件夹中建立mai.jsp文件

[html]  view plain copy
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5.   
  6. /*这里导入了SiteMesh的标签库 */  
  7.   
  8. <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>  
  9. <%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>  
  10. <head>  
  11. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  12.   
  13. OK,there is a decorator begin!<hr />  
  14.     /*这里的意思是，被装饰页的title内容将会在这里插入 */  
  15.     <decorator:title></decorator:title>  
  16.     
  17. </head>  
  18. <body>  
  19.     /*被修饰页的body内容将在这里插入  
  20.     <decorator:body></decorator:body>  
  21.   
  22. <hr />Yse,there is a decorator end !  
  23.   
  24. </body>  
  25. </html>  

1.4 被修饰页的创建

在web目录(或webContent)下创建mai.html

[html]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>Insert title here</title>  
  6. </head>  
  7. <body>  
  8. this is the Content Page !!!  
  9. </body>  
  10. </html>  

1.5 使用tomcat进行示例运行，访问http://localhost:8080/{your project name}/mai.html ， 运行结果如下：

SiteMesh基本用法及示例 

1.6 sitemesh.xml的配置(可选, 示例中没有用到该文件)

 该配置文件用于高级元素的配置，有具体需要的可以配置

[html]  view plain copy
  1. <sitemesh>  
  2.     <property name="decorators-file" value="/WEB-INF/decorators.xml"/>  
  3.     <excludes file="${decorators-file}"/>  
  4.   
  5.     <page-parsers>  
  6.         <parser content-type="text/html" class="com.opensymphony.module.sitemesh.parser.HTMLPageParser" />  
  7.     </page-parsers>  
  8.   
  9.     <decorator-mappers>  
  10.   
  11.         <mapper class="com.opensymphony.module.sitemesh.mapper.PageDecoratorMapper">  
  12.             <param name="property.1" value="meta.decorator" />  
  13.             <param name="property.2" value="decorator" />  
  14.         </mapper>  
  15.   
  16.         <mapper class="com.opensymphony.module.sitemesh.mapper.FrameSetDecoratorMapper">  
  17.         </mapper>  
  18.   
  19.         <mapper class="com.opensymphony.module.sitemesh.mapper.AgentDecoratorMapper">  
  20.             <param name="match.MSIE" value="ie" />  
  21.             <param name="match.Mozilla [" value="ns" />  
  22.             <param name="match.Opera" value="opera" />  
  23.             <param name="match.Lynx" value="lynx" />  
  24.         </mapper>  
  25.   
  26.         <mapper class="com.opensymphony.module.sitemesh.mapper.PrintableDecoratorMapper">  
  27.             <param name="decorator" value="printable" />  
  28.             <param name="parameter.name" value="printable" />  
  29.             <param name="parameter.value" value="true" />  
  30.         </mapper>  
  31.   
  32.         <mapper class="com.opensymphony.module.sitemesh.mapper.RobotDecoratorMapper">  
  33.             <param name="decorator" value="robot" />  
  34.         </mapper>  
  35.   
  36.         <mapper class="com.opensymphony.module.sitemesh.mapper.ParameterDecoratorMapper">  
  37.             <param name="decorator.parameter" value="decorator" />  
  38.             <param name="parameter.name" value="confirm" />  
  39.             <param name="parameter.value" value="true" />  
  40.         </mapper>  
  41.   
  42.         <mapper class="com.opensymphony.module.sitemesh.mapper.FileDecoratorMapper">  
  43.         </mapper>  
  44.   
  45.         <mapper class="com.opensymphony.module.sitemesh.mapper.ConfigDecoratorMapper">  
  46.             <param name="config" value="${decorators-file}" />  
  47.         </mapper>  
  48.   
  49.     </decorator-mappers>  
  50.   
  51. </sitemesh>  

 使用总结：整个过程配置是相对简单的，先导入所需资源，然后再配置filter，之后是derator page和content page的创建以及他们之间的映射关系，配置命令是相对简单的，简单的需求上面这些已经足矣。


二：使用示例

2.1 例子1

在{myapp}/WEB-INF/decorators.xml文件中添加以下decorator

[html]  view plain copy
  1. <decorator name="mydecorator1" page="mydecorator1.jsp">  
  2.         <pattern>/test1.jsp</pattern>  
  3.     </decorator>  

在{myapp}/decorators目录下添加mydecorator1.jsp文件，内容如下:

[html]  view plain copy
  1. <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>  
  2. <html>  
  3.     <head>  
  4.         <title>My Site - <decorator:title default="Welcome!" /></title>  
  5.         <decorator:head />  
  6.     </head>  
  7.     <body>  
  8.         <decorator:body />  
  9.         <p>This message is in /decorators/mydecorator1.jsp</p>         
  10.     </body>  
  11. </html>  

在{myapp}目录下添加test1.jsp文件，内容如下：

[html]  view plain copy
  1. <%@page contentType="text/html"%>  
  2. <%@page pageEncoding="UTF-8"%>  
  3. <html>  
  4.     <head>  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6.         <title>This is test1</title>  
  7.     </head>  
  8.     <body>  
  9.     <b>This is test1</b>  
  10.     </body>  
  11. </html>  

  • 打开浏览器，访问http://localhost:8080/myapp/test1.jsp，将会出现一下内容：

This is test1

This message is in /decorators/mydecorator1.jsp

2.2 例子2（decorator:getProperty）

有时候，我们期望修改页面中某个有固定标记的片段，例如我们的jsp中有一个标记<mytag>...</mytag>，此时可以用如下方法实现：

在{myapp}/WEB-INF/decorators.xml文件中添加以下decorator

[html]  view plain copy
  1. <decorator name="mydecorator2" page="mydecorator2.jsp">  
  2.         <pattern>/test2.jsp</pattern>  
  3.     </decorator>  

在{myapp}/decorators目录下添加mydecorator2.jsp文件，内容如下:

[html]  view plain copy
  1. <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>  
  2.   
  3. <html>  
  4.     <head>  
  5.         <title>My Site - <decorator:title default="Welcome!" /></title>  
  6.         <decorator:head />  
  7.     </head>  
  8.   
  9.     <body>  
  10.         <decorator:body />  
  11.         <decorator:getProperty property="page.content1"/>  
  12.         <decorator:getProperty property="page.content2"/>  
  13.           
  14.         <!-- do nothing -->  
  15.         <decorator:getProperty property="page.content3"/>  
  16.         <p>This message is in /decorators/mydecorator2.jsp</p>  
  17.     </body>  
  18. </html>  

在{myapp}目录下添加test2.jsp文件，内容如下：

[html]  view plain copy
  1. <%@page contentType="text/html"%>  
  2. <%@page pageEncoding="UTF-8"%>  
  3. <html>  
  4.     <head>  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6.         <title>This is test2</title>  
  7.     </head>  
  8.      
  9.     <body>  
  10.     <b>This is test2</b>  
  11.     <b>Use <decorator:getProperty> tag</b>  
  12.      
  13.     <content tag="content1"><p>This is content1</p></content>  
  14.     <content tag="content2"><p>This is content2</p></content>  
  15.     <content tag="content4"><p>This is content4, it shouldn't be display</p></content>  
  16.     </body>  
  17. </html>  

打开浏览器，访问http://localhost:8080/myapp/test2.jsp，将会出现一下内容：

This is test2

Use <decorator:getProperty> tag

This is content1

This is content2

This message is in /decorators/mydecorator2.jsp


2.3 例子3 （page:applyDecorator tag）

在{myapp}/WEB-INF/decorators.xml文件中添加以下decorator：

[html]  view plain copy
  1. <decorator name="mydecorator3" page="mydecorator3.jsp">  
  2.         <pattern>/test3.jsp</pattern>  
  3.     </decorator>  
  4.     <decorator name="mydecorator31" page="mydecorator31.jsp">  
  5.     </decorator>  

在{myapp}/decorators目录下添加mydecorator3.jsp文件，内容如下:

[html]  view plain copy
  1. <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>  
  2. <%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>  
  3. <html>  
  4.     <head>  
  5.         <title>My Site - <decorator:title default="Welcome!" /></title>  
  6.         <decorator:head />  
  7.     </head>  
  8.   
  9.     <body>  
  10.         <decorator:body />  
  11.         <page:applyDecorator name="mydecorator31">  
  12.             <content tag="content1"><p>This is content1</p></content>  
  13.             <content tag="content2"><p>This is content2</p></content>  
  14.         </page:applyDecorator>  
  15.     </body>  
  16. </html>  

在{myapp}/decorators目录下添加mydecorator31.jsp文件，内容如下: 

[html]  view plain copy
  1. <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>  
  2. <%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>  
  3.   
  4. <p><i>begin</i></>  
  5. <decorator:getProperty property="page.content1"/>  
  6. <decorator:getProperty property="page.content2"/>  
  7. <p><i>end</i></>  
  8. 在{myapp}目录下添加test3.jsp文件，内容如下：  
  9. <%@page contentType="text/html"%>  
  10. <%@page pageEncoding="UTF-8"%>  
  11. <html>  
  12.     <head>  
  13.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  14.         <title>This is test3</title>  
  15.     </head>  
  16.      
  17.     <body>  
  18.     <b>This is test3</b>  
  19.     <b>Use <page:applyDecorator> tag</b>  
  20.     </body>  
  21. </html>  

注意：相对于例子2，这里已经没有了<content tag="XXX"/>标签。

打开浏览器，访问http://localhost:8080/myapp/test3.jsp，将会出现一下内容：

This is test3

Use <page:applyDecorator> tag

begin

This is content1

This is content2

end

这里，我在mydecorator3.jsp中应用了mydecorator31.jsp的的decorator，并且将原来在test2.jsp中的 <content />标签复制到mydecorator3.jsp中，此时对于<content tag="xxx"/>的标签将会由mydecorator31.jsp了装饰。


2.4 例子4（page:parm tag）

在{myapp}/WEB-INF/decorators.xml文件中添加以下decorator:

[html]  view plain copy
  1. <decorator name="mydecorator4" page="mydecorator4.jsp">  
  2.         <pattern>/test4.jsp</pattern>  
  3.     </decorator>  
  4.       
  5.     <decorator name="mydecorator41" page="mydecorator41.jsp">  
  6.     </decorator>  

在{myapp}/decorators目录下添加mydecorator4.jsp文件，内容如下:

[html]  view plain copy
  1. <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>  
  2. <%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>  
  3.   
  4. <html>  
  5.     <head>  
  6.         <title>My Site - <decorator:title default="Welcome!" /></title>  
  7.         <decorator:head />  
  8.     </head>  
  9.     <body>  
  10.         <decorator:body />  
  11.         <page:applyDecorator name="mydecorator41" >  
  12.             <content tag="content1"><p>This is content1</p></content>  
  13.             <content tag="content2"><p>This is content2</p></content>  
  14.             <page:param name="page.content1"><p>This content1 has been replaced</p></page:param>  
  15.         </page:applyDecorator>  
  16.     </body>  
  17. </html>  

在{myapp}/decorators目录下添加mydecorator41.jsp文件，内容如下: 

[html]  view plain copy
  1. <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>  
  2. <%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>  
  3.   
  4. <p><i>begin</i></>  
  5. <decorator:getProperty property="page.content1"/>  
  6. <decorator:getProperty property="page.content2"/>  
  7. <p><i>end</i></>  

在{myapp}目录下添加test4.jsp文件，内容如下：

[html]  view plain copy
  1. <%@page contentType="text/html"%>  
  2. <%@page pageEncoding="UTF-8"%>  
  3. <html>  
  4.     <head>  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6.         <title>This is test4</title>  
  7.     </head>  
  8.      
  9.     <body>  
  10.     <b>This is test4</b>  
  11.     <b>Use <page:param> tag</b>  
  12.     </body>  
  13. </html>   

打开浏览器，访问http://localhost:8080/myapp/test4.jsp，将会出现一下内容：

This is test4

Use <page:param> tag

begin

This content1 has been replaced

This is content2

end

这里，我在mydecorator4.jsp中应用了mydecorator41.jsp的的decorator，并且添加了<page:param name="page.content1">标签，那么此时页面上将会用<page:param>标签中的内容替换原来在<decorator:getProperty property="page.content1"/>中的内容，因此页面将不在“This is content1”而显示“This content1 has been replaced”


SiteMesh的一个重要特性是使用原始HTML的meta标签（例如<meta name="foo" content="bar">）从基础页面传递信息到装饰器。作为一个例子，下面我们使用一个meta标签来定义HTML页面的作者。

[html]  view plain copy
  1. < html >   
  2.      < meta name = " author "  content = " test@example.com " >   
  3.      < head >   
  4.          < title > Simple Document </ title >   
  5.      </ head >   
  6.      < body >   
  7.         Hello World !   < br  />   
  8.          <%=   1 + 1   %>   
  9.      </ body >   
  10. </ html >    

我们定义一个“smart”装饰器来研究meta标签，如果出现这个标签，则可以得到一个相应的HTML：

[html]  view plain copy
  1. <% @ taglib uri = " sitemesh-decorator "  prefix = " decorator "   %>   
  2. < decorator:usePage id = " myPage "   />   
  3. < html >  
  4.      < head >   
  5.          < title >   
  6.             My Site  -   < decorator:title  default = " Welcome! "   />   
  7.          </ title >   
  8.          < decorator:head  />   
  9.      </ head >   
  10.      < body >   
  11.          < h1 >< decorator:title  default = " Welcome! "   /></ h1 >   
  12.          < h3 >   
  13.              < a href = " mailto: <decorator:getProperty property= " meta.author "   default= " staff@example.com "  /> " >   
  14.                  < decorator:getProperty property = " meta.author "   default = " staff@example.com "   />   
  15.              </ a >   
  16.          </ h3 >   
  17.          < hr  />   
  18.          < decorator:body  />   
  19.          < p >   
  20.              < small >   ( < a href = " /?printable=true " > printable version </ a > )   </ small >   
  21.          </ p >   
  22.      </ body >   
  23. </ html >    

可以看到我们使用了  getProperty标签 的 一个默认属性——如果没有指定author，我们就设定其为staff。如果你决定使用这个模型储存页面的meta数据，你或许需要和你的开发伙伴一起来 确定将使用什么标签以及如何使用他们。简单的，你或许想要使用meta标签来描述诸如页面作者及时间戳之类的东西。更复杂一些，你或许会想像XML文件一 样标准化的管理你的站点导航，同时使用meta标签来通过页面节点转到装饰器。


参考资料：http://my.oschina.net/thinkinginc/blog/76180

参考资料：http://www.cnblogs.com/mailingfeng/archive/2011/12/21/2296041.html

标签：

相关文章