跳到导航
BEA Dev2Dev Oracle and BEA
首页 资源中心 dev2dev学堂 在线技术论坛 User Group CodeShare
新手上路
dev2dev导航
Java初学者资源
产品中心
BEA AquaLogic
AquaLogic BPM Suite
AquaLogic Service Bus
WebLogic Platform
WebLogic Server
BEA Workshop
WebLogic Portal
WebLogic Integration
BEA JRockit
WebLogic Event Server
BEA WLCP
更多产品中心
技术中心
SOA
Web Services
Open Source
XML
EJB
JDBC
JMS
Persistence
开发人员社区
在线技术论坛
User Group
dev2dev学堂
dev2dev Live!
dev2dev show
在线学堂
技术文章
论坛集粹
资源
CodeShare
代码库
Security Advisories
Utilities & Tools
关注dev2dev
dev2dev动态
市场活动
培训
电子刊物
书籍
订阅
dev2dev@works
Rss Feeds
dev2dev 首页 > 资源中心 > 技术文章
深入Beehive标签库系列教程(8) - 基于模版的页面组装技术

时间：2006-06-21
作者：肖菁
浏览次数：
本文关键字：Beehive, NetUI, Taglib, 标签, 表单, 教程
文章工具
推荐给朋友 推荐给朋友
打印文章 打印文章

　　目前基于J2EE的企业应用开发都采用了以Servlet为核心的开发架构，选择使用JSP作为信息显示组件，因此企业应用中的业务数据、表单、企业应用整体设计风格等可视化元素都采用JSP来展示。同时企业应用的信息展示也基本都采用主题区的方式进行展示，比如大部分企业应用的用户界面上都包括了导航信息展示区、包含企业logo和banner的页眉区、包含企业版权信息和其他相关信息的页脚区、显示企业业务信息/表单等的主显示区等，通常我们都将这些显示区要显示的内容包含在不同的JSP文件中，如何将这些不同的JSP文件组合成一个显示给用户的最终页面就是页面组装。

　　NETUI提供了丰富的标签来协助我们完成页面组装，他的工作原理是定义一个模版文件，模版文件中定义了页面结构、布局和相关显示区的占位符，这些占位符还可以设定默认要显示的内容，方便开发者在模版文件中直接定义在每个页面都需要显示的公共内容。开发者还需要提供可供访问的内容页----一个或者多个JSP页面，内容页中确定这些占位符对应显示的JSP内容，用户访问内容页的时候，NETUI从模版文件中获取页面结构和布局信息，格式化输出内容页中的内容。我们可以使用下面这个图来显示NETUI完成页面组装的原理。

图1 页面组装原理示意图
图1 页面组装原理示意图

