16.2 採用JSP的include指令創建複合式網頁... 6
16.3 採用<tiles:insert>標籤創建複合式網頁... 10
16.5 採用Tiles模板和Tiles組件創建複合式網頁... 14
16.5.2 通過Struts Action來調用Tiles組件... 17
第16章 Tiles框架
在開發Web站點時，常常要求同一站點的所有Web頁面保持一致的外觀，比如有相同的佈局、頁頭、頁尾和菜單。圖16-1顯示了一種典型的網頁佈局。
menu header content
footer
圖16-1 一種典型的網頁佈局
在圖16-1中，網頁被劃分爲四個部分：Header、Menu、Footer和Content。對於同一站點的所有Web頁面，Header、Menu和Footer部分的內容相同，僅僅Content部分的內容不相同。如果採用基本的JSP語句來編寫所有的Web頁面，顯然會導致大量的重複編碼，增加開發和維護成本。
Tiles框架爲創建Web頁面提供了一種模板機制，它能將網頁的佈局和內容分離。它允許先創建模板，然後在運行時動態地將內容插入到模板中。Tiles框架建立在JSP的include指令的基礎上，但它提供了比JSP的include指令更強大的功能。Tiles框架具有如下特性：
l 創建可重用的模板
l 動態構建和裝載頁面
l 定義可重用的Tiles組件
l 支持國際化
Tiles框架包含以下內容：
l Tiles標籤庫
l Tiles組件的配置文件
l TilesPlugIn插件
本章循序漸進的介紹了構建如圖16-1所顯的複合式Web頁面的若干方案，每個方案都建立在上一個方案的基礎之上。本章的樣例程序爲tilestaglibs應用，針對每一種方案，都提供了獨立的版本。
16.1 採用基本的JSP語句創建複合式網頁
創建動態Web頁面的最基本的辦法是爲每個頁面創建獨立的JSP文件。圖16-2和圖16-3分別爲tilestaglibs應用的主頁index.jsp和產品頁面product.jsp。
|
|
本節介紹的tilestaglibs應用的源程序位於配套光盤的sourcecode/tilestaglibs/version1/tilestaglibs目錄下。如果要在Tomcat上發佈這個應用，只要把version1目錄下的整個tilestaglibs子目錄拷貝到<CATALINA_HOME>/webapps目錄下即可。 |
圖16-2 tilestaglibs應用的主頁index.jsp
圖16-3 tilestaglibs應用的產品頁面product.jsp
例程16-1和例程16-2分別爲index.jsp和product.jsp的源代碼。
例程16-1 index.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
<title>TilesTaglibs Sample</title>
</head>
<body >
<%-- One table lays out all of the content for this page --%>
<table width="100%" height="100%" >
<tr>
<%-- Sidebar--%>
<td width="150" valign="top" align="left" bgcolor="#CCFFCC">
<table>
<tr>
<%-- Sidebar top --%>
<td width="150" height="65" valign="top" align="left">
<a href="">
<img src="chinese.gif" border="0" /></a>
<a href="">
<img src="usa.gif" border="0"/></a>
</td>
</tr>
<tr>
<%-- Sidebar bottom --%>
<td>
<font size="5">Links</font><p>
<a href="index.jsp">Home</a><br>
<a href="product.jsp">Products</a><br>
<a href="">Hot Link1</a><br>
<a href="">Hot Link2</a><br>
<a href="">Hot Link3</a><br>
</td>
</tr>
</table>
</td>
<%-- Main content--%>
<td valign="top" height="100%" width="*">
<table width="100%" height="100%">
<tr>
<%-- Header--%>
<td valign="top" height="15%">
<font size="6">Welcome to ABC Inc.</font>
<hr>
</td>
<tr>
<tr>
<%-- Content--%>
<td valign="top" height="*">
<font size="4">Page-specific content goes here</font>
</td>
</tr>
<tr>
<%-- Footer--%>
<td valign="bottom" height="15%">
<hr>
Thanks for stopping by!
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
例程16-2 product.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
<title>TilesTaglibs Sample</title>
</head>
<body >
<%-- One table lays out all of the content for this page --%>
<table width="100%" height="100%" >
<tr>
<%-- Sidebar--%>
<td width="150" valign="top" align="left" bgcolor="#CCFFCC">
<table>
<tr>
<%-- Sidebar top --%>
<td width="150" height="65" valign="top" align="left">
<a href="">
<img src="chinese.gif" border="0" /></a>
<a href="">
<img src="usa.gif" border="0"/></a>
</td>
</tr>
<tr>
<%-- Sidebar bottom --%>
<td>
<font size="5">Links</font><p>
<a href="index.jsp">Home</a><br>
<a href="product.jsp">Products</a><br>
<a href="">Hot Link1</a><br>
<a href="">Hot Link2</a><br>
<a href="">Hot Link3</a><br>
</td>
</tr>
</table>
</td>
<%-- Main content--%>
<td valign="top" height="100%" width="*">
<table width="100%" height="100%">
<tr>
<%-- Header--%>
<td valign="top" height="15%">
<font size="6">Welcome to ABC Inc.</font>
<hr>
</td>
<tr>
<tr>
<%-- Content--%>
<td valign="top" height="*">
<font size="4">Products</font> <p>
<li>product1</li> <br>
<li>product2</li> <br>
<li>product3</li> <br>
</td>
</tr>
<tr>
<%-- Footer--%>
<td valign="bottom" height="15%">
<hr>
Thanks for stopping by!
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
由例程16-1和例程16-2可以看出，在index.jsp和product.jsp文件中，僅僅粗體字標識的代碼塊不是重複代碼，其餘部分均爲重複代碼。如果網頁的相同部分發生需求變更，必須手工修改所有的JSP文件。可見，採用基本的JSP語句來編寫上述網頁，會導致JSP代碼的大量冗餘，增加開發與維護成本。
16.2 採用JSP的include指令創建複合式網頁
爲了減少代碼的冗餘，可以把index.jsp和product.jsp中相同部分放在單獨的JSP文件中，然後在index.jsp和product.jsp文件中通過JSP include指令把其他JSP文件包含進來。圖16-4和圖16-5分別顯示了index.jsp和product.jsp文件包含的其他JSP文件。
|
|
本節介紹的tilestaglibs應用的源程序位於配套光盤的sourcecode/tilestaglibs/version2/ tilestaglibs目錄下。如果要在Tomcat上發佈這個應用，只要把version2目錄下的整個tilestaglibs子目錄拷貝到<CATALINA_HOME>/webapps目錄下即可。 |
sidebar.jsp header.jsp indexContent.jsp
footer.jsp
圖16-4 index.jsp包含的其他JSP文件
sidebar.jsp header.jsp productContent.jsp
footer.jsp
圖16-5 product.jsp包含的其他JSP文件
由圖16-4和圖16-5可以看出，在index.jsp和product.jsp中均包含header.jsp、sidebar.jsp和footer.jsp，僅僅網頁主體部分包含的JSP文件不同。例程16-3、16-4、16-5、16-6、16-7、16-8和16-9分別爲header.jsp、footer.jsp、sidebar.jsp、indexContent.jsp、productContent.jsp、index.jsp和product.jsp的源代碼。
例程16-3 header.jsp
<font size="6">Welcome to ABC Inc.</font>
<hr>
例程16-4 footer.jsp
<hr>
Thanks for stopping by!
例程16-5 sidebar.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<table >
<tr>
<%-- Sidebar top component --%>
<td width="150" height="65" valign="top" align="left">
<a href=""><img src="chinese.gif" border="0"/></a>
<a href=""><img src="usa.gif" border="0"/></a>
</td>
</tr>
<tr>
<%-- Sidebar bottom component --%>
<td>
<table>
<tr>
<td>
<font size="5">Links</font><p>
<a href="index.jsp">Home</a><br>
<a href="product.jsp">Products</a><br>
<a href="">Hot Link1</a><br>
<a href="">Hot Link2</a><br>
<a href="">Hot Link3</a><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
例程16-6 indexContent.jsp
<font size="4">Page-specific content goes here</font>
例程16-7 productContent.jsp
<font size="4">Products</font> <p>
<li>product1</li> <br>
<li>product2</li> <br>
<li>product3</li> <br>
例程16-8 index.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
<title>TilesTaglibs Sample</title>
</head>
<body >
<%-- One table lays out all of the content for this page --%>
<table width="100%" height="100%">
<tr>
<%-- Sidebar section --%>
<td width="150" valign="top" align="left" bgcolor="#CCFFCC">
<jsp:include page="sidebar.jsp"/>
</td>
<%-- Main content section --%>
<td height="100%" width="*">
<table width="100%" height="100%">
<tr>
<%-- Header section --%>
<td valign="top" height="15%">
<jsp:include page="header.jsp"/>
</td>
<tr>
<tr>
<%-- Content section --%>
<td valign="top" height="*">
<jsp:include page="indexContent.jsp"/>
</td>
</tr>
<tr>
<%-- Footer section --%>
<td valign="bottom" height="15%">
<jsp:include page="footer.jsp"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
例程16-9 product.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
<title>TilesTaglibs Sample</title>
</head>
<body >
<%-- One table lays out all of the content for this page --%>
<table width="100%" height="100%">
<tr>
<%-- Sidebar section --%>
<td width="150" valign="top" align="left" bgcolor="#CCFFCC">
<jsp:include page="sidebar.jsp"/>
</td>
<%-- Main content section --%>
<td height="100%" width="*">
<table width="100%" height="100%">
<tr>
<%-- Header section --%>
<td valign="top" height="15%">
<jsp:include page="header.jsp"/>
</td>
<tr>
<tr>
<%-- Content section --%>
<td valign="top" height="*">
<jsp:include page="productContent.jsp"/>
</td>
</tr>
<tr>
<%-- Footer section --%>
<td valign="bottom" height="15%">
<jsp:include page="footer.jsp"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
採用JSP include指令來創建複合式頁面，已經在提高代碼可重用性方面邁出了正確的一步。index.jsp和product.jsp中包含的相同內容，被放在單獨的JSP頁面中。index.jsp和product.jsp只需通過JSP include指令把這些相同內容包含進來，這樣提高了代碼的可重用性。但是JSP include指令不能完全避免代碼冗餘，例如從例程16-8 和例程16-9可以看出，index.jsp和product.jsp中仍然存在許多重複代碼，僅僅粗體字標識的代碼塊不是重複代碼。
此外，和16.1節介紹的方案相比，儘管第二種方案減少了重複代碼，但JSP文件的數量增加了，由原來的2個文件增加到7個文件，所以軟件的複雜度也增加了。
16.3 採用<tiles:insert>標籤創建複合式網頁
Tiles標籤庫的<tiles:insert>標籤和JSP include指令具有相同的功能，也能把其他的JSP頁面插入到當前頁面中。例如，以下兩條語句的作用是相同的：
<jsp:include page="indexContent.jsp"/>
<tiles:insert page="indexContent.jsp" flush="true"/>
<tiles:insert>標籤的page屬性指定被插入的JSP文件，flush屬性的可選值包括true和false，當flush屬性爲true，表示在執行插入操作之前，先調用當前頁面的輸出流的flush()方法。
|
|
本節介紹的tilestaglibs應用的源程序位於配套光盤的sourcecode/tilestaglibs/version3/tilestaglibs目錄下。如果要在Tomcat上發佈這個應用，只要把version3目錄下的整個tilestaglibs子目錄拷貝到<CATALINA_HOME>/webapps目錄下即可。 |
以下是在tilestaglibs應用中使用<tiles:insert>標籤的步驟。
（1）安裝Tiles標籤庫所需的文件
在Struts的下載軟件中包含了運行Tiles標籤庫所需的文件。如果Web應用中使用了Tiles標籤庫，以下文件必須位於WEB-INF/lib目錄中：
l struts.jar
l commons-digester.jar
l commons-beanutils.jar
l commons-collections.jar
l commons-logging.jar
此外，應該把Tiles標籤庫的定義文件struts-tiles.tld拷貝到WEB-INF目錄下。
（2）在web.xml文件中配置如下<taglib>元素：
<taglib>
<taglib-uri>/WEB-INF/struts-tiles.tld</taglib-uri>
<taglib-location>/WEB-INF/struts-tiles.tld</taglib-location>
</taglib>
（3）創建index.jsp和product.jsp文件
修改16.2節的例程16-8（index.jsp）和例程16-9（product.jsp），在index.jsp和product.jsp文件的開頭，通過<%@ taglib>指令引入Tiles標籤庫，然後把源代碼中的JSP include指令改爲<tiles:insert>標籤。例程16-10和例程16-11分別爲修改後的index.jsp和product.jsp文件。
例程16-10 ndex.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<html>
<head>
<title>TilesTaglibs Sample</title>
</head>
<body >
<%-- One table lays out all of the content for this page --%>
<table width="100%" height="100%">
<tr>
<%-- Sidebar section --%>
<td width="150" valign="top" align="left" bgcolor="#CCFFCC">
<tiles:insert page="sidebar.jsp" flush="true"/>
</td>
<%-- Main content section --%>
<td height="100%" width="*">
<table width="100%" height="100%">
<tr>
<%-- Header section --%>
<td valign="top" height="15%">
<tiles:insert page="header.jsp" flush="true"/>
</td>
<tr>
<tr>
<%-- Content section --%>
<td valign="top" height="*">
<tiles:insert page="indexContent.jsp" flush="true"/>
</td>
</tr>
<tr>
<%-- Footer section --%>
<td valign="bottom" height="15%">
<tiles:insert page="footer.jsp" flush="true"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
例程16-11 product.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<html>
<head>
<title>TilesTaglibs Sample</title>
</head>
<body >
<%-- One table lays out all of the content for this page --%>
<table width="100%" height="100%">
<tr>
<%-- Sidebar section --%>
<td width="150" valign="top" align="left" bgcolor="#CCFFCC">
<tiles:insert page="sidebar.jsp" flush="true"/>
</td>
<%-- Main content section --%>
<td height="100%" width="*">
<table width="100%" height="100%">
<tr>
<%-- Header section --%>
<td valign="top" height="15%">
<tiles:insert page="header.jsp" flush="true"/>
</td>
<tr>
<tr>
<%-- Content section --%>
<td valign="top" height="*">
<tiles:insert page="productContent.jsp" flush="true"/>
</td>
</tr>
<tr>
<%-- Footer section --%>
<td valign="bottom" height="15%">
<tiles:insert page="footer.jsp" flush="true"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
從例程16-10和例程16-11可以看出，用<tiles:insert>標籤取代JSP include指令來創建複合式頁面，代碼僅有稍微的差別，兩者的利弊也很相似。單純使用<tiles:insert>標籤來創建複合式頁面，還沒有充分發揮Tiles框架的優勢。
16.4 採用Tiles模板創建複合式網頁
在16.3節中，儘管使用了<tiles:insert>標籤，index.jsp和product.jsp文件還是存在很多的重複代碼。爲了提高Web頁面的可重用性和可維護性，可以引入Tiles的模板機制。
|
|
本節介紹的tilestaglibs應用的源程序位於配套光盤的sourcecode/tilestaglibs/version4/tilestaglibs目錄下。如果要在Tomcat上發佈這個應用，只要把version4目錄下的整個tilestaglibs子目錄拷貝到<CATALINA_HOME>/webapps目錄下即可。 |
通俗的講，Tiles模板是一種描述頁面佈局的JSP頁面。Tiles模板僅僅定義Web頁面的樣式，而不指定內容。在Web應用運行時，才把特定內容插入到模板頁面中。同一模板可以被多個Web頁面共用。
使用模板，可以輕鬆的實現Web應用的所有頁面保持相同的外觀和佈局，無需爲每個頁面硬編碼。在一個應用中，大多數頁面使用同一模板，某些頁面可能需要不同的外觀，使用其他的模板，因此一個應用可能有一個以上模板。
以下是在tilestaglibs應用中使用Tiles模板的步驟。
（1）安裝Tiles標籤庫所需的文件，同16.3節的步驟1。
（2）在web.xml文件中配置<taglib>元素，同16.3節的步驟2。
（3）定義模板文件，參見例程16-12。
例程16-12 layout.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%>
<html>
<head>
<title>TilesTaglibs Sample</title>
</head>
<body >
<%-- One table lays out all of the content --%>
<table width="100%" height="100%">
<%-- Sidebar section --%>
<tr>
<td width="150" valign="top" align="left" bgcolor="#CCFFCC">
<tiles:insert attribute="sidebar"/>
</td>
<%-- Main content section --%>
<td valign="top" height="100%" width="*">
<table width="100%" height="100%">
<tr>
<%-- Header section --%>
<td height="15%">
<tiles:insert attribute="header"/>
</td>
<tr>
<tr>
<%-- Content section --%>
<td valign="top" height="*">
<tiles:insert attribute="content"/>
</td>
</tr>
<tr>
<%-- Footer section --%>
<td valign="bottom" height="15%">
<tiles:insert attribute="footer"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
在模板文件layout.jsp中定義了網頁的佈局，但沒有指定各部分具體的內容。layout.jsp中包含多個<tiles:insert>標籤，它的attribute屬性僅僅指定了待插入內容的邏輯名，而沒有指定真正被插入的文件。
（4）在index.jsp和product.jsp中運用Tiles模板,參見例程16-13和例程16-14。
例程16-13 index.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert page="layout.jsp" flush="true">
<tiles:put name="sidebar" value="sidebar.jsp"/>
<tiles:put name="header" value="header.jsp"/>
<tiles:put name="content" value="indexContent.jsp"/>
<tiles:put name="footer" value="footer.jsp"/>
</tiles:insert>
例程16-14 product.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert page="layout.jsp" flush="true">
<tiles:put name="sidebar" value="sidebar.jsp"/>
<tiles:put name="header" value="header.jsp"/>
<tiles:put name="content" value="productContent.jsp"/>
<tiles:put name="footer" value="footer.jsp"/>
</tiles:insert>
在index.jsp和product.jsp中，<tiles:insert>標籤指定插入的模板文件，index.jsp和product.jsp均使用相同的模板文件layout.jsp。<tiles:insert>標籤中包含了若干<tiles:put>子標籤，它指定插入到模板中的具體內容。<tiles:put>標籤的name屬性和模板文件中<tiles:insert>標籤的attribute屬性匹配，<tiles:put>標籤的value屬性指定插入到模板中的具體JSP文件。
採用Tiles模板機制，大大提高了代碼的可重用性和可維護性，模板中包含了網頁共同的佈局。如果佈局發生變化，只需要修改模板文件，無需修改具體的網頁文件。不過，從例程16-13和16-14可以看出，儘管index.jsp和product.jsp文件的長度都縮短了，但是兩者還是存在重複代碼。
16.5 採用Tiles模板和Tiles組件創建複合式網頁
爲了最大程度的提高代碼的可重用性和靈活性，Tiles框架引入了Tiles組件的概念。Tiles組件可以代表一個完整的網頁，也可以代表網頁的一部分。簡單的Tiles組件可以組合成複雜的Tiles組件，或被擴展爲複雜的Tiles組件。
16.5.1 Tiles組件的基本使用方法
Tiles框架允許在專門的XML文件中配置Tiles組件。例如，以下代碼定義了一個名爲“index-definition”的Tiles組件，它描述整個index.jsp網頁：
<tiles-definitions>
<definition name="index-definition" path="/layout.jsp">
<put name="sidebar" value="sidebar.jsp"/>
<put name="header" value="header.jsp"/>
<put name="content" value="indexContent.jsp"/>
<put name="footer" value="footer.jsp"/>
</definition>
</tiles-definitions>
<definition>元素的name屬性指定Tiles組件的名字，path屬性指定Tiles組件使用的模板，<definition>元素的<put>子元素用於向模板中插入具體的網頁內容。
|
|
本節介紹的tilestaglibs應用的源程序位於配套光盤的sourcecode/tilestaglibs/version5/tilestaglibs目錄下。如果要在Tomcat上發佈這個應用，只要把version5目錄下的整個tilestaglibs子目錄拷貝到<CATALINA_HOME>/webapps目錄下即可。 |
以下是在tilestaglibs應用中使用Tiles組件的步驟。
（1）安裝Tiles標籤庫所需的文件，同16.3節的步驟1
（2）在web.xml文件中配置<taglib>元素，同16.3節的步驟2
（3）在專門的XML文件中配置Tiles組件, 在本例中把這個配置文件命名爲tiles-defs.xml，這個文件位於WEB-INF目錄下。例程16-15爲tiles-defs.xml文件的代碼。
例程16-15 tiles-defs.xml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 1.1//EN"
"http://jakarta.apache.org/struts/dtds/tiles-config_1_1.dtd">
<tiles-definitions>
<definition name="index-definition" path="/layout.jsp">
<put name="sidebar" value="sidebar.jsp"/>
<put name="header" value="header.jsp"/>
<put name="content" value="indexContent.jsp"/>
<put name="footer" value="footer.jsp"/>
</definition>
<definition name="product-definition" path="/layout.jsp">
<put name="sidebar" value="sidebar.jsp"/>
<put name="header" value="header.jsp"/>
<put name="content" value="productContent.jsp"/>
<put name="footer" value="footer.jsp"/>
</definition>
</tiles-definitions>
以上代碼定義了兩個Tiles組件，它們分別代表完整的index.jsp和product.jsp頁面。
（4）在Strut配置文件中配置TilesPlugin插件，代碼如下：
<plug-in className="org.apache.struts.tiles.TilesPlugin" >
<set-property property="definitions-config" value="/WEB-INF/tiles-defs.xml" />
<set-property property="definitions-parser-validate" value="true" />
</plug-in>
TilesPlugin插件用於加載Tiles組件的配置文件。在<plug-in>元素中包含幾個<set-property>子元素，用於向TilesPlugin插件傳入附加的參數：
l definitions-config參數：指定Tiles組件的配置文件，如果有多個配置文件，則它們之間用逗號分隔。
l definitions-parser-validate參數：指定XML解析器是否驗證Tiles配置文件，可選值包括true和false，默認值爲true。
（5）在web.xml文件中配置ActionServlet
爲了保證在Web應用啓動時加載TilesPlugin插件，應該加入ActionServlet控制器，ActionServlet控制器在初始化時能加載所有的插件。以下是在web.xml文件中配置ActionServlet的代碼：
<servlet>
<servlet-name>action</servlet-name>
<servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
<init-param>
<param-name>config</param-name>
<param-value>/WEB-INF/struts-config.xml</param-value>
</init-param>
<load-on-startup>3</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>action</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
（6）在index.jsp和product.jsp中插入Tiles組件，參見例程16-16和例程16-17：
例程16-16 index.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert definition="index-definition"/>
例程16-17 product.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert definition="product-definition"/>
16.5.2 通過Struts Action來調用Tiles組件
如果Tiles組件代表完整的網頁，可以直接通過Struts Action來調用Tiles組件。例如，如果希望通過Struts Action來調用
<action-mappings>
<action path="/index"
type="org.apache.struts.actions.ForwardAction"
parameter="index-definition">
</action>
</action-mappings>
接下來通過瀏覽器訪問 http://localhost:8080/tilestaglibs/index.do，該請求先被轉發到ForwardAction，ForwardAction再把請求轉發給名爲“index-definition”的Tiles組件，最後在瀏覽器端，用戶將看到和index.jsp相同的頁面。
通過Struts Action來調用Tiles組件，可以充分發揮Struts框架負責流程控制的功能。此外，可以減少JSP文件的數目。例如，如果直接通過Struts Action來調用名爲“index-definition”的Tiles組件，就不必再創建index.jsp文件。
16.5.3 Tiles組件的組合
Tiles組件是一種可重用的組件。可以象搭積木一樣，把簡單的Tiles組件組裝成複雜的Tiles組件，例如，可以把名爲“index-definition”的Tiles組件的左邊部分拆分爲獨立的Tiles組件，名爲“sidebar-definition”，如圖16-6所示。
index-definition 模板文件:layout.jsp
sidebar-definition 模板文件:sidebar-layout.jsp flags.jsp sidebar-links.jsp header.jsp indexContent.jsp footer.jsp
圖16-6 把名爲“index-definition”的Tiles組件的左邊部分拆分爲獨立的Tiles組件
|
|
本節介紹的tilestaglibs應用的源程序位於配套光盤的sourcecode/tilestaglibs/version6/tilestaglibs目錄下。如果要在Tomcat上發佈這個應用，只要把version6目錄下的整個tilestaglibs子目錄拷貝到<CATALINA_HOME>/webapps目錄下即可。 |
以下是在tilestaglibs應用中使用組合式Tiles組件的步驟。
（1）在tiles-def.xml文件中重新定義“sidebar-definition”、“index-definition”和“product-definition”這三個Tiles組件。在一個Tiles組件中包含另一個Tiles組件的語法爲：
<definition name="index-definition" path="/layout.jsp">
<put name="sidebar" value="sidebar-definition" type="definition"/>
……
</definition>
以上<put>子元素的value屬性指定被包含的Tiles組件的名字，type屬性設爲“definition”，表示value屬性指定的是Tiles組件，而不是JSP文件。例程16-18是tiles-def.xml文件的代碼。
例程16-18 tiles-def.xml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration//EN"
"http://jakarta.apache.org/struts/dtds/tiles-config.dtd">
<tiles-definitions>
<definition name="sidebar-definition" path="/sidebar-layout.jsp">
<put name="top" value="flags.jsp"/>
<put name="bottom" value="sidebar-links.jsp"/>
</definition>
<definition name="index-definition" path="/layout.jsp">
<put name="sidebar" value="sidebar-definition" type="definition"/>
<put name="header" value="header.jsp"/>
<put name="content" value="indexContent.jsp"/>
<put name="footer" value="footer.jsp"/>
</definition>
<definition name="product-definition" path="/layout.jsp">
<put name="sidebar" value="sidebar-definition" type="definition"/>
<put name="header" value="header.jsp"/>
<put name="content" value="productContent.jsp"/>
<put name="footer" value="footer.jsp"/>
</definition>
</tiles-definitions>
（2）創建名爲“sidebar-definition”的Tiles組件的相關JSP文件。
名爲“sidebar-definition”的Tiles組件的模板文件爲sidebar-layout.jsp，被插入到這個模板中的兩個JSP文件分別爲:flags.jsp和sidebar-links.jsp。例程16-19、16-20和16-21分別爲這幾個JSP文件的源代碼。
例程16-19 sidebar-layout.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%>
<table >
<tr>
<%-- Sidebar top component --%>
<tiles:insert attribute="top"/>
</tr>
<tr>
<%-- Sidebar bottom component --%>
<tiles:insert attribute="bottom"/>
</tr>
</table>
例程16-20 sidebar-links.jsp
<%-- Sidebar bottom component --%>
<td>
<table>
<tr>
<td>
<font size="5">Links</font><p>
<a href="index.jsp">Home</a><br>
<a href="product.jsp">Products</a><br>
<a href="">Hot Link1</a><br>
<a href="">Hot Link2</a><br>
<a href="">Hot Link3</a><br>
</td>
</tr>
</table>
</td>
例程16-21 flags.jsp
<%-- Sidebar top component --%>
<td width="150" height="65" valign="top" align="left">
<a href=""><img src="chinese.gif" border="0"/></a>
<a href=""><img src="usa.gif" border="0"/></a>
</td>
16.5.4 Tiles組件的擴展
在
sidebar-definition base-definition 包含 index-defintion product-definition 繼承
圖16-7改進後的Tiles組件的關係
|
|
本節介紹的tilestaglibs應用的源程序位於配套光盤的sourcecode/tilestaglibs/version7/tilestaglibs目錄下。如果要在Tomcat上發佈這個應用，只要把version7目錄下的整個tilestaglibs子目錄拷貝到<CATALINA_HOME>/webapps目錄下即可。 |
一個Tiles組件繼承另一個Tiles組件的語法如下，其中<definition>元素的extends屬性指定被擴展的父類Tiles組件：
<definition name="index-definition" extends="base-definition">
例程16-22爲改進後的tiles-def.xml的代碼。
例程16-22 tiles-def.xml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 1.1//EN"
"http://jakarta.apache.org/struts/dtds/tiles-config_1_1.dtd">
<tiles-definitions>
<definition name="sidebar-definition" path="/sidebar-layout.jsp">
<put name="top" value="flags.jsp"/>
<put name="bottom" value="sidebar-links.jsp"/>
</definition>
<definition name="base-definition" path="/layout.jsp">
<put name="sidebar" value="sidebar-definition" type="definition"/>
<put name="header" value="header.jsp"/>
<put name="content" value=""/>
<put name="footer" value="footer.jsp"/>
</definition>
<definition name="index-definition" extends="base-definition">
<put name="content" value="indexContent.jsp"/>
</definition>
<definition name="product-definition" extends="base-definition">
<put name="content" value="productContent.jsp"/>
</definition>
</tiles-definitions>
16.6 小節
傳統的GUI工具包，如Java AWT和Java Swing，都提供了一些功能強大的佈局管理器，它們指定各個視圖組件在窗口中的分佈位置。佈局管理器有助於創建複合式的複雜界面，一個複合式界面由一些簡單的基本界面組成。利用佈局管理器來創建GUI界面有以下優點：
l 可重用性：基本界面可以被重用，組合成各種不同的複合式界面
l 可擴展性：可以方便的擴展基本界面，從而創建更復雜的界面
l 可維護性: 每個基本界面之間相互獨立，當複合式界面中的局部區域發生變化，不會影響其它區域
不幸的是，JSP技術本身並沒有直接提供佈局或佈局管理器。爲了簡化Web頁面的開發，提高可重用性和可擴展性，Struts Tiles框架提供了一種模板機制，模板定義了網頁的佈局，同一模板可以被多個Web頁面共用。此外，Tiles框架還允許定義可重用的Tiles組件，它可以描述一個完整的網頁，也可以描述網頁的局部內容。簡單的Tiles組件可以被組合或擴展成爲更復雜的Tiles組件。
本章由淺到深的介紹了創建複合式Web頁面的幾種方案。與採用基本的JSP語言來創建Web頁面相比，Tiles框架大大提高了視圖層程序代碼的可重用性、可擴展性和可維護性。不過，使用Tiles框架也增加了開發視圖的難度和複雜度。如果Web應用規模很小，界面非常簡單，不妨直接採用基本的JSP語言來編寫網頁。對於大型複雜的Web應用，可以充分運用Tiles框架的優勢，從整體上提高網頁開發的效率。