第6章—渲染web视图—使用Apache Tiles视图定义布局

简介: 使用Apache Tiles视图定义布局Tiles是一个免费的开源模板Java应用程序的框架。基于复合模式简化的用户界面的构建。对于复杂的网站仍是最简单、最优雅的方式与任何MVC技术一起工作。

使用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存在较大差异)。

本人的目录结构如下:

img_080d21f475de9c6da5cd1c456039bdfe.png
image

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.分析界面组成,构建布局文件

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

img_da4ce1a4a1afde1cc2a987b17c0b0766.png
image

分析界面布局,找不通用部分,特殊部分。 在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

页面展示效果:

img_8c31e497974dc57b2f5aec99d6128528.png
image

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

<!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自然就轻松多了。

相关文章
|
2月前
|
监控 Linux 网络安全
【Linux】Web服务之Apache服务
【Linux】Web服务之Apache服务
34 0
|
3月前
|
JSON API 网络架构
Python Web 开发: 解释 Django REST framework 的作用,以及如何定义序列化器(Serializer)?
Python Web 开发: 解释 Django REST framework 的作用,以及如何定义序列化器(Serializer)?
|
3月前
|
安全 前端开发 区块链
Web3.0:重新定义互联网的未来
Web3.0:重新定义互联网的未来
22 0
|
4月前
|
Cloud Native Java 应用服务中间件
带你读《Apache Tomcat的云原生演进》——GraalVM static compilation in web container application(2)
带你读《Apache Tomcat的云原生演进》——GraalVM static compilation in web container application(2)
130 1
带你读《Apache Tomcat的云原生演进》——GraalVM static compilation in web container application(2)
|
4月前
|
监控 Cloud Native 应用服务中间件
带你读《Apache Tomcat的云原生演进》——Web容器可观测最佳实践(1)
带你读《Apache Tomcat的云原生演进》——Web容器可观测最佳实践(1)
带你读《Apache Tomcat的云原生演进》——Web容器可观测最佳实践(1)
|
4月前
|
Prometheus Cloud Native 应用服务中间件
带你读《Apache Tomcat的云原生演进》——Web容器可观测最佳实践(2)
带你读《Apache Tomcat的云原生演进》——Web容器可观测最佳实践(2)
带你读《Apache Tomcat的云原生演进》——Web容器可观测最佳实践(2)
|
4月前
|
Cloud Native Java 应用服务中间件
带你读《Apache Tomcat的云原生演进》——Web容器可观测最佳实践(3)
带你读《Apache Tomcat的云原生演进》——Web容器可观测最佳实践(3)
带你读《Apache Tomcat的云原生演进》——Web容器可观测最佳实践(3)
|
4月前
|
Cloud Native 应用服务中间件 Apache
带你读《Apache Tomcat的云原生演进》——Web容器可观测最佳实践(4)
带你读《Apache Tomcat的云原生演进》——Web容器可观测最佳实践(4)
带你读《Apache Tomcat的云原生演进》——Web容器可观测最佳实践(4)
|
4月前
|
数据采集 Cloud Native 应用服务中间件
带你读《Apache Tomcat的云原生演进》——Web容器可观测最佳实践(5)
带你读《Apache Tomcat的云原生演进》——Web容器可观测最佳实践(5)
带你读《Apache Tomcat的云原生演进》——Web容器可观测最佳实践(5)
|
4月前
|
Cloud Native 安全 应用服务中间件
带你读《Apache Tomcat的云原生演进》——Secure By Default Web Applications Apache Sling-Robert Munteanu(1)
带你读《Apache Tomcat的云原生演进》——Secure By Default Web Applications Apache Sling-Robert Munteanu(1)

相关产品

  • 云迁移中心
  • 推荐镜像

    更多