　　从上面的图中，我们可以看到NETUI中支持页面组装的主要标签有netui-template:attribute、netui-template:setAttribute、netui-template:includeSection、netui-template:template、netui-template:section，其中netui-template:attribute和netui-template:includeSection是适用于模版文件中的标签，另外三个标签用于在用户可访问的JSP页面中。

  • netui-template:attribute

    • 　　netui-template:attribute标签用于在模版页中定义变量，这些变量的内容将在内容页中提供。我们可以设置它的name属性为他提供唯一标识符，还可以设置它的default属性为它提供默认内容。如果内容页中为这个attribute提供了内容，模版页将使用内容页中提供的内容，否则使用默认值。一个模版文件中可以有多个netui-template:attribute标签。

    　　比如在显示页面时，每个页面的title通常都不同，所以我们可以在模版页中用下面的代码来定义一个名为title的Attribute，它的内容将被作为显示给用户页面的title，默认值是“www.vivianj.org”。

    1. <title>
    2. <netui-template:attribute name=“title” default=“www.vivianj.org” />
    3. </title>

    　　在内容页中，我们可以使用netui-template:setAttribute标签为模版文件中的属性赋值，比如我们需要将上面模版文件中的title内容修改为“VIVIANJ主页”，我们可以使用下面的代码。

    　　<netui-template:setAttribute name=“title” value=”VIVIANJ主页” />

  • netui-template:includeSection

    • 　　netui-template:includeSection用于在模版中提供动态内容的占位符，通知模版该占位符所在的位置的内容将由其他内容页来提供，动态内容可以是一个独立的JSP页面，也可以是内容页中的一段代码。一个模版文件中可以有多个netui-template:includeSection标签。

    　　我们可以设置它的name属性为他提供唯一标识符，还可以设置它的defaultPage属性为它提供默认内容。如果内容页中为该占位符提供了动态内容，模版将使用内容页中提供的内容，否则使用默认的内容填充占位符。提醒大家注意的是，defaultPage属性中指定文件路径时需要使用从应用根目录开始的路径，这样不会因为内容页所在目录的原因出现问题。

    　　比如我们可以使用下面的代码在模版文件中提供一个占位符，它的默认内容是/pub/header.jsp。

    1. <netui-template:includeSection name=“header”
    2. defaultPage=“/pub/header.jsp” />
    3. netui-template:template

    　　netui-template:template标签用于内容页中，设置该内容页对应的模版文件，标签的templatePage属性可用于设置模版文件的目标地址。一个内容页中只能有一个netui-template:attribute标签。指定模版文件路径时需要使用从应用根目录开始的路径，这样不会因为内容页所在目录的原因出现问题。

    　　比如我们可以使用下面的代码来设置内容页使用/pub/pub-template.jsp作为模版文件。

    　　<netui-template:template templatePage=“/pub/pub-template.jsp”>

  • netui-template:setAttribute

    • 　　netui-template:setAttribute标签用于内容页中，可以为模版页中定义的Attribute提供具体内容，它有两个属性：name和value，其中的name的内容是模版页中Attribute对应的name属性，而value属性用于为该Attribute提供具体内容。

    　　比如我们可以在内容页中使用下面的代码为模版页中的名为”title”的Attribute提供动态内容。

    　　<netui-template:setAttribute name=“title” value=”欢迎访问www.vivianj.org” />

  • netui-template:section

    • 　　netui-template:section标签用于内容页中，可以用来为模版页中的占位符提供动态内容，它使用属性name来对应模版页中的占位符。模版页中定义的占位符如果没有提供default参数，在内容页中就必须有一个对应的netui-template:section标签为该占位符提供动态内容。

    　　我们可以使用下面的代码来为模版页中名为”content”的占位符动态内容。

    1. <netui-template:section name=“content”>
    2. <!—在这里加入要显示的动态内容-->
    3. </netui-template:section>

使用NETUI完成页面组装的完整例子

　　我们用一个简单的例子来演示如何使用NETUI完成页面组装，假设我们要完成下面这样一个页面的组装。

　　图2 页面组装例子的效果图
图2 页面组装例子的效果图

　　页面的顶部固定显示header.jsp文件的内容，底部固定显示footer.jsp文件的内容，左边的导航区默认总是显示navi.jsp文件的内容，只有右边的灰色区域的内容是动态的。

　　根据页面结构和NETUI页面组装的定义，我们可以使用下面的代码来定义模版文件(参见清单1)和内容页文件（参见清单2）。

　　清单1 web\template\vivianj-template.jsp

    
 
  1. <%@ page language="java" contentType="text/html;charset=gb2312"%>
    2. 
 
  2. <%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"
    3. 
 
  3.        prefix="netui-data"%>
    4. 
 
  4. <%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"
    5. 
 
  5.        prefix="netui"%>
    6. 
 
  6. <%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0"
    7. 
 
  7.        prefix="netui-template"%>
    8. 
 
  8. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    9. 

 
  9. <netui-data:declareBundle
    10. 
 
  10.        bundlePath="org.vivianj.beehive.examples.netui.resources" name="view" />
    11. 

 
  11. <netui:html>
    12. 
 
  12. <head>
    13. 
 
  13. <title><%-- Set the title based on the title attribute --%>
    14. 
 
  14. <netui-template:attribute name="title" /> - ${bundle.view.hellostring} </title>
    15. 
 
  15. <link rel="stylesheet"
    16. 
 
  16.        href="${pageContext.request.contextPath}/css/vivianj.css"
    17. 
 
  17.        type="text/css" />
    18. 
 
  18. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    19. 
 
  19. </head>
    20. 
 
  20. <netui:body>
    21. 
 
  21. <center>
    22. 
 
  22.        <%-- Always show the header --%>
    23. 
 
  23.     <%-- Include the template's "body" section --%>
    24. 
 
  24.        <netui-template:includeSection name="header"
    25. 
 
  25.             defaultPage="/pub/header.jsp" />
    26. 
 
  26.        <table cellpadding="0" cellspacing="0" border="0" width="767">
    27. 
 
  27.             <tr>
    28. 
 
  28.                     <td valign="top" width="191" bgcolor="#F9C9F3">
    29. 
 
  29.                     <%-- Include the template's "left" section --%>
    30. 
 
  30.                     <netui-template:includeSection name="left" defaultPage="/pub/navi.jsp" />
    31. 
 
  31.                     </td>
    32. 
 
  32.                     <td valign="top" width="570" bgcolor="#FDE7FA">
    33. 
 
  33.                     <%-- Include the template's "right" section --%>
    34. 
 
  34.                     <netui-template:includeSection name="right" /></td>
    35. 
 
  35.             </tr>
    36. 
 
  36.        </table>
    37. 
 
  37. <%-- Include the template's "bottom" section --%>
    38. 
 
  38. <netui-template:includeSection
    39. 
 
  39.             name="bottom" defaultPage="/pub/footer.jsp" />
    40. 
 
  40. </center>
    41. 
 
  41. </netui:body>
    42. 
 
  42. </netui:html>
    43.

