fv

Apache Tiles 是什么？

A free open-sourced templating framework for modern Java applications.

Based upon the Composite pattern it is built to simplify the development of user interfaces.

For complex web sites it remains the easiest and most elegant way to work alongside any MVC technology.

一个免费开源的模板框架，为现代的Java应用程序。 

基于复合模式，它是建立在简化用户界面的开发。 

对于复杂的网站，但它仍然一起工作，任何的MVC技术的最简单，最优雅的方式。

 

 

 

复合式视图模式（The Composite View Pattern）

 

     所有的网站都有一个共同点：它们是由具有类似结构的网页。页面共享相同的布局，而每个页面是由不同的独立的配件，但是始终摆在所有网站相同的位置。 

 

     复合视图模式正式化了这个典型的使用，它允许创建具有类似结构的页面，其中页面的每个部分在不同情况而有所不同的页面。

 

 

复合式视图模式怎么工作？

    为了理解这个模式，让我举个例子。从下图你可以看到一个典型的web网页结构。

    

 

 

 

 

 这个结构称为“典型布局（classic layout）”。这个模板按照这个布局组织页面，在需要的位置放上每一块，所以header部分在上，footer部分在下，等等。 

    将会发生如下情况，例如单击一个超链接跳转到另一个页面，另一个页面只需要改变其中的一部分，通常是body部分。           

   将会发生如下情况，例如单击一个超链接跳转到另一个页面，另一个页面只需要改变其中的一部分，通常是body部分。             

    

你能看到，这个页面虽然是不同的，但是他们的不同之处仅仅只有body部分。注意，虽然页面是不同的，但并不像在frameset中刷新frame。

    使用了复合式视图模式 ，页面的其他部分是可以复用的，同时一致的布局也保存了。

视图助手的作用

    复合视图的每一部分都能有一个视图助手。这个模式会按照页面的布局将各个部分准备的数据显示出来，如:创建一个菜单。

复合视图VS装饰器（decorator）

    Tiles 是一个复合视图框架：它允许在整个应用中复用页面。通过装饰器模式也可以实现复用页面。例如：Sitemesh 就是一个基于装饰器模式的。

    通过创建一个模板（template）来组织各个页面到同一个页面，装饰器模式需要一个简单的HTML页面，在转换时添加缺失的部分（在我们的以上例子中，添加header，footer和menu） 最终呈现它。 

下面是两种模式的对比表

 

 

 

 对照表

方面	复合视图	装饰器
可重用性	页面不同的部分（template和页面块）能在整个应用中使用	所有的装饰器都能复用，但是装饰自己的装饰器同一时间只能应用在一个页面
配置复杂度	每一个页面必须准确的定义	装饰器能应用到整个应用
运行时配置	页面可以在运行时配置组织	由于一个页面是在一个时间装饰的，他的特点是不呈现的。
表现	低开销组合	页面需要解析才能装饰

 

 

 

 

在Java Web项目中使用Apache Tiles

    Tiles一直是一个web应用程序包，通常结合strut一起使用。Apache Tiles™已经进化为一个独立的技术，但是它通常使用在以Servlet为基础的web应用程序中。

所需包

    第一件事是安装需要的包。本教程我们将尽可能的安装所有所需的包。只知道一个很轻巧但是有限的配置是可用的。 

    如果你在使用maven，只需要加入以下的依赖，maven将回家所需要的其他的依赖包的包含进来。

?

1 2	<groupId>org.apache.tiles</groupId> <artifactId>tiles-extras</artifactId>

    如果你没有使用maven，只需下载tiles并拷贝所有的jar包到/WEB-INF/lib目录下就行了。

    推荐使用maven创建项目。

启动Tiles引擎

    通过在web.xml文件中配置适当的listener来加载tiles 容器，既然我们决定加载一切，我们将使用 CompleteAutoTilesListener:

?

1 2 3

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

 

    在本教程中，我们将直接使用servlet API中使用Tiles，没有controller。在实际开发中，你可能会用一个MVC框架，像：Struts，Shale或Spring（Spring MVC）。 你不得不配置你的框架来使用Tiles； 请参看你是用的框架的文档来配置。现在，现在我们只是在web.xml声明TilesDispatchServlet。

    这就意味着任何一个以".tiles"结尾的请求将直接会发送到配置的Tiles Difinition处理。

 

 

 

Apache Tiles的基本使用

 

 

1、概述

    对于一个新的技术，了解其基本的概念和和原理是学好该技术的基础。

2、Tiles的概念

       Tiles 是复合视图模式（Composite View pattern）的一个实现。Tiles将该模式添加到自己的概念中是该模式具体化。Tiles的实现是以复合式模式为理论，   概念包括：Template，Attribute和Definition。视图助手模式的实现是View Preparer 概念。

接下来讲解相关的概念：Template，Attribute,Definition和View Preparer。

 

2.1、模板：Template

    在Tiles中，模板（Template）是一个页面的布局部分。你能将一个页面结构看成是由不同的需要填补空白组成。

    例如，考虑这个“典型布局”页面结构。    

 

    你能够将该结构复制到一个新建的JSP页面中，如下所示

    template.jsp

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>

