技术文章-深入Beehive标签库系列教程(6)

新手上路

产品中心

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标签库系列教程(6) - 使用标签遍历数据

时间：2006-06-22
作者：肖菁
浏览次数：
本文关键字：Beehive, NetUI, Taglib, 标签, 表单, 教程

文章工具

推荐给朋友

打印文章

　　Web应用中，要遍历对象显示数据的情况非常多，比如我们需要列表显示数据库单个表中的所有用户信息，通常会在Action中获取所有用户信息，然后传递给JSP页面，在JSP页面中遍历后显示，由于MVC架构中要求JSP页面中不能使用Java代码，因此NETUI中提供了对应的标签来完成这部分数据的显示。

　　NETUI标签库中用于遍历显示数据的标签有五个，分别是netui-data:repeater、netui-data:repeaterItem、netui-data: repeaterHeader、netui-data: repeaterFooter、netui-data: cellRepeater。

　　netui-data: cellRepeater 标签可以单独完成遍历显示数据功能，默认使用表格显示数据，它可以通过设置columns属性决定每行显示多条数据，或者设置rows属性表示所有数据使用表格的几行来显示，不过这种方法中我们无法对数据的显示行为进行干预，表格的表头需要使用在标签外部独立生成，而且对于表格的外观只能使用使用css进行定义，无法独立控制。

　　netui-data:repeater、netui-data:repeaterItem、netui-data: repeaterHeader、netui-data: repeaterFooter四个标签可以整合起来完成遍历显示数据的功能，这种方式提供了更好的灵活性。netui-data:repeater标签用于设置要显示的内容；netui-data: repeaterHeader可以设置数据显示前需要显示的内容，比如显示一段文字，或者显示表格的表头；netui-data: repeaterFooter则用于设置数据显示完后需要输出的信息，比如输出表格的结束标签</table>，或者给出一些提示信息；netui-data:repeaterItem标签用于遍历集合中的每一条记录。

　　netui-data: repeaterHeader和netui-data: repeaterFooter标签提供的内容只显示一次，因此主要提供一些辅助内容，比如显示表头内容等，不能用于遍历显示数据。

　　下面我们来看看使用这两种不同的标签显示ArrayList数据的例子，我们使用自定义的JavaBean----UserBean类。为了演示的简单，我们在Action中使用以下的语句创建了10个User对象的集合传递给页面用于显示。


 ArrayList list = new ArrayList();
 for( int i = 0;i<10;i++){
        UserBean user = new UserBean();
        user.setName(“” + i);
        user.setPassword(“name” + i);

        list.add(user);
 }
 f.addActionOutput (“users”,list);

netui-data:cellRepeater

　　首先我们来看看使用如何使用netui-data: cellRepeater完成遍历显示数据，首先在JSP页面中使用如下代码完成数据的绑定。

　　<netui-data:declarePageInput name=“users”

　　type=“java.util.ArrayList” required=“true” />

　　然后使用如下代码来显示所有用户的用户编号和名称，设置netui-data:cellRepeater 标签的columns属性为”1”，确定每行显示一个用户的用信息。


 <table border=“1”>
            <tr>
                  <td>用户信息</td>
            </tr>
 </table>
 <netui-data:cellRepeater dataSource=“pageInput.users” columns=“2” tableClass=“border” >
       <netui:span value=“${container.item.name}”/>
 </netui-data:cellRepeater>

　　另外一种方式是我们设置netui-data:cellRepeater的rows属性为”5”，表示所有内容必须在5行内显示完毕，NETUI会自动地将这些数据按照要求分组后显示。


 <table border=“1”>
            <tr>
                  <td>用户信息</td>
           <td>用户信息</td>
            </tr>
 </table>
 <netui-data:cellRepeater dataSource=“pageInput.users” rows=“5” tableClass=“border” >
       <netui:span value=“${container.item.name}”/>
 </netui-data:cellRepeater>

　　使用rows属性定义netui-data:cellRepeater标签的用法不多见，因为开发者无法预知可能出现的表格列数，因而也无法提供对应的表头信息。

　　当netui-data:cellRepeater标签中需要显示两列或者多列时，我们可以使用verticalRepeat属性来设置标签如何选择列中的数据。verticalRepeat属性支持”true”、”false”两种选择。

