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

最新推荐文章于 2021-03-05 04:00:45 发布

xiang588

最新推荐文章于 2021-03-05 04:00:45 发布

阅读量557

点赞数

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

本文链接：https://blog.csdn.net/xiang588/article/details/3354130

版权

JAVA 专栏收录该内容

127 篇文章 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文件的长度都缩短了，但是两者还是存在重复代码

xiang588

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
采用Tiles模板创建复合式网页

在上节中，尽管使用了tiles:insert标签，index.jsp和product.jsp文件还是存在很多的重复代码。为了提高Web页面的可重用性和可维护性，可以引入Tiles的模板机制。提示：本节介绍的tilestaglibs应用的源程序位于配套光盘的sourcecode/tilestaglibs/version4/tilestaglibs目录下。如果要在Tomcat
复制链接

扫一扫