使用 Apache Tiles 3 构建页面布局
参考博客：http://aiilive.blog.51cto.com/1925756/1596059
Apache Tiles是一个JavaEE应用的页面布局框架。Tiles框架提供了一种模板机制，可以为某一类页面定义一个通用的模板，该模板定义了页面的整体布局。布局由可以复用的多个块组成，每个页面可以有选择性的重新定义块而达到组件的复用。
Tiles最先作为Apache Struts框架的一个组件，后来被独立为Apache的一个独立项目。
Tiles项目主页：http://tiles.apache.org/index.html
Tiles配置的DTD定义：http://tiles.apache.org/framework/tiles-core/dtddoc/index.html
这里我们通过 Apache Tiles 3 来构建一个简单的页面布局。
首先我们可以建立一个maven webapp项目。
（关于如何用maven建立一个webapp项目：http://www.cnblogs.com/moonlightpoet/p/5598802.html）
Apache Tiles依赖的maven dependencies如下：
<!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-jsp -->
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-jsp</artifactId>
<version>3.0.5</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-servlet -->
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-servlet</artifactId>
<version>3.0.5</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-extras -->
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-extras</artifactId>
<version>3.0.5</version>
</dependency>
在web.xml中添加Tiles监听器。
<listener>
<listener-class>org.apache.tiles.extras.complete.CompleteAutoloadTilesListener</listener-class>
</listener>
Tiles监听器也可以自定义实现：http://tiles.apache.org/framework/config-reference.html
假设我们的布局分为header,body,footer，并且将html页面中的meta,script部分抽取出来。
/snippet/meta.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
/snippet/script.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<style>
div {
width: 500px;
height: 50px;
background: yellow;
} #body {
background: aqua;
}
</style>
<script type="text/javascript">
document.writeln("words wrote by script.jsp");
</script>
/snippet/header.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<h1>header</h1>
/snippet/footer.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<h1>footer</h1>
/snippet/body.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<p>body</p>
通过上面的公共部分和主题，构建一个布局文件如下：
/layout/layout.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<!DOCTYPE html>
<html>
<head>
<tiles:insertAttribute name="meta" />
<title><tiles:insertAttribute name="title" /></title>
<tiles:insertAttribute name="script" />
</head>
<body>
<div id="header">
<tiles:insertAttribute name="header" />
</div>
<div id="body">
<tiles:insertAttribute name="body" />
</div>
<div id="footer">
<tiles:insertAttribute name="footer" />
</div>
</body>
</html>
注意，文件中有关jstl的那一行可能会提示出错，解决办法是在pom.xml添加jstl的maven dependency：
<!-- https://mvnrepository.com/artifact/jstl/jstl -->
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
Tiles通过在xml文件中配置definition进行页面公共部分的重用和页面布局的组合。
/WEB-INF/tiles-defs.xml：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
"http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<!-- Definitions for Tiles documentation -->
<tiles-definitions> <definition name="tiles.base.definition">
<put-attribute name="meta" value="/snippet/meta.jsp" />
<put-attribute name="script" value="/snippet/script.jsp" />
<put-attribute name="header" value="/snippet/header.jsp" />
<put-attribute name="footer" value="/snippet/footer.jsp" />
</definition> </tiles-definitions>
上面地定义时抽象的，他没有包含任何一个jsp页面模板。
定义好公共部分之后，通过配置definition来组合页面布局。
我们可以看到，tiles-defs.xml并未包含body.jsp的内容。我们可以通过继承tiles.base.definition来定义一个tiles.index.definition，其布局模板为/layout/layout.jsp：
<definition name="tiles.index.definition" extends="tiles.base.definition"
template="/layout/layout.jsp">
<put-attribute name="body" value="/snippet/body.jsp" />
</definition>
完整的tiles-defs.xml文件内容如下：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
"http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<!-- Definitions for Tiles documentation -->
<tiles-definitions> <definition name="tiles.base.definition">
<put-attribute name="meta" value="/snippet/meta.jsp" />
<put-attribute name="script" value="/snippet/script.jsp" />
<put-attribute name="header" value="/snippet/header.jsp" />
<put-attribute name="footer" value="/snippet/footer.jsp" />
</definition> <definition name="tiles.index.definition" extends="tiles.base.definition"
template="/layout/layout.jsp">
<put-attribute name="body" value="/snippet/body.jsp" />
</definition> </tiles-definitions>
到这里已经将页面的布局进行了分割，组合。现在应用definition来构建一个请求响应页面。
/example/index.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<tiles:insertDefinition name="tiles.index.definition">
<tiles:putAttribute name="title" value="example index.jsp" />
</tiles:insertDefinition>
效果如下：
接下来看看网页源代码，如下：
<!DOCTYPE html>
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>example index.jsp</title> <style>
div {
width: 500px;
height: 50px;
background: yellow;
} #body {
background: aqua;
}
</style>
<script type="text/javascript">
document.writeln("words wrote by script.jsp");
</script>
</head>
<body>
<div id="header"> <h1>header</h1>
</div>
<div id="body"> <p>body</p>
</div>
<div id="footer"> <h1>footer</h1>
</div>
</body>
</html>
该例子中布局layout.jsp中body是可变的，title对一个不同的页面有不同的标题设置。在tiles-defs.xml的tiles.index.definition继承了tiles.base.definition,并且添加了其body页面，接着在插入tiles.index.definition的index.jsp页面添加了title。这样做达到的效果是整个站点的header,footer,meta,script抽取到了一个definition，然后通过继承的方式进行扩展，丰富不同的布局的页面组成元素，在具体的响应页面来定义专属该页面的内容。从而达到对页面的布局的控制，公共部分的复用的效果。
扩展参考内容：http://aiilive.blog.51cto.com/1925756/1596069?utm_source=tuicool&utm_medium=referral
使用 Apache Tiles 3 构建页面布局的更多相关文章
- SiteMesh：一个优于Apache Tiles的Web页面布局、装饰框架
一.SiteMesh项目简介 OS(OpenSymphony)的SiteMesh是一个用来在JSP中实现页面布局和装饰(layout and decoration)的框架组件,能够帮助网站开发人员较容 ...
- 使用Apache Tiles3.x构建界面布局
Tiles是一个免费的开源模板Java应用程序的框架.基于复合模式简化的用户界面的构建.对于复杂的网站仍是最简单.最优雅的方式与任何MVC技术一起工作.Struts2对Tiles提供了支持,如今Til ...
- 第6章—渲染web视图—使用Apache Tiles视图定义布局
使用Apache Tiles视图定义布局 Tiles是一个免费的开源模板Java应用程序的框架.基于复合模式简化的用户界面的构建.对于复杂的网站仍是最简单.最优雅的方式与任何MVC技术一起工作.S ...
- 一步一步构建手机WebApp开发——页面布局篇
继上一篇:一步一步构建手机WebApp开发——环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接 ...
- web前端学习（二）html学习笔记部分（10）-- HTML5构建应用布局和页面
1.2.25 HTML5构建应用布局和页面 1.2.25.1 HTML5在移动开发中的准则 1.尽量使用单页面开发 2.慎重选择前端UI框架 3.动画.特效使用准则(60fps) 浏览器消耗最小的 ...
- Apache Tiles 2.x 应用指南（转）
转自:http://jaymsimusic.iteye.com/blog/1138906 Apache Tiles 2.x 应用指南 博客分类: Apache Tiles Jakarta Tile ...
- CSS3与页面布局学习总结（四）——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]
如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
随机推荐
- php.ini中的pcre
当页面代码没有任何问题,也没有报错.但是页面的循环很多,请求导致开销很大的时候,有可能要改php.ini中的pcre部分. [Pcre]pcre.recursion_limit=-1pcre.back ...
- .net core json序列化首字符小写和日期格式处理
打开Startup.cs文件,在ConfigureServices方法中添加如下代码 public void ConfigureServices(IServiceCollection services ...
- Motion Detection Algorithms视频中运动检测算法源代码及演示代码
原文地址:http://www.codesoso.com/code/Motion_Detection.aspx 本文实现了在连续视频数据流中几种不同的运动检测算法,他们都是基于当前帧图像和前一帧图像的 ...
- c语言判断一个数是否为偶数
#include <stdio.h> #include <stdbool.h> _Bool isOu(int n){ //高度注意:&的优先级低于== )==){ re ...
- Decoration4：分页展示
现在我们实现前台List的分页展示,这也是最基本的要求 先看现在的Rest数据格式,在spring的默认返回中,分页用到的元素都已经在page节点中返回了,只要在前台合理利用就足够了 { " ...
- struts2异常处理机制
一.处理一般异常(javaBean异常) struts2进行异常处理首先需要添加exception拦截器,而默认拦截器栈已经加入了这个拦截器,所以不用特意的声明.在Struts 2框架中,采用声明式异 ...
- iOS开发-iOS 10 由于权限问题导致崩溃的那些坑
iOS开发-iOS 10 由于权限问题导致崩溃的那些坑 6月份的WWDC大会结束有一段时间了,相信很多开发者也是在努力工作的闲时用着Xcode8 Beta版学习着新的特性吧. 使用Xcode8写自己 ...
- C++-教程2-VS2010C++相关文件说明
stdafx.h说明:stdafx的英文全称为:Standard Application Framework Extensions(标准应用程序框架的扩展).所谓头文件预编译,就是把一个工程(Proj ...
- Git中保存用户名和密码
每次操作都需要输入用户名和密码感觉很繁琐,解决方法,在本地的工程文件夹的.git下打开config文件添加: [credential] helper = store 再输入一次用户名密码后就可 ...
- Unix系统编程（）原子操作和竞争条件
竞争状态是这样一种情形:操作共享资源的两个进程(或线程),其结果取决于一个无法预期的顺序,即这些进程获得CPU使用权的先后相对顺序. 以独占的方式创建一个文件 当同时指定了O_EXCL和O_CREAT ...