SiteMesh3使用详解

SiteMesh网址: http://wiki.sitemesh.org/wiki/display/sitemesh/Home


1. SiteMesh的简介



SiteMesh是由一个基于Web页面布局、装饰以及与现存Web应用整合的框架。它能帮助我们在由大量页面构成的项目中创建一致的页面布局和外观,如一致的导航条,一致的banner,一致的版权,等等。 它不仅仅能处理动态的内容,如jsp,php,asp等产生的内容,它也能处理静态的内容,如htm的内容,使得它的内容也符合你的页面结构的要求。甚至于它能将HTML文件象include那样将该文件作为一个面板的形式嵌入到别的文件中去。所有的这些,都是GOF的Decorator模式的最生动的实现。尽管它是由java语言来实现的,但它能与其他Web应用很好地集成。


SiteMesh原理

SiteMesh框架是OpenSymphony团队开发的一个非常优秀的页面装饰器框架,它通过对用户请求进行过滤,并对服务器向客户端响应也进行过滤,然后给原始页面加入一定的装饰(header,footer等),然后把结果返回给客户端。

sitemesh3是通过一个filter来对response进行拦截处理,在response提交之前,它会把response流里的数据备份起来,清空流,然后用request.getRequestDispatcher(装饰页URI).forward()来取得渲染后的装饰页,然后再把装饰页里的标签替换成之前备份的对应内容。
也就是说sitemesh不关心你的页面是如何生成的,它只是将两者拼接起来,不管你用的是JSP,Volocity, FreeMarker 还是 SpringMVC, Struts, wicket。
这样一来你就可以灵活地控制页面的生成方式。你可以把sitemesh3当成一个中间浏览器,他使用用户浏览器发送过来的request对象发送了两次(或以上)请求,第一次是原来的请求, 第二次是对装饰页面的请求,然后把这两个请求结果拼接起来返回给用户浏览器。通过SiteMesh的页面装饰,可以提供更好的代码复用,所有的页面装饰效果耦合在目标页面中,无需再使用include指令来包含装饰效果,目标页与装饰页完全分离,如果所有页面使用相同的装饰器,可以是整个Web应用具有统一的风格。


 搭建SiteMesh3环境
 


3.1 准备资源  
下载sitemesh3.0 --> sitemesh-3.0.zip


将其中disk文件夹下的sitemesh-3.0-alpha-2.jar导入/WEB-INF/lib目录下 


1 .在[web-app]/WEB-INF/web.xml添加以下内容:


<filter>
	  <filter-name>sitemesh</filter-name>
	  <filter-class>org.sitemesh.config.ConfigurableSiteMeshFilter</filter-class>
	</filter>

	<filter-mapping>
	  <filter-name>sitemesh</filter-name>
	  <url-pattern>/*</url-pattern>
	  <dispatcher>FORWARD</dispatcher>
	  <dispatcher>REQUEST</dispatcher> 
	</filter-mapping>

 2 .建立配置文件(sitemesh3.xml)

 

<sitemesh>

	<!-- 配置默认的渲染器. 将应用于所有路径. <mapping path="/index.jsp" exclue="true"/> -->
	<mapping decorator="/WEB-INF/public/head.jsp" />

	<mapping path="/index.jsp">
		<decorator>/WEB-INF/public/foot.jsp</decorator>
		<decorator>/WEB-INF/public/head.jsp</decorator>
	</mapping> 
	
</sitemesh>   


3 .建立装饰页(head .jsp)

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE><sitemesh:write property='title' /></TITLE>
<sitemesh:write property='head' /> 
<script type="text/javascript" src="scripts/jquery.js"></script>
<script>
	$(document).ready(function() {
		$(".testimg").zoomImgRollover();
	});
	$(function() {
$("input.datepicker").datepicker();
});
</script>
</head>
<body>
<sitemesh:write property='body'></sitemesh:write>
</body>

4 .建立被装饰页(Content Page) -- index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<body>
<!--banner开始-->
<div id="AD_content">
 <div id="AD_PageList">
    <ul class="ul_li_f_left slider">
    <li id="scroll_0"></li>
    <li id="scroll_1"></li>
    <li id="scroll_2"></li>
    <li id="scroll_3"></li>
   </ul>
      <div class="num_par">
         <ul class="num">
           <li></li>
           <li></li>
           <li></li>
           <li></li>
         </ul>
      </div>
 </div>
 <div class="AD_redP round_all_nocolor">
  <div class="AD_redP_t round_all_nocolor_top"><p>12.45%</p><p class="nianhua"><img src="images/red_money.png" />最高年化收益</p></div>
  <div class="AD_redP_b round_all_nocolor_bottom">
     <p class="round_all_nocolor"><a href="#" class="red_Get1">注册领红包</a></p>
     <p class="ad_linkDL">已有账号?<a href="toLogin.rhm">马上登录</a></p>
  </div>
 </div>
</div>
<!--banner结束-->
<!--QQ和微信-->
<div class="qqWei">
 <div class="qqWei_qq round_all_nocolor"><a></a></div>
 <div class="qqWei_wei round_all_nocolor"><div class="wei_code"></div></div>
</div>
<!--向上滚动-->
<div class="backToTop" title="Top">Top</div>

</body> 

 示例运行结果如下:








  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值