一、 说明
Tiles使得struts在页面的处理方面多了一种选择。并且更容易实现代码的重用。Tiles增加了layout的概念,其实就是把一个页面划分为几块,这有点像柜架,但柜架是不同页面分开控制,如拉动右侧滚动条,上面柜架不动,只有下面柜架页面在动,而tiles是不同页面组合成一个页面统一控制,拉动右侧滚动条时,整个页面都会跟着动。
通常的来说一个页面大概可以划分为如下几块:
head页面头部:存放一个运用的公共信息:logo等,如果是网站可能是最上面的一块。
menu页面菜单:放置一个运用中需要使用的菜单,或者在每一个页面都使用的连接。
footer页面尾部:如版权信息等。
body页面主题内容:每个页面相对独立的内容。
如果按上面的划分那对每一个页面我们只要写body里面的内容,其他的就可以共享重用。
如果大多数页面的布局基本相同我们甚至可以使用一个jsp文件根据不同的参数调用不同的body。
二、 Tiles配置和基本配置文件介绍
(一)Tiles有一个配置文件:tiles-defs.xml
tiles-defs.xml定义了每一个页面的组成元素和形式。
下面我将说明如下所示的一个tiles-defs.xml文件
tiles-defs.xml
-----------------------------------------------------------------
1、定义整体Layout
<!--定义/layout/ mainLayout.jsp的组成名称为project.mainLayout -->
<definition name="project.mainLayout" path="/layout/mainLayout.jsp">
<put name="title" value="xxxx系统" />
<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/xxManageSubMenu.jsp" />
</definition>
这里的title是标题,logo是界面上最左上角的标志,xxxx系统有两级菜单,mainMenu是主菜单,是不变的,而subMenu是子菜单,六个模块就有六个子菜单,是随模块而变化的。如果你的系统没有子菜单,这条可以省略。示例项目进入系统后默认的第一个页面即显示xx管理模块的列表页面。messages是错误信息。
根据实际情况,如果一个主Layout,可以定义多个。
2、定义各个模块的子Layout,需要继承主Layout
<!--定义common.xxManage,继承project.mainLayout -->
<definition extends="project.mainLayout" name="common.xxManage">
<put name="submenu" value="/WEB-INF/pages/main/xxManageSubMenu.jsp" />
<!--以上的元素将替换project.mainLayout中的元素-->
</definition>
这里的common.xxManage是xx管理模块的意思,这就是一个模块对应一个subMenu,用新的submenu配置覆盖mainLayout的配置。mainLayout里的其它位置都不需要变化,所以这里可以不用重写。
如果某模块还需要有个左侧菜单,点击左侧菜单,右侧页面变化,左侧菜单不变的话,也可以做如下配置:
<!--定义common.xxManage,继承project.mainLayout -->
<definition extends="project.mainLayout" name="common.xxManage">
<put name="submenu" value="/WEB-INF/pages/main/xxManageSubMenu.jsp" />
<put name="leftBody" value="/WEB-INF/pages/xxManage/body/xxxinfoleftbd.jsp" />
<!--以上的元素将替换project.mainLayout中的元素-->
</definition>
3、配置具体的页面,需要继承相应模块的二级Layout
在配置二级Layout时已经说过可以配置一个左侧的菜单页面,如果左侧菜单不会变化的话,这里的底层Layout配置时可以只配置一个body就可以。
<definition extends="common.xxManage" name="xxManage.xxxInfo">
<put name="body" value="/WEB-INF/pages/xxManage/body/xxxinfobd.jsp"/>
</definition>
如果二级Layout没有左侧菜单配置也可以采用上面的配置,即为只有上下的结构。
如果有配置左侧菜单,并且左侧菜单每个功能点都不同,则只能配置到每个子功能点的Layout中了,如下配置:
<!—定义xxManage.xxxInfo,继承common.xxManage -->
<definition extends="common.xxManage" name="xxManage.xxxInfo">
<put name="leftBody" value="/WEB-INF/pages/xxManage/body/xxxinfoleftbd.jsp" />
<put name="rightBody" value="/WEB-INF/pages/xxManage/body/xxxinforightbd.jsp" />
</definition>
(二)Layout页面
下面介绍一下在Layout页面都写些什么:
/layout/ mainLayout.jsp
-----------------------------------------------------------------
…
<html>
<head>
<title><tiles:getAsString name="title" /></title>
…
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" οnlοad="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>
----------------------------------------------------------------
使用<tiles:insert attribute="mainMenu" />语句将所有定义的部分合理的组合成一个页面,如果没有左侧菜单的,可以只有 <tiles:insert attribute="body" />。
(三)对tiles标签的配置
在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>
(四)对tiles-defs.xml配置文件的配置
在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
如果已经配置好tiles-defs.xml,接下来就可以在jsp文件中使用这些定义了。
建立页面xxxinfo.jsp,这里面要调用tiles的定义:
<%@ include file="/common/taglibs.jsp"%>
<tiles:insert definition="setting.xxxInfo" flush="true" />
插入setting.xxxInfo标记的一页
taglibs.jsp:
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/struts-nested.tld" prefix="nested"%>
还必须包含下面这句,tiles标签才能够被识别:
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%>
根据tiles-defs.xml里的xxManage.xxxInfo设置
<definition extends="common.xxManage" name="xxManage.xxxInfo">
<put name="leftBody" value="/WEB-INF/pages/xxManage/body/xxxinfoleftbd.jsp" />
<put name="rightBody" value="/WEB-INF/pages/xxManage/body/xxxinforightbd.jsp" />
</definition>
知道leftBody是/WEB-INF/pages/xxManage/body/xxxinfoleftbd.jsp页面,而
rightBody是/WEB-INF/pages/xxManage/body/xxxinforightbd.jsp页面。所以我们还需要建立xxxinfoleftbd.jsp和xxxinforightbd.jsp页面,这两个页面就为真正的业务代码。
注意:
1、由于最父层的Layout页面已经包含Html及Body的标签,所以在其子页面不要再写这些标签。
2、由于在xxxinfo.jsp中已经有对页面字符集的定义及struts各个标签的引用,如果在body的页面定义了不同的字符集,比如父页面定义的是UTF-8,而子页面却定义成了GBK,这样会引起页面白页,子页面完成可以不定义字符集,不过要注意页面上一定不能有中文,否则会提示字符集不正确,无法保存,要养成将中文定义在资源文件的好习惯。
四、 后记
以上是一些在参加工作第一个项目中的简单和基本的使用,更加高级的使用可以参照其它文档。个人觉得使用Tiles在做企业级应用开发的时候可能不如在做网站那样更能体现优越性。但在系统开始设计的时候考虑并规划好整个UI(user interface),那在修改和维护的时候将节省不少的工作量,因为通常UI的确定,在代码编写结束和完成,所有尽可能的使用多个子页面构成一个页面,后面的美化和维护就比直接维护一个很大的页面容易。