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 (備注)
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)
);
對應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方法 */
}
對應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;
}
}
該簡單例子假設該表數據量不大: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");
}
}
訪問該action的URL為
http://localhost:8080/ecsdemo/simpledemo.do?actionMethod=getAllUsers
jsp頁面:
引入標簽聲明
代碼
<%@ taglib uri="http://www.extremecomponents.org" prefix="ec" %>
通常jsp頁面內取得應用上下文是必須的.
代碼
<%
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>
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> 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}是針對當前頁面而言.
