ECSide入門簡單例子fins)

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將展現出列表.

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

 

代碼

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 未知 1 男 2女   
10.     MEMO     (備忘)   

h2db的建表指令碼如下: 代碼

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

 

對應VO:

代碼

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

 

對應DAO如下(假設DAO裡只有一個方法,取得全部的使用者資訊,返回的是VO的List):

代碼

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

 

該簡單例子假設該表資料量不大:500以內,採用ECSide的java記憶體分頁技術(關於java記憶體分頁和資料庫層分頁的說明請參見:...).

由於此例子實在簡單,所以略去BO層.

action(DispatchActionSupport)代碼如下:

 

代碼

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. }   
22.   

 

訪問該action的URL為
http://localhost:8080/ecsdemo/simpledemo.do?actionMethod=getAllUsers

jsp頁面:
引入標籤聲明

代碼

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

 

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

代碼

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

 

引入ECSide必要的css js

代碼

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>  

 

ECSide的標籤,也是展現列表最關鍵的環節:

 

代碼

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

 

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