Tiles框架

16  Tiles框架... 2

16.1  采用基本的JSP语句创建复合式网页... 2

16.2  采用JSPinclude指令创建复合式网页... 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显示了一种典型的网页布局。

 

 

menu

header

content

 

 


                                  

 

footer

 

 


16-1  一种典型的网页布局

在图16-1中,网页被划分为四个部分:HeaderMenuFooterContent。对于同一站点的所有Web页面,HeaderMenuFooter部分的内容相同,仅仅Content部分的内容不相同。如果采用基本的JSP语句来编写所有的Web页面,显然会导致大量的重复编码,增加开发和维护成本。

       Tiles框架为创建Web页面提供了一种模板机制,它能将网页的布局和内容分离。它允许先创建模板,然后在运行时动态地将内容插入到模板中。Tiles框架建立在JSPinclude指令的基础上,但它提供了比JSPinclude指令更强大的功能。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.jspproduct.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.jspproduct.jsp文件中,仅仅粗体字标识的代码块不是重复代码,其余部分均为重复代码。如果网页的相同部分发生需求变更,必须手工修改所有的JSP文件。可见,采用基本的JSP语句来编写上述网页,会导致JSP代码的大量冗余,增加开发与维护成本。

16.2  采用JSPinclude指令创建复合式网页

为了减少代码的冗余,可以把index.jspproduct.jsp中相同部分放在单独的JSP文件中,然后在index.jspproduct.jsp文件中通过JSP include指令把其他JSP文件包含进来。图16-4和图16-5分别显示了index.jspproduct.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.jspproduct.jsp中均包含header.jspsidebar.jspfooter.jsp,仅仅网页主体部分包含的JSP文件不同。例程16-316-416-516-616-716-816-9分别为header.jspfooter.jspsidebar.jspindexContent.jspproductContent.jspindex.jspproduct.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.jspproduct.jsp中包含的相同内容,被放在单独的JSP页面中。index.jspproduct.jsp只需通过JSP include指令把这些相同内容包含进来,这样提高了代码的可重用性。但是JSP include指令不能完全避免代码冗余,例如从例程16-8 和例程16-9可以看出,index.jspproduct.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属性的可选值包括truefalse,当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.jspproduct.jsp文件

修改16.2节的例程16-8index.jsp)和例程16-9product.jsp),在index.jspproduct.jsp文件的开头,通过<%@ taglib>指令引入Tiles标签库,然后把源代码中的JSP include指令改为<tiles:insert>标签。例程16-10和例程16-11分别为修改后的index.jspproduct.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.jspproduct.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.jspproduct.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.jspproduct.jsp中,<tiles:insert>标签指定插入的模板文件,index.jspproduct.jsp均使用相同的模板文件layout.jsp<tiles:insert>标签中包含了若干<tiles:put>子标签,它指定插入到模板中的具体内容。<tiles:put>标签的name属性和模板文件中<tiles:insert>标签的attribute属性匹配,<tiles:put>标签的value属性指定插入到模板中的具体JSP文件。

 

采用Tiles模板机制,大大提高了代码的可重用性和可维护性,模板中包含了网页共同的布局。如果布局发生变化,只需要修改模板文件,无需修改具体的网页文件。不过,从例程16-1316-14可以看出,尽管index.jspproduct.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-15tiles-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.jspproduct.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配置文件,可选值包括truefalse,默认值为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.jspproduct.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来调用 16.5.1 节定义的名为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,该请求先被转发到ForwardActionForwardAction再把请求转发给名为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-18tiles-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.jspsidebar-links.jsp。例程16-1916-2016-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组件的扩展

16.5.3 节的tiles-def.xml文件中,“index-definition”和“product-definition”两个Tiles组件的定义中仍然存在重复代码。可以利用Tiles组件的可扩展特性来进一步消除冗余代码。解决方法为先定义一个包含这两个Tiles组件的共同内容的父类Tiles组件,命名为“base-definition”,然后再让“index-definition”和“product-definition”这两个Tiles组件继承这个父类组件。图16-7显示了改进后的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 AWTJava Swing,都提供了一些功能强大的布局管理器,它们指定各个视图组件在窗口中的分布位置。布局管理器有助于创建复合式的复杂界面,一个复合式界面由一些简单的基本界面组成。利用布局管理器来创建GUI界面有以下优点:

l         可重用性:基本界面可以被重用,组合成各种不同的复合式界面

l         可扩展性:可以方便的扩展基本界面,从而创建更复杂的界面

l         可维护性: 每个基本界面之间相互独立,当复合式界面中的局部区域发生变化,不会影响其它区域

 

不幸的是,JSP技术本身并没有直接提供布局或布局管理器。为了简化Web页面的开发,提高可重用性和可扩展性,Struts Tiles框架提供了一种模板机制,模板定义了网页的布局,同一模板可以被多个Web页面共用。此外,Tiles框架还允许定义可重用的Tiles组件,它可以描述一个完整的网页,也可以描述网页的局部内容。简单的Tiles组件可以被组合或扩展成为更复杂的Tiles组件。

       本章由浅到深的介绍了创建复合式Web页面的几种方案。与采用基本的JSP语言来创建Web页面相比,Tiles框架大大提高了视图层程序代码的可重用性、可扩展性和可维护性。不过,使用Tiles框架也增加了开发视图的难度和复杂度。如果Web应用规模很小,界面非常简单,不妨直接采用基本的JSP语言来编写网页。对于大型复杂的Web应用,可以充分运用Tiles框架的优势,从整体上提高网页开发的效率。

 

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值