参考博客：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 构建页面布局的更多相关文章

  1. SiteMesh：一个优于Apache Tiles的Web页面布局、装饰框架

    一.SiteMesh项目简介 OS(OpenSymphony)的SiteMesh是一个用来在JSP中实现页面布局和装饰(layout and decoration)的框架组件,能够帮助网站开发人员较容 ...

  2. 使用Apache Tiles3.x构建界面布局

    Tiles是一个免费的开源模板Java应用程序的框架.基于复合模式简化的用户界面的构建.对于复杂的网站仍是最简单.最优雅的方式与任何MVC技术一起工作.Struts2对Tiles提供了支持,如今Til ...

  3. 第6章—渲染web视图—使用Apache Tiles视图定义布局

    使用Apache Tiles视图定义布局   Tiles是一个免费的开源模板Java应用程序的框架.基于复合模式简化的用户界面的构建.对于复杂的网站仍是最简单.最优雅的方式与任何MVC技术一起工作.S ...

  4. 一步一步构建手机WebApp开发——页面布局篇

    继上一篇:一步一步构建手机WebApp开发——环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接 ...

  5. web前端学习（二）html学习笔记部分（10）-- HTML5构建应用布局和页面

    1.2.25  HTML5构建应用布局和页面 1.2.25.1  HTML5在移动开发中的准则 1.尽量使用单页面开发 2.慎重选择前端UI框架 3.动画.特效使用准则(60fps) 浏览器消耗最小的 ...

  6. Apache Tiles 2.x 应用指南（转）

    转自:http://jaymsimusic.iteye.com/blog/1138906 Apache Tiles 2.x 应用指南 博客分类: Apache Tiles   Jakarta Tile ...

  7. CSS3与页面布局学习总结（四）——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  8. 如何在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 ...

  9. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

随机推荐

  1. ubuntu sudo 和su的区别

    ubuntu用户管理 sudo意思就是super-user do,让当前用户暂时以管理员的身份root来执行这条命令. su是用来改变当前用户的,su root,就是将当前用户切换为root,用了su ...

  2. Linux 间网线直连

    核心提示:两台linux 系统用交叉线直连的方法: 1.交叉网线制作 A头:白橙,橙,白绿,蓝,白蓝,绿,白褐,褐 B头:白绿,绿,白橙,蓝,白蓝,橙,白褐,褐 即 B头的1.3脚相对A头互换:2脚与 ...

  3. html学习一（html简史及doctype）

    html3部分 doctype(html) dtd head body 一.深入浅出HTML与XHTML的区别 HTML(HyperText Markup Language,超文本标记语言)最早的HT ...

  4. Mysql 字符串函数 详解

    字符串函数是最常用的一种函数了,如果大家编写过程序的话,不妨回过头去看看自己使用过的函数,可能会惊讶地发现字符串处理的相关函数占已使用过的函数很大一部分.MySQL中字符串函数也是最丰富的一类函数,表 ...

  5. Junit运行在Spring环境下

    @RunWith(SpringJUnit4ClassRunner.class)让测试运行于Spring测试环境 @ContextConfiguration 用来指定加载的Spring配置文件的位置,会 ...

  6. 二级指针 （C语言）

    二级指针又叫双指针.C语言中不存在引用,所以当你试图改变一个指针的值的时候必须使用二级指针.C++中可以使用引用类型来实现. 下面讲解C中的二级指针的使用方法. 例如我们使用指针来交换两个整型变量的值 ...

  7. Atitit.web预览播放视频的总结

    Atitit.web预览播放视频的总结 1. 浏览器类型的兼容性(chrome,ff,ie) 1 2. 操作系统的兼容性 1 3. 视频格式的内部视频格式跟播放器插件的兼容性.. 2 4. 指定播放器 ...

  8. 开源项目AndroidUtil-採用Fragment实现TabHost

    原文出自:方杰|http://fangjie.sinaapp.com/?p=141 转载请注明出处 学习Android也有一段时间了.感觉大部分的Android应用都有非常多类似的组件,所以就打算做了 ...

  9. 每日英语：Vender Assault Shines Ugly Light on China's Urban Enforcers

    The sudden death of a street vendor in Hunan province on Wednesday provoked outrage chengguan, or ur ...

  10. dbcp 详细配置

    1.配置参数 username : 连接用户名 password:  连接密码 url :  连接 url( 如果连接 mysql ,格式为 jdbc:mysql://ip:port/dbname) ...