<table>

  <tr>

    <td colspan="2">

      <tiles:insertAttribute name="header" />

    </td>

  </tr>

  <tr>

    <td>

      <tiles:insertAttribute name="menu" />

    </td>

    <td>

      <tiles:insertAttribute name="body" />

    </td>

  </tr>

  <tr>

    <td colspan="2">

      <tiles:insertAttribute name="footer" />

    </td>

  </tr>

</table>

注意：一个模板（Template）可以没有属性（attributes）,这种情况下该模板可以直接使用。有属性的话就要先定义属性才能使用，不然的话就会在解析jsp页面的时候报错。

 

 

 

 

2.2、属性：Attribute

    属性是模板中的空白，它在你的应用程序中被填充到模板中。属性可以是以下三种类型：

 

• string:属性是string的话，会将string直接呈现在页面。
• template:属性是一个模板（Template），有无属性都行。如果有属性的话，你也要将他们填充后再呈现页面。
• definition:它是一个可重复使用组成的页面，包含所有的属性来填充以呈现页面。

2.3、定义：definition

    定义是呈现给最终用户的组合物；本质上，一个定义是由一个模板和完全或部分填充的属性组成的。说白了就是：一个定义是由一个模板和属性组成的。

 

• 如果所有的“属性”都填充了，它将可以呈现给最终用户。
• 如果不是所有的属性都填充了，这个定义称为“抽象定义”（abastract definition）,它可以被用作“父定义”，让其他“定义”继承，失去的“属性”能在运行时填充。

    例如，你可以按之前看过的“典型模板”创建创建一个页面，修改Tiles的配置文件，如下：

?

1 2 3 4 5 6

<definition name="myapp.homepage" template="/layouts/classic.jsp">   <put-attribute name="header" value="/tiles/banner.jsp" />   <put-attribute name="menu" value="/tiles/common_menu.jsp" />   <put-attribute name="body" value="/tiles/home_body.jsp" />   <put-attribute name="footer" value="/tiles/credits.jsp" /> </definition>

2.4、视图助手：View Preparer

    有时候一个定义在呈现之前需要“预处理”。例如，显示一个menu时，menu的结构必须被创建并且已经保存在request范围内。

    为了达到“预处理 ”，视图助手将会被用到，视图助手将在呈现定义之前被调用，因此在将“定义”呈现所需的东西都会被正确的“预处理 ”。

3、创建和使用Tiles 页面

    安装tiles和学习了Tiles的一些概念后，是时候创建一些页面了。以下你将学习到创建可重用的页面和完整页面的步骤。

3.1、创建一个模板 

    我们使用“典型布局”页面结构：

 

    创建一个JSP页面作为这个布局并将其保存在/layouts/classic.jsp文件中

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>

<html>

  <head>

    <title><tiles:getAsString name="title"/></title>

  </head>

  <body>

        <table>

      <tr>

        <td colspan="2">

          <tiles:insertAttribute name="header" />

        </td>

      </tr>

      <tr>

        <td>

          <tiles:insertAttribute name="menu" />

        </td>

        <td>

          <tiles:insertAttribute name="body" />

        </td>

      </tr>

      <tr>

        <td colspan="2">

          <tiles:insertAttribute name="footer" />

        </td>

      </tr>

    </table>

  </body>

</html>

     在这个模板中有5个属性：title（string类型的属性），header，menu,body和footer。

3.2、创建组成页面

    在这个阶段，你需要创建4个用于替换之前创建模板中的 header,menu,body和footer属性的JSP页面。

    你可以放置任何你想放的东西在这个页面中，他们仅仅是一个测试。

3.3、创建一个定义

    默认情况，“定义”文件是/WEB-INF/tiles.xml。如果你使用的是CompleteAutoloadTilesListener,tiles将会使用webapp目录下按/WEB-INF/tiles*.xml匹配或classpath下按/META-INF/tiles*.xml匹配的任何文件作为“定义 ”文件；如果发现多个，tiles将会合并这些文件到一起。

    但现在，我们使用默认情况并创建/WEN-INF/tiles.xml文件，该文件下包含一个“定义”。

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<?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"> <tiles-definitions>   <definition name="myapp.homepage" template="/layouts/classic.jsp">     <put-attribute name="title" value="Tiles tutorial homepage" />     <put-attribute name="header" value="/tiles/banner.jsp" />     <put-attribute name="menu" value="/tiles/common_menu.jsp" />     <put-attribute name="body" value="/tiles/home_body.jsp" />     <put-attribute name="footer" value="/tiles/credits.jsp" />   </definition> </tiles-definitions>

 

 

 

3.4、渲染定义

    创建完定以后，你就能渲染它了。

 

• 通过使用<tiles:insertDefinition />标签，将定义插入一个JSP页面。

?

1 2	<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %> <tiles:insertDefinition name="myapp.homepage" />

•  其他情况，你可以直接使用response来渲染定义，通过使用Tiles 容器

?

1 2 3

TilesContainer container = TilesAccess.getContainer(         request.getSession().getServletContext()); container.render("myapp.homepage", request, response);

