tiles_科中资源网

Tiles 是一种JSP布局框架，主要目的是为了将複杂的jsp页面作为一个的页面的部分机能，然后用来组合成一个最终表示用页面用的，这样的话，便于对页面的各个机能的变更及维护。 Tiles使得struts在页面的处理方面多了一种选择。并且更容易实现代码的重用。

最早的Tiles是组装在Struts1.1里面的（Struts-Tiles），后面发展为独立的Tiles框架（Tiles 2+，目前最新版本为3.0）。

Tiles也指在windows Phone 7中的用户界面。

基本介绍

中文名：tiles
页面布局：增加了layout的概念
基本配置：每一个页面的组成元素和形式
属性如下：属性名称必须值必须值类型说明

Struts-Tiles页面布局

Tiles增加了layout的概念，其实就是把一个页面划分为几块。通常的来说一个页面大概可以划分为如下几块：

head页面头部：存放一个运用的公共信息：logo等，如果是网站可能是最上面的一块。

menu页面选单：放置一个运用中需要使用的选单，或者在每一个页面都使用的连线。

footer页面尾部：如版权资讯等。

body页面主题内容：每个页面相对独立的内容。

如果按上面的划分那对每一个页面我们只要写body里面的内容，其他的就可以共享重用。

如果大多数页面的布局基本相同我们甚至可以使用一个jsp档案根据不同的参数调用不同的body。

Struts-Tiles基本配置

Tiles有一个配置档案：tiles-defs.xml

tiles-defs.xml定义了每一个页面的组成元素和形式。

下面我将说明如下所示的一个tiles-defs.xml档案

tiles-defs.xml

<tiles-definitions>

</definition>

这里的title是标题，logo是界面上最左上角的标誌，质量管理系统有两级选单，mainMenu是主选单，是不变的，而subMenu是子选单，六个模组就有六个子选单，是随模组而变化的。messages是错误信息。

</definition>

这里的common.testManage是测试管理模组的意思，这就是一个模组对应一个subMenu。

<!—定义setting.projectInfo，继承common.setting -->

</definition>

这是说一个模组下有多个功能点，每个功能点下的左侧选单是相同的，因此leftBody就是这个左侧选单，变化的只是rightBody右侧部分而已。下面还有详解。

/layout/ mainLayout.jsp

-----------------------------------------------------------------

…

<html>

<head>

…

</head>

<tiles:insert attribute="logo" />

<tiles:insert attribute="mainMenu" />

</tr>

<tiles:insert attribute="submenu" />

</tr>

</table>

<tiles:insert attribute="leftBody" />

</td>

<table>

<tiles:insert attribute="messages" />

</table>

<tiles:insert attribute="rightBody" />

</td>

</tr>

</table>

</body>

</html>

在web.xml里面配置tiles对应的taglib的配置如下：

web.xml

<taglib-uri>/WEB-INF/struts-tiles.tld</taglib-uri>

<taglib-location>/WEB-INF/tld/struts-tiles.tld</taglib-location>

</taglib>

在struts-config.xml里面配置tiles-defs.xml

Struts-config.xml

<plug-in className="org.apache.struts.tiles.TilesPlugin">

<set-property property="definitions-config" value="/WEB-INF/plugin/tiles-defs.xml" />

<set-property property="moduleAware" value="true" />

<set-property property="definitions-parser-validate"

value="true" />

</plug-in>

使用Struts-Tiles

如果已经配置好tiles-defs.xml，接下来就可以在jsp档案中使用这些定义了。

有如下的方式使用tiles

<%@ include file="/common/taglibs.jsp"%>

<tiles:insert definition="setting.projectInfo" flush="true" />

插入setting.projectInfo标记的一页

taglibs.jsp里包括这幺一句话：

<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%>

根据tiles-defs.xml里的setting.projectInfo设定

</definition>