　　清单2 web\templateExamples.jsp

    
 
  1. <%@ page language="java" contentType="text/html;charset=gb2312"%>
    2. 
 
  2. <%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"
    3. 
 
  3.        prefix="netui-data"%>
    4. 
 
  4. <%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"
    5. 
 
  5.        prefix="netui"%>
    6. 
 
  6. <%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0"
    7. 
 
  7.        prefix="netui-template"%>
    8. 

 
  8. <!-- 声明本内容页使用/template/pub-template.jsp作为模版文件 -->
    9. 
 
  9.        <netui-template:template templatePage="/template/vivianj-template.jsp">
    10. 
 
  10.       
    11. 
 
  11.             <!-- 为名为right的占位符提供动态内容 -->
    12. 
 
  12.             <netui-template:section name="right">
    13. 
 
  13.                     <table width="570" height="1" border="0" align="center"
    14. 
 
  14.             cellpadding="0" cellspacing="0" id="talbe0001" bgcolor="#FDE7FA">
    15. 
 
  15.                     <tr>
    16. 
 
  16.                       <td>&nbsp;</td>
    17. 
 
  17.                     </tr>
    18. 
 
  18.                     <tr>
    19. 
 
  19.                       <td class="title" align="center">所有用户留言</td>
    20. 
 
  20.                     </tr>
    21. 
 
  21.                     <tr>
    22. 
 
  22.                       <td><br>　　1、考虑到法律、道德和其他方面的各种因素，本网站的
    23. 
 
  23.                    留言本中所有留言都需经过审核后才会被显示，敬请谅解！<br>
    24. 
 
  24.                       　　2、我们将以最快的速度为所有留言提供回复，争取不超过24小时。
    25. 
 
  25.             </td>
    26. 
 
  26.                     </tr>
    27. 
 
  27.             </table>
    28. 
 
  28.             <table width="570" height="1" border="0" align="center" cellpadding="0"
    29. 
 
  29.             cellspacing="0" id="talbe0001" bgcolor="#FDE7FA">
    30. 
 
  30.                     <tr>
    31. 
 
  31.                       <td height="1" background="image/0004.gif"></td>
    32. 
 
  32.                     </tr>
    33. 
 
  33.             </table>
    34. 
 
  34.             
    35. 
 
  35.             <TABLE cellSpacing=0 cellPadding=0 width=570 align=center border=0
    36. 
 
  36.             bgcolor="#FDE7FA">
    37. 
 
  37.                     <TBODY>
    38. 
 
  38.                       <TR>
    39. 
 
  39.                          <TD width=10>&nbsp;</TD>
    40. 
 
  40.                          <TD height=30><table width="100%" border="0" cellspacing="0"
    41. 
 
  41.                    cellpadding="0">
    42. 
 
  42.                                  <tr>
    43. 
 
  43.                                  <td width="584">
    44. 
 
  44.                                       帅哥
    45. 
 
  45.             &nbsp;&nbsp;：
    46. 
 
  46.                                       powerise
    47. 
 
  47.                                       &nbsp;&nbsp;发表于：&nbsp;
    48. 
 
  48.                                       2006-1-12 10:48:40
    49. 
 
  49.             &nbsp; </td>
    50. 
 
  50.                                  <td width="166"><A href="mailto:xj@jandar.com.cn"><IMG
    51. 
 
  51.                                  src="image/email.gif" alt=给powerise发邮件 width="16"
    52. 
 
  52.                    height="16" border=0></A>　<A
    53. 
 
  53.                                  href="http://www.vivianj.org" target=_blank><IMG
    54. 
 
  54.                                  src="image/home.gif" alt=访问powerise的主页 width="16"
    55. 
 
  55.                    height="16" border=0></A>　<A
    56. 
 
  56.                     href="http://search.tencent.com/cgi-bin/friend/user_show_infoln=6810017"
    57. 
 
  57.                                  target=_blank><IMG
    58. 
 
  58.                                  src="image/oicq.gif" alt=给powerise发信息 width=16 height=16
    59. 
 
  59.                                  border=0></A>　<IMG
    60. 
 
  60.                                  src="image/ip.gif" alt=IP:127.0.0.1 width=16 height=15
    61. 
 
  61.                                  border=0></td>
    62. 
 
  62.                                  </tr>
    63. 
 
  63.                          </table></TD>
    64. 
 
  64.                          <TD width=10>&nbsp;</TD>
    65. 
 
  65.                       </TR>
    66. 
 
  66.                       <TR>
    67. 
 
  67.                          <TD width=10>&nbsp;</TD>
    68. 
 
  68.                          <TD><TABLE cellSpacing=0 cellPadding=0 width=100% align=center
    69. 
 
  69.                    border=0>
    70. 
 
  70.                                  <TBODY>
    71. 
 
  71.                                  <TR>
    72. 
 
  72.                                       <TD width=100 align="center" valign="top">
    73. 
 
  73.             <TABLE cellSpacing=0 cellPadding=0 width=100 align=center border=0>
    74. 
 
  74.                                               <TBODY>
    75. 
 
  75.                                                 <TR>
    76. 
 
  76.                                                    <TD vAlign=middle align=center height=130>
    77. 
 
  77.                        <IMG src="image/pic1.gif" width=85
    78. 
 
  78.                                       height=90 class=mytext></TD>
    79. 
 
  79.                                                    <TD align=middle width=10>&nbsp;</TD>
    80. 
 
  80.                                                 </TR>
    81. 
 
  81.                                               </TBODY>
    82. 
 
  82.                                       </TABLE></TD>
    83. 
 
  83.                                       <TD vAlign=top>
    84. 
 
  84.                      <table width="100%" border="0" align="center"
    85. 
 
  85.                      cellpadding="0" cellspacing="0" style="word-break:break-all">
    86. 
 
  86.                                               <tr>
    87. 
 
  87.                                                 <td width="80" class="rptext">
    88. 
 
  88.                      <font color="#FF6600"><b>主　　题：</b></font> </td>
    89. 
 
  89.                                                 <td class="rptext">唯J族留言本通过测试，正式上线！</td>
    90. 
 
  90.                                       </tr>
    91. 
 
  91.                                               <tr>
    92. 
 
  92.                                                 <td class="rptext"><font color="#FF6600">
    93. 
 
  93.                           <b>留言内容：</b></font></td>
    94. 
 
  94.                                                 <td class="rptext">&nbsp;</td>
    95. 
 
  95.                                               </tr>
    96. 
 
  96.                                               <tr>
    97. 
 
  97.                                                 <td class="rptext">&nbsp;</td>
    98. 
 
  98.                                                 <td class="rptext">经过紧张的测试，唯J族留言本随着网站的更新正式上线，欢迎朋友们给唯J族留言！</td>
    99. 
 
  99.                                       </tr>
    100. 
 
  100.                                               <tr>
    101. 
 
  101.                                                 <td class="rptext"><font color="#006600">
    102. 
 
  102.                             <b>站长回复:</b></font></td>
    103. 
 
  103.                                                 <td class="rptext">&nbsp;</td>
    104. 
 
  104.                                       </tr>
    105. 
 
  105.                                               <tr>
    106. 
 
  106.                                                 <td class="rptext">&nbsp;</td>
    107. 
 
  107.                                                 <td class="rptext">暂时没有回复</td>
    108. 
 
  108.                                       </tr>
    109. 
 
  109.                                       </table></TD>
    110. 
 
  110.                                  </TR>
    111. 
 
  111.                                  </TBODY>
    112. 
 
  112.                          </TABLE></TD>
    113. 
 
  113.                          <TD width=10>&nbsp;</TD>
    114. 
 
  114.                       </TR>
    115. 
 
  115.                       <TR>
    116. 
 
  116.                          <TD width=10 height=5></TD>
    117. 
 
  117.                          <TD height=5></TD>
    118. 
 
  118.                          <TD width=10 height=5></TD>
    119. 
 
  119.                       </TR>
    120. 
 
  120.                     </TBODY>
    121. 
 
  121.            </TABLE>
    122. 
 
  122.                     <table width="570" height="1" border="0" align="center" cellpadding="0"
    123. 
 
  123.             cellspacing="0" id="talbe0001">
    124. 
 
  124.                     <tr>
    125. 
 
  125.                       <td height="1" background="image/0004.gif"></td>
    126. 
 
  126.                     </tr>
    127. 
 
  127.             </table>
    128. 
 
  128.             
    129. 
 
  129.             <table width="570" height="25" border="0" cellpadding="0" cellspacing="0"
    130. 
 
  130.             bgcolor="#FDE7FA">
    131. 
 
  131.                     <tr>
    132. 
 
  132.                       <td align="center"><form name="form1" method="post"
    133. 
 
  133.                action="usernotes.asp" style="margin-bottom:0;margin-top:0">
    134. 
 
  134.             
    135. 
 
  135.                   <font color="#b9b9b9" style="font-size: 9pt">首页 上一页</font>
    136. 
 
  136.             
    137. 
 
  137.                   <font color="#b9b9b9" style=" font-size: 9pt">下一页 尾页</font>
    138. 
 
  138.             
    139. 
 
  139.             共<b>1</b>条BLOG <b>6</b>条BLOG/页
    140. 
 
  140. 转到：<input class="p5" type="text" name="page" size="2" maxlength="10" value="1">
    141. 
 
  141.         <input class="p5" type="hidden" name="userid" value="">
    142. 
 
  142.             <input type="submit" value="Go" name="cndok"></form>
    143. 
 
  143.                       </td>
    144. 
 
  144.                     </tr>
    145. 
 
  145.             </table>
    146. 
 
  146.             
    147. 
 
  147.             <table width="570" height="1" border="0" align="center" cellpadding="0"
    148. 
 
  148.             cellspacing="0" id="talbe0001">
    149. 
 
  149.                     <tr>
    150. 
 
  150.                       <td height="1" background="image/0004.gif"></td>
    151. 
 
  151.                     </tr>
    152. 
 
  152.             </table>
    153. 
 
  153.             <table width="570" height="1" border="0" align="center" cellpadding="0"
    154. 
 
  154.             cellspacing="0" id="talbe0001">
    155. 
 
  155.                     <tr>
    156. 
 
  156.                       <td>&nbsp;</td>
    157. 
 
  157.                     </tr>
    158. 
 
  158.             </table>
    159. 
 
  159.             </netui-template:section>
    160. 
 
  160.        </netui-template:template>
    161.

