tiles:Struts-Tiles頁面布局,Struts-Tiles基本配置,使

Tiles 是一種JSP布局框架，主要目的是為了將複雜的jsp頁面作為一個的頁面的部分機能，然後用來組合成一個最終表示用頁面用的，這樣的話，便於對頁面的各個機能的變更及維護。 Tiles使得struts在頁面的處理方面多了一種選擇。並且更容易實現代碼的重用。

最早的Tiles是組裝在Struts1.1裡面的（Struts-Tiles），後面發展為獨立的Tiles框架（Tiles 2+，目前最新版本為3.0）。

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

基本介紹

中文名：tiles
頁面布局：增加了layout的概念
基本配置：每一個頁面的組成元素和形式
屬性如下：屬性名稱必須值必須值類型說明

Struts-Tiles頁面布局,Struts-Tiles基本配置,使用Struts-Tiles,Tiles2 的實例,

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>

tiles

基本介紹

Struts-Tiles頁面布局

Struts-Tiles基本配置

使用Struts-Tiles

Tiles2 的實例

相關詞條

熱門詞條