　　当verticalRepeat属性设置为”true”时，标签按照从上往下、从左往右的顺序填充表格；如果将verticalRepeat属性设置为”false”是，netui-data:cellRepeater按照从左到右、从上到下的顺序填充表格。默认情况是”false”。

　　比如上面例子中的10个对象，我们如果每行显示两个对象，当netui-data:cellRepeater标签的verticalRepeat属性为”true”时，显示效果如图1所示。netui-data:cellRepeater标签的verticalRepeat属性为”false”时，显示效果如图2所示

图1 按照从上往下、从左往右的顺序填充表格的效果

图2 按照从左往右、从上往下的顺序填充表格的效果

netui-data:repeater、netui-data:repeaterHeader、netui-data: repeaterFooter、netui-data:repeaterItem

　　和netui-data:cellRepeater标签的例子一样，我们使用<netui-data:declarePageInput name=“users” type=“java.util.ArrayList” required=“true” />完成数据在JSP中的绑定，然后我们增加netui-data:repeater标签，设置它的dataSource属性pageInput.userbeans，增加netui-data:repeaterHeader输出表头信息，还可以增加额外的提示信息，增加netui-data:repeaterItem遍历数据，用一行输出一条记录，最后增加netui-data: repeaterFooter标签完成数据显示，包括关闭<table>标签和显示其他的内容。实现这部分功能的完整代码如下。


 <netui-data:repeater dataSource=“pageInput.userbeans”>
        <netui-data:repeaterHeader>
            所有User对象信息
            <table border=“1”>
            <tr>
                  <td>用户名</td>
                  <td>密码</td>
            </tr>
        </netui-data:repeaterHeader>

        <netui-data:repeaterItem >
            <tr>
                  <td><netui:span value=“${container.item.name}” /></td>
                  <td><netui:span value=“${container.item.password}” /></td>
            </tr>
        </netui-data:repeaterItem>

        <netui-data:repeaterFooter>
            </table>
        </netui-data:repeaterFooter>
 </netui-data:repeater>

　　将%NETUI_HOME%目录下的Web应用编译、发布到Tomcat后(上下文路径netui)，可以使用http://localhost:8080/netui/cellRepeaterExamples.do访问这个netui:cellRepeater标签的例子，使用http://localhost:8080/netui/repeaterExamples.do可以访问netui:repeater标签的例子。

　　和遍历显示数据相关的JSP文件和Java源代码的完整内容请参考下面的代码清单。

　　清单2-14 web\Controller.java


 import javax.servlet.http.HttpSession;

 import org.apache.beehive.netui.pageflow.Forward;
 import org.apache.beehive.netui.pageflow.PageFlowController;
 import org.apache.beehive.netui.pageflow.annotations.Jpf;
 import org.vivianj.beehive.examples.beans.UserBean;

 import java.util.List;
 import java.util.ArrayList;

 @Jpf.Controller(
     simpleActions={
       @Jpf.SimpleAction(name="begin", path="index.jsp")
     },
     sharedFlowRefs={
       @Jpf.SharedFlowRef(name="shared", type=shared.SharedFlow.class)
     }
 )
 public class Controller
     extends PageFlowController
 {

        @Jpf.Action(forwards = { @Jpf.Forward(name = "success", path = "pageInputExample.jsp") })
     public Forward pageInputExamples() {
            Forward f = new Forward("success");

            /* 向JSP页面传递数据 */
       f.addActionOutput("hellostring", "Hello World!");

            String[] strings = new String[]{"Hello World!","Hello Beehive!"};
            /* 向JSP页面传递数组 */
       f.addActionOutput("strings", strings);

            /* 向JSP页面传递自定义对象 */
            UserBean userBean = new UserBean();
            userBean.setId(100);
            userBean.setName("UserBean100");

       f.addActionOutput("userbean", userBean);


            /* 向JSP页面传递List对象 */
            List list = new ArrayList();
            list.add(userBean);

            UserBean userBean1 = new UserBean();
            userBean.setId(101);
            userBean.setName("UserBean101");
            list.add(userBean1);
           
       f.addActionOutput("userbeans", list);

       return f;
     }

        @Jpf.Action(forwards = { @Jpf.Forward(name = "success", path = "cellRepeaterExample.jsp") })
     public Forward cellRepeaterExamples() {
            Forward f = new Forward("success");

            ArrayList list = new ArrayList();
            for( int i = 0;i<10;i++){
                  UserBean user = new UserBean();
                  user.setId(i);
                  user.setName("name" + i);
                
                  list.add(user);
            }

           
       f.addActionOutput("userbeans", list);

       return f;
     }

        @Jpf.Action(forwards = { @Jpf.Forward(name = "success", path = "repeaterExample.jsp") })
     public Forward repeaterExamples() {
            Forward f = new Forward("success");

            ArrayList list = new ArrayList();
            for( int i = 0;i<10;i++){
                  UserBean user = new UserBean();
                  user.setId(i);
                  user.setName("name" + i);
                
                  list.add(user);
            }

           
       f.addActionOutput("userbeans", list);

       return f;
     }

     protected void onCreate()
     {
     }

     protected void onDestroy(HttpSession session)
     {
     }
 }