　　上面图片中header.jsp文件的全部内容见清单3，footer.jsp、navi.jsp文件的全部内容见清单4和清单5。

　　清单3 web\pub\header.jsp

    
 
  1. <%@ page language="java" contentType="text/html;charset=gb2312"%>
    2. 
 
  2. <%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"
    3. 
 
  3.        prefix="netui-data"%>
    4. 
 
  4. <%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"
    5. 
 
  5.        prefix="netui"%>
    6. 
 
  6. <%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0"
    7. 
 
  7.        prefix="netui-template"%>
    8. 
 
  8. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    9. 

 
  9. <netui-data:declareBundle
    10. 
 
  10.        bundlePath="org.vivianj.beehive.examples.netui.resources" name="view" />
    11. 

 
  11. <netui:html>
    12. 
 
  12. <head>
    13. 
 
  13. <title><%-- Set the title based on the title attribute --%>
    14. 
 
  14. <netui-template:attribute name="title" /> - ${bundle.view.hellostring} </title>
    15. 
 
  15. <link rel="stylesheet"
    16. 
 
  16.        href="${pageContext.request.contextPath}/css/default.css"
    17. 
 
  17.        type="text/css" />
    18. 
 
  18. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    19. 
 
  19. </head>
    20. 
 
  20. <netui:body>
    21. 
 
  21. <center>
    22. 
 
  22. <table width="767" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FDE7FA">
    23. 
 
  23. <tr>
    24. 
 
  24.     <td width="237" height="80" align="center"><img src="images/mylogo.gif" width="207" height="52"></td>
    25. 
 
  25.     <td width="530" align="center" valign="middle"></td>
    26. 
 
  26. </tr>
    27. 
 
  27. </table>
    28. 
 
  28. <table width="767" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FDE7FA">
    29. 
 
  29. <tr>
    30. 
 
  30.     <td width="95" height="4" bgcolor="#E70000"></td>
    31. 
 
  31.     <td width="1" rowspan="4"><img src="images/sep.gif" width="1" height="100"></td>
    32. 
 
  32.     <td width="95" bgcolor="#00CD00"></td>
    33. 
 
  33.     <td width="1" rowspan="4"><img src="images/sep.gif" width="1" height="100"></td>
    34. 
 
  34.     <td width="95" bgcolor="15C0F9"></td>
    35. 
 
  35.     <td width="1" rowspan="4"><img src="images/sep.gif" width="1" height="100"></td>
    36. 
 
  36.     <td width="95" bgcolor="FF9A08"></td>
    37. 
 
  37.     <td width="1" rowspan="4"><img src="images/sep.gif" width="1" height="100"></td>
    38. 
 
  38.     <td width="95" bgcolor="CCFF33"></td>
    39. 
 
  39.     <td width="1" rowspan="4"><img src="images/sep.gif" width="1" height="100"></td>
    40. 
 
  40.     <td width="95" bgcolor="F89DDB"></td>
    41. 
 
  41.     <td width="1" rowspan="4"><img src="images/sep.gif" width="1" height="100"></td>
    42. 
 
  42.     <td width="95" bgcolor="B0BAFF"></td>
    43. 
 
  43.     <td width="1" rowspan="4"><img src="images/sep.gif" width="1" height="100"></td>
    44. 
 
  44.     <td width="95" bgcolor="F9E85D"></td>
    45. 
 
  45. </tr>
    46. 
 
  46. <tr>
    47. 
 
  47.     <td colspan="15" height="4"></td>
    48. 
 
  48. </tr>
    49. 
 
  49. <tr bgcolor="#FDE7FA">
    50. 
 
  50.     <td height="14" align="right">| <a href="/default.asp">首页</a>&nbsp;</td>
    51. 
 
  51.     <td align="right">| <a href="/articles/allarticles.asp">技术文章</a>&nbsp;</td>
    52. 
 
  52.     <td align="right">| <a href="/opensource/allopensources.asp">开源项目</a>&nbsp;</td>
    53. 
 
  53.     <td align="right">| <a href="/techsubject/subjects.asp">技术专题</a>&nbsp;</td>
    54. 
 
  54.     <td align="right">| <a href="/kodo_cn/index.html">中文Kodo</a>&nbsp;</td>
    55. 
 
  55.     <td align="right">| <a href="/vivianj/members.asp">组织成员</a>&nbsp;</td>
    56. 
 
  56.     <td align="right">| <a href="/blog/blogs.asp">BLOG</a> &nbsp;</td>
    57. 
 
  57.     <td align="right">| <a href="/usernote/usernotes.asp">留言</a>&nbsp;</td>
    58. 
 
  58. </tr>
    59. 
 
  59. <tr bgcolor="#FDE7FA">
    60. 
 
  60.     <td height="82" align="center" valign="middle"><img src="images/home.gif"></td>
    61. 
 
  61.     <td align="center" valign="middle"><img src="images/articles.gif" width="53" height="62"></td>
    62. 
 
  62.     <td align="center" valign="middle"><img src="images/opensources.gif" width="55" height="63"></td>
    63. 
 
  63.     <td align="center" valign="middle"><img src="images/tech.gif" width="59" height="63"></td>
    64. 
 
  64.     <td align="center" valign="middle"><img src="images/license.gif" width="62" height="61"></td>
    65. 
 
  65.     <td align="center" valign="middle"><img src="images/members.gif" width="68" height="56"></td>
    66. 
 
  66.     <td align="center" valign="middle"><img src="images/blogs.gif" width="62" height="63"></td>
    67. 
 
  67.     <td align="center" valign="middle"><img src="images/note.gif" width="60" height="60"></td>
    68. 
 
  68. </tr>
    69. 
 
  69. </table>
    70. 
 
  70. <table width="767" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FDE7FA">
    71. 
 
  71. <tr bgcolor="#F9C9F3">
    72. 
 
  72.     <td height="22" align="left" bgcolor="#F9C9F3">&nbsp;当前位置： 留言本</td>
    73. 
 
  73.     <td align="right"><script language=JavaScript>
    74. 
 
  74. var enable=0; today=new Date();
    75. 
 
  75. var day; var date;
    76. 
 
  76. var time_start = new Date();
    77. 
 
  77. var clock_start = time_start.getTime();
    78. 
 
  78. if(today.getDay()==0)day="星期日"
    79. 
 
  79. if(today.getDay()==1)day="星期一"
    80. 
 
  80. if(today.getDay()==2)day="星期二"
    81. 
 
  81. if(today.getDay()==3)day="星期三"
    82. 
 
  82. if(today.getDay()==4)day="星期四"
    83. 
 
  83. if(today.getDay()==5)day="星期五"
    84. 
 
  84. if(today.getDay()==6)day="星期六"
    85. 
 
  85. yr = today.getYear();
    86. 
 
  86. month=today.getMonth()+1;
    87. 
 
  87. date=today.getDate();
    88. 
 
  88. if (yr < 1000)
    89. 
 
  89. yr+=1900;
    90. 
 
  90. now="今天是：" + yr+"年"+month+"月"+date+"日"+"&nbsp;&nbsp;&nbsp;"+day;
    91. 
 
  91. document.write(now);
    92. 
 
  92. </script>&nbsp;</td>
    93. 
 
  93. </tr>
    94. 
 
  94. </table>
    95. 
 
  95. </center>
    96. 
 
  96. </netui:body>
    97. 
 
  97. </netui:html>
    98.

