tab tag 與Struts整合

發現一個比較酷的Tab標籤，這個標籤很小，但是基本上能適用於一般的應用。它的全稱是The Ditchnet JSP Tabs Taglib （）[url]http://209.61.157.8:8080/taglibs/[/url]，可以看出是JSP的標籤。但是我們現在很多項目都是基於Struts，所以需要簡單的來個整合。

在它的網站上有比較詳細的安裝說明，並且配有實例。需要的讀者可以仔細查看，這裏就不介紹了。
在使用的JSP頁面中加入


<head>
   <tab:tabConfig/>
</head>

這是導入一些CSS和JavaScript.
然後基本上就是兩套標籤：
<tab:tabContainer>
<tab:tabPane>
從命名我們就很容易看出來是什麼作用<tab:tabContainer>是相當於容器一樣的東西可以包含很多的<tab:tabPane>,而<tab:tabPane>就是我們要的那種Tab的效果的面板。


  <tab:tabContainer id="foo-bar-container">
     <tab:tabPane id="foo" tabTitle="姓名">
       <html:errors/><br/>
     <bean:message key="tab_textfield_name"/>
     <html:text property="userName"></html:text>
     <br/>
     <html:submit><bean:message key="tab_submit_label"/></html:submit>
   </tab:tabPane>
   <tab:tabPane id="bar" tabTitle="密碼">
    <html:errors/><br/>
     <bean:message key="tab_textfield_password"/>
      <html:password property="password"/>
      <br/>
     <bean:message key="tab_textfield_repassword"/>
      <html:password property="rePassword"/>
      <br/>
     <html:submit><bean:message key="tab_submit_label"/></html:submit>
   </tab:tabPane>
  </tab:tabContainer>

注意上面的兩個標籤都有id這要是唯一的，而且是整個應用唯一。

上面的代碼就是一個表單，含有userName,password,rePassword三個文本域。但是需要一個Form,有沒有考慮過Form放在什麼位置呢？經過試驗我發現要將Form 放到<tab:tabContainer>的標籤之外。這樣就像處理一個普通的Struts Form一樣了。如果你需要每個Tab也可以是個Form，這樣也沒有什麼問題。

完整的JSP代碼如下:



<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="tab" uri="[url]http://ditchnet.org/jsp-tabs-taglib[/url]" %>
<%@ taglib prefix="html" uri="[url]http://jakarta.apache.org/struts/tags-html[/url]" %>
<%@ taglib prefix="bean" uri="[url]http://jakarta.apache.org/struts/tags-bean[/url]" %>
<html>
 <head>
  <tab:tabConfig/>
 </head>
  <body>
 <html:form action="/saveAll">
  <tab:tabContainer id="foo-bar-container">
    <tab:tabPane id="foo" tabTitle="姓名">
     <html:errors/><br/>
     <bean:message key="tab_textfield_name"/>
     <html:text property="userName"></html:text>
     <br/>
     <html:submit><bean:message key="tab_submit_label"/></html:submit>
   </tab:tabPane>
    <tab:tabPane id="bar" tabTitle="密碼">
    <html:errors/><br/>
     <bean:message key="tab_textfield_password"/>
      <html:password property="password"/>
      <br/>
     <bean:message key="tab_textfield_repassword"/>
      <html:password property="rePassword"/>
      <br/>
     <html:submit><bean:message key="tab_submit_label"/></html:submit>
    </tab:tabPane>
   </tab:tabContainer>
 </html:form> 
 </body>
</html>