知道leftBody是/WEB-INF/pages/common/body/projectinfoleftbd.jsp页面，而rightBody是/WEB-INF/pages/common/body/projectinforightbd.jsp页面。所以我们只需要建立projectinfoleftbd.jsp和projectinforightbd.jsp页面的就OK了，

而左侧部分就是项目设定中的选单，因为项目设定中又包括很多子页，所以在整个项目设定中的左侧选单是不变的，变的只有右侧主体部分，而projectinforightbd.jsp这个页面即项目设定中的一个项目基本信息的子页，项目设定中有多个这样的子页，这些页是在tiles-defs.xml配置的，比如说

</definition>

leftBody是相同的，都为projectinfoleftbd.jsp，变化的只有rightBody。

Tiles2 的实例

Java基于WEB的开发中，在用户界面方面简化开发的工具上，大家的选择习惯性的受一些知名框架的影响去左右。我也不例外，最早时受struts的影响，使用了tiles，并且很愿意使用这种Tiles的用户界面开发习惯，并且在我的开发团队当中推广这种模式。我觉得採用这种界面开发方法会给我们团队带来一些便利：

1、美工界面工作可以让更懂用户感受的商务人员与美工交流；
2、技术人员专注于业务模型的实现；
3、使WBS做得可以更细，测试也可以做得很细；
4、以上所有工作可以并行
5、有效的组织项目Views层档案管理，方便团队协作。

也许是因为鼎鼎大名的WebWork使用了SiteMesh、鼎鼎大名的Struts在2也使用了SiteMesh，我发现网上对于Tiles2的套用交流相对较少了，而对于SiteMesh的推荐较多。而我在前期研发J10引擎过程中，对于SiteMesh和Tiles2都进行了套用和比较，以便于把这一种我偏爱的方式能够继续在我的团队当中採用，在测试和套用了几个案例后，我最后确定加入了Tiles2的开源框架作为用户界面的项目组“标準模式”，基于：

1、项目团队成员一直使用Struts 1的tiles，有助于让成员低培训成本进入套用状态；
2、tiles2的配置相对于SiteMesh更加快捷简单；
3、tiles2的套用更加简单。

tiles可以方便的套用在任何jsp、servlet的项目中，下面我对tiles的套用进行一下介绍，如果有不足的地方，欢迎朋友们进行交流。

1、準备
我比较建议大家先花十分钟时间读一下他的Getting Started和quickstart文档，很有益。

2、配置tiles-def.xml
如果你曾经使用过tiles，下面这个配置档案很熟吧？如果你没用过，呵，对你来说也是很好理解的吧。

Xml代码

<?xml version="1.0" encoding="UTF-8" ?>
<br><!DOCTYPE tiles-definitions PUBLIC
<br> "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
<br>
">
<br>
<br><tiles-definitions>
<br>
<br>
<br> <definition name="layout" template="/views/layout/layout.jsp">
<br> <put-attribute name="title" value="tiles2用户界面简单示例"/>
<br> <put-attribute name="header" value="/views/layout/header.jsp"/>
<br> <put-attribute name="info" value="/views/layout/info.jsp"/>
<br> <put-attribute name="body" value="/views/layout/body.jsp"/>
<br> <put-attribute name="footer" value="/views/layout/footer.jsp"/>
<br> </definition>
<br>
<br> <definition name="business.list" extends="layout">
<br> <put-attribute name="title" value="广告效果分析"/>
<br> <put-attribute name="body" value="/views/business/adEffect.jsp"/>
<br> </definition>
<br></tiles-definitions>
<br>

<tiles-definitions>标籤内主要的子节点就是<definition>标籤，这个标籤属性如下：