　　清单4 web\pub\footer.jsp

    
 
  1. <%@ page language="java" contentType="text/html;charset=gb2312"%>
    2. 
 
  2. <%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"
    3. 
 
  3.        prefix="netui-data"%>
    4. 
 
  4. <%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"
    5. 
 
  5.        prefix="netui"%>
    6. 
 
  6. <%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0"
    7. 
 
  7.        prefix="netui-template"%>
    8. 
 
  8. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    9. 

 
  9. <netui-data:declareBundle
    10. 
 
  10.        bundlePath="org.vivianj.beehive.examples.netui.resources" name="view" />
    11. 

 
  11. <netui:html>
    12. 
 
  12. <head>
    13. 
 
  13. <title><%-- Set the title based on the title attribute --%>
    14. 
 
  14. <netui-template:attribute name="title" /> - ${bundle.view.hellostring} </title>
    15. 
 
  15. <link rel="stylesheet"
    16. 
 
  16.        href="${pageContext.request.contextPath}/css/default.css"
    17. 
 
  17.        type="text/css" />
    18. 
 
  18. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    19. 
 
  19. </head>
    20. 
 
  20. <netui:body>
    21. 
 
  21. <center>
    22. 
 
  22. <table width="767" border="0" align="center" cellpadding="0" cellspacing="0">
    23. 
 
  23. <tr>
    24. 
 
  24.     <td align="center" bgcolor="#F9C9F3" height="4"></td>
    25. 
 
  25. </tr>
    26. 
 
  26. <tr>
    27. 
 
  27.     <td align="center" bgcolor="#FD4AE1" height="1"></td>
    28. 
 
  28. </tr>
    29. 
 
  29. <tr>
    30. 
 
  30.     <td align="center" bgcolor="#EEEEEE" height="1"></td>
    31. 
 
  31. </tr>
    32. 
 
  32. 
 
  33. <tr>
    34. 
 
  34.     <td align="center" bgcolor="#FDE7FA"><a href="/default.asp">主页</a>　|　<a href="/superadmin/admin.asp">登录</a>　|　<a href="/vivianj/aboutvivianj.asp">关于唯Ｊ族</a>　|　<a href="/vivianj/joinvivianj.asp">加入唯Ｊ族</a>　|　<a href="mailto:king@vivianj.org">联系唯Ｊ族</a></td>
    35. 
 
  35. </tr>
    36. 
 
  36. <tr>
    37. 
 
  37.     <td align="center" bgcolor="#FDE7FA"> &copy; 2001-2020 唯J族 All rights reserved </td>
    38. 
 
  38. </tr>
    39. 
 
  39. <tr>
    40. 
 
  40.     <td align="center" bgcolor="#FDE7FA"><a href="http://www.miibeian.gov.cn">备案序号:浙ICP备05072825号 </a></td>
    41. 
 
  41. </tr>
    42. 
 
  42. </table>
    43. 
 
  43. </center>
    44. 
 
  44. </netui:body>
    45. 
 
  45. </netui:html>
    46.

