今天學習了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將展現出列表.

知道了原理,那麼讓我們一起來完成一個快速而簡單的例子吧.
現在有一張用戶信息表,如下

表名稱: USER_INFO(用戶信息表)
字段:
     USERID    (用戶編號)
     USERNAME (用戶名)
     PASSWD    (密碼)
     USERROLE (角色) 0 被鎖定  1 普通  2 高級 3 管理員 4超級管理員
     REGDATE   (註冊日期)
     EMAIL     (EMAIL)
     GENDER    (性別) 0 未知 1 男 2女
     MEMO      (備註)

表名稱: USER_INFO(用戶信息表)
字段:
    USERID   (用戶編號)
    USERNAME (用戶名)
    PASSWD   (密碼)
    USERROLE (角色) 0 被鎖定  1 普通  2 高級 3 管理員 4超級管理員
    REGDATE  (註冊日期)
    EMAIL    (EMAIL)
    GENDER   (性別) 0 未知 1 男 2女
    MEMO     (備註)

h2db的建表腳本如下:

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)
);

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:

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方法 */

}

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):

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;
     }

}

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)代碼如下:

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");

     }
}

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頁面:
引入標籤聲明

<%@ taglib uri="http://www.ecside.org" prefix="ec" %>

<%@ taglib uri="http://www.ecside.org" prefix="ec" %>

通常jsp頁面內取得應用上下文是必須的.

<%
String webapp=request.getContextPath();
%>

<%
String webapp=request.getContextPath();
%>

引入ECSide必要的css js

<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>

<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的標籤,也是展現列表最關鍵的環節:

<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 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}是針對當前頁面而言.