参考博客：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. java反射详解及说明

    首先写一个Person类: package lltse.base.reflectdemo; public class Person { private String name ="张三&qu ...

  2. spring boot test中mockito的运用

    mock的意义 在微服务盛行的当下,开发过程中往往出现A应用中某功能的实现需要调用B应用的接口,无论使用RPC还是restful都需要B应用提供接口的实现整个开发工作才能继续进行.从而导致A应用的开发 ...

  3. 缓存server设计与实现（五）

    上次讲到lru与缓存重建,这次主要讲一下关于过期处理的一些主要问题. 在讨论这个问题之前,有个相关的问题须要大家有所了解. 就是对于一个缓存如期仅仅来说,什么东西应该缓存,什么不应该缓存.这是一个比較 ...

  4. 2015 HDU 多校联赛 5317 RGCDQ 筛法求解

    2015 HDU 多校联赛 5317 RGCDQ 筛法求解 题目  http://acm.hdu.edu.cn/showproblem.php? pid=5317 本题的数据量非常大,測试样例多.数据 ...

  5. stl遍历map

    MapInfo* CGameConfig::getMapInfoById( int nId ) { for (map<int, MapInfo>::iterator it = m_mapM ...

  6. 0065 MyBatis一级缓存与二级缓存

    数据库中数据虽多,但访问频率却不同,有的数据1s内就会有多次访问,而有些数据几天都没人查询,这时候就可以将访问频率高的数据放到缓存中,就不用去数据库里取了,提高了效率还节约了数据库资源 MyBatis ...

  7. C++虚函数解析（转载）

    虚函数详解第一篇:对象内存模型浅析 C++中的虚函数的内部实现机制到底是怎样的呢?     鉴于涉及到的内容有点多,我将分三篇文章来介绍.     第一篇:对象内存模型浅析,这里我将对对象的内存模型进 ...

  8. PHP学习记录第一篇：Ubuntu14.04下LAMP环境的搭建

    最近一段时间会学习一下PHP全栈开发,将会写一系列的文章来总结学习的过程,以自勉. 第一篇记录一下LAMP环境的安装 0. 安装Apache Web服务器 安装之前先更新一下系统 sudo apt-g ...

  9. PHP——字符串

    <?php //strlen("aaa");取字符串的长度 *** echo strlen("aaaaa"); echo "<br /&g ...

  10. Bitmap转灰度字节数组byte[]

    工作中遇到图片转灰度数组的须要,经过研究和大神的指导.终于得到例如以下两个方法.能够实现位图转灰度数组 简单的位图转灰度数组就是:得到位图中的每一个像素点,然后依据像素点得到RGB值,最后对RGB值, ...