Tiles 框架增強(qiáng)了基于組件的 Web UI 開發(fā)的設(shè)計(jì)，它和 Struts 框架的組合工作得很好。您可以很容易的協(xié)同 WebShpere Studio 使用 Tiles 和 Struts 框架以顯著降低您的 Web 開發(fā)工程的開發(fā)時(shí)間和維護(hù)代價(jià)。
? Copyright International Business Machines Corporation 2003. All rights reserved.
引言
Struts 是有名的模型-視圖-控制器（Model-View-Controller，MVC）框架方面的開放源碼體現(xiàn)之一，它提供了一種便利的方式，可以用于將模塊化應(yīng)用程序清楚地分解成邏輯、表示和數(shù)據(jù)。Java 服務(wù)器頁(yè)面（Java?Server Pages，JSP）在 MVC 框架中的作用通常是作為視圖（View），它根據(jù)業(yè)務(wù)邏輯和數(shù)據(jù)生成動(dòng)態(tài)的用戶界面（UI）。
在另一方面，Tiles 框架增強(qiáng)了基于組件的設(shè)計(jì)和 Web UI 設(shè)計(jì)中的模板概念。它可以幫助開發(fā)人員解除 Web UI 組件之間的耦合并重用它們。另外，Tiles 模板及其繼承特征使您能夠以最小量的工作為 Web 應(yīng)用程序設(shè)計(jì)出一致的外觀。
IBM? WebSphere? Studio Application Developer Version 5（以下簡(jiǎn)稱為 Application Developer）有內(nèi)置的對(duì) Struts 1.02 和 1.1（Beta 測(cè)試版 2）的工具和運(yùn)行時(shí)支持。Tiles 可以獨(dú)立于 Struts 使用，也可以與 Struts framework 集成以支持高級(jí)特征。
重用 Web UI 組件的需要
本文假定您具有 Struts 和 Application Developer 中的 Struts 工具的基本知識(shí)。如果您對(duì)本主題的一些基本信息感興趣，請(qǐng)參閱 用WebSphere Studio V5 編寫一個(gè)簡(jiǎn)單的 Struts 應(yīng)用。
為了更好地理解可以如何重用 Web UI 組件，讓我們先來(lái)看一下圖 1 和 2 中的兩個(gè) Web 頁(yè)面（JSP）：
圖 1. IBM 解決方案頁(yè)面
圖 2. IBM 新聞頁(yè)面
您可以看到，這兩個(gè)頁(yè)面在頁(yè)頭、左側(cè)的導(dǎo)航條和頁(yè)腳中有很多組件是共有的。您可以不共享任何組件而為每一個(gè)頁(yè)面創(chuàng)建單獨(dú)的 JSP 來(lái)負(fù)責(zé)它的布局并且使用重復(fù)的頁(yè)頭、左側(cè)導(dǎo)航條和頁(yè)腳。當(dāng)然，這種解決方案的效率是非常低的，因?yàn)閷?duì)相同的 UI 組件（比如左側(cè)導(dǎo)航條）的更改要求您改動(dòng)每個(gè)相關(guān)的頁(yè)面。
在上面的示例中，有大量的 HTML 和 JSP 代碼是重復(fù)的，而 UI 組件是緊耦合的。眾所周知，在軟件工程中緊耦合的組件將導(dǎo)致高額的維護(hù)成本。一個(gè)更好的解決方案是解除 UI 組件（頁(yè)頭、導(dǎo)航、頁(yè)腳和主體）之間的耦合并在不同的頁(yè)面中重用它們。
<jsp:include> 標(biāo)簽為重用 Web UI 組件提供了一種解決方案。通過(guò)使用 <jsp:include> 標(biāo)簽，Solutions 頁(yè)面和 News 頁(yè)面可以分解成由四個(gè) JSP 頁(yè)面，如圖 3 和 4 所示：
圖 3. Solutions.jsp
圖 4. News.jsp
Solutions 頁(yè)面的 JSP 代碼顯示在示例 1 中，News 頁(yè)面的 JSP 代碼顯示在示例 2 中：
示例 1. Solutions.jsp 使用了 JSP 包含標(biāo)簽（SimpleJSPWeb）
<HTML>
<HEAD>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2"><jsp:include page="/Header.jsp" /></TD>
</TR>
<TR>
<TD width="20%" valign="top"><jsp:include page="/Navigation.jsp" /></TD>
<TD width="80%" valign="top">
<jsp:include
page="/Fragment-Solutions.jsp" /></TD>
<TR>
<TD colspan="2"><jsp:include page="/Footer.jsp" /></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
示例 2. News.jsp 使用了 JSP 包含標(biāo)簽（SimpleJSPWeb）
<HTML>
<HEAD>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2"><jsp:include page="/Header.jsp" /></TD>
</TR>
<TR>
<TD width="20%" valign="top"><jsp:include page="/Navigation.jsp" /></TD>
<TD width="80%" valign="top">
<jsp:include
page="/Fragment-News.jsp" /></TD>
<TR>
<TD colspan="2"><jsp:include page="/Footer.jsp" /></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
Solutions.jsp and News.jsp 的樣本代碼在 StrutsTiles.zip 下載文件 的 SimpleJSPWeb 項(xiàng)目中。下載并解壓 StrutsTiles.zip 后將 EAR 文件導(dǎo)入到一個(gè)工作區(qū)中：
在 Workbench 菜單中選擇 File => Import => EAR file。
單擊 Browse選擇 EAR 文件。
輸入 StrutsTiles 作為項(xiàng)目名稱。
要運(yùn)行任何一個(gè)樣本，可以遵循下列操作步驟：
右鍵單擊 News.jsp和 Solutions.jsp，然后選擇 Run on Server。
Tiles 插入標(biāo)簽提供和 JSP 包含標(biāo)簽相同的功能。下面的 JSP 代碼反映包含使用 Tiles 插入標(biāo)簽的解決方案：
示例 3. Solutions.jsp 帶有 Tiles 插入標(biāo)簽（SimpleTilesWeb）
<HTML>
<HEAD>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2">
<tiles:insert page="/Header.jsp" flush="true"/>
</TD>
</TR>
<TR>
<TD width="20%" valign="top">
<tiles:insert page="/Navigation.jsp" flush="true"/>
</TD>
<TD width="80%" valign="top">
<tiles:insert page="/Fragment-Solutions.jsp" flush="true" />
</TD>
</TR>
<TR>
<TD colspan="2">
<tiles:insert page="/Footer.jsp" flush="true"/>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
示例 4. News.jsp 帶有 Tiles 插入標(biāo)簽（SimpleTilesWeb）
<HTML>
<HEAD>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2">
<tiles:insert page="/Header.jsp" flush="true"/>
</TD>
</TR>
<TR>
<TD width="20%" valign="top">
<tiles:insert page="/Navigation.jsp" flush="true"/>
</TD>
<TD width="80%" valign="top">
<tiles:insert page="/Fragment-News.jsp" flush="true" />
</TD>
</TR>
<TR>
<TD colspan="2">
<tiles:insert page="/Footer.jsp" flush="true"/>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
JSP 包含標(biāo)簽和 Tiles 插入標(biāo)簽都解除了 Web UI 組件的耦合。改變一個(gè)單獨(dú)的 UI 組件只需要改變負(fù)責(zé)該頁(yè)面的組件，例如 Header.jsp ，而其他頁(yè)面并不需要改變。示例 3 和 4 的代碼位于 SimpleTilesWeb 中。
然而，在以上示例中，如果 Web 應(yīng)用的 UI 布局需要從圖 5 改變到圖 6，在后者中主體組件可能是 fragment-Solutions.jsp 或 fragment-News.jsp ，那么有多少頁(yè)面需要修改呢？如果有 N 個(gè)頁(yè)面有相同的布局，您將需要修改所有的 N 個(gè)頁(yè)面。因此，如果僅僅使用一個(gè) JSP 包含標(biāo)簽或 Tiles 插入標(biāo)簽，Web 應(yīng)用 UI 的布局仍然是各 JSP 彼此緊耦合的。我們需要找到一個(gè)方法來(lái)將 JSP 進(jìn)行更深層的解耦合。
圖 5
圖 6
使用 Tiles 創(chuàng)建模板
我們面臨的新的挑戰(zhàn)是找到一個(gè)便捷的方法將 Web UI 從一個(gè)布局轉(zhuǎn)換到另一個(gè)布局。Tiles 模板的特征滿足該要求。
什么是 Tiles 模板？
Tiles 模板是一個(gè)一般不包含任何實(shí)際內(nèi)容的布局。它包含一些占位符屬性使得頁(yè)面 URI 和字符串可以在將來(lái)被插入。內(nèi)容頁(yè)面如 News.jsp 和 Solutions.jsp 可以引用該模板并通過(guò)這些占位符屬性插入 URI。
為創(chuàng)建一個(gè)模板頁(yè)面，您可以使用 Tiles 插入標(biāo)簽。不像示例 3 中的插入標(biāo)簽，在 Tiles 模板中使用的插入標(biāo)簽僅有一個(gè)名為 attribute 的屬性，它將變成 JSP 頁(yè)面 URI 插入的占位符。創(chuàng)建頁(yè)頭占位符的模板代碼為 <tiles:insert attribute="header" /> 。
該模板定義了具體的頁(yè)面可以引用的 Web UI 組件的共同布局。以下 JSP 代碼就是使用 Tiles 的一個(gè)樣本模板：
示例 5. Layout.jsp 是 Tiles 模板 (TemplatingTilesWeb)
<HTML>
<HEAD>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2"><tiles:insert attribute="header"/></TD>
</TR>
<TR>
<TD width="20%" valign="top">
<tiles:insert attribute="navigation"/></TD>
<TD width="80%" valign="top">
<tiles:insert attribute="body"/></TD>
</TR>
<TR>
<TD colspan="2"><tiles:insert attribute="footer"/></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
在定義完一個(gè)模板之后，它本身是不可以使用的。實(shí)際的 JSP 頁(yè)面必須引用該模板并且為其屬性提供頁(yè)面 URI。 <tiles:insert page="/Layout.jsp"flush="true"> 行可用于引用該模板。
具體的 JSP 頁(yè)面將布局組合委托給模板 Layout.jsp 。它們需要為使用 Tiles put 標(biāo)簽的 attribute 指定頁(yè)面實(shí)現(xiàn)名稱。代碼 <tiles:put name="header" value="/Header.jsp"/> 將頁(yè)面 /Header.jsp 插入名為 header 的屬性。下面是使用 Tiles 模板特征的 Solutions.jsp 和 News.jsp 的 JSP 代碼：
示例 6. 具有 Tiles 模板特征（TemplatingTilesWeb）的 Solutions.jsp
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert page="/Layout.jsp" flush="true">
<tiles:put name="header" value="/Header.jsp"/>
<tiles:put name="navigation" value="/Navigation.jsp"/>
<tiles:put name="body"
value="/Fragment-Solutions.jsp"/>
<tiles:put name="footer" value="/Footer.jsp"/></tiles:insert>
示例 7. 具有 Tiles 模板特征（TemplatingTilesWeb）的 News.jsp
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert page="/Layout.jsp" flush="true">
<tiles:put name="header" value="/Header.jsp"/>
<tiles:put name="navigation" value="/Navigation.jsp"/>
<tiles:put name="body"
value="/Fragment-News.jsp"/>
<tiles:put name="footer" value="/Footer.jsp"/></tiles:insert>
示例 5、6 和 7 的代碼在 TemplatingTilesWeb 中。
如果想將布局從圖 5 改變到圖 6，您所需要做的只是如示例 8 中所示修改模板 Layout.jsp ，而不需要改動(dòng)具體頁(yè)面，比如 Solutions.jsp 和 News.jsp 。相比較未使用模板時(shí)需要修改 N 個(gè)頁(yè)面，使用了 Tiles 模板特征可以顯著地降低維護(hù)成本。
示例 8. 修改模板以創(chuàng)建新的布局
<HTML>
<HEAD>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2"><tiles:insert attribute="header"/></TD>
</TR>
<TR>
<TD width="80%" valign="top">
<tiles:insert attribute="body"/></TD>
<TD width="20%" valign="top">
<tiles:insert attribute="navigation"/></TD>
</TR>
<TR>
<TD colspan="2"><tiles:insert attribute="footer"/></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
? Copyright International Business Machines Corporation 2003. All rights reserved.
引言
Struts 是有名的模型-視圖-控制器（Model-View-Controller，MVC）框架方面的開放源碼體現(xiàn)之一，它提供了一種便利的方式，可以用于將模塊化應(yīng)用程序清楚地分解成邏輯、表示和數(shù)據(jù)。Java 服務(wù)器頁(yè)面（Java?Server Pages，JSP）在 MVC 框架中的作用通常是作為視圖（View），它根據(jù)業(yè)務(wù)邏輯和數(shù)據(jù)生成動(dòng)態(tài)的用戶界面（UI）。
在另一方面，Tiles 框架增強(qiáng)了基于組件的設(shè)計(jì)和 Web UI 設(shè)計(jì)中的模板概念。它可以幫助開發(fā)人員解除 Web UI 組件之間的耦合并重用它們。另外，Tiles 模板及其繼承特征使您能夠以最小量的工作為 Web 應(yīng)用程序設(shè)計(jì)出一致的外觀。
IBM? WebSphere? Studio Application Developer Version 5（以下簡(jiǎn)稱為 Application Developer）有內(nèi)置的對(duì) Struts 1.02 和 1.1（Beta 測(cè)試版 2）的工具和運(yùn)行時(shí)支持。Tiles 可以獨(dú)立于 Struts 使用，也可以與 Struts framework 集成以支持高級(jí)特征。
重用 Web UI 組件的需要
本文假定您具有 Struts 和 Application Developer 中的 Struts 工具的基本知識(shí)。如果您對(duì)本主題的一些基本信息感興趣，請(qǐng)參閱 用WebSphere Studio V5 編寫一個(gè)簡(jiǎn)單的 Struts 應(yīng)用。
為了更好地理解可以如何重用 Web UI 組件，讓我們先來(lái)看一下圖 1 和 2 中的兩個(gè) Web 頁(yè)面（JSP）：
圖 1. IBM 解決方案頁(yè)面
圖 2. IBM 新聞頁(yè)面
您可以看到，這兩個(gè)頁(yè)面在頁(yè)頭、左側(cè)的導(dǎo)航條和頁(yè)腳中有很多組件是共有的。您可以不共享任何組件而為每一個(gè)頁(yè)面創(chuàng)建單獨(dú)的 JSP 來(lái)負(fù)責(zé)它的布局并且使用重復(fù)的頁(yè)頭、左側(cè)導(dǎo)航條和頁(yè)腳。當(dāng)然，這種解決方案的效率是非常低的，因?yàn)閷?duì)相同的 UI 組件（比如左側(cè)導(dǎo)航條）的更改要求您改動(dòng)每個(gè)相關(guān)的頁(yè)面。
在上面的示例中，有大量的 HTML 和 JSP 代碼是重復(fù)的，而 UI 組件是緊耦合的。眾所周知，在軟件工程中緊耦合的組件將導(dǎo)致高額的維護(hù)成本。一個(gè)更好的解決方案是解除 UI 組件（頁(yè)頭、導(dǎo)航、頁(yè)腳和主體）之間的耦合并在不同的頁(yè)面中重用它們。
<jsp:include> 標(biāo)簽為重用 Web UI 組件提供了一種解決方案。通過(guò)使用 <jsp:include> 標(biāo)簽，Solutions 頁(yè)面和 News 頁(yè)面可以分解成由四個(gè) JSP 頁(yè)面，如圖 3 和 4 所示：
圖 3. Solutions.jsp
圖 4. News.jsp
Solutions 頁(yè)面的 JSP 代碼顯示在示例 1 中，News 頁(yè)面的 JSP 代碼顯示在示例 2 中：
示例 1. Solutions.jsp 使用了 JSP 包含標(biāo)簽（SimpleJSPWeb）
<HTML>
<HEAD>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2"><jsp:include page="/Header.jsp" /></TD>
</TR>
<TR>
<TD width="20%" valign="top"><jsp:include page="/Navigation.jsp" /></TD>
<TD width="80%" valign="top">
<jsp:include
page="/Fragment-Solutions.jsp" /></TD>
<TR>
<TD colspan="2"><jsp:include page="/Footer.jsp" /></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
示例 2. News.jsp 使用了 JSP 包含標(biāo)簽（SimpleJSPWeb）
<HTML>
<HEAD>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2"><jsp:include page="/Header.jsp" /></TD>
</TR>
<TR>
<TD width="20%" valign="top"><jsp:include page="/Navigation.jsp" /></TD>
<TD width="80%" valign="top">
<jsp:include
page="/Fragment-News.jsp" /></TD>
<TR>
<TD colspan="2"><jsp:include page="/Footer.jsp" /></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
Solutions.jsp and News.jsp 的樣本代碼在 StrutsTiles.zip 下載文件 的 SimpleJSPWeb 項(xiàng)目中。下載并解壓 StrutsTiles.zip 后將 EAR 文件導(dǎo)入到一個(gè)工作區(qū)中：
在 Workbench 菜單中選擇 File => Import => EAR file。
單擊 Browse選擇 EAR 文件。
輸入 StrutsTiles 作為項(xiàng)目名稱。
要運(yùn)行任何一個(gè)樣本，可以遵循下列操作步驟：
右鍵單擊 News.jsp和 Solutions.jsp，然后選擇 Run on Server。
Tiles 插入標(biāo)簽提供和 JSP 包含標(biāo)簽相同的功能。下面的 JSP 代碼反映包含使用 Tiles 插入標(biāo)簽的解決方案：
示例 3. Solutions.jsp 帶有 Tiles 插入標(biāo)簽（SimpleTilesWeb）
<HTML>
<HEAD>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2">
<tiles:insert page="/Header.jsp" flush="true"/>
</TD>
</TR>
<TR>
<TD width="20%" valign="top">
<tiles:insert page="/Navigation.jsp" flush="true"/>
</TD>
<TD width="80%" valign="top">
<tiles:insert page="/Fragment-Solutions.jsp" flush="true" />
</TD>
</TR>
<TR>
<TD colspan="2">
<tiles:insert page="/Footer.jsp" flush="true"/>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
示例 4. News.jsp 帶有 Tiles 插入標(biāo)簽（SimpleTilesWeb）
<HTML>
<HEAD>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2">
<tiles:insert page="/Header.jsp" flush="true"/>
</TD>
</TR>
<TR>
<TD width="20%" valign="top">
<tiles:insert page="/Navigation.jsp" flush="true"/>
</TD>
<TD width="80%" valign="top">
<tiles:insert page="/Fragment-News.jsp" flush="true" />
</TD>
</TR>
<TR>
<TD colspan="2">
<tiles:insert page="/Footer.jsp" flush="true"/>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
JSP 包含標(biāo)簽和 Tiles 插入標(biāo)簽都解除了 Web UI 組件的耦合。改變一個(gè)單獨(dú)的 UI 組件只需要改變負(fù)責(zé)該頁(yè)面的組件，例如 Header.jsp ，而其他頁(yè)面并不需要改變。示例 3 和 4 的代碼位于 SimpleTilesWeb 中。
然而，在以上示例中，如果 Web 應(yīng)用的 UI 布局需要從圖 5 改變到圖 6，在后者中主體組件可能是 fragment-Solutions.jsp 或 fragment-News.jsp ，那么有多少頁(yè)面需要修改呢？如果有 N 個(gè)頁(yè)面有相同的布局，您將需要修改所有的 N 個(gè)頁(yè)面。因此，如果僅僅使用一個(gè) JSP 包含標(biāo)簽或 Tiles 插入標(biāo)簽，Web 應(yīng)用 UI 的布局仍然是各 JSP 彼此緊耦合的。我們需要找到一個(gè)方法來(lái)將 JSP 進(jìn)行更深層的解耦合。
圖 5
圖 6
使用 Tiles 創(chuàng)建模板
我們面臨的新的挑戰(zhàn)是找到一個(gè)便捷的方法將 Web UI 從一個(gè)布局轉(zhuǎn)換到另一個(gè)布局。Tiles 模板的特征滿足該要求。
什么是 Tiles 模板？
Tiles 模板是一個(gè)一般不包含任何實(shí)際內(nèi)容的布局。它包含一些占位符屬性使得頁(yè)面 URI 和字符串可以在將來(lái)被插入。內(nèi)容頁(yè)面如 News.jsp 和 Solutions.jsp 可以引用該模板并通過(guò)這些占位符屬性插入 URI。
為創(chuàng)建一個(gè)模板頁(yè)面，您可以使用 Tiles 插入標(biāo)簽。不像示例 3 中的插入標(biāo)簽，在 Tiles 模板中使用的插入標(biāo)簽僅有一個(gè)名為 attribute 的屬性，它將變成 JSP 頁(yè)面 URI 插入的占位符。創(chuàng)建頁(yè)頭占位符的模板代碼為 <tiles:insert attribute="header" /> 。
該模板定義了具體的頁(yè)面可以引用的 Web UI 組件的共同布局。以下 JSP 代碼就是使用 Tiles 的一個(gè)樣本模板：
示例 5. Layout.jsp 是 Tiles 模板 (TemplatingTilesWeb)
<HTML>
<HEAD>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2"><tiles:insert attribute="header"/></TD>
</TR>
<TR>
<TD width="20%" valign="top">
<tiles:insert attribute="navigation"/></TD>
<TD width="80%" valign="top">
<tiles:insert attribute="body"/></TD>
</TR>
<TR>
<TD colspan="2"><tiles:insert attribute="footer"/></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
在定義完一個(gè)模板之后，它本身是不可以使用的。實(shí)際的 JSP 頁(yè)面必須引用該模板并且為其屬性提供頁(yè)面 URI。 <tiles:insert page="/Layout.jsp"flush="true"> 行可用于引用該模板。
具體的 JSP 頁(yè)面將布局組合委托給模板 Layout.jsp 。它們需要為使用 Tiles put 標(biāo)簽的 attribute 指定頁(yè)面實(shí)現(xiàn)名稱。代碼 <tiles:put name="header" value="/Header.jsp"/> 將頁(yè)面 /Header.jsp 插入名為 header 的屬性。下面是使用 Tiles 模板特征的 Solutions.jsp 和 News.jsp 的 JSP 代碼：
示例 6. 具有 Tiles 模板特征（TemplatingTilesWeb）的 Solutions.jsp
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert page="/Layout.jsp" flush="true">
<tiles:put name="header" value="/Header.jsp"/>
<tiles:put name="navigation" value="/Navigation.jsp"/>
<tiles:put name="body"
value="/Fragment-Solutions.jsp"/>
<tiles:put name="footer" value="/Footer.jsp"/></tiles:insert>
示例 7. 具有 Tiles 模板特征（TemplatingTilesWeb）的 News.jsp
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert page="/Layout.jsp" flush="true">
<tiles:put name="header" value="/Header.jsp"/>
<tiles:put name="navigation" value="/Navigation.jsp"/>
<tiles:put name="body"
value="/Fragment-News.jsp"/>
<tiles:put name="footer" value="/Footer.jsp"/></tiles:insert>
示例 5、6 和 7 的代碼在 TemplatingTilesWeb 中。
如果想將布局從圖 5 改變到圖 6，您所需要做的只是如示例 8 中所示修改模板 Layout.jsp ，而不需要改動(dòng)具體頁(yè)面，比如 Solutions.jsp 和 News.jsp 。相比較未使用模板時(shí)需要修改 N 個(gè)頁(yè)面，使用了 Tiles 模板特征可以顯著地降低維護(hù)成本。
示例 8. 修改模板以創(chuàng)建新的布局
<HTML>
<HEAD>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2"><tiles:insert attribute="header"/></TD>
</TR>
<TR>
<TD width="80%" valign="top">
<tiles:insert attribute="body"/></TD>
<TD width="20%" valign="top">
<tiles:insert attribute="navigation"/></TD>
</TR>
<TR>
<TD colspan="2"><tiles:insert attribute="footer"/></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