　　清单2-15 web\cellRepeaterExamples.jsp


 <%@ page language="java" contentType="text/html;charset=gb2312"%>
 <%@ page import="org.vivianj.beehive.examples.beans.UserBean" %>

 <%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"
     prefix="netui-data"%>
 <%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"
     prefix="netui"%>
 <%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0"
     prefix="netui-template"%>
 <netui:html>
   <head>
     <title>Repeater Examples</title>
     <netui:base/>
        <style type="text/css">
     <!--
     .p1 {
          width: 200;
          border: 1px solid;
     }
     -->
    </style>
   </head>
   <netui:body>
        <center>使用标签遍历显示数据的例子</center><BR>

        <netui-data:declarePageInput name="userbeans"
            type="java.util.ArrayList" required="true" />

        <TABLE border="1" width="800" align="Center">
        <TR>
            <TD>使用netui-data:cellRepeater标签遍历显示数据</TD>
            <TD>在netui-data:cellRepeater标签上应用css样式</TD>
        </TR>
        <TR>
            <TD valign="top">
            <center>
            <table>
                  <tr>
                      <td>编号 : 名称</td>
                  </tr>
            </table>
            </center>
            <center>
                  <netui-data:cellRepeater dataSource="pageInput.userbeans"
              columns="1">
                            <netui:span value="${container.item.id}"/> :
                          <netui:span value="${container.item.name}"/>
                  </netui-data:cellRepeater>
            </center>
            </TD>
            <TD valign="top">
            <center>
            <table class="p1">
                  <tr>
                      <td>编号 : 名称</td>
                  </tr>
            </table>
            </center>
            <center>
                  <netui-data:cellRepeater dataSource="pageInput.userbeans"
             columns="2" tableClass="p1" cellClass="p1"
             verticalRepeat="false">
                            <netui:span value="${container.item.id}"/> :
                            <netui:span value="${container.item.name}"/>
                  </netui-data:cellRepeater>
            </center>
            </TD>
        </TR>
        </TABLE>

   </netui:body>
 </netui:html>

　　清单2-16 web\repeaterExamples.jsp


 <%@ page language="java" contentType="text/html;charset=gb2312"%>
 <%@ page import="org.vivianj.beehive.examples.beans.UserBean" %>

 <%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"
     prefix="netui-data"%>
 <%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"
     prefix="netui"%>
 <%@ taglib uri=http://beehive.apache.org/netui/tags-template-1.0
     prefix="netui-template"%>
 <netui:html>
   <head>
     <title>Repeater Examples</title>
     <netui:base/>
   </head>
   <netui:body>
        <center>使用标签遍历显示数据的例子</center><BR>
        使用netui-data:repeater标签遍历显示数据
        <netui-data:declarePageInput name="userbeans"
            type="java.util.ArrayList" required="true" />

        <netui-data:repeater dataSource="pageInput.userbeans">
        <netui-data:repeaterHeader>
            所有User对象信息
            <table border="1">
            <tr>
                  <td>用户名</td>
                  <td>密码</td>
            </tr>
        </netui-data:repeaterHeader>

        <netui-data:repeaterItem >
            <tr>
                  <td><netui:span value="${container.item.id}" /></td>
                  <td><netui:span value="${container.item.name}" /></td>
            </tr>
        </netui-data:repeaterItem>

        <netui-data:repeaterFooter>
            </table>
        </netui-data:repeaterFooter>
 </netui-data:repeater>


   </netui:body>
 </netui:html>

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

作者其它文章