参考博客：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. pip install 安装提示unknown 包

    pip install setuptools --upgrade should fix the issue

  2. IT行业面试指导 计算机行业面试技巧 面试技巧

    简历篇 简历是你的的第一张脸,简历写的是否合理,是否吸引人,将决定你能否赢得宝贵的面试机会,迈出第一步! l  姓名,性别,学历,居住地,工作年限,邮箱,手机号 l  填“现居住地”,不要填成“户籍所 ...

  3. mysql常见数据提示 mysql报错提示大全

    错误代码和消息 目录 B.1. 服务器错误代码和消息 B.2. 客户端错误代码和消息 本章列出了当你用任何主机语言调用MySQL时可能出现的错误.首先列出了服务器错误消息.其次列出了客户端程序消息. ...

  4. IOS基于XMPP协议开发－－XMPPFramewok框架（三）：用户注册

    接着上面说 用户注册是比较简单的,成功连接上服务器后,设置好JID,即可调用 [_xmppStream registerWithPassword:pwd error:&err] 进行注册 -( ...

  5. CXF学习笔记 之 “注解”

    @WebService 1.serviceName: 对外发布的服务名,指定 Web Service 的服务名称:wsdl:service.缺省值为 Java 类的简单名称 + Service.(字符 ...

  6. 记一次log4j日志导致线上OOM问题案例

    最近一个服务突然出现 OutOfMemoryError,两台服务因为这个原因挂掉了,一直在full gc.还因为这个问题我们小组吃了一个线上故障.很是纳闷,一直运行的好好的,怎么突然就不行了呢... ...

  7. 基于jquery和svg超炫的网页动画

    今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: ...

  8. 一款基于jQuery的图片分组切换焦点图插件

    这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实 ...

  9. 华为/中兴 3G 模块的调试

    1 检查/etc/init.d/pppd『红颜色的使上电自动上网注册(如果没有红颜色的语句),请添加』 #!/bin/sh#DAEMON=/usr/sbin/pppdPIDFILE=/var/run/ ...

  10. C#代码获取或设置Iframe中的HTML

    在最近的数据采集研究中, 发现很多页面的内容都是在iframe中的, 这位采集带来了不少困难. 经过一番思考之后, 我想到了C#的解决办法: 1. 运行Spider Studio, 加载页面 http ...