两种页面布局（Tiles、Sitemesh）
来源：互联网 发布：淘宝体检中心在哪 编辑：程序博客网 时间：2024/05/21 09:54
页面布局
在以前的开发过程中，我常常遭遇这样的经历，要完成某个任务，首先由页面设计人员来设计页面原型，再交给程序员进行处理。很多情况下，我们总是要整理一个完整的页面。事实上，我们做了太多的重复工作。很多页面的结构是完全相同的，页面的头，尾，导航菜单都是相同的，只是主体内容部分不同而已。重复整理这些相同的部分是一个不小的负担，我们很自然的想到，要是这些页面元素能够复用就会省下很多事。
Struts 内置了Tiles，利用它可以很好复用页面，使用起来就像我们复用类一样。
使用Tiles
1.如果页面内容对页面进行划分，一个页面可以分成很多块，如header , footer , menu, content,等，如果新闻门户网站，content可以进一步细分，footall, entertainment, 等。
这里仅仅作演示，我将页面分header , footer ，content。
展开Configuration Files，打开tile-defs.xml，定义一个最本的页面模板，其它页面在这个基础上进行扩充（这有点像定义一个基类，其它则子类继承基类，以获得基类的特性）。
<definition name=".mainLayout" path="/layouts/default.jsp">
<put name="title" value="Struts Demo Application" />
<put name="header" value="/layouts/header.jsp" />
<put name="footer" value="/layouts/footer.jsp" />
<put name="body" value=".portal.body" />
</definition>
其它页面以这个为基础，继承这个模板内容，可以重新定义title和body内容。
<definition name="logonPage" extends=".mainLayout">
<put name="title" value="Logon Page" />
<put name="body" value="/layouts/logonBody.jsp" />
</definition>
<definition name="registerPage" extends=".mainLayout">
<put name="title" value="New Registeration " />
<put name="body" value="/layouts/registerBody.jsp" />
</definition>
<definition name="indexPage" extends=".mainLayout">
<put name="title" value="Home Page " />
<put name="body" value="/layouts/indexBody.jsp" />
</definition>
<definition name="registeredSuccessPage" extends=".mainLayout">
<put name="title" value="Registered Successfully" />
<put name="body" value="/layouts/registerSuccessBody.jsp" />
</definition>
事实，这和Java中类的继承非常类似。
2.相应的jsp页面，在Web pages下新建一个layouts目录。默认模板(即default.jsp)内容如下。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><tiles:getAsString name="title"/></title>
</head>
<body>
<div id="header"><tiles:insert attribute="header"/></div>
<div id="content"><tiles:insert attribute="body"/></div>
<div id="footer"><tiles:insert attribute="footer"/></div>
</body>
</html>
其中，getAsString表示title以一个字符串的形式插入模板。
header.jsp中定义了页面标题。
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<div><h1>Struts Demo Application</h1></div>
footer.jsp内容版本声明，如下：
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<div>Copyright 2007© hantsy<hantsy@tom.com></div>
其它页面，各复制一份到layouts目录中，页面只留body之间的内容。
如indexBody.jsp内容如下：
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<h1>Home Page</h1>
Welcome,
<logic:notPresent name="username" scope="session">
Guest !<html:link forward="newLogon">Logon </html:link> or
<html:link forward="newRegister">Register Now...</html:link>
</logic:notPresent>
<logic:present name="username" scope="session">
<bean:write name="username" scope="session"/>,
<html:link forward="logout">Log Out..</html:link>
</logic:present>
3.修改Struts配置文件，将所有jsp文件路径替换成tile配置文件中定义的名称。
<action-mappings>
<action path="/logout" type="com.myapp.web.LogoutAction"/>
<action input="registerPage" name="UserForm" path="/register" scope="session" type="com.myapp.web.RegisterAction">
<forward name="success" path="registeredSuccessPage"/>
</action>
<action input="logonPage" name="UserForm" path="/logon" scope="session" type="com.myapp.web.LogonAction"/>
<action path="/index" forward="indexPage"/>
<action path="/newLogon" forward="logonPage"/>
<action path="/newRegister" forward="registerPage"/>
</action-mappings>
值得注意的是，使用Tile必须的两个最重要的配置，NetBeans在创建项目时已经帮我们自动完成了。
一个是注册Tile插件，打开Struts配置文件struts-config.xml我们就可以看到。
<plug-in className="org.apache.struts.tiles.TilesPlugin" >
<set-property property="definitions-config" value="/WEB-INF/tiles-defs.xml" />
<set-property property="moduleAware" value="true" />
</plug-in>
另外一个是，重新定义controller，将processorClass改成使用 org.apache.struts.tiles.TilesRequestProcessor。
<controller processorClass="org.apache.struts.tiles.TilesRequestProcessor"/>
4.运行项目进行测试。
使用Sitemesh
Sitemesh是www.opensymphony.org带来的另一款优秀的页面布局工具。它不专门针对Struts ,甚至其它语言的web程序也可以使用它。
它使用Decorator模式达到预期效果。这里可以将页面分为两类，decorator（修饰）和decoratored（被修饰）。这就好比有一个相框和各种不同可以用来变换的相片，当相框中放入不同的相片，就得到不同的视觉效果。
1.下载并安装Sitemesh。
从www.opensymphony.org下载最新的sitemesh 2.3，解压到硬盘。
将<sitemesh>/lib下的common-collections.jar，freemarker.jar, velocity-deps-1.3.1.jar,velocity-tools-view-1.3.1.jar和<sitemesh>/dist下sitemesh-2.3.jar添加到项目Libraries中。
将<sitemesh>/src/etc/tld/jsp1.2的sitemesh-decorator.tld和sitemesh-page.tld复制一份到项目的web/WEB-INF/下面。
2.配置sitemesh。
从configurations中打开web.xml，定义Sitemesh 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>
</filter-mapping>
在下面的jsp-config中添加sitemesh的taglib定义，在最新的jsp 2.0标准，这不是必须的。
<taglib>
<taglib-uri>sitemesh-page</taglib-uri>
<taglib-location>
/WEB-INF/lib/sitemesh-page.tld
</taglib-location>
</taglib>
<taglib>
<taglib-uri>sitemesh-decorator</taglib-uri>
<taglib-location>
/WEB-INF/lib/sitemesh-decorator.tld
</taglib-location>
</taglib>
在web/WEB-INF在定义两个基本的sitemesh配置文件，这两个文件可以sitemesh包复制过来。
sitemesh.xml定义最基本的应用规则。
<sitemesh>
<property name="decorators-file" value="/WEB-INF/decorators.xml"/>
<excludes file="${decorators-file}"/>
<page-parsers>
<parser content-type="text/html" class="com.opensymphony.module.sitemesh.parser.HTMLPageParser" />
</page-parsers>
<decorator-mappers>
<mapper class="com.opensymphony.module.sitemesh.mapper.PageDecoratorMapper">
<param name="property.1" value="meta.decorator" />
<param name="property.2" value="decorator" />
</mapper>
<mapper class="com.opensymphony.module.sitemesh.mapper.FrameSetDecoratorMapper">
</mapper>
<mapper class="com.opensymphony.module.sitemesh.mapper.AgentDecoratorMapper">
<param name="match.MSIE" value="ie" />
<param name="match.Mozilla [" value="ns" />
<param name="match.Opera" value="opera" />
<param name="match.Lynx" value="lynx" />
</mapper>
<mapper class="com.opensymphony.module.sitemesh.mapper.PrintableDecoratorMapper">
<param name="decorator" value="printable" />
<param name="parameter.name" value="printable" />
<param name="parameter.value" value="true" />
</mapper>
<mapper class="com.opensymphony.module.sitemesh.mapper.RobotDecoratorMapper">
<param name="decorator" value="robot" />
</mapper>
<mapper class="com.opensymphony.module.sitemesh.mapper.ParameterDecoratorMapper">
<param name="decorator.parameter" value="decorator" />
<param name="parameter.name" value="confirm" />
<param name="parameter.value" value="true" />
</mapper>
<mapper class="com.opensymphony.module.sitemesh.mapper.FileDecoratorMapper">
</mapper>
<mapper class="com.opensymphony.module.sitemesh.mapper.ConfigDecoratorMapper">
<param name="config" value="${decorators-file}" />
</mapper>
</decorator-mappers>
</sitemesh>
decorators.xml中定义具体的decortor应用规则。
<?xml version="1.0" encoding="ISO-8859-1"?>
<decorators defaultdir="/decorators">
<!-- Any urls that are excluded will never be decorated by Sitemesh -->
<excludes>
<pattern>/exclude.jsp</pattern>
<pattern>/exclude/*</pattern>
</excludes>
<decorator name="main" page="main.jsp">
<pattern>/*</pattern>
</decorator>
<decorator name="panel" page="panel.jsp"/>
</decorators>
3.定义Decorator。
在Web Pages下新建一个目录，命名为decorators，在这个新建的目录中新建main.jsp，作为主要的decorator。
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>
<html>
<head>
<title>Demo-<decorator:title default="Struts Sitemesh Demo..." /></title>
<!--link href="<%= request.getContextPath() %>/decorators/main.css" rel="stylesheet" type="text/css"-->
<decorator:head />
</head>
<body>
<div>
<table width="100%">
<tr>
<td id="pageTitle">
<h1> <decorator:title /></h1>
</td>
</tr>
<tr>
<td valign="top" height="100%">
<decorator:body />
</td>
</tr>
<tr>
<td id="footer">
<page:applyDecorator page="/footer.html" name="panel" />
</td>
</tr>
</table>
</div>
</body>
</html>
另外再定义一个panel。
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<p>
<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr>
<td class="panelBody">
<decorator:body />
</td>
</tr>
</table>
</p>
文件中，decorator:title和decorator:body定义要被替换的内容位置，应用之后，分别替换成decoratored页面的title和body标签中间的内容。
下面将Web Pages下的页面恢复成原貌。如index.jsp内容如下。
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<html>
<head><title>HomePage </title></head>
<body>
Welcome,
<logic:notPresent name="username" scope="session">
Guest !<html:link forward="newLogon">Logon </html:link> or
<html:link forward="newRegister">Register Now...</html:link>
</logic:notPresent>
<logic:present name="username" scope="session">
<bean:write name="username" scope="session"/>,
<html:link forward="logout">Log Out..</html:link>
</logic:present>
</body>
</html>
同时还要修改Struts定义文件，将上一节中tiles定义的page名称全部还要成具体的页面路径。
<action-mappings>
<action path="/logout" type="com.myapp.web.LogoutAction"/>
<action input="/register.jsp"
name="UserForm"
path="/register"
scope="session"
type="com.myapp.web.RegisterAction">
<forward name="success" path="/registerSuccess.jsp"/>
</action>
<action input="/logon.jsp"
name="UserForm"
path="/logon"
scope="session"
type="com.myapp.web.LogonAction"/>
<action path="/Welcome" forward="/welcomeStruts.jsp"/>
<action path="/index" forward="/index.jsp"/>
<action path="/newLogon" forward="/logon.jsp"/>
<action path="/newRegister" forward="/register.jsp"/>
</action-mappings>
另外还要禁用tiles，以免和sitemesh发生冲突。注释掉controller定义，让Struts使用默认的requestProcessor。
4.运行程序，测试效果。
- 两种页面布局（Tiles、Sitemesh）
- Tiles与siteMesh页面布局管理
- struts布局管理---SiteMesh一个优于Apache Tiles的Web页面布局、装饰框架
- SiteMesh：一个优于Apache Tiles的Web页面布局、装饰框架
- SiteMesh：一个优于Apache Tiles的Web页面布局、装饰框架
- SiteMesh：一个优于Apache Tiles的Web页面布局、装饰框架
- 页面布局框架--sitemesh
- sitemesh 页面布局框架
- Tiles & SiteMesh
- 一个代替Tiles和SiteMesh的布局工具(已开源)
- 用Sitemesh控制页面布局
- [页面模板框架对比] Apache Tiles VS Sitemesh
- [页面模板框架对比] Apache Tiles VS Sitemesh
- Spring通用页面布局 Apache Tiles
- SITEMESH页面布局器的使用
- Struts 2 web开发中框架结构页面复用Tiles、SiteMesh教程
- 页面布局：两列布局
- DIV与Table两种页面布局
- 配置Apache2.2+PHP5+CakePHP1.2+MySQL5
- C++ 中的位操作符
- 网站源码查看
- 仿MSN,QQ窗体震动的功能 （C#）
- 6大B2C购物系统比较
- 两种页面布局（Tiles、Sitemesh）
- 防SQL注入之SqlParameter的简单使用[C#]
- 学习 Zend Framework 框架连载(一)
- SQL SERVER 2005转换为SQL2000（转）
- 用酷狗播放音乐时，会显示在msn的头像旁边
- CAS 的logout设置
- 可编程标志寄存器学习总结
- 很好很强大
- 一位帅选简历者说的话！
