posts - 40, comments - 187, trackbacks - 0

說在前面的話：

ECSide組件，一個功能豐富,簡單易用的列表組件，套用圈子里的一句話：它可能不是最好的，但也許是你最需要的。感興趣的同志們可以訪問ECSide的圈子，里面的資源及文檔都很豐富，不在這里做過多的介紹了，圈子地址為http://ecside.group.javaeye.com/

實例講解：

實現從一張公告表讀取公告信息并以列表展示的功能。本文中的源代碼可通過這個鏈接下載。

bulletin_powered_by_ecside_allen.zip

另附ECSide標簽的使用說明，方便大家查閱。

ECSide標簽使用說明

開發環境：

Dev Tool: Eclipse 3.3

Web Server: Tomcat 5.5.23

Framework: Spring 2.0.6 + Hibernate 3.3.0 + Struts 1.2.8 + ecside_2.0_RC1

Database: Oracle 9i

實現步驟：

0) 準備工作

使用ecside工具，你需要準備的有：

1、ecside.jar

2、 ecside.tld標簽

3、ecside.js

4、ecside.css

5、ecside使用table圖片

注：以上內容均可在圈子中下載到。

1）配置ecside

?? 需要在web.xml中配置ecside的過濾器，用于文件導出和語言編碼，忘記配置的話，會出現“正在提交”的問題。

???? < filter >

???????? < filter-name > ecsideExport </ filter-name >

???????? < filter-class > org.ecside.filter.ECSideFilter </ filter-class >

???????? < init-param >

???????????? < param-name > useEasyDataAccess </ param-name >

???????????? < param-value > true </ param-value >

???????? </ init-param >

???????? < init-param >

???????????? < param-name > useEncoding </ param-name >

???????????? < param-value > true </ param-value >

???????? </ init-param >

???????? < init-param > ????????

???????????? < param-name > encoding </ param-name >

???????????? < param-value > UTF-8 </ param-value >

???????? </ init-param >

???? </ filter >

???? < filter-mapping >

???????? < filter-name > ecsideExport </ filter-name >

???????? < url-pattern > /* </ url-pattern >

???? </ filter-mapping >

還需配置一下tld，

< taglib >

????????? < taglib-uri > /WEB-INF/ecside.tld </ taglib-uri >

???????? < taglib-location > /WEB-INF/taglib/ecside.tld </ taglib-location >

???? </ taglib >

另外，還可以初始化ecside.properties文件，寫這個文件的目的是：把公共的內容集中在一個文件中，方便使用。一旦我們使用ecside 組件，哪個這些配置信息就可以直接引用。形式可以如下：

###########????????table???????###############

table.method=post

table.width=95%

table.pageSizeList=10,20,50,100,1000,2000,all

table.rowsDisplayed=10

table.sortable=true

###########????????column??????###############

column.format.date=yyyy/MM/dd

column.format.number=0.##

column.format.currency=###,###,###

2) 在Struts Action中使用ecside

首先來簡單介紹一下RSF（列表、排序、過濾）操作方式：
ecside支持兩種RSF方式:?? 基于java collection層和基于數據庫層，下面分別介紹：

基于java collection層
這是ec的默認實現方式, 最簡單易用.你要做的就是將整個列表所要展現的全部數據放入collection 內,并交給EC來處理.其中RSF操作,全部由EC在內存中完成,由于你已經將全部數據放入了collection中,所以排序過濾都是基于全部數據的.你要在DAO中做的就是一個查詢操作,SQL語句中不需要加入關于排序分頁過濾的代碼.

這種方式的優點非常明顯:實現簡單.缺點同樣明顯,而且在很大程度上是致命的: 數據量大的時候速度慢,而且很可能OutOfMemory.

基于數據庫層

在這種方式下,EC的角色發生了一點點變化。此時，EC負責把 collection 里的內容展現出來, 同時會向你提供RSF相關的參數。而這些參數需要你自己手動取得并傳入到DAO中(當然EC提供了很多方便的方法來幫助你取得這些參數)，具體功能的實現需要你自己在DAO中組織相應的SQL語句。

這種方式的優缺點正好和方式一相反。

我這里采用第二種基于數據庫層的分頁方式實現列表，這時在JSP中使用ecside時，要將<ec:table>中的幾個重要屬性設定為limit。如： <ec:table filterRowsCallback="process/limit"? sortRowsCallback="process/limit"? retrieveRowsCallback="process/limit" ...> 這里filterRowsCallback表示過濾的Callback方式，sortRowsCallback表示排序的Callback方式，retrieveRowsCallback表示分頁的Callback方式，這三個屬性都需要設定為limit。（不熟悉的讀者可以查詢原版EC中的相關說明，不在這里詳述。）

Struts Action的代碼為：

/* ?

?????*?用ECSide構建列表

??????*

????? */

???? public ?ActionForward?list(ActionMapping?mapping,?ActionForm?form,

????????????HttpServletRequest?request,?HttpServletResponse?response)? {

????????String?v_type? = ?request.getParameter( " type " );

???????? // 0)?設定過濾條件

????????Map < String,?Object > ?filterMap? = ? new ?HashMap < String,?Object > ();

// ????????filterMap.put("content",?"test");

????????Map < String,?Object > ?sortMap? = ? new ?HashMap < String,?Object > ();

????????sortMap.put( " createTime " ,? " desc " );? // ?按照創建時間倒序排列

???????? // 1)?設定ECSide分頁對象

????????Limit?limit? = ?RequestUtils.getLimit(request);

???????? // ?取總記錄數

???????? int ?pageNo? = ?RequestUtils.getPageNo(request);

???????? int ?pagesize? = ?RequestUtils.getCurrentRowsDisplayed(request);

???????? if ?(pagesize? == ? 0 )

????????????pagesize? = ?PAGESIZE;

???????? // ?設置總記錄數及每頁記錄數

???????? int ?totalRows? = ?RequestUtils.getTotalRowsFromRequest(request);

???????? if ?(totalRows? <= ? 0 )? {

????????????totalRows? = ?getEntityManager()

????????????????????.getCount(getEntityClass(),?filterMap);

????????}

????????limit.setRowAttributes(totalRows,?pagesize);

???????? // ?根據參數得到結果

????????List < Bulletin > ?result? = ?getEntityManager().queryForListByCriter(

????????????????getEntityClass(),?filterMap,?sortMap,

????????????????((pageNo? - ? 1 )? * ?pagesize),?pagesize);

????????request.setAttribute(getEntityListName(),?result);

????????request.setAttribute( " myPageSize " ,?getPageSize(request));

????????request.setAttribute( " type " ,?v_type);

???????? return ?mapping.findForward(LIST);

????}

這里我構建了過濾條件及排序條件查詢數據，通過queryForListByCriter方法，輸入當前起始頁及每頁的顯示條數在數據層得到所需數據。詳見代碼中的注釋。另附數據處理層兩個方法的代碼：

/*分頁查詢數據*/

public?List?queryForListByCriter(Class?entityClass,?Map?filter,

????????????Map?sortMap,?int?start,?int?everypage)?{

????????Criteria?criteria?=?getCriteria(entityClass);

????????setFilter(criteria,?filter);

????????setSort(criteria,?sortMap);

????????criteria.setFirstResult(start);

????????criteria.setMaxResults(everypage);

????????return?criteria.list();

????}

/*計算數據條數*/????

public?int?getCount(Class?entityClass,?Map?filter)?{

????????Criteria?criteria?=?getCriteria(entityClass);

????????setFilter(criteria,?filter);

????????criteria.setProjection(Projections.rowCount());

????????return?((Integer)?criteria.uniqueResult()).intValue();

????}

注：ecside與ORM工具無關，不管你使用什么方法只要能獲得一個集合就好，這里我用的是Hibernate獲得的集合。

3）在JSP中使用ecside

需要注意的是：

1. items的值一定要和request.setAttribute(getEntityListName(), result); 屬性一致

2. 可以引用屬性名做為值顯示，如：${bulletin.id}

3. <ec:column property="name" title="公告名稱">property屬性值一定是映射文件中的某個屬性

<% @?page?contentType = " text/html;?charset=UTF-8 " ? %>

<% @?taglib?uri = " /WEB-INF/ecside.tld " ?prefix = " ec " ? %>

<% @?taglib?uri = " http://java.sun.com/jsp/jstl/core " ?prefix = " c " ? %>

<% @?taglib?uri = " http://java.sun.com/jsp/jstl/fmt " ?prefix = " fmt " ? %>

<% @?taglib?uri = " http://java.sun.com/jsp/jstl/functions " ?prefix = " fn " ? %>

< c:set? var ="ctx" ?value ="${pageContext.request.contextPath}" />

< html >

< head >

???? < meta? http-equiv ="Content-Type" ?content ="text/html;?charset=UTF-8" ? />

????? < META? HTTP-EQUIV ="pragma" ?CONTENT ="no-cache" >

???? < META? HTTP-EQUIV ="Cache-Control" ?CONTENT ="no-cache,?must-revalidate" >

???? < META? HTTP-EQUIV ="expires" ?CONTENT ="0" >

???? < title > 公告列表 </ title >

???? < link? rel ="stylesheet" ?type ="text/css" ?href ="${ctx}/module/bizAcceptance/resources/ecside/css/ecside_style.css" ? />

???? < script? type ="text/javascript" ?src ="${ctx}/module/bizAcceptance/resources/ecside/js/prototype_mini.js" ? ></ script > ????

???? < script? type ="text/javascript" ?src ="${ctx}/module/bizAcceptance/resources/ecside/js/ecside.js" ? ></ script >

???? < script? type ="text/javascript" ?src ="${ctx}/module/bizAcceptance/resources/ecside/js/ecside_msg_utf8_cn.js" ? ></ script >

</ head >

< body >

< table? width ="100%" ??border ="0" ?cellspacing ="0" ?cellpadding ="0" >

?? < tr >

???? < td? class ="left" > <% @?include?file = " /module/commons/htmlmessages.jsp " ? %> </ td > ????????????????

?? </ tr >

?? < tr >

???????? < td? height ="30" >

???????????? < span? style ="align:left;font-size:9pt;" >

????????????????請選擇公告

?????????????? < input? type ="button" ?name ="Submit3" ?value ='進? 入'?onclick ="doView()" >

???????????? </ span >< br >

???????? </ td >

?? </ tr >

?? < tr >

?????? < td >

?????????? < ec:table? items ="bulletins" ?var ="bulletin"

????????????retrieveRowsCallback ="limit"

????????????filterRowsCallback ="limit" ???

????????????action ="${ctx}/module/bulletin.do?method=list&type=${type}"

????????????title ="我的公告列表" ?

????????????useAjax ="false"

????????????showPrint ="false"

????????????width ="100%"

????????????resizeColWidth ="true"

????????????filterable ="false"

????????????listWidth ="100%"

????????????rowsDisplayed ="${myPageSize}"

????????????pageSizeList ="${myPageSize},10,15,20,all"

????????????xlsFileName ="公告列表.xls"

????????????styleClass ="tableRegion" ?

????????????style ="border:2px;table-layout:fixed;"

????????????classic ="true" >

???????????? < ec:row >

???????????????? < ec:column? property ="_0" ?title ="選擇" ?width ="6%" >

???????????????????? < input? type ="radio" ?id ="radio_${GLOBALROWCOUNT}" ?name ="checkedRadio" ?value ="${bulletin.id}" >