Tiles是一个免费的开源模板Java应用程序的框架。基于复合模式简化的用户界面的构建。对于复杂的网站仍是最简单、最优雅的方式与任何MVC技术一起工作。Struts2对Tiles提供了支持，如今Tiles发展已有13个年头，成为Apache的一个独立项目，我们可以单独使用Tiles来构建用户界面布局。

Tiles项目：http://tiles.apache.org/index.html

Tiles的配置DTD定义：http://tiles.apache.org/framework/tiles-core/dtddoc/index.html

本文主要通过构建一个简单的页面布局来认识Apache Tiles3.x(由于Tiles2.x和Tiles3.x存在较大差异)。

1.准备工作

1.1安装Apache Tiles3.x依赖的Jar

<dependency><groupId>org.apache.tiles</groupId><artifactId>tiles-extras</artifactId><version>3.0.5</version></dependency><dependency><groupId>org.apache.tiles</groupId><artifactId>tiles-servlet</artifactId><version>3.0.5</version></dependency><dependency><groupId>org.apache.tiles</groupId><artifactId>tiles-jsp</artifactId><version>3.0.5</version></dependency>

注意：这里使用了Apache3.x完整包依赖。

1.2调试环境

安装jetty-maven-plugin来热部署web应用

<build><finalName>tiles</finalName><plugins><plugin><groupId>org.mortbay.jetty</groupId><artifactId>jetty-maven-plugin</artifactId><version>7.1.6.v20100715</version><configuration><scanIntervalSeconds>1</scanIntervalSeconds><reload>automatic</reload><webAppConfig><contextPath>/tiles</contextPath></webAppConfig></configuration></plugin></plugins></build>

注意：运行mvn jetty:run -Djetty.port=9999 命名，访问http://localhost:9999/tiles 需要额外在Maven的settings.xml文件的插件组中添加插件组标识。

<pluginGroups><!-- pluginGroup| Specifies a further group identifier to use for plugin lookup.<pluginGroup>com.your.plugins</pluginGroup>--><pluginGroup>org.mortbay.jetty</pluginGroup></pluginGroups>

1.3配置web.xml

在web.xml中添加Tiles监听器

<listener><listener-class>org.apache.tiles.extras.complete.CompleteAutoloadTilesListener</listener-class></listener>

关于Tiles的监听器可以自定义实现，参见：http://tiles.apache.org/framework/config-reference.html

2.分析界面组成，构建布局文件

假设本案例中的页面构成如图：

分析界面布局，找不通用部分，特殊部分。 在webapp下创建layout文件夹放在布局文件，snippet文件夹放置公共部分。

通过分析，将布局切割为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: 480px;height: 80px;background: silver;
}#body {background: lime;
}</style>
<script type="text/javascript">document.writeln("这句话是由JavaScript写入页面的。");
</script>

  • /snippet/header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<h3>
这是头部
</h3>

  • /snippet/footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<h3>这是页脚</h3>

  • /snippet/index_body.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<pre>这是页面的主体部分
</pre>

通过上面的公共部分和主体，构建一个布局文件如下：

  • /layout/index_layout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="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>

3.Tiles的复合布局定义

Tiles是通过在xml文件中配置definition进行页面公共部分的重用，页面布局的组合。

  • /WEB-INF/tiles-defs.xml 定义好公共部分之后，通过配置definition来组合页面布局。

<?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>

上面的definition可以说是抽象的，仅仅作为基本的定义抽取了界面中最通用的部分,而且并未指定具体的模版文件（布局文件）。下面通过继承tiles.base.definition来定一个tiles.index.definition其布局模版为/layout/index_layout.jsp。

<definition name="tiles.index.definition" extends="tiles.base.definition"template="/layout/index_layout.jsp"><put-attribute name="body" value="/snippet/index_body.jsp" /></definition>

上面定义tiles.index.definition，新增了body,其值为/snippet/index_body.jsp页面。

4.使用复合布局

到这里已经将页面的布局进行了分割，组合。现在应用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="这是一个有Apache Tiles构建的页面布局." />
</tiles:insertDefinition>

5.启动服务器，访问/example/index.jsp

页面展示效果：

接下来看看页面的源代码：


<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>这是一个有Apache Tiles构建的页面布局.</title><style>
div {width: 480px;height: 80px;background: silver;
}#body {background: lime;
}</style>
<script type="text/javascript">document.writeln("这句话是由JavaScript写入页面的。");
</script>
</head>
<body><div id="header"><h3>
这是头部
</h3></div><div id="body"><pre>这是页面的主体部分
</pre></div><div id="footer"><h3>这是页脚</h3></div>
</body>
</html>

该例子中布局index_layout.jsp中body是可变的，title对一个不同的页面有不同的标题设置。在tiles-defx.xml的tiles.index.definition继承了tiles.base.definition,并且添加了其body页面，接着在插入tiles.index.definition的index.jsp页面添加了title。这样做达到的效果是整个站点的header,footer,meta,script抽取到了一个definition，然后通过继承的方式进行扩展，丰富不同的布局的页面组成元素，在具体的响应页面来定义专属该页面的内容。从而达到对页面的布局的控制，公共部分的复用的效果。

