appfuse 中的sitemesh --网页模板的高级抽象
在此文的基础上加工
基础篇
一、在WEB-INF/web.xml中copy以下filter的定义:
<?xml version="1.0" encoding="GBK"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
version="2.4">
<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>
</filter-mapping>
</web-app>
二、copy所需sitemesh-2.3.jar到WEB-INF/lib下。（这里可以下载http://www.opensymphony.com/sitemesh/）
三、 建立WEB-INF/decorators.xml描述各装饰器页面。
<decorators defaultdir="/decorators"> |
四、 建立装饰器页面 /decorators/default.jsp
<%@ include file="/common/taglibs.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<%@ include file="/common/meta.jsp"%>
<title><decorator:title /> | <fmt:message key="webapp.name" />
</title>
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value='/styles/${appConfig["csstheme"]}/theme.css'/>" />
<link rel="stylesheet" type="text/css" media="print"
href="<c:url value='/styles/${appConfig["csstheme"]}/print.css'/>" />
<script type="text/javascript"
src="<c:url value='/scripts/prototype.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/scripts/scriptaculous.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/scripts/global.js'/>"></script>
<decorator:head />
</head>
<body
<decorator:getProperty property="body.id" writeEntireProperty="true"/>
<decorator:getProperty property="body.class" writeEntireProperty="true"/>>
<div id="page">
<div id="header" class="clearfix">
<jsp:include page="/common/header.jsp" />
</div>
<div id="content" class="clearfix">
<div id="main">
<%@ include file="/common/messages.jsp"%>
<h1>
<decorator:getProperty property="meta.heading" />
</h1>
<decorator:body />
</div>
<div id="nav">
<div class="wrapper">
<h2 class="accessibility">
Navigation
</h2>
<jsp:include page="/common/menu.jsp" />
</div>
<hr />
</div><!-- #nav -->
</div>
<div id="footer" class="clearfix">
<jsp:include page="/common/footer.jsp" />
</div>
</div>
</body>
</html>
五、建立一个的被装饰页面 WEB-INF/page/test.jsp(内容页面)
<%@ include file="/common/taglibs.jsp"%>
<head>
<title><fmt:message key="403.title"/></title>
<meta name="heading" content="<fmt:message key='403.title'/>"/>
</head>
<p>
<fmt:message key="403.message">
<fmt:param><c:url value="/"/></fmt:param>
</fmt:message>
</p>
<p style="text-align: center; margin-top: 20px">
<a href="http://community.webshots.com/photo/56793801/56801692jkyHaR"
title="Hawaii, click to Zoom In">
<img src="<c:url value="/images/403.jpg"/>" alt="Hawaii" /></a>
</p>
这时候我们在浏览器中输入 /xxxx/test.html 就会出现被包装后的页面。
这样基本用法就这样。如果想了解更多，请往下看。
深入理解
| 让我们看看怎样配置环境 | ||||||
除了要copy到WEB-INF/lib中的sitemesh.jar外，还有2个文件要建立到WEB-INF/：
sitemesh.xml 可以设置2种信息:Page Parsers ：负责读取stream的数据到一个Page对象中以被SiteMesh解析和操作。(不太常用，默认即可) Decorator Mappers : 不同的装饰器种类，我发现2种比较有用都列在下面。一种通用的mapper,可以指定装饰器的配置文件名，另一种可打印的装饰器，可以允许你当用 http://localhost/aaa/a.html?printable=true方式访问时给出原始页面以供打印(免得把 header,footer等的花哨的图片也搭上) 范例：
decorators.xml ：定义构成复合视图的所有页面构件的描述(主要结构页面，header,footer...)，如下例：
|
||||||
| 最重要的是写出装饰器本身(也就是那些要复用页面，和结构页面)。 | ||||||
| 其实，重要的工作就是制作装饰器页面本身(也就是包含结构和规则的页面)，然后把他们描述到decorators.xml中。 让我们来先看一看最简单的用法：其实最常用也最简单的用法就是我们的hello例子，面对如此众多的技术，我想只要达到功能点到为止即可，没必要去研究太深(除非您有更深的需求)。
我们在装饰器页面只用了2个标签： <decorator:title default="装饰器页面..." /> ： 把请求的原始页面的title内容插入到<title></title>中间。 <decorator:body /> ： 把请求的原始页面的body内的全部内容插入到相应位置。 然后我们在decorator.xml中加入以下描述即可： <decorator name="main" page="main.jsp"> 这样，请求的所有页面都会被重新处理，并按照main.jsp的格式重新展现在你面前。
|
||||||
| 让我们看看更多的用法。(抄袭sitemesh文档) | ||||||
以下列着全部标签：
<decorator:head /> 插入原始页面(被包装页面)的head标签中的内容(不包括head标签本身)。 <decorator:body />插入原始页面(被包装页面)的body标签中的内容。 <decorator:title [ default="..." ] /> 插入原始页面(被包装页面)的title标签中的内容，还可以添加一个缺省值。 例： /decorator/main.jsp中 （装饰器页面）: <title><decorator:title default="却省title-hello" /> - 附加标题</title> /aaa.jsp中 (原始页面)：<title>aaa页面</title> 访问/aaa.jsp的结果：<title>aaa页面 - 附加标题</title> <decorator:getProperty property="..." [ default="..." ] [ writeEntireProperty="..." ]/> 在标签处插入原始页面(被包装页面)的原有的标签的属性中的内容，还可以添加一个缺省值。 sitemesh文档中的例子很好理解： 注意， <decorator:usePage id="..." /> 例：可用<decorator:usePage id="page" /> ：<%= <page:applyDecorator name="..." [ page="..." title="..." ] > 应用包装器到指定的页面上，一般用于被包装页面中主动应用包装器。这个标签有点不好理解，我们来看一个例子： 包装器页面 /decorators/panel.jsp： <p><decorator:title /></p> ... <p><decorator:body /></p> <decorator name="panel" page="panel.jsp"/> 最后会是什末结果呢？除了/page.jsp会被默认的包装页面包装上header,footer外，page.jsp页面中还内嵌了date.jsp页 面，并且此date.jsp页面还会被panel.jsp包装为一个title加body的有2段的页面，第1段是date.jsp的title，第2段 是date.jsp的body内容。 另外，page:applyDecorator中包含的page:param标签所声明的属性值还可以在包装页面中用decorator:getProperty标签访问到。 |
| 可打印的界面装饰 | |
| 前 面说过有1种可打印的装饰器，可以允许你当用http://localhost/aaa/a.html?printable=true方式访问时，应用其 他的装饰器(自己指定)，给出原始页面以供打印(免得把header,footer等的花哨的图片也搭上)。 让我们来看一看怎样实现他： 1.首先在WEB-INFO/sitemesh.xml中设置： 2.在WEB-INFO/decorators.xml中定义相应的printable装饰器 3.最后编写printable装饰器/decorators/printable.jsp
这样就可以让一个原始页面通过?printable=true开关来切换不同的装饰器页面。
|
| 中文问题 |
由于sitemesh内部所使用的缺省字符集为iso-8859-1，直接使用会产生乱码，我们可以通过以下方法纠正之：
|
| 总结：使用sitemesh最通常的途径： |
1.配置好环境， 2.在WEB-INFO/decroators.xml中描述你将建立的包装器。 3.开发在decroators.xml中描述的包装器，最好存放在/_decorators目录下 4.ok ，可以看看辛勤的成果了 :) |