|
|
用Sitemesh控制页面布局
gagaghost
摘要
我们在开发Web应用特别是J2EE应用的时候，由于Web页面是由不同的人所开发，所以开发出来的界面通常是千奇百怪，通常让项目管理人员苦笑不得。随着项目的进一步的开发，要求统一的界面风格的紧迫性逐渐浮现了出来。
虽说我们可以使用Struts的Ttiles，但Tiles有着它的不足之处。本文介绍了一个基于Web页面的布局、装饰以及应用整合的框架Sitemesh。它能帮助你为你的应用创建一致的外观。
主要内容
1.Sitemesh简介
2.与Strust Tiles比较
3.基本原理
4.简单例子
5.总结
6.参考资料
1.Sitemesh简介
Sitemesh 是由一个基于Web页面布局、装饰以及与现存Web应用整合的框架。它能帮助我们在由大量页面构成的项目中创建一致的页面布局和外观，如一致的导航条，一致的banner，一致的版权，等等。它不仅仅能处理动态的内容，如jsp，php，asp等产生的内容，它也能处理静态的内容，如htm的内容，使得它的内容也符合你的页面结构的要求。甚至于它能将HTML文件象include那样将该文件作为一个面板的形式嵌入到别的文件中去。所有的这些，都是GOF 的Decorator模式的最生动的实现。尽管它是由java语言来实现的，但它能与其他Web应用很好地集成。
2.与Strust Tiles比较
从使用角度来看，Tiles似乎是Sitemesh标签<page:applyDecorator>的一个翻版。其实sitemesh最强的一个特性是sitemesh将decorator模式用在过滤器上。任何需要被装饰的页面都不知道它要被谁装饰，所以它就可以用来装璜来自php、 asp、CGI等产生的页面了。你可以定义若干个装饰器，根据参数动态地选择装饰器，产生动态的外观以满足你的需求。它也有一套功能强大的属性体系，它能帮助你构建功能强大而灵活的装饰器。相比较而言，在这方面Tiles就逊色许多。
3.基本原理
一个请求到服务器后，如果该请求需要sitemesh装饰，服务器先解释被请求的资源，然后根据配置文件获得用于该请求的装饰器，最后用装饰器装饰被请求资源，将结果一同返回给客户端浏览器。
下边是由Jsp和CGI产生的两个页面，它们通过sitemesh装饰后，形成了一致的用户界面。
4.简单例子
环境说明：
Windows2k+、Tomcat4.0+
1．安装：
将sitemesh-2.1.jar复制到lib目录下；修改web.xml文件，也就是在web.xml中加入粗倾体标记的部分；
<?xml version="1.0" encoding="GB2312"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<filter>
<filter-name>sitemesh</filter-name>
<filter-lass>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class></filter>
<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
2．建立一个目录，名字叫decorators，当然你也可以取别的，用于放装饰器(也就是一个使用了sitemesh标签的jsp文件)用;
3．定义一个你的模板并把它放到decorators目录下，我的文体名称叫：mymain.jsp文件内容如下：
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>AP - <decorator:title default="Welcome to architecture pub!" />
</title>
<decorator:head />
</head>
<body><table border="0" cellpadding="2" width="100%" height="151"> <tr> <td width="20%" height="74"> <p align="center"><font color="#000080" size="5">Test sitemesh</font></td> <td width="73%" height="74"></td> </tr> <tr><td width="20%" height="28" bgcolor="#F3F3F3" valign="top" >
<page:applyDecorator page="/menu.jsp" name="panel" />
</td> <td width="73%" height="28" bgcolor="#BED6FA">
<decorator:body />
</td> </tr> <tr> <td width="100%" height="31" colspan="2" bgcolor="#F1F0ED"> <p align="center">Powered by gagaghost</td> </tr></table></body></html>
说明：
<decorator:title default="Welcome to test sitemesh!" />：读取被装饰页面的标题，并给出了默认标题。
<decorator:head />：读取被装饰页面的<head>中的内容；
<page:applyDecorator page="/menu.jsp" name="panel" />：把menu.jsp文件用panel指定的装饰器装饰，并把结果插入到该位置；
<decorator:body />：读取被装饰页面的<body>中的内容；
当然还有很多的标签，这里不再详细描述。
4．在docorators.xml文件里配置刚写好的模板mymain.jsp，内容如下：
<?xml version="1.0" encoding="ISO-8859-1"?>
<decorators defaultdir="/decorators">
<decorator name="main" page="mymain.jsp">
<pattern>/*</pattern>
</decorator>
<decorator name="panel" page="panel.jsp"/>
<decorator name="printable" page="printable.jsp"/>
</decorators>
这里我是把对所有的请求都用mymail.jsp来装饰。
5．好了，run一下你的“小板凳”！你会看到如下结果：
5.总结
使用sitemesh给我们带来的是不仅仅是页面结构问题，它的出现让我们有更多的时间去关注底层业务逻辑，而不是整个页面的风格和结构。它让我们摆脱了大量用include方式复用页面尴尬局面，它也提供了很大的灵活性以及给我们提供了整合异构Web系统页面的一种方案。我们期望它在未来的版本中会有更多的特性出现。
6.参考资料
http://www.opensymphony.com/