　　清单5 web\pub\navi.jsp

    
 
  1. <%@ page language="java" contentType="text/html;charset=gb2312"%>
    2. 
 
  2. <%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"
    3. 
 
  3.        prefix="netui-data"%>
    4. 
 
  4. <%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"
    5. 
 
  5.        prefix="netui"%>
    6. 
 
  6. <%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0"
    7. 
 
  7.        prefix="netui-template"%>
    8. 
 
  8. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    9. 

 
  9. <netui-data:declareBundle
    10. 
 
  10.        bundlePath="org.vivianj.beehive.examples.netui.resources" name="view" />
    11. 

 
  11. <netui:html>
    12. 
 
  12. <head>
    13. 
 
  13. <title><%-- Set the title based on the title attribute --%>
    14. 
 
  14. <netui-template:attribute name="title" /> - ${bundle.view.hellostring} </title>
    15. 
 
  15. <link rel="stylesheet"
    16. 
 
  16.        href="${pageContext.request.contextPath}/css/default.css"
    17. 
 
  17.        type="text/css" />
    18. 
 
  18. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    19. 
 
  19. </head>
    20. 
 
  20. <netui:body>
    21. 
 
  21. <center>
    22. 
 
  22. <table width="191" border="0" cellspacing="0" cellpadding="0">
    23. 
 
  23.         <tr>
    24. 
 
  24.           <td height="8"></td>
    25. 
 
  25.         </tr>
    26. 
 
  26.         <tr>
    27. 
 
  27.           <td width="191" height="22" background="images/lefttitle.gif">　　 留言本 </td>
    28. 
 
  28.         </tr>
    29. 
 
  29.         <tr>
    30. 
 
  30.           <td height="22" bgcolor="#F8C4F2"><span class="style2">　　 <a href="usernotes.asp">查看所有留言</a></span></td>
    31. 
 
  31.         </tr>
    32. 
 
  32.         <tr>
    33. 
 
  33.           <td height="22" bgcolor="#F8C4F2"><span class="style2">　　 <a href="addload.asp">我来说两句</a></span></td>
    34. 
 
  34.         </tr>
    35. 
 
  35.       </table>
    36. 
 
  36.        </center>
    37. 
 
  37. </netui:body>
    38. 
 
  38. </netui:html>
    39.

