第16章 Tiles框架
16.1 采用基本的JSP语句创建复合式网页... 2
16.2 采用JSP的include指令创建复合式网页... 6
16.3 采用<tiles:insert>标签创建复合式网页... 10
16.4 采用Tiles模板创建复合式网页... 12
16.5 采用Tiles模板和Tiles组件创建复合式网页... 14
16.5.1 Tiles组件的基本使用方法... 15
16.5.2 通过Struts Action来调用Tiles组件... 17
16.5.3 Tiles组件的组合... 17
16.5.4 Tiles组件的扩展... 19
16.6 小节... 20
第16章 Tiles框架
在开发Web站点时，常常要求同一站点的所有Web页面保持一致的外观，比如有相同的布局、页头、页尾和菜单。图16-1显示了一种典型的网页布局。
图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。
图16-2 tilestaglibs应用的主页index.jsp
图16-3 tilestaglibs应用的产品页面product.jsp
例程16-1和例程16-2分别为index.jsp和product.jsp的源代码。
例程16-1 index.jsp
View Code
<%@ 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
View Code
<%@ 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文件。
图16-4 index.jsp包含的其他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
View Code
<%@ 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
View Code
<%@ 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
View Code
<%@ 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应用中使用<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>元素：
View Code
<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
View Code
<%@ 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
View Code
<%@ 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的模板机制。
通俗的讲，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
View Code
<%@ 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
View Code
<%@ 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
View Code
<%@ 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应用中使用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
View Code
<?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插件，代码如下：
View Code
<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的代码：
View Code
<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
View Code
<%@ 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
View Code
<%@ 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来调用16.5.1节定义的名为“index-definition”的Tiles组件，可以在Struts配置文件中配置如下Action映射:
View Code
<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所示。
图16-6 把名为“index-definition”的Tiles组件的左边部分拆分为独立的Tiles组件
以下是在tilestaglibs应用中使用组合式Tiles组件的步骤。
（1）在tiles-def.xml文件中重新定义“sidebar-definition”、“index-definition”和“product-definition”这三个Tiles组件。在一个Tiles组件中包含另一个Tiles组件的语法为：
View Code
<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
View Code
<?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
View Code
<%@ 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
View Code
<%-- 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
View Code
<%-- 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组件的扩展
在16.5.3节的tiles-def.xml文件中，“index-definition”和“product-definition”两个Tiles组件的定义中仍然存在重复代码。可以利用Tiles组件的可扩展特性来进一步消除冗余代码。解决方法为先定义一个包含这两个Tiles组件的共同内容的父类Tiles组件，命名为“base-definition”，然后再让“index-definition”和“product-definition”这两个Tiles组件继承这个父类组件。图16-7显示了改进后的Tiles组件的关系。
图16-7改进后的Tiles组件的关系
一个Tiles组件继承另一个Tiles组件的语法如下，其中<definition>元素的extends属性指定被扩展的父类Tiles组件：
<definition name="index-definition" extends="base-definition">
例程16-22为改进后的tiles-def.xml的代码。
例程16-22 tiles-def.xml
View Code
<?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框架的优势，从整体上提高网页开发的效率。
---------------------------来自精通<<Struts：基于MVC的Java Web设计与开发>>
(后一篇)Tiles入门和Tiles 框架和体系结构