属性
名称	是否必须	值必须	值类型	说明
name	true	true	java.lang.String	指定将要创建的一个definition bean的访问名称。这个必须有的。
template	false	true	java.lang.String	哪一个档案是模板档案，这个模板档案后面会介绍。
role	false	true	java.lang.String	如果配置了这个值的话，需要role的值相等，这个definition才被有效访问，这个功能我没有深究，也不推荐使用，建议大家建立自己更完善的许可权控制管理。当然欢迎朋友们完善role套用的示例，tiles自带role的示例，有兴趣的人去读一下就明白了。
extends	false	true	java.lang.String	继承哪一个definition，值是你要继承的definition的name的值。高使用率的属性。
preparer	false	true	java.lang.String	呵，我没使用，如果你要使用的话，要写一个实现他的Prepare接口的类，作用就是在展现你定义的页面前会先执行你的prepare。

实际上一般按我的例子中的就足够用了，OK，我们继续吧。

3、配置web.xml

多幺easy的事情啊，打开你的web.xml，用你的滑鼠copy & paster下面的代码并放到你的web.xml的<web-app>节点下。

Xml代码

<context-param>
<br> <param-name>
<br> org.apache.tiles.impl.BasicTilesContainer.DEFINITIONS_CONFIG
<br> </param-name>
<br> <param-value>
<br> /WEB-INF/tiles-defs.xml
<br> </param-value>
<br> </context-param>
<br>
<br> <listener>
<br> <listener-class>
<br> org.apache.tiles.web.startup.TilesListener
<br> </listener-class>
<br> </listener>
<br>
<br>

<context-param> <param-name> org.apache.tiles.impl.BasicTilesContainer.DEFINITIONS_CONFIG </param-name> <param-value> /WEB-INF/tiles-defs.xml </param-value> </context-param> <listener> <listener-class> org.apache.tiles.web.startup.TilesListener </listener-class> </listener>

org.apache.tiles.impl.BasicTilesContainer.DEFINITIONS_CONFIG这是配置tiles的配置档案，可以配置多个档案，档案之间用逗号分隔即可，档案格式完全相同只是看你团队的WBS需要作调整即可。listener节点是配置一个tiles的监听器——如果你前面花了十分钟时间读了一下tiles官方的Quick start文档的话，也许你还记得，在Configuration一节介绍了很多个配置方式，你可以随自己喜好选择使用servlet、listener、filter之一。

4、框架页layout.jsp

Html代码

<%@ taglib uri=" 地址" prefix="tiles"%>
<br><%@ taglib uri=" 地址" prefix="c"%>
<br><html xmlns=" 地址">
<br> <head>
<br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<br> <title><tiles:getAsString name="title" /></title>
<br> <meta name="description" content="信息提示" />
<br> </head>
<br> <body>
<br> <table border="0" width="950" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<br> <tr>
<br> <td>
<br> <tiles:insertAttribute name="header" />
<br> </td>
<br> </tr>
<br> <tr>
<br> <td>
<br> <%--
<br> /* 主要信息和操作界面
<br> *
<br> */
<br> --%>
<br> <table width="100%" border="0" cellpadding="0" cellspacing="0">
<br> <c:if test="${info!=null }">
<br> <tr>
<br> <td>
<br><tiles:insertAttribute name="info" /> </td>
<br> </tr>
<br> </c:if>
<br> <tr>
<br> <td>
<br> <tiles:insertAttribute name="body" />
<br> </td>
<br> </tr>
<br> </table>
<br> <%--
<br> //主信息和操作界面结束。
<br> --%>
<br> </td>
<br> </tr>
<br> <tr>
<br> <td>
<br> <tiles:insertAttribute name="footer" />
<br> </td>
<br> </tr>
<br> </table>
<br> </body>
<br></html>
<br>

<%@ taglib uri="地址" prefix="tiles"%><%@ taglib uri="地址" prefix="c"%><html xmlns="地址"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><tiles:getAsString name="title" /></title> <meta name="description" content="信息提示" /> </head> <body> <table border="0" width="950" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td> <tiles:insertAttribute name="header" /> </td> </tr> <tr> <td> <%-- /* 主要信息和操作界面 * */ --%> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <c:if test="${info!=null }"> <tr> <td><tiles:insertAttribute name="info" /> </td> </tr> </c:if> <tr> <td> <tiles:insertAttribute name="body" /> </td> </tr> </table> <%-- //主信息和操作界面结束。 --%> </td> </tr> <tr> <td> <tiles:insertAttribute name="footer" /> </td> </tr> </table> </body></html>