6.总结

本文仅仅是一个简单的示例，然而大部分内容被抽取公共部分占去，这样的结果并非意外，对于页面布局的划分，组合，重用才是使用Tiles之前最为繁重和复杂的工作，这些工作能够做的合理，优雅，配置definition自然就轻松多了。

使用Apache Tiles3.x构建界面布局（一）相关推荐

  1. 用flex进行网易云音乐界面构建和布局解析（2）

    前面我们通过<css布局简史与决胜未来的第四代css布局技术>了解了css布局发展史和未来,下面,我们通过<使用flex进行网易云音乐界面构建和布局解析>了解一下,如何在实际项 ...

  2. Android资源编辑器,使用布局编辑器构建界面

    在布局编辑器中,您可以通过将界面元素拖动到可视化设计编辑器中(而不是手动编写布局 XML),快速构建布局.设计编辑器支持在不同的 Android 设备和版本上预览布局,并且您可以动态调整布局大小,以确 ...

  3. 使用flex进行网易云音乐界面构建和布局解析（2）

    前面我们通过[<css布局简史与决胜未来的第四代css布局技术>](https://segmentfault.com/a/1190000015782763)了解了css布局发展史和未来,下 ...

  4. Android常见界面布局(详细介绍)

    一.View视图 所有的UI元素都是通过View与ViewGroup构建的,对于一个Android应用的用户界面来说,ViewGroup作为容器盛装界面中的控件,它可以包含普通的View控件,也可以包 ...

  5. android studio按坐标布局,Android studio一个手势锁的界面布局

    目的:完成一个手势锁的界面布局,对Relative,Contains等布局进行简单的使用,onWindowFocusChanged进行一定的熟练.大概来说,就是增加对界面布局的了解. 技术:(1)简单 ...

  6. 界面布局layout

    界面布局Layout Android应用中讲究逻辑和视图分离,所以一般不建议在android程序中直接编写界面.通常的方式是在布局文件(res/layou/*.xml)中编写页面,然后在Activit ...

  7. CH2-Android常见界面布局

    文章目录 目标 一.View视图 二.界面布局编写方式 2.1 在XML文件中编写布局 2.2 在Java代码中编写布局 三.界面布局的通用属性 四.线性布局 4.1 LinearLayout 4.2 ...

  8. 第2章 Android常见界面布局

    课后习题 1. 列举Android中的常用布局,并简述他们各自的特点 Android中有五种常用布局,分别为RelativeLayout(相对布局).LinearLayout(线性布局).FrameL ...

  9. 浅谈Winform程序的界面布局设计

    DevExpress v20.2完整版下载 DevExpress Winforms Controls 内置140多个UI控件和库,完美构建流畅.美观且易于使用的应用程序.DevExpress WinF ...

最新文章

  1. 【图像修复】浅析：图像修复中的TV模型
  2. java 线程---成员变量与局部变量
  3. php sql 字段名称,PHPSQL Server – 字段名称被截断
  4. 关于CATALINA_BASE
  5. 一段TCP socket和WebSocket互相交互的调试代码
  6. robot：当用例失败时执行关键字（发送短信）
  7. 小米球ngrok内网穿透
  8. 2021年7月国产数据库排行榜：openGauss成绩依旧亮眼，Kingbase向Top 10发起冲刺
  9. iptables 开放端口
  10. Java短信平台实战第二天
  11. h5游戏网站源码_从WEB前端角度看H5游戏开发
  12. webqq机器人java_机器人之一步一步来做WebQQ机器人-(三)(登录QQ并保持在线)
  13. ssm基于微信小程序校园商铺购物商城系统
  14. 第一篇博客，shader练习
  15. NR PUSCH(一)configured grant Type1 or Type 2
  16. 机器学习在网络安全领域的应用(一)
  17. 服务器显示时间差8个小时,服务器时间相差8小时 原因与解决方法
  18. “灵”是我的眼 | 扫地机器人的智能化进阶之路
  19. 二维码扫描+长按识别二维码demo
  20. android 屏幕像素密度计算器,手机/平板电脑屏幕PPI计算器

热门文章

  1. Ubuntu 10.10 安装 libx11-dev
  2. 用QQ提问的技巧，用了之后可以提高效率，呵呵。
  3. CowNew开源团队新书《自己动手写开发工具》隆重上市
  4. 单列索引和复合索引的使用
  5. oracle initialization or shutdown in progress解决方法
  6. SQLServer On Linux Package List on CentOS
  7. elasticsearch分布式搜索配置文件详解
  8. iOS，Android，WP, .NET通用AES加密算法
  9. 查询在应用程序运行得很慢， 但在SSMS运行得很快的原因探究
  10. RedHat Enterprise 5.1下OpenLDAP的配置及PAMNSS的配置