tiles

编辑:雾气网互动百科 时间:2020-01-25 03:14:02
编辑 锁定
本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧!
Tiles 是一种JSP布局框架,主要目的是为了将复杂的jsp页面作为一个的页面的部分机能,然后用来组合成一个最终表示用页面用的,这样的话,便于对页面的各个机能的变更及维护。 Tiles使得struts在页面的处理方面多了一种选择。并且更容易实现代码的重用。
最早的Tiles是组装在Struts1.1里面的(Struts-Tiles),后面发展为独立的Tiles框架(Tiles 2+,目前最新版本为3.0)。
Tiles也指在windows Phone 7中的用户界面。
中文名
tiles
页面布局
增加了layout的概念
基本配置
每一个页面的组成元素和形式
属性如下
属性名称必须值必须值类型说明

tilesStruts-Tiles页面布局

编辑
Tiles增加了layout的概念,其实就是把一个页面划分为几块。通常的来说一个页面大概可以划分为如下几块:
head页面头部:存放一个运用的公共信息:logo等,如果是网站可能是最上面的一块。
menu页面菜单:放置一个运用中需要使用的菜单,或者在每一个页面都使用的连接。
footer页面尾部:如版权信息等。
body页面主题内容:每个页面相对独立的内容。
如果按上面的划分那对每一个页面我们只要写body里面的内容,其他的就可以共享重用。
如果大多数页面的布局基本相同我们甚至可以使用一个jsp文件根据不同的参数调用不同的body。

tilesStruts-Tiles基本配置

编辑
Tiles有一个配置文件:tiles-defs.xml
tiles-defs.xml定义了每一个页面的组成元素和形式。
下面我将说明如下所示的一个tiles-defs.xml文件
tiles-defs.xml
<tiles-definitions>
<!--定义/layout/ mainLayout.jsp的组成名称为bugbase.mainLayout -->
<definition name="bugbase.mainLayout" path="/layout/mainLayout.jsp">
<put name="title" value="质量管理系统" />
<put name="logo" value="/WEB-INF/pages/main/logo.jsp" />
<put name="mainMenu" value="/WEB-INF/pages/main/mainMenu.jsp" />
<put name="messages" value="/common/messages.jsp" />
<put name="submenu" value="/WEB-INF/pages/main/testManageSubMenu.jsp" />
</definition>
这里的title是标题,logo是界面上最左上角的标志,质量管理系统有两级菜单,mainMenu是主菜单,是不变的,而subMenu是子菜单,六个模块就有六个子菜单,是随模块而变化的。messages是错误信息。
<!--定义common.testManage,继承bugbase.mainLayout -->
<definition extends="bugbase.mainLayout" name="common.setting">
<put name="submenu" value="/WEB-INF/pages/main/settingSubMenu.jsp" />
<!--以上的元素将替换bugbase.mainLayout中的元素-->
</definition>
这里的common.testManage是测试管理模块的意思,这就是一个模块对应一个subMenu。
<!—定义setting.projectInfo,继承common.setting -->
<definition extends="common.setting" name="setting.projectInfo">
<put name="leftBody" value="/WEB-INF/pages/common/body/projectinfoleftbd.jsp" />
</definition>
这是说一个模块下有多个功能点,每个功能点下的左侧菜单是相同的,因此leftBody就是这个左侧菜单,变化的只是rightBody右侧部分而已。下面还有详解。
/layout/ mainLayout.jsp
-----------------------------------------------------------------
<html>
<head>
<title><tiles:getAsString name="title" /></title>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="mainInit()" >
<table cellpadding="0" cellspacing="0" class="LogoTable" id="01" >
<tr valign="bottom">
<tiles:insert attribute="logo" />
<tiles:insert attribute="mainMenu" />
</tr>
<tr valign="top" >
<tiles:insert attribute="submenu" />
</tr>
</table>
<table class="MainTable" cellpadding="1" cellspacing="1">
<tr class="TrMain">
<td width="225" >
<tiles:insert attribute="leftBody" />
</td>
<td width="775">
<table>
<tiles:insert attribute="messages" />
</table>
<tiles:insert attribute="rightBody" />
</td>
</tr>
</table>
</body>
</html>
在web.xml里面配置tiles对应的taglib的配置如下:
web.xml
<taglib>
<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>

tiles使用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 extends="common.setting" name="setting.projectInfo">
<put name="rightBody" value="/WEB-INF/pages/common/body/projectinforightbd.jsp" />
</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 extends="common.setting" name="common.prjproductversionadd">
<put name="rightBody" value="/WEB-INF/pages/project/body/prjproductversionaddrightbd.jsp" />
</definition>
leftBody是相同的,都为projectinfoleftbd.jsp,变化的只有rightBody。

tilesTiles2 的实例

编辑
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代码
  1. <?xml version="1.0" encoding="UTF-8" ?>

  2.   
  3. <br><!DOCTYPE tiles-definitions PUBLIC

  4.   
  5. <br> "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"

  6.   
  7. <br>
  8. ">

  9.   
  10. <br>

  11.   
  12. <br><tiles-definitions>

  13.   
  14. <br>

  15.   
  16. <br> <!-- 全局配置 -->

  17.   
  18. <br> <definition name="layout" template="/views/layout/layout.jsp">

  19.   
  20. <br> <put-attribute name="title" value="tiles2用户界面简单示例"/>

  21.   
  22. <br> <put-attribute name="header" value="/views/layout/header.jsp"/>

  23.   
  24. <br> <put-attribute name="info" value="/views/layout/info.jsp"/>

  25.   
  26. <br> <put-attribute name="body" value="/views/layout/body.jsp"/>

  27.   
  28. <br> <put-attribute name="footer" value="/views/layout/footer.jsp"/>

  29.   
  30. <br> </definition>

  31.   
  32. <br> <!--示例进行一个扩展配置-->

  33.   
  34. <br> <definition name="business.list" extends="layout">

  35.   
  36. <br> <put-attribute name="title" value="广告效果分析"/>

  37.   
  38. <br> <put-attribute name="body" value="/views/business/adEffect.jsp"/>

  39.   
  40. <br> </definition>

  41.   
  42. <br></tiles-definitions>

  43.   
  44. <br>
