bluelzx

sitemesh velocity freemarker struts2 | 基于struts2+spring+hibernate+jquery的jm ...

2008-05-21

SiteMesh入门

http://www.opensymphony.com/sitemesh/index.html

Site Mesh 是open symphony团队开发的j2ee应用框架之一，是一个用来在JSP中实现页面布局和装饰（layout and decoration）的框架组件，能够帮助网站开发人员较容易实现页面中动态内容和静态装饰外观的分离，旨在提高页面的可维护性和复用性。 Site Mesh 是开源的，可以在www.sf.net下找到。

Site mesh应用Decorator模式，用filter截取request和response,把页面组件head ,content ,banner结合为一个完整的视图。通常我们都是用include标签在每个jsp页面中来不断的包含各种header, style sheet, scripts and footer，现在，在site mesh的帮助下，我们可以删除他们了。下面是一个使用SiteMesh 实现页面内容的简单事例(参考的是其他网络上的帖子)。需要的文件有：

sitemesh .jar	WEB-INF/lib
sitemesh -decorator.tld	WEB-INF
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>
           	<dispatcher>REQUEST</dispatcher>
		<dispatcher>FORWARD</dispatcher>
		<dispatcher>INCLUDE</dispatcher>
</filter-mapping>

建立 WEB-INF/decorators.xml 描述各装饰器页面。

<decorators defaultdir="/decorators">

	<excludes>
        <pattern>/docs/api/*</pattern>
    </excludes>

    <decorator name="main" page="main.jsp">
          <pattern>/*</pattern>
    </decorator>

</decorators>

建立装饰器页面 WEB-INF/ decorators / main.jsp:

<%@ taglib uri="sitemesh-decorator" prefix="decorator" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

	<head>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/web.css"></link>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/jmesa.css"></link>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.2.2.pack.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.bgiframe.pack.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jmesa.js"></script>
		<title>JMesa</title>
		<decorator:head/>
	</head>

	<body>
		
		<div style="height:75px;background-repeat:repeat-x;background-image: url('${pageContext.request.contextPath}/images/header.png')">
			<a href="${pageContext.request.contextPath}/index.jsp">
				<img id="header" src="${pageContext.request.contextPath}/images/logo.png" alt="logo" />
			</a>
		</div>
		
		<div id="content">
			<decorator:body/>			
		</div>

	</body>

</html>