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>