posts - 40, comments - 187, trackbacks - 0

說(shuō)在前面的話：

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

實(shí)例講解：

實(shí)現(xiàn)從一張公告表讀取公告信息并以列表展示的功能。本文中的源代碼可通過(guò)這個(gè)鏈接下載。

bulletin_powered_by_ecside_allen.zip

另附ECSide標(biāo)簽的使用說(shuō)明，方便大家查閱。

ECSide標(biāo)簽使用說(shuō)明

開發(fā)環(huán)境：

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

實(shí)現(xiàn)步驟：

0) 準(zhǔn)備工作

使用ecside工具，你需要準(zhǔn)備的有：

1、ecside.jar

2、 ecside.tld標(biāo)簽

3、ecside.js

4、ecside.css

5、ecside使用table圖片

注：以上內(nèi)容均可在圈子中下載到。

1）配置ecside

?? 需要在web.xml中配置ecside的過(guò)濾器，用于文件導(dǎo)出和語(yǔ)言編碼，忘記配置的話，會(huì)出現(xiàn)“正在提交”的問(wèn)題。

???? < 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文件，寫這個(gè)文件的目的是：把公共的內(nèi)容集中在一個(gè)文件中，方便使用。一旦我們使用ecside 組件，哪個(gè)這些配置信息就可以直接引用。形式可以如下：

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

首先來(lái)簡(jiǎn)單介紹一下RSF（列表、排序、過(guò)濾）操作方式：
ecside支持兩種RSF方式:?? 基于java collection層和基于數(shù)據(jù)庫(kù)層，下面分別介紹：

基于java collection層
這是ec的默認(rèn)實(shí)現(xiàn)方式, 最簡(jiǎn)單易用.你要做的就是將整個(gè)列表所要展現(xiàn)的全部數(shù)據(jù)放入collection 內(nèi),并交給EC來(lái)處理.其中RSF操作,全部由EC在內(nèi)存中完成,由于你已經(jīng)將全部數(shù)據(jù)放入了collection中,所以排序過(guò)濾都是基于全部數(shù)據(jù)的.你要在DAO中做的就是一個(gè) 查詢操作,SQL語(yǔ)句中不需要加入關(guān)于排序分頁(yè) 過(guò)濾的代碼.

這種方式的優(yōu)點(diǎn)非常明顯:實(shí)現(xiàn)簡(jiǎn)單.缺點(diǎn)同樣明顯,而且在很大程度上是致命的: 數(shù)據(jù)量大的時(shí)候速度慢,而且很可能OutOfMemory.

基于數(shù)據(jù)庫(kù)層

在這種方式下,EC的角色發(fā)生了一點(diǎn)點(diǎn)變化。此時(shí)，EC負(fù)責(zé)把 collection 里的內(nèi)容展現(xiàn)出來(lái), 同時(shí)會(huì)向你提供RSF相關(guān)的參數(shù)。而這些參數(shù)需要你自己手動(dòng)取得并傳入到DAO中(當(dāng)然EC提供了很多方便的方法來(lái)幫助你取得這些參數(shù))，具體功能的實(shí)現(xiàn)需要你自己在DAO中組織相應(yīng)的SQL語(yǔ)句。

這種方式的優(yōu)缺點(diǎn)正好和方式一相反。

我這里采用第二種基于數(shù)據(jù)庫(kù)層的分頁(yè)方式實(shí)現(xiàn)列表，這時(shí)在JSP中使用ecside時(shí)，要將<ec:table>中的幾個(gè)重要屬性設(shè)定為limit。如： <ec:table filterRowsCallback="process/limit"? sortRowsCallback="process/limit"? retrieveRowsCallback="process/limit" ...> 這里filterRowsCallback表示過(guò)濾的Callback方式，sortRowsCallback表示排序的Callback方式，retrieveRowsCallback表示分頁(yè)的Callback方式，這三個(gè)屬性都需要設(shè)定為limit。（不熟悉的讀者可以查詢?cè)鍱C中的相關(guān)說(shuō)明，不在這里詳述。）

Struts Action的代碼為：

/* ?

?????*?用ECSide構(gòu)建列表

??????*

????? */

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

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

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

???????? // 0)?設(shè)定過(guò)濾條件

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

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

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

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

???????? // 1)?設(shè)定ECSide分頁(yè)對(duì)象

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

???????? // ?取總記錄數(shù)

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

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

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

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

???????? // ?設(shè)置總記錄數(shù)及每頁(yè)記錄數(shù)

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

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

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

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

????????}

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

???????? // ?根據(jù)參數(shù)得到結(jié)果

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

????}

這里我構(gòu)建了過(guò)濾條件及排序條件查詢數(shù)據(jù)，通過(guò)queryForListByCriter方法，輸入當(dāng)前起始頁(yè)及每頁(yè)的顯示條數(shù)在數(shù)據(jù)層得到所需數(shù)據(jù)。詳見代碼中的注釋。另附數(shù)據(jù)處理層兩個(gè)方法的代碼：

/*分頁(yè)查詢數(shù)據(jù)*/

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

????}

/*計(jì)算數(shù)據(jù)條數(shù)*/????

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工具無(wú)關(guān)，不管你使用什么方法只要能獲得一個(gè)集合就好，這里我用的是Hibernate獲得的集合。

3）在JSP中使用ecside

需要注意的是：

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

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

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

<% @?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;" >

????????????????請(qǐng)選擇公告

?????????????? < input? type ="button" ?name ="Submit3" ?value ='進(jìn)? 入'?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}" >