　　如果在某个内容页中，我们需要覆盖footer.jsp的内容，我们可以在netui-template:template标签下面增加一个netui-template:section为footer占位符提供其他内容，完成这个工作的源代码如下。

    
 
  1. <!-- 声明本内容页使用/template/pub-template.jsp作为模版文件 -->
    2. 
 
  2.        <netui-template:template templatePage=“/template/pub-template.jsp”>
    3. 
 
  3.             
    4. 
 
  4.             <!-- 为其他占位符提供动态内容 -->
    5. 
 
  5.             
    6. 
 
  6.             <!-- 为名为footer的占位符提供动态内容 -->
    7. 
 
  7.             <netui-template:section name=“footer”>
    8. 
 
  8.             <!-- 此处增加要显示的动态内容的html代码，
    9. 
 
  9.                     也可以是其他NETUI标签显示的动态内容 -->
    10. 
 
  10.              </netui-template:section>
    11. 

 
  11.        </netui-template:template>
    12.
 作者简介
icon
肖菁		 肖菁 是唯J族(www.vivianj.org)创始人，BEA 杭州User Group负责人，自由撰稿人，开源项目BuildFileDesigner(buildfiledesign.sourceforge.net)和V-Security(v-security.sourceforge.net)创始人。
dot dot dot

dot
  作者其它文章
您对本文的评价
您对这篇文章的看法如何?
太棒了！5分 不错啊 4分 一般般 3分 有待提高 2分 不好 1分

   
相关产品
相关技术
相关文章
热门文章