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

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

 

代碼

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

<script type="text/javascript">render_code();</script>
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)
);

<script type="text/javascript">render_code();</script>

 

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

}

<script type="text/javascript">render_code();</script>

 

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

}

<script type="text/javascript">render_code();</script>

 

該簡單例子假設該表數據量不大: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");

    }
}

<script type="text/javascript">render_code();</script>

 

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

jsp頁面:
引入標籤聲明

代碼

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

<script type="text/javascript">render_code();</script>

 

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

代碼

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

<script type="text/javascript">render_code();</script>

 

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

<script type="text/javascript">render_code();</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>

<script type="text/javascript">render_code();</script>

 

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