特别注意其中<tiles:insertAttribute>和<tiles:getAsString>两个节点，getAsString如下：

属性名乐是否必须值必须值类型说明nametruetruejava.lang.String

属性名称，引用definition attribute的名称

ignorefalsetrueboolean

如果设为true，如果发生异常什幺的，就给出空白内容。默认为false，会给出cause。

rolefalsetruejava.lang.String

别用了吧，有兴趣的人去看吧，不推荐使用。

insertAttribute的属性如下：

属性名称必须值必须值类型说明namefalsetruejava.lang.String

要插入的属性名称，如果value有值，将被忽略.

valuefalsetruejava.lang.Object

如果有值，会被直接使用，一般我不太直接用，如果直接用的话，一般也是直接给一个jsp档案的相对content路径。

flushfalsefalseboolean

在插入这个页面前先把out stream进行一次flush乾净操作。

ignorefalsetrueboolean

同getAsString的解释。

rolefalsetruejava.lang.String

不推荐使用。说n次了。下同

preparerfalsetruejava.lang.String同上

因为我用了一个表格作範例，用表格区格开了body、footer、header、info的定义。其中info是否展现，又採用了c标籤和EL语句。你要想写个更简单的页面例子，也可以，为了方便理解，我拿一个tiles官方的layout大家看一下：

Html代码

<%@ taglib uri="地址" prefix="tiles" %>
<br>
<br><table border="2" width="300" bordercolor="Gray">
<br> <tr>
<br> <td bgcolor="Blue"><strong><tiles:getAsString name="title"/></strong></td>
<br> </tr>
<br> <tr>
<br> <td><tiles:insertAttribute name="header"/></td>
<br> </tr>
<br> <tr>
<br> <td><tiles:insertAttribute name="body"/></td>
<br> </tr>
<br></table>

<%@ taglib uri="地址" prefix="tiles" %><table border="2" width="300" bordercolor="Gray"> <tr> <td bgcolor="Blue"><strong><tiles:getAsString name="title"/></strong></td> </tr> <tr> <td><tiles:insertAttribute name="header"/></td> </tr> <tr> <td><tiles:insertAttribute name="body"/></td> </tr></table>

5、Hello World一下

header.jsp

Html代码

<div align="center"><b><i>This is a header</i></b></div>

<div align="center"><b><i>This is a header</i></b></div>

info.jsp

Html代码

<div align="center" style="font-color:red;"><b>%{info}</b></div>

body.jsp

Java代码

<h3>Hello World!</h3>

<h3>Hello World!</h3>

footer.jsp

Html代码

<div align="center"><b><i>This is a footer</i></b></div>

<div align="center"><b><i>This is a footer</i></b></div>

6、页面标籤

在页面当中直接用标籤，功能相当强大，我就不多介绍了，直接用一个最通用的例子吧，更多的例子，大家看官方example吧。

hello.jsp

Html代码

<%@ taglib uri="地址" prefix="tiles" %>
<br>
<br><tiles:insertDefinition name="layout" />

<%@ taglib uri="地址" prefix="tiles" %><tiles:insertDefinition name="layout" />

OK，部置出去，有没有看到大大的“Hello world”。

7、我更推荐的方法是在你的Java业务代码中使用

在你可访问ServetRequest对象的业务代码最后加入：

Java代码

//获得Tiles容器
<br>TilesContainer container = TilesAccess.getContainer(request
<br> .getSession().getServletContext());
<br>//渲染页面，成功执行后，就显示用户界面了。
<br>container.render(def, request,response);
<br>