第6章—渲染web视图—使用Apache Tiles视图定义布局
使用Apache Tiles视图定义布局
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.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自然就轻松多了。
第6章—渲染web视图—使用Apache Tiles视图定义布局的更多相关文章
- 第06章-渲染Web视图
1. 理解视图解析 将控制器中请求处理的逻辑和视图中的渲染实现解耦是Spring MVC的一个重要特性.如果控制器中的方法直接负责产生HTML的话,就很难在不影响请求处理逻辑的前提下,维护和更新视图. ...
- 第6章—渲染web视图—SpringMVC+Thymeleaf 处理表单提交
SpringMVC+Thymeleaf 处理表单提交 thymleaf处理表单提交的方式和jsp有些类似,也有点不同之处,这里操作一个小Demo,并说明: 1.demo的结构图如下所示: pom.xm ...
- 第6章—渲染web视图—使用Thymeleaf
使用Thymeleaf 长期以来,jsp在视图领域有非常重要的地位,随着时间的变迁,出现了一位新的挑战者:Thymeleaf,Thymeleaf是原生的,不依赖于标签库.它能够在接受原始HTML的地方 ...
- Spring实战第六章学习笔记————渲染Web视图
Spring实战第六章学习笔记----渲染Web视图 理解视图解析 在之前所编写的控制器方法都没有直接产生浏览器所需的HTML.这些方法只是将一些数据传入到模型中然后再将模型传递给一个用来渲染的视图. ...
- Spring 学习笔记（十）渲染 Web 视图 (Apache Tilesa 和 Thymeleaf)
使用Apache Tiles视图定义布局 为了在Spring中使用Tiles,需要配置几个bean.我们需要一个TilesConfigurer bean,它会负责定位和加载Tile定义并协调生成Til ...
- Spring学习(六)--渲染Web视图
一.将模型数据渲染为Html 在上一篇文章中,我们所编写的控制器方法都没有直接产生浏览器中渲染所需的HTML.这些方法只是将数据填充到模型中,然后将模型传递给一个用来渲染的视图.这些方法会返回一个St ...
- 【Spring】渲染Web视图
前言 前面学习了编写Web请求的控制器,创建简单的视图,本篇博文讲解控制器完成请求到结果渲染到用户的浏览器的过程. 渲染Web视图 理解视图解析 前面所编写的控制器方法都没有直接产生浏览器中渲染所需要 ...
- 渲染Web视图
Spring MVC定义了一个名为ViewResolver的接口 public interface ViewResolver{ View resolveViewName(String viewName ...
- SpringMVC之四：渲染Web视图
理解视图解析 在前面的例子中,我们看到控制器返回的都是一个逻辑视图的名称,然后把这个逻辑视图名称交给view resolver,然后返回渲染后的 html 页面给 client. 将控制器中请求处理的 ...
随机推荐
- Linux服务器部署系列之四—DHCP篇
DHCP服务器的配置是Linux服务器配置中最简单的服务之一,网上也有很多相关文档,不过大部分都只是讲解了配置.虽然我这篇文档也不一定很完善,不过我还是希望能够尽量说得明白一些,同时也希望大家能够提供 ...
- UVaLive 4597 Inspection (网络流，最小流)
题意:给出一张有向图,每次你可以从图中的任意一点出发,经过若干条边后停止,然后问你最少走几次可以将图中的每条边都走过至少一次,并且要输出方案,这个转化为网络流的话,就相当于 求一个最小流,并且存在下界 ...
- Windows命令行参数（不断更新）
这里先讲一下系统变量: 注意:一旦将路径加入到环境变量Path中,那么运行它下面的程序的时候就不用非得指定到目标路径中,直接键入命令就行了. 1.type命令:打开并读取文件里面的内容. C:\Use ...
- （回文串 Manacher ）Girls' research -- hdu -- 3294
http://acm.hdu.edu.cn/showproblem.php?pid=3294 Girls' research Time Limit:1000MS Memory Limit:32 ...
- c++内存管理方式
概述 本章总结一些关于个人对内存管理的理解,主要包括如下内容: 内存管理原则 优秀的接口 智能指针的作用在哪里? 内存管理原则 学c++的同学都知道这个内存管理原则,就是“谁创建,谁释放”或者说“谁申 ...
- ACL授权实例
上一篇关于ACL的文章中:位运算实现ACL授权与认证过程的原理解析,我们学习了通过位运算实现ACL授权与认证的原理核心,今天我们一起来看授权的实例. 实现的功能很简单:打开授权界面时,加载已授权信息. ...
- 一、配置etcd数据库
etcd服务作为Kubernetes集群的主数据库,在安装Kubernetes各服务之前需要首先安装和启动. 1. 安装etcd yum -y install etcd 2. 修改etcd配置文件 ...
- 探索TFS Git 库文件换行（CRLF）的处理方式
(2018.12.29 更新,增加Git处理方式) 在计算机的技术中,所有文本信息都会涉及换行的问题.例如,你在键盘上敲击一次Enter(回车)键,系统将在文本重增加一行,实际上系统已经在文件中插入了 ...
- linux系统编程之文件与IO（三）：利用lseek()创建空洞文件
一.lseek()系统调用 功能说明: 通过指定相对于开始位置.当前位置或末尾位置的字节数来重定位 curp,这取决于 lseek() 函数中指定的位置 函数原型: #include <sys/ ...
- Visual Studio Code 学习.net core初体验
一,安装 最近在用 Visual Studio Code 学习.net core ,记录下学习的过程,首先去官网下载最新的.net core2.1安装包,有windows 和mac,根据自己的开发环境 ...