参考博客：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. [HNOI2002]营业额统计 Splay tree

    Splay tree入门题,学好代码风格,学习HH大牛的,传送门.. #include <functional> #include <algorithm> #include & ...

  2. Android 8款开源游戏引擎

    1.Angle  (2D    Java) Angle是一款专为Android平台设计的,敏捷且适合快速开发的2D游戏引擎,基于OpenGLES技术开发.该引擎全部用Java代码编写,并且可以根据自己 ...

  3. CSC时无法找到C:\Program Files\Microsoft SDKs\Windows\v6.0A\lib

    偶然用到CSC编译c#程序,出现如下问题: warning CS1668: “LIB 环境变量”中指定的搜索路径“C:\Program Files\Microsoft        SDKs\Wind ...

  4. RPC服务框架dubbo(二)：dubbo支持的注册中心

    Zookeeper 1 优点:支持网络集群 2 缺点:稳定性受限于Zookeeper zookeeper的详细信息看这里:https://www.cnblogs.com/shamo89/tag/Zoo ...

  5. CYQ学习主要摘要

    这个个人搞的框架不知道到底怎么样,做个项目测试下看看,本来想用EF的,大多数人说性能低,所以先放弃,试试这个,一些主要地方我做个摘录 5:多表怎么搞定? A:视图方式,将多表查询放到数据库里成视图,情 ...

  6. Ubuntu 文件文件夹查看权限和设置权限

    ubuntu下查看权限的命令为: ls -l filename ls -ld folder ubuntu下设置权限的命令为: 一共有10位数 其中: 最前面那个 - 代表的是类型 中间那三个 rw- ...

  7. Android基础总结（三）SQLite，ListView，对话框

    测试 黑盒测试 测试逻辑业务 白盒测试 测试逻辑方法 根据测试粒度 方法测试:function test 单元测试:unit test 集成测试:integration test 系统测试:syste ...

  8. 专题实验 SQL

    merge merge into copy_emp ce using emp e on (ce.empno = e.empno) when matched then update set ename ...

  9. 离线 + 位优化 - SGU 108 Self-numbers 2

    SGU 108 Self-numbers 2 Problem's Link Mean: 略有这样一种数字:对于任意正整数n,定义d(n)为n加上n的各个位上的数字(d是数字的意思,Kaprekar发明 ...

  10. 2015 Multi-University Training Contest 3 1002 RGCDQ

    RGCDQ Problem's Link: http://acm.hdu.edu.cn/showproblem.php?pid=5317 Mean: 定义函数f(x)表示:x的不同素因子个数. 如:f ...