<tiles-definitions>标签内主要的子节点就是<definition>标签,这个标签属性如下:
属性    
名称是否必须值必须值类型说明
nametruetruejava.lang.String
指定将要创建的一个definition bean的访问名称。这个必须有的。
templatefalsetruejava.lang.String
哪一个文件是模板文件,这个模板文件后面会介绍。
rolefalsetruejava.lang.String
如果配置了这个值的话,需要role的值相等,这个definition才被有效访问,这个功能我没有深究,也不推荐使用,建议大家建立自己更完善的权限控制管理。当然欢迎朋友们完善role应用的示例,tiles自带role的示例,有兴趣的人去读一下就明白了。
extendsfalsetruejava.lang.String
继承哪一个definition,值是你要继承的definition的name的值。高使用率的属性。
preparerfalsetruejava.lang.String
呵,我没使用,如果你要使用的话,要写一个实现他的Prepare接口的类,作用就是在展现你定义的页面前会先执行你的prepare。
实际上一般按我的例子中的就足够用了,OK,我们继续吧。
3、配置web.xml
多么easy的事情啊,打开你的web.xml,用你的鼠标copy & paster下面的代码并放到你的web.xml的<web-app>节点下。
Xml代码
  1. <context-param>
  2. <br> <param-name>
  3. <br> org.apache.tiles.impl.BasicTilesContainer.DEFINITIONS_CONFIG
  4. <br> </param-name>
  5. <br> <param-value>
  6. <br> /WEB-INF/tiles-defs.xml
  7. <br> </param-value>
  8. <br> </context-param>
  9. <br>
  10. <br> <listener>
  11. <br> <listener-class>
  12. <br> org.apache.tiles.web.startup.TilesListener
  13. <br> </listener-class>
  14. <br> </listener>
  15. <br>
  16. <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代码
  1. <%@ taglib uri=" 地址" prefix="tiles"%>
  2. <br><%@ taglib uri=" 地址" prefix="c"%>
  3. <br><html xmlns=" 地址">
  4. <br> <head>
  5. <br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <br> <title><tiles:getAsString name="title" /></title>
  7. <br> <meta name="description" content="信息提示" />
  8. <br> </head>
  9. <br> <body>
  10. <br> <table border="0" width="950" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  11. <br> <tr>
  12. <br> <td>
  13. <br> <tiles:insertAttribute name="header" />
  14. <br> </td>
  15. <br> </tr>
  16. <br> <tr>
  17. <br> <td>
  18. <br> <%--
  19. <br> /* 主要信息和操作界面
  20. <br> *
  21. <br> */
  22. <br> --%>
  23. <br> <table width="100%" border="0" cellpadding="0" cellspacing="0">
  24. <br> <c:if test="${info!=null }">
  25. <br> <tr>
  26. <br> <td>
  27. <br> <tiles:insertAttribute name="info" /> </td>
  28. <br> </tr>
  29. <br> </c:if>
  30. <br> <tr>
  31. <br> <td>
  32. <br> <tiles:insertAttribute name="body" />
  33. <br> </td>
  34. <br> </tr>
  35. <br> </table>
  36. <br> <%--
  37. <br> //主信息和操作界面结束。
  38. <br> --%>
  39. <br> </td>
  40. <br> </tr>
  41. <br> <tr>
  42. <br> <td>
  43. <br> <tiles:insertAttribute name="footer" />
  44. <br> </td>
  45. <br> </tr>
  46. <br> </table>
  47. <br> </body>
  48. <br></html>
  49. <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代码
  1. <%@ taglib uri="地址" prefix="tiles" %>
  2. <br>
  3. <br><table border="2" width="300" bordercolor="Gray">
  4. <br> <tr>
  5. <br> <td bgcolor="Blue"><strong><tiles:getAsString name="title"/></strong></td>
  6. <br> </tr>
  7. <br> <tr>
  8. <br> <td><tiles:insertAttribute name="header"/></td>
  9. <br> </tr>
  10. <br> <tr>
  11. <br> <td><tiles:insertAttribute name="body"/></td>
  12. <br> </tr>
  13. <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代码
  1. <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代码
  1. <div align="center" style="font-color:red;"><b>%{info}</b></div>
<div align="center" style="font-color:red;"><b>%{info}</b></div>
body.jsp
Java代码
  1. <h3>Hello World!</h3>
<h3>Hello World!</h3>
footer.jsp
Html代码
  1. <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代码
  1. <%@ taglib uri="地址" prefix="tiles" %>
  2. <br>
  3. <br><tiles:insertDefinition name="layout" />
<%@ taglib uri="地址" prefix="tiles" %><tiles:insertDefinition name="layout" />
OK,部置出去,有没有看到大大的“Hello world”。
7、我更推荐的方法是在你的Java业务代码中使用
在你可访问ServetRequest对象的业务代码最后加入:
Java代码
  1. //获得Tiles容器
  2. <br>TilesContainer container = TilesAccess.getContainer(request
  3. <br> .getSession().getServletContext());
  4. <br>//渲染页面,成功执行后,就显示用户界面了。
  5. <br>container.render(def, request,response);
  6. <br>
词条标签:
计算机学 自然学科 科技