采用Tiles模板创建复合式网页

最新推荐文章于 2024-10-09 23:05:29 发布

zfrong

最新推荐文章于 2024-10-09 23:05:29 发布

阅读量1k

点赞数

分类专栏： Strurts/Strurts.NET JAVA 文章标签： insert header table jsp web tomcat

JAVA 同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

Strurts/Strurts.NET

11 篇文章 0 订阅

订阅专栏

尽管使用了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文件的长度都缩短了，但是两者还是存在重复代码。