使用 Apache Tiles 3 构建页面布局（一）

参考博客：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，然后通过继承的方式进行扩展，丰富不同的布局的页面组成元素，在具体的响应页面来定义专属该页面的内容。从而达到对页面的布局的控制，公共部分的复用的效果。

时间： 2024-10-11 14:55:26

使用 Apache Tiles 3 构建页面布局（一）的相关文章

使用Apache Tiles3.x构建界面布局（二）

接着上一篇:使用Apache Tiles3.x构建界面布局(一)继续构建页面布局. 上一篇示例中已经对页面的公共部分进行了抽取,创建了布局,并且将使用的布局应用的响应页面了. 1.定义definition来改变公共部分 现在有个新变化,响应页面的footer部分需要发生点变化,这个时候仍然可以通过继承的方式来配置一个definition. /WEB-INF/tiles-defs.xml 中新增definition <definition name="tiles.override.defin

使用Apache Tiles3.x构建界面布局（一）

Tiles是一个免费的开源模板Java应用程序的框架.基于复合模式简化的用户界面的构建.对于复杂的网站仍是最简单.最优雅的方式与任何MVC技术一起工作.Struts2对Tiles提供了支持,如今Tiles发展已有13个年头,成为Apache的一个独立项目,我们可以单独使用Tiles来构建用户界面布局. Tiles项目:http://tiles.apache.org/index.html Tiles的配置DTD定义:http://tiles.apache.org/framework/tiles-c

第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.

一步一步构建手机WebApp开发——页面布局篇

继上一篇:一步一步构建手机WebApp开发——环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接上代码 注意:此教程是接上一篇教程,也就是所有的内容是直接从body开始写,当然,也会贴出所有代码给大家. 第一步:框架的布局及幻灯片的布局(Html) ① 如上图所示,我们应该准备以下容器,方便填充内容 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

CSS3与页面布局学习笔记（四）——页面布局大全

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

apache tiles 页面模板的使用

jar包maven <!-- Tiles 模板--> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-extras</artifactId> <version>3.0.5</version> </dependency> springmvc-servlet.xml配置 <bean id="tilesV

页面布局备忘

一直在用flex做前端,都习惯面向对象的组件模式装配ui,最近想做一些基于网页的以信息展示为主的网站系统,我简称信息发布内核,内核两字表明我只是想做基本功能,不是做一个大而全的内容发布系统.首先得考虑的就是页面的布局模式.页面的布局模式与所选用的页面技术相关,初步计划选择thymeleaf,源于它的natural理念. thymeleaf的eclipse插件:https://github.com/thymeleaf/thymeleaf-extras-eclipse-plugin 页面布局分为包含

spring in action 4 6.3使用Apache Tiles

配置Tiles视图解析器 需要一个TilesConfigurer bean,该bean用于定位和加载tile定义,还需要一个TilesViewResolver用于将逻辑视图名与tile定义映射起来.在WebConfig.java中 @Configuration @EnableWebMvc @ComponentScan(basePackageClasses={AutoScan.class}) public class WebConfig extends WebMvcConfigurerAdapte

如何在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] 一.布局页面介绍[About Layout Pages] 很多网站有些内容需要显示在各个页面中,比如Header,Footer或者告诉用户已经登录的部分.ASP.NET允许你创建一个单独的文件来包含文本.标签和代码的内容块,从而搭建一个风格整齐的网站.接下来你就可以将这个内容块插入到任何你想要让它展示的页面中.采用这种方法