• 通过使用Tiles提供的Rendering Utilities。例如，如果你已经配置了TilesDispatchServlet，你能通过请求：http://example.com/webapp/myapp.homepage.tiles来渲染“定义”。

通过使用支持的框架（struts,spring等）来渲染“定义”。 

 

 

 

 

 

Tiles实战

1、创建maven项目

    New-->Maven Project-->

    

      勾选上Create a simple project(skip archetype selection), Next

 

    输入Group Id和Artifact Id ,Packaging 选 war, Finish ,就创建好了Maven Project。

 

    在pom.xml文件中加入Tiles的相关依赖：

?

1 2 3 4 5

<dependency>     <groupId>org.apache.tiles</groupId>     <artifactId>tiles-extras</artifactId>     <version>3.0.4</version> </dependency>

    到此项目创建完成，并且在项目中引入了tiles的相关jar包。

2、配置环境

2.1、在web.xml文件中加入tiles配置

?

1 2 3 4

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

2.2、加入difinition定义文件tiles.xml

    在/WEB-INF/目录下创建一个tiles.xml文件，添加如下配置：

?

1 2 3 4 5 6 7

<?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"> <tiles-definitions>    </tiles-definitions>

3、创建一个模板(template)

3.1、 创建相关目录

 

• /WEB-INF/view:放置JSP页面视图
• /WEB-INF/view/tempalte：模板文件夹放置tiles的模板文件（这个没有硬性规定的，可以随便自己放的，到时候配置的时候配置好就行了。）
• /WEB-INF/view/difirent：放置模板中不能重用的部分
• /WEB-INF/view/tempalte/template1：这里是一模板文件夹，其中放置了模板jsp页面和一些可以重用的界面。

    提示：

    你完全没必要按照以上的方式放置JSP页面，以上只是为了很好的管理和考虑安全性。你完全可以在创建如下目录：/webapp（或WebContext或WebRoot）/jsp,将页面放置在jsp目录下,完全不会有任何影响，因为，tiles会在定义difinitions时手动配置相关文件的路经的，如果这里还不能理解的话，请继续往下看，你将会理解的！

 

3.2、创建模板

    现在就来创建一个模板来试试，在/WEB-INF/view/tempalte/template1下创建template.jsp文件，添加如下内容：

?

1	template.jsp

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> <%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title><tiles:getAsString name="title" /></title> </head> <body>     <table>         <tr>             <td colspan="2"><tiles:insertAttribute name="header" /></td>         </tr>         <tr>             <td><tiles:insertAttribute name="menu" /></td>             <td><tiles:insertAttribute name="body" /></td>         </tr>         <tr>             <td colspan="2"><tiles:insertAttribute name="footer" /></td>         </tr>     </table> </body> </html>

        以上模板就是如下“经典布局”用tiles定义的模板

 

        并且，从以上文件中你看到了：

        <tiles:getAsString name="title" />

        <tiles:insertAttribute name="header" />

        <tiles:insertAttribute name="menu" />

        <tiles:insertAttribute name="body" />

       <tiles:insertAttribute name="footer" />

        以上就是tiles 在模板中插入了属性，用来留出空白的，然后再渲染的时候将属性的值配置的页面一起将整个页面呈现出来。 从而，达到了复合视图模式。

4、创建属性(attribute) 

4.1、Tiles的属性

    可以看成是模板中各空白区域的名字和真实显示的页面文件的路径的“键值对”的形式。

4.2、创建属性对应的页面 

   在/WEB-INF/view/tempalte/template1目录下创建如下jsp页面： 

• header.jsp
• menu.jsp
• footer.jsp

   在/WEB-INF/view/diffrent目录下创建

• body1.jsp
• body2.jsp

 

5、添加定义(difinition)

    现在，添加tiles的定义，在/WEB-INF/tiles.xml文件中添加如下内容：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<?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"> <tiles-definitions>     <definition name="test"         template="/WEB-INF/view/ tempalte /template1/template.jsp">         <put-attribute name="title" value="Tiles tutorial homepage" />         <put-attribute name="header"             value="/WEB-INF/view/ tempalte /template1/header.jsp" />         <put-attribute name="menu"             value="/WEB-INF/view/ tempalte /template1/menu.jsp" />         <put-attribute name="body" value="/WEB-INF/view/diffrent/body1.jsp" />         <put-attribute name="footer"             value="/WEB-INF/view/ tempalte /template1/footer.jsp" />     </definition> </tiles-definitions>

6、创建测试页面

    在/WEB-INF/目录下创建一个example.jsp文件，添加如下内容：

?

1 2 3 4

<%@ 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="test" />

 

7、测试

在浏览器中输入：http://localhost:8080/tiles-first/example.jsp

显示如下：

 

        至此，tiles的一个小小的demo就完成了。

8、项目分析

    当我们想更换body时，我们只要在tiles.xml文件中配置一下相关的文件路径就可以了。上面只是简单的使用Servlet API 来处理请求 ，接下来将结合SpringMVC来处理请求，并将Tiles作为视图来使用。