今天学习了ECSide这个开源列表组件.

ECSide是有一个基于jsp tag的开源列表组件.
简单的说,它就是一组可以帮助你快速实现强大的列表的jsp标签.
它的工作原理很简单.
您将要展现的列表的数据集合(Collection),放入request/pagecontext/session内(使用setAttribute方法.这个工作可以在action/servlet里完成,也可以在jsp页面内完成),然后页面跳转到使用ECSide标签的jsp页面,此时ECSide就可以帮助您展现出所需要的列表.

一个简单的流程通常是这样的.

1 客户端请求action/servlet(如 http://10.195.129.101/test/userlist.do)
2 action接受到请求后,调用相应的BO/dao,执行取列表数据的方法.
3 取得数据后(通常是一个vo/map的list),将数据放入request内(使用requset.setAttribute(key,value)方法.)
4 将请求forward到使用ECSide标签的jsp页面.
5 ECSide将展现出列表.

知道了原理,那么让我们一起来完成一个快速而简单的例子吧.
现在有一张用户信息表,如下

Java代码 复制代码
  1. 表名称: USER_INFO(用户信息表)   
  2. 字段:   
  3.      USERID    (用户编号)   
  4.      USERNAME (用户名)   
  5.      PASSWD    (密码)   
  6.      USERROLE (角色) 0 被锁定  1 普通  2 高级 3 管理员 4超级管理员   
  7.      REGDATE   (注册日期)   
  8.      EMAIL     (EMAIL)   
  9.      GENDER    (性别) 0 未知 12女   
  10.      MEMO      (备注)  
表名称: USER_INFO(用户信息表)
字段:
    USERID   (用户编号)
    USERNAME (用户名)
    PASSWD   (密码)
    USERROLE (角色) 0 被锁定  1 普通  2 高级 3 管理员 4超级管理员
    REGDATE  (注册日期)
    EMAIL    (EMAIL)
    GENDER   (性别) 0 未知 1 男 2女
    MEMO     (备注)


h2db的建表脚本如下:

Java代码 复制代码
  1. create table USER_INFO (   
  2.      USERID int not null identity,   
  3.      USERNAME varchar(80) not null,   
  4.      PASSWD varchar(255) not null,   
  5.      USERROLE varchar(10) default 1,   
  6.      REGDATE varchar(20) ,   
  7.      EMAIL varchar(128) ,   
  8.      GENDER varchar(2) default 0,   
  9.      MEMO varchar(1024)   ,   
  10.      constraint PK_USER_INFO primary key (USERID)   
  11. );  
create table USER_INFO (
    USERID int not null identity,
    USERNAME varchar(80) not null,
    PASSWD varchar(255) not null,
    USERROLE varchar(10) default 1,
    REGDATE varchar(20) ,
    EMAIL varchar(128) ,
    GENDER varchar(2) default 0,
    MEMO varchar(1024)  ,
    constraint PK_USER_INFO primary key (USERID)
);



对应VO:

Java代码 复制代码
  1. public class UserInfo {   
  2.     private Integer userId;   
  3.     private String userName;   
  4.     private String passwd;   
  5.     private String userRole;   
  6.     private String regDate;   
  7.     private String email;   
  8.     private String gender;   
  9.     private String memo;   
  10.        
  11.     /* 略去getter setter方法 */  
  12.   
  13. }  
public class UserInfo {
 private Integer userId;
 private String userName;
 private String passwd;
 private String userRole;
 private String regDate;
 private String email;
 private String gender;
 private String memo;
 
 /* 略去getter setter方法 */

}



对应DAO如下(假设DAO里只有一个方法,取得全部的用户信息,返回的是VO的List):

Java代码 复制代码
  1. public class UserDAO extends BaseDAO   {   
  2.   
  3.     public List getAllUsers(){   
  4.          StringBuffer bufSql = new StringBuffer("SELECT * FROM USER_INFO WHERE 1=1");   
  5.            
  6.          Connection conn=null;   
  7.          PreparedStatement pstmt = null;   
  8.          ResultSet rest = null;   
  9.   
  10.          List allUsers=null;   
  11.   
  12.         try {   
  13.              conn = getConnection();   
  14.              pstmt = ConnectionUtils.prepareStatement(conn,bufSql.toString());   
  15.              rest = pstmt.executeQuery();   
  16.              allUsers=new ArrayList();   
  17.              UserVO userVO=null;   
  18.             while (rest.next()) {   
  19.                  userVO=new UserVO();   
  20.                 /* 略去将ResultSet结果放入VO的过程 */  
  21.                  allUsers.add(userVO);   
  22.              }   
  23.          } catch (Exception e) {   
  24.              allUsers=null;   
  25.          }finally{   
  26.              close(rest, pstmt, conn);   
  27.          }   
  28.            
  29.         return allUsers;   
  30.      }   
  31.   
  32. }  
public class UserDAO extends BaseDAO  {

 public List getAllUsers(){
  StringBuffer bufSql = new StringBuffer("SELECT * FROM USER_INFO WHERE 1=1");
  
  Connection conn=null;
  PreparedStatement pstmt = null;
  ResultSet rest = null;

  List allUsers=null;

  try {
   conn = getConnection();
   pstmt = ConnectionUtils.prepareStatement(conn,bufSql.toString());
   rest = pstmt.executeQuery();
   allUsers=new ArrayList();
   UserVO userVO=null;
   while (rest.next()) {
    userVO=new UserVO();
    /* 略去将ResultSet结果放入VO的过程 */
    allUsers.add(userVO);
   }
  } catch (Exception e) {
   allUsers=null;
  }finally{
   close(rest, pstmt, conn);
  }
  
  return allUsers;
 }

}



该简单例子假设该表数据量不大:500以内,采用ECSide的java内存分页技术(关于java内存分页和数据库层分页的说明请参见:...).

由于此例子实在简单,所以略去BO层.

action(DispatchActionSupport)代码如下:

Java代码 复制代码
  1. public class MyTestAction extends DispatchAction {   
  2.   
  3.     // java内存分页   
  4.     public ActionForward getAllUsers(ActionMapping mapping, ActionForm form,   
  5.      HttpServletRequest request, HttpServletResponse response)   
  6.     throws Exception {   
  7.   
  8.         // 取得DAO,这里是从spring上下文中取得指定DAO,略去spring相关代码   
  9.          UserDAO userDAO=(UserDAO)getBean("userDAO");   
  10.   
  11.          List allUsers = userDAO.getAllUsers();   
  12.   
  13. //将结果集合放入request内,记住键名"allUsers".   
  14.          request.setAttribute("allUsers", allUsers);   
  15.   
  16.        
  17.         //forward到列表展现页面   
  18.         return mapping.findForward("userlistPage");   
  19.   
  20.      }   
  21. }  
public class MyTestAction extends DispatchAction {

 // java内存分页
 public ActionForward getAllUsers(ActionMapping mapping, ActionForm form,
 HttpServletRequest request, HttpServletResponse response)
 throws Exception {

  // 取得DAO,这里是从spring上下文中取得指定DAO,略去spring相关代码
  UserDAO userDAO=(UserDAO)getBean("userDAO");

  List allUsers = userDAO.getAllUsers();

//将结果集合放入request内,记住键名"allUsers".
  request.setAttribute("allUsers", allUsers);

 
  //forward到列表展现页面
  return mapping.findForward("userlistPage");

 }
}



访问该action的URL为
http://localhost:8080/ecsdemo/simpledemo.do?actionMethod=getAllUsers

jsp页面:
引入标签声明

Java代码 复制代码
  1. <%@ taglib uri="http://www.ecside.org" prefix="ec" %>  
<%@ taglib uri="http://www.ecside.org" prefix="ec" %>



通常jsp页面内取得应用上下文是必须的.

Java代码 复制代码
  1. <%   
  2. String webapp=request.getContextPath();   
  3. %>  
<%
String webapp=request.getContextPath();
%>



引入ECSide必要的css js

Java代码 复制代码
  1. <link rel="stylesheet" type="text/css" href="<%=webapp%>/common/css/ECSide_style.css" />   
  2. <script type="text/javascript" src="<%=webapp%>/common/js/prototype_mini.js" ></script>      
  3. <script type="text/javascript" src="<%=webapp%>/common/js/ECSide.js" ></script>  
<link rel="stylesheet" type="text/css" href="<%=webapp%>/common/css/ECSide_style.css" />
<script type="text/javascript" src="<%=webapp%>/common/js/prototype_mini.js" ></script> 
<script type="text/javascript" src="<%=webapp%>/common/js/ECSide.js" ></script>



ECSide的标签,也是展现列表最关键的环节:

Java代码 复制代码
  1. <ec:table items="allUsers" var="user"   
  2. retrieveRowsCallback="process"   
  3. action="${pageContext.request.contextPath}/simpledemo.do?actionMethod=getAllUsers"  
  4. title="用户列表"   
  5.   
  6. width="100%"   
  7. classic="true"  
  8. >   
  9. <ec:row>   
  10.      <ec:column width="50" property="_0" title="序号" value="${GLOBALROWCOUNT}" />   
  11.      <ec:column width="80" property="userRole" title="角色"    />   
  12.      <ec:column              property="userName" title="用户名" />   
  13.      <ec:column width="100" property="passwd" title="密码"   />   
  14.      <ec:column width="120" property="email" title="电子信箱" />   
  15.      <ec:column width="70" property="gender" title="性别"   />   
  16. </ec:row>   
  17. </ec:table>   
  18.       
<ec:table items="allUsers" var="user" 
retrieveRowsCallback="process" 
action="${pageContext.request.contextPath}/simpledemo.do?actionMethod=getAllUsers"
title="用户列表" 

width="100%" 
classic="true"
>
<ec:row>
 <ec:column width="50" property="_0" title="序号" value="${GLOBALROWCOUNT}" />
 <ec:column width="80" property="userRole" title="角色"   />
 <ec:column     property="userName" title="用户名" />
 <ec:column width="100" property="passwd" title="密码"  />
 <ec:column width="120" property="email" title="电子信箱" />
 <ec:column width="70" property="gender" title="性别"  />
</ec:row>
</ec:table>


<ec:table> ECSide的主标签,可以理解为 html里的table标签

items指明列表集合在request的属性表里的键名, var指明迭代列表集合时,单条记录所用的变量名.此处类似jstl里的c:forEach标签.
retrieveRowsCallback="process" 指明采用ECSide的java内存分页技术(关于java内存分页和数据库层分页的的详细说明参见....).
action指明翻页排序等操作时,所要调用的action的url,在这里你可以继续使用展现列表所使用的action
title="用户列表" 列表的标题
width="100%" 列表的宽度
classic="true" 使用传统方式列表 (传统方式与ECSide方式区别的详细说明参见....)

<ec:row> 行标签,可以理解为类似html里的tr标签

<ec:column> 列标签,可以理解为类似html里的td标签

width列的宽度, 类似td的 width属性 (关于 ec:column 的 width属性的详细说明参见....)
property 该列所要显示的数据在VO中对应的属性字段的名字(如果每条数据是存放在VO里的话),或MAP里对应的key的名字(如果每条数据是存放在MAP里的话)
title 表头中该列所要显示的名称
value 该列所要显示的内容.当你要显示的内容默认不是VO/MAP里的值的时候,你才需要使用value属性,为该列手动的指定一个值.
${GLOBALROWCOUNT}为ECSide内置的一个特殊变量,表示的数据所在的行号,针对全部数据而言,${ROWCOUNT}是针对当前页面而言.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章