maven包含sitemesh:
<dependency>
<groupId>opensymphony</groupId>
<artifactId>sitemesh</artifactId>
<version>2.4.2</version>
</dependency>
3.x的版本:
1 <dependency> 2 <groupId>org.sitemesh</groupId> 3 <artifactId>sitemesh</artifactId> 4 <version>3.0.0</version> 5 </dependency>
sitemesh工作原理:
<?xml version="1.0" encoding="UTF-8"?> <decorators defaultdir="/WEB-INF/decorators"> <!-- 此处用来定义不需要过滤的页面 --> <excludes> <pattern>*/static/*</pattern> <pattern>*Ajax*</pattern> <pattern>*/upload/*</pattern> <pattern>*/login*</pattern> </excludes> <!-- 需要装饰 --> <decorator name="default" page="default.jsp"> <pattern>/*</pattern> </decorator> </decorators>
上面配置文件指定了装饰器页面所在的路径
/WEB-INF/decorators
,并指定了一个名为default的装饰器(路径为装饰器路径下面的default.jsp).
2.在[web-app]/WEB-INF/web.xml添加以下内容:
<!-- 装饰器filter --> <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> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> </filter-mapping>
3.在[web-app]下创建一个decorators文件夹,在该文件下再创建一个装饰页面default.jsp,包含以下内容:
需要注明的是,在装饰器开始部分需要引入标记库
用到decorator标记的装饰器需要引入
<%@taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%>
用到page标记的装饰器需要引入
<%@taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="page"%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <!-- 第一个装饰页面 --> <head> <meta charset="UTF-8"> <!-- 从被装饰页面获取title标签内容,并设置默认值--> <title> <decorator:title default="默认title" /> </title> <!-- 从被装饰页面获取head标签内容 --> <decorator:head/> </head> <body> <h2>SiteMesh装饰header</h2> <hr /> <!-- 从被装饰页面获取body标签内容 --> <decorator:body /> <hr /> <h2>SiteMesh装饰footer</h2> </body> </html>
4.在[web-app]下创建被装饰页面sitemeshTest.jsp,包含以下内容:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <!-- 第一个被装饰(目标)页面 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>被装饰(目标)页面title</title> </head> <body> <h4>被装饰(目标)页面body标签内内容。</h4> <h3>使用SiteMesh的好处?</h3> <ul> <li>被装饰(目标)页面和装饰页面完全分离。</li> <li>做到真正的页面复用,一个装饰页面装饰多个被装饰(目标)页面。</li> <li>更容易实现统一的网站风格。</li> <li>还有。。。</li> </ul> </body> </html>
最后输出的html如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <!-- 第一个装饰页面 --> <head> <meta charset="UTF-8"> <!-- 从被装饰页面获取title标签内容,并设置默认值--> <title> 被装饰(目标)页面title </title> <!-- 从被装饰页面获取head标签内容 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h2>SiteMesh装饰header</h2> <hr /> <!-- 从被装饰页面获取body标签内容 --> <h4>被装饰(目标)页面body标签内内容。</h4> <h3>使用SiteMesh的好处?</h3> <ul> <li>被装饰(目标)页面和装饰页面完全分离。</li> <li>做到真正的页面复用,一个装饰页面装饰多个被装饰(目标)页面。</li> <li>更容易实现统一的网站风格。</li> <li>还有。。。</li> </ul> <hr /> <h2>SiteMesh装饰footer</h2> </body> </html>
从以上的例子,可以看出通过SiteMesh装饰,不需要在每个目标页面中将header和footer等共同文件include进去,被装饰(目标)页面和装饰页面完全分离。本文只对SiteMesh做一个简单的介绍,SiteMesh可以Velocity,FreeMarker等开源模板工具结合使用,降低页面开发复杂度。
使用 SiteMesh2 时为每个页面指定不同的 body id 值
SiteMesh 是一个很好的 Java Web 模板框架,它的思维方式与通常的模板实现(比如 Tiles 或 include)有些区别。SiteMesh 模板一旦配置好后,在编辑内容页时可以忽视它的存在。可以它是被动,内容页中的输出被抽取到模板中,一般的模板为主动的把自己某部分内容去填充模板。
在站点中应用样式或 JS 代码时很可能会依赖于每个页面的 <body> 的 id,比如:
body#archive primary{….} /** 样式 **/
$(“body#archive”).bgColor=’red’; //JS
所以就要求每个页面有不同的 body id 值。在很多 SiteMesh 的例子中页面渲染后 body 都没有 id 值的,或是相同的 id 值。
其实原本是想用 SiteMesh 3 的,当前仍为 Alpha 版,SiteMesh 3 比 SiteMesh 2 要更简单,装饰文件可以不是 jsp,但是要为每个页面设置不同的 body.id 时死活都没成功,它怎么都不认可 <body <sitemesh:write property=’body.id’/>> 这样的写法。所以不得再到 SiteMesh 2 里去寻求解决办法,也难怪,本来 Alpha 就是个内测版,极不成熟的。
SiteMesh 2 的最新版本是 2.4.1,2009-3-15 出品的,项目主页在:http://www.opensymphony.com/sitemesh。
SiteMesh 3 的最新版本是 3.0 Alpha 1,更新日期为 2009-9-6 日,http://www.sitemesh.org,目前被墙中。
那就来看在 SiteMesh 2 中怎么为每个页面指定不同的 body.id 值,有两种办法,都是在模板文件中配置,假如 decorators.xml 文件中的配置如下:
1
2
3
4
5
6
7
|
<? xml version = "1.0" encoding = "utf-8" ?> < decorators defaultdir = "/decorators" > < decorator name = "main" page = "main.jsp" > < pattern >/*</ pattern > </ decorator > </ decorators > |
那么在写 /decorators/main.jsp 文件的 <body> 标签时可有两种写法:
1. 直观的取被渲染页的 body.id 值赋给 id 属性:
<body id=”<decorator:getProperty property=’body.id’/>”>
2. 把被渲染页 body 的 id 属性及值一起搬过来:
<body<decorator:getProperty property=”body.id” writeEntireProperty=”true” />>
用了 writeEntireProperty 属性,会把被渲染页的属性名及其值一起搬过来,并且在属性之前会加个空格。
现在在内容页(前面称作被渲染页中) 的 <body> 标签就应该加上自己的 id 值了,被渲染后,这个 body.id 被搬到装饰页中 <body> 标签中,也就是当前页面的 body.id 了。
比如,被渲染的 index.jsp 页面中的 <body> 写作:<body id=”body-id-of-index-jsp”>,执行之后看到的页面的 body.id 就是 body-id-of-index-jsp 了。
.