Tiles框架建立在JSP的include指令的基礎上,但它提供了比JSP的include指令更強大的功能。
Tiles框架具有如下特性:
- 創建可重用的模板
- 動態構建和裝載頁面
- 定義可重用的Tiles組件
- 支持國際化
Tiles框架包含以下內容:
- Tiles標簽庫
- Tiles組件的配置文件
- TilesPlugIn插件
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()方法。
開發步驟
(1)安裝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>標簽.
index.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 --%>
例程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"/></tr>
<tr>
<%-- Footer section --%>
<td valign="bottom" height="15%">
<tiles:insert page="footer.jsp" flush="true"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body >
以上雖然用到了<titles:insert>但是頁面還是存在很多重復代碼,可以采用 Tiles模版機制實現
Tiles 模板
通俗地講,Tiles 模板是一種描述頁面布局的JSP 頁面。Tiles 模板只定義了Web 頁面
的樣式,而不指定內容。在Web 應用運行時,才把特定內容插入到模板頁面中。同一模板
可以被多個Web頁面共用。
使用模板,可以輕松地實現Web 應用的所有頁面保持相同的外觀和布局,而無需為每
個頁面硬編碼。在一個應用中,大多數頁面使用同一個模板,某些頁面可能需要不同的外
觀,而使用其他的模板,因此一個應用可能有一個以上的模板。
以下是在tilestaglibs應用中使用Tiles模板的步驟。
(1)安裝Tiles標簽庫所需的文件.
(2)在web.xml文件中配置<taglib>元素.
(3)定義模板文件
例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模板
例 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>
例 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 文件的長度都縮短了,但
是兩者還是存在重復代碼。
采用Tiles 模板和Tiles 組件創建復合式網頁
為了最大程度地提高代碼的可重用性和靈活性,Tiles 框架引入了Tiles 組件的概念。
Tiles 組件可以代表一個完整的網頁,也可以代表網頁的一部分。簡單的Tiles 組件可以組
合成復雜的Tiles組件,或被擴展為復雜的Tiles組件。
Tiles組件的基本使用方法
Tiles框架允許在專門的XML文件中配置Tiles組件。例如,以下代碼定義了一個名為
“index-definition”的Tiles組件,它描述整個index.jsp網頁:
xml文件
<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>子元素用於向模板中插入具體的網頁內容。
步驟
(1)安裝Tiles標簽庫所需的文件,
(2)在web.xml文件中配置<taglib>元素,
(3)在專門的XML 文件中配置Tiles 組件, 在本例中把這個配置文件命名為
tiles-defs.xml,這個文件位於WEB-INF目錄下。例為tiles-defs.xml文件的代碼。
例 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組件
例index.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert definition="index-definition"/>
例product.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert definition="product-definition"/>
通過Struts Action來調用Tiles組件
如果Tiles 組件代表完整的網頁,那麼可以直接通過Struts Action 來調用Tiles 組件。
例如,如果希望通過Struts Action來調用小節定義的名為“index-definition”的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文件。
Tiles組件的組合
組合式開發步驟:
(1)在tiles-def.xml文件中重新定義“sidebar-definition”,“index-definition”和“productdefinition”
這三個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文件。以下是tiles-def.xml
文件的代碼。
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文件的源代碼。
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>
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>
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>
繼承
一個Tiles組件繼承另一個Tiles組件的語法如下,其中<definition>元素的extends 屬性
指定被擴展的父類Tiles組件:
<definition name="index-definition" extends="base-definition">
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>
Tiles 組件是一種可重用的組件,可以像搭積木一樣,把簡單的Tiles 組件組裝成復雜
的Tiles組件。例如,可以把名為“index-definition”的Tiles組件的左邊部分拆分為獨立的
Tiles組件,名為“sidebar-definition”,即組件的嵌套