qiyadeng

专注于Java示例及教程
posts - 84, comments - 152, trackbacks - 0, articles - 34

tab tag 与Struts整合

Posted on 2005-12-07 12:45 qiyadeng 阅读(1520) 评论(3)  编辑  收藏 所属分类: J2EE

发现一个比较酷的Tab标签,这个标签很小,但是基本上能适用于一般的应用。它的全称是The Ditchnet JSP Tabs Taglib ()http://209.61.157.8:8080/taglibs/,可以看出是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="http://ditchnet.org/jsp-tabs-taglib" %>
<%@ taglib prefix="html" uri="http://jakarta.apache.org/struts/tags-html" %>
<%@ taglib prefix="bean" uri="http://jakarta.apache.org/struts/tags-bean" %>
<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>
效果如图:
Snap2.bmp

Feedback

# re: tab tag 与Struts整合  回复  更多评论   

2006-11-27 10:49 by heihei
出現這個問題
warning org.xml.sax.SAXParseException: 有效的文件必須有 <!DOCTYPE宣告。

# re: tab tag 与Struts整合  回复  更多评论   

2006-12-29 00:20 by someone
我使用时为什么出不来效果?就像下面这样

Foo!
Bar!

Foo is cool!

没有Tabs的界面, 怎么回事?

# re: tab tag 与Struts整合  回复  更多评论   

2007-06-29 10:48 by nihao
我和上面的一样 效果显示不出来

只有注册用户登录后才能发表评论。


网站导航: