Tiles應用說明
一、 說明
Tiles使得struts在頁面的處理方面多了一種選擇。並且更容易實現代碼的重用。Tiles增加了layout的概念,其實就是把一個頁面劃分爲幾塊。通常的來說一個頁面大概可以劃分爲如下幾塊:
head頁面頭部:存放一個運用的公共信息:logo等,如果是網站可能是最上面的一塊。
menu頁面菜單:放置一個運用中需要使用的菜單,或者在每一個頁面都使用的連接。
footer頁面尾部:如版權信息等。
body頁面主題內容:每個頁面相對獨立的內容。
如果按上面的劃分那對每一個頁面我們只要寫body裏面的內容,其他的就可以共享重用。
如果大多數頁面的佈局基本相同我們甚至可以使用一個jsp文件根據不同的參數調用不同的body。
二、 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" />
<put name="rightBody" value="/WEB-INF/pages/common/body/projectinforightbd.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" ο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>
在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
如果已經配置好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="leftBody" value="/WEB-INF/pages/common/body/projectinfoleftbd.jsp" />
<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="leftBody" value="/WEB-INF/pages/common/body/projectinfoleftbd.jsp" />
<put name="rightBody" value="/WEB-INF/pages/project/body/prjproductversionaddrightbd.jsp" />
</definition>
leftBody是相同的,都爲projectinfoleftbd.jsp,變化的只有rightBody。