簡(jiǎn)單易用的JSF翻頁(yè)組件

新的QFaces組件scroller, 這是一個(gè)翻頁(yè)組件,直接綁定到dataTable中即可,使用非常簡(jiǎn)單,組件會(huì)包含在1.5中發(fā)布,最近會(huì)進(jìn)行一些測(cè)試,組件的性能很好,比網(wǎng)上大部分人所用到的LocalDataModel方式要好,從性能上和易用性上。
從性能上,組件不會(huì)在生命周期中出現(xiàn)兩次調(diào)用數(shù)據(jù)的多余操作,并且刷新之后仍可停留在原來所在的頁(yè)面。
從易用性上,只要實(shí)現(xiàn)一個(gè)非常簡(jiǎn)單的方法綁定就可以,這已經(jīng)近乎傻瓜式的了。
現(xiàn)在可以在這里看到一些效果,html,及java代碼都有
http://huliqing-qfaces.appspot.com/qfaces-example/ui-scroller.faces?qRecordStart=90
預(yù)覽一下用法吧,
html代碼
<h:form>
<q:scroller for="myDataTable"
bind="#{scrollerBean.loadData}"
displayCount="true"
displayJump="true"
displayPage="10">
<h:dataTable id="myDataTable" border="1"
binding="#{scrollerBean.myData}"
value="#{scrollerBean.people}" var="pl" width="500">
<h:column>
<h:outputText value="#{pl.name}" />
</h:column>
<h:column>
<h:outputText value="#{pl.age}" />
</h:column>
<h:column>
<h:outputText value="#{pl.birthday}" >
<f:convertDateTime pattern="yyyy-MM-dd"/>
</h:outputText>
</h:column>
<h:column>
<h:commandButton value="Test" actionListener="#{scrollerBean.testListener}" />
</h:column>
</h:dataTable>
</q:scroller>
</h:form>
<q:scroller for="myDataTable"
bind="#{scrollerBean.loadData}"
displayCount="true"
displayJump="true"
displayPage="10">
<h:dataTable id="myDataTable" border="1"
binding="#{scrollerBean.myData}"
value="#{scrollerBean.people}" var="pl" width="500">
<h:column>
<h:outputText value="#{pl.name}" />
</h:column>
<h:column>
<h:outputText value="#{pl.age}" />
</h:column>
<h:column>
<h:outputText value="#{pl.birthday}" >
<f:convertDateTime pattern="yyyy-MM-dd"/>
</h:outputText>
</h:column>
<h:column>
<h:commandButton value="Test" actionListener="#{scrollerBean.testListener}" />
</h:column>
</h:dataTable>
</q:scroller>
</h:form>
看到組件所綁定的方法了嗎:bind="#{scrollerBean.loadData}" ,后臺(tái)代碼只要實(shí)現(xiàn)一個(gè)這樣的方法進(jìn)行綁定就可以.
后臺(tái)java代碼
public PageModel loadData(long start) {
// 設(shè)置自己的pageSize
int pageSize = 10;
// 模擬,從DB中獲取總記錄數(shù)
long total = getTotalCount();
// 模擬從DB中獲取一些數(shù)據(jù),從start起pageSize條記錄
ArrayList<Person> pageData = getFromDatabase(start, pageSize);
// 把這幾個(gè)信息封裝成PageModel返回,OK
PageModel pm = new PageModel();
pm.setPageData(pageData);
pm.setPageSize(pageSize);
pm.setTotal(total);
return pm;
}
// 設(shè)置自己的pageSize
int pageSize = 10;
// 模擬,從DB中獲取總記錄數(shù)
long total = getTotalCount();
// 模擬從DB中獲取一些數(shù)據(jù),從start起pageSize條記錄
ArrayList<Person> pageData = getFromDatabase(start, pageSize);
// 把這幾個(gè)信息封裝成PageModel返回,OK

PageModel pm = new PageModel();
pm.setPageData(pageData);
pm.setPageSize(pageSize);
pm.setTotal(total);
return pm;
}
你可能不明白start這個(gè)參數(shù)是怎么來的,這是scroller組件計(jì)算出來后給你的,當(dāng)?shù)谝淮渭虞d頁(yè)面時(shí)它會(huì)是0,它代表著現(xiàn)在需要從數(shù)據(jù)庫(kù)中的第幾條數(shù)據(jù)讀取記錄,你只要根據(jù)start,再配合你自己設(shè)置的pageSize從數(shù)據(jù)庫(kù)獲取一頁(yè)數(shù)據(jù)返回給scroller組件就可以。返回類型是PageModel,這是QFaces組件包中的類.只是非常簡(jiǎn)單的要求三個(gè)數(shù)據(jù)而已,一個(gè)當(dāng)前頁(yè)的數(shù)據(jù),一個(gè)總記錄數(shù),一個(gè)pageSize.
組件根據(jù)這三個(gè)數(shù)據(jù)可計(jì)算,并且渲染一個(gè)scroller翻頁(yè)導(dǎo)航。這還不是整個(gè)組件的完整面貌,它會(huì)變得更好的。
我很喜歡這個(gè)項(xiàng)目:)
最近又對(duì)QFaces作了大幅調(diào)整,調(diào)整了URL獲取資源的方式,QFaces.js拆分成了兩個(gè)文件QFaces-gen,QFaces-faces,命名空間也作了一些調(diào)整。
tree組件修正了一些bug,并提高了友好性。inputHelp修正了在谷歌瀏覽器下的錯(cuò)位問題,同時(shí)修正了上下左右鍵不能使用的問題。聯(lián)動(dòng)組件現(xiàn)在的工作方式仍然顯得太積極,需要作一些調(diào)整。還有很多可以繼續(xù)改進(jìn)的。喜歡JSF的朋友,有問題可以一起互相交流學(xué)習(xí)。
話外,昨天把自己的JTM放到U盤下運(yùn)行,感覺非常棒,現(xiàn)在帶著U盤或者手機(jī)就可以隨處移動(dòng)自己的WEB演示系統(tǒng)了:), 不少朋友向我索要源碼,有些不好意思,這個(gè)小東西是免費(fèi)的,你可以隨便用,沒有版權(quán)約束,但不是開源的。源碼我是拿來出售的。
- huliqing@huliqing.name
- http://www.huliqing.name
posted on 2009-05-09 09:55 huliqing 閱讀(1823) 評(píng)論(4) 編輯 收藏 所屬分類: JSF