新的QFaces組件scroller, 這是一個翻頁組件,直接綁定到dataTable中即可,使用非常簡單,組件會包含在1.5中發布,最近會進行一些測試,組件的性能很好,比網上大部分人所用到的LocalDataModel方式要好,從性能上和易用性上.
從性能上,組件不會在生命周期中出現兩次調用數據的多餘操作,並且刷新之後仍可停留在原來所在的頁面.
從易用性上,只要實現一個非常簡單的方法綁定就可以,這已經近乎傻瓜式的了.
現在可以在這裡看到一些效果,html,及java代碼都有
http://huliqing-qfaces.appspot.com/qfaces-example/ui-scroller.faces？qRecordStart=90
預覽一下用法吧,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> |
看到組件所綁定的方法了嗎：bind="#{scrollerBean.loadData}" ,後台代碼只要實現一個這樣的方法進行綁定就可以.
後台java代碼
| public PageModel loadData(long start) { // 設置自己的pageSize int pageSize = 10; // 模擬,從DB中獲取總記錄數 long total = getTotalCount(); // 模擬從DB中獲取一些數據,從start起pageSize條記錄 ArrayList<Person> pageData = getFromDatabase(start, pageSize); // 把這幾個信息封裝成PageModel返回,OK  pm.setPageData(pageData); pm.setPageSize(pageSize); pm.setTotal(total); return pm; } |
你可能不明白start這個參數是怎麼來的,這是scroller組件計算出來后給你的,當第一次載入頁面時它會是0,它代表著現在需要從資料庫中的第幾條數據讀取記錄,你只要根據start,再配合你自己設置的pageSize從資料庫獲取一頁數據返回給scroller組件就可以.返回類型是PageModel,這是QFaces組件包中的類.只是非常簡單的要求三個數據而已,一個當前頁的數據,一個總記錄數,一個pageSize.組件根據這三個數據可計算,並且渲染一個scroller翻頁導航.這還不是整個組件的完整面貌,它會變得更好的.
我很喜歡這個項目：）
最近又對QFaces作了大幅調整,調整了URL獲取資源的方式,QFaces.js拆分成了兩個文件QFaces-gen,QFaces-faces,命名空間也作了一些調整.
tree組件修正了一些bug,並提高了友好性.inputHelp修正了在谷歌瀏覽器下的錯位問題,同時修正了上下左右鍵不能使用的問題.聯動組件現在的工作方式仍然顯得太積極,需要作一些調整.還有很多可以繼續改進的.
[火星人 ] 簡單易用的JSF翻頁組件已經有426次圍觀
