基于SmartGwt的分页组件
最近发现oschina不给我发每周精彩回顾了，才想起距离上次写东西已经有9个月了，于是狠狠的惭愧了一把。程序员光干活，不总结是不行的，于是便跟大家分享下下面这些开发体验。
最近公司的外网项目，都准备用Gwt开发，经过之前的一些试验，公司决定采用SmartGwt 2.4作为前台框架。经过一段使用之后，感觉SmartGwt基本上比较容易上手。不过，虽然他的showcase的例子挺丰富，但只覆盖了很少的api，所以基本上还是天天翻着api来开发。
其组件库涵盖了绝大多数常见的控件，但是没有分页条，居然少了这么常用的组件，着实让人遗憾。先google了一下，没有令人满意的现成的扩展组件，查了半天，只在一个英文论坛里，发现一个半成品，只是个实现了部分页面展示逻辑的页面组件，而且没有数据交互。无奈，找不到现成的，只能自己动手丰衣足食了。
一、定义分页条功能
功能至少要满足基本需要。
比如对于用户来说，页面功能应该包括：
1、能够定位数据到：首页，上一页，下一页，末页
2、能够展示当前页和总页数
3、直接跳转到指定页（大于零，小于总页数）
4、根据当前页和总页数，控制按钮可用状态
对于程序员来说，这个组件应该可以：
1、方便的初始化工具条组件并能绑定数据展示组件（比如grid）
2、定制每页记录数
3、最好和数据查询方法分离，消除对业务查询方法的依赖
4、最好能有个模态遮罩，在数据加载过程中，给予提示，同时限制用户的重复操作。
二、代码实现
经过分析和简单的设计，决定通过两个类来实现：
1、一个纯页面组件，继承自com.smartgwt.client.widgets.toolbar.ToolStrip。代码实现思路就不写了，反正是从混沌到清晰的一个过程。直接帖代码了
import com.smartgwt.client.types.Alignment; import com.smartgwt.client.types.Overflow; import com.smartgwt.client.util.SC; import com.smartgwt.client.widgets.Canvas; import com.smartgwt.client.widgets.IButton; import com.smartgwt.client.widgets.Label; import com.smartgwt.client.widgets.events.ClickEvent; import com.smartgwt.client.widgets.events.ClickHandler; import com.smartgwt.client.widgets.form.DynamicForm; import com.smartgwt.client.widgets.form.fields.TextItem; import com.smartgwt.client.widgets.grid.ListGrid; import com.smartgwt.client.widgets.grid.ListGridRecord; import com.smartgwt.client.widgets.toolbar.ToolStrip; /** * * 分页工具条 * * 使用方法： * 1、实例化一个分页工具栏，传入每页记录条数和绑定的grid * 2、实现一个ListGridDataControl（实例化方法参见类中注释，注意和分页工具的相互调用），并把它设值给分页工具栏的dataControl属性， * 注意：分页工具条和ListGridDataControl需要紧密配合相互调用。 * 3、调用active()方法，激活分页条并加载grid数据 * * 提示： * 1、本分页工具不处理grid的行号，行号理解为grid的列定义范畴 * 2、可以多次调用active()方法，调用的结果相当于把分页栏定位到首页，并重新获取总页数 * 3、如果查询业务数据的参数改变时，可以重新实现并设置ListGridDataControl，然后调用active() * 4、可以调用setMaskMessage()设置遮罩的提示信息,如果不设置，采用默认值 * * 说明： * 之所以需要ListGridDataControl回调分页工具条的方法，导致增加了相互依赖，主要是考虑到获取数据和获取记录总数的方法通常是异步的， * 为保持操作的同步性，只能通过互相调用的方式保持工具条和grid的正常工作。 * * @author weichao * @version 1.0 */ public class GridPaginationBar extends ToolStrip{ /** * 模态遮罩 */ ModalWindow mask; private String maskMessage = " 数据加载中...... "; public void setMaskMessage(String maskMessage) { this.maskMessage = maskMessage; } /** * 每页条数 */ private int pageSize = -1; /** * 当前页 */ private int pageNum = -1; /** * 总页数 */ private int totalPage = -1; /** * 数据记录条数 */ private int totalRowNum = -1; /** * 绑定的grid */ private final ListGrid grid; //首页 TopImgButton first = new TopImgButton(16,16,"/img/control_start_blue.png","/img/control_start.png"); //上一页 TopImgButton backward = new TopImgButton(16,16,"/img/control_rewind_blue.png","/img/control_rewind.png"); //下一页 TopImgButton forward = new TopImgButton(16,16,"/img/control_fastforward_blue.png","/img/control_fastforward.png"); //末页 TopImgButton last = new TopImgButton(16,16,"/img/control_end_blue.png","/img/control_end.png"); //输入框form DynamicForm pageForm; //页码输入框 protected TextItem pageText; //转到按钮 IButton go = new IButton("转到"); //总页数 protected Label totalLabel; //grid数据控制器 private ListGridDataControl dataControl; public void setDataControl(ListGridDataControl dataControl){ this.dataControl = dataControl; } public GridPaginationBar(ListGrid listGrid, int pageSize) { this(listGrid, pageSize,null); } /** * * 构造方法中，只初始化工具条元素和事件，不初始化数据， * 构造完成后工具条处于禁用状态，需要首先传入grid数据控制器， * 然后调用active()方法来激活工具条，并开始加载数据。 * * @param listGrid 绑定的grid * @param pageSize 每页记录条数 * @param maskCanvas 加载数据过程中，需要用遮罩遮盖的控件，如果传入null,则默认遮盖的对象为绑定的grid */ public GridPaginationBar(ListGrid listGrid, int pageSize, Canvas maskCanvas) { this.grid = listGrid; mask = new ModalWindow(maskCanvas == null ? grid : maskCanvas); mask.setLoadingIcon("/img/loading.gif"); this.pageSize = pageSize; first.setButtonTip("首页"); first.setButtonClickHandler(new ClickHandler(){ public void onClick(ClickEvent event) { goToPage(1); } }); backward.setButtonTip("上一页"); backward.setButtonClickHandler(new ClickHandler(){ public void onClick(ClickEvent event){ goToPage(pageNum - 1); } }); pageText = new TextItem(); pageText.setWidth(40); pageText.setHeight(20); pageText.setShowTitle(false); pageText.setTextAlign(Alignment.RIGHT); go.setWidth(34); go.setHeight(20); go.addClickHandler(new ClickHandler(){ public void onClick(ClickEvent event) { String page = pageText.getValueAsString(); if(page == null || page.trim().equals("")){ SC.say("请输入页码"); return ; }else { try{ int pageint = Integer.valueOf(page); if(pageint<1){ SC.say("输入的页码不能小于1"); return; }else if(pageint>totalPage){ SC.say("输入的页码不能大于总页数 "+totalPage); return; }else { goToPage(pageint); } }catch(NumberFormatException e){ SC.say("请输入整数"); return; } } }}); forward.setButtonTip("下一页"); forward.setButtonClickHandler(new ClickHandler(){ public void onClick(ClickEvent event){ goToPage(pageNum + 1); } }); last.setButtonTip("末页"); last.setButtonClickHandler(new ClickHandler(){ public void onClick(ClickEvent event){ goToPage(totalPage); } }); totalLabel = new Label(); totalLabel.setWrap(false); totalLabel.setWidth(50); setHeight(20); setOverflow(Overflow.VISIBLE); setStyleName("normal"); this.setMargin(5); pageForm = new DynamicForm(); pageForm.setNumCols(1); pageForm.setWidth(45); pageForm.setItems(pageText); Label blank1 = new Label(); blank1.setContents(" "); blank1.setWidth(5); blank1.setHeight(20); Label blank2 = new Label(); blank2.setContents(" "); blank2.setWidth(5); blank2.setHeight(20); Label blank3 = new Label(); blank3.setContents(" "); blank3.setWidth(15); blank3.setHeight(20); Label blank4 = new Label(); blank4.setContents(" "); blank4.setWidth(5); blank4.setHeight(20); Label blank5 = new Label(); blank5.setContents(" "); blank5.setWidth(5); blank5.setHeight(20); addMember(first); addMember(blank1); addMember(backward); addMember(blank2); addMember(pageForm); addMember(go); addMember(blank5); addMember(forward); addMember(blank4); addMember(last); addMember(blank3); addMember(totalLabel); setAlign(Alignment.RIGHT); resetPaginationState(); } /** * 转到指定页，获取分页数据并装载， * 获取数据过程中，加模态遮罩 * * @param pageNum */ public void goToPage(int pageNum) { go.disable(); if (pageNum > totalPage) pageNum = totalPage; if (pageNum < 1) pageNum = 1; if (pageNum == this.pageNum) { go.enable(); return; } mask.show(maskMessage, true); //fetch data and reload grid this.pageNum = pageNum; int startNum = (pageNum - 1) * pageSize; dataControl.fetchData(startNum, pageSize); } /** * 根据记录总数计算总页数 */ private void countTotalPages() { if(totalRowNum < 1){ totalPage = -1; return; } int pages = (int) Math.ceil(((float) totalRowNum) / ((float) pageSize)); // never return zero pages if (pages == 0) pages = 1; this.totalPage=pages; pageNum = 1; } /** * 首次查询数据，获取数据总数等信息，并更新分页条状态 * 获取数据过程中，加模态遮罩 */ public void active(){ if(dataControl == null){ SC.say("错误","分页栏未配置ListGridDataControl数据控制器，请检查代码"); return; } //首先禁用工具条 if(pageNum != -1){ resetPaginationState(); } mask.show(maskMessage, true); dataControl.getTotal(); } /** * ListGridDataControl获取总记录数后的回调方法 * @param all */ public void afterGetTotal(int all){ this.totalRowNum = all; countTotalPages(); if(totalPage==-1){ //如果没有查询到数据，则清空原来的数据 afterFetchData(new ListGridRecord[0]); } else { dataControl.fetchData(0, pageSize); } } /** * ListGridDataControl获取数据后的回调方法 * @param datas */ public void afterFetchData(ListGridRecord[] datas){ if(datas != null){ dataControl.loadData(datas); } updatePageinationState(); mask.hide(); } /** * 清除分页工具条状态，全部置灰，不负责清空grid当前数据 */ private void resetPaginationState(){ pageNum = -1; totalPage = -1; totalRowNum = -1; first.disable(); backward.disable(); last.disable(); forward.disable(); pageText.disable(); go.disable(); totalLabel.setContents(""); } /** * 依据当前页和总页数控制工具条状态 * 规则： * 当前页为-1，则说明工具条尚未激活或者没有查询到数据，不需要处理； * 当前页等于1，则首页按钮和上一页按钮置灰，否则，激活； * 当前页等于总页数，则末页按钮和上一页按钮置灰，否则，激活； */ private void updatePageinationState() { if(pageNum==-1||totalPage==-1){ return; } totalLabel.setContents("第" + pageNum + "页/共" + totalPage + "页"); pageText.enable(); go.enable(); pageText.setValue(pageNum); if (pageNum == 1){ first.disable(); backward.disable(); } else { first.enable(); backward.enable(); } if (pageNum == totalPage){ last.disable(); forward.disable(); } else { last.enable(); forward.enable(); } } }
2、一个控制接口类
即GridPaginationBar 类里的ListGridDataControl ，代码如下：
import com.smartgwt.client.widgets.grid.ListGridRecord;
/**
*
* @author weichao
* listGrid数据获取及装载接口 ，和工具条有紧密的相互调用
* grid加分页工具条时，需要实现此接口并提供给分页工具条
*
*
* 示例：
*
* GridPaginationBar pageBar = new GridPaginationBar(bizGrid,20,bizGrid.getParentElement());
*
* pageBar.setDataControl(new ListGridDataControl(){
* public void fetchData(int start, int pageSize) {
* service.getBusiness(sid,start,pageSize,
* new AsyncCallback<List<XXXXXVO>>() {
* public void onFailure(Throwable caught) {
* Window.alert(caught.getMessage());
* }
* public void onSuccess(List<XXXXXVO> result) {
* list = result;
* pageBar.afterFetchData(RenderBizData.getNewRecords(result));
* }
* });
* }
* public void getTotal() {
* service.getBusinessTotal(sid, new AsyncCallback<Integer>(){
* public void onFailure(Throwable arg0) {
* Window.alert(arg0.getMessage());
* }
* public void onSuccess(Integer arg0) {
* pageBar.afterGetTotal(arg0);
* }} );
* }
* public void loadData(ListGridRecord[] records) {
* bizGrid.setData(records);
* }});
*/
public interface ListGridDataControl {
/**
* 获取分页数据，并回调分页工具栏的afterFetchData()方法，
* 如果需要异步获取数据，请注意回调afterFetchData()的时机，保持数据的同步操作。
*
* @param start
* @param pageSize
*/
public void fetchData(int start,int pageSize);
/**
* 获取数据记录总数，并回调分页工具栏的afterGetTotal()方法
* 如果需要异步获取数据，请注意回调afterGetTotal()的时机，保持数据的同步操作。
*
* @return 总数
*/
public void getTotal();
/**
* 把数据装载入grid
* @param records
*/
public void loadData(ListGridRecord[] records);
}
3、从网上找了个模态窗口ModalWindow ，直接使用了，这里就不贴代码了：
需要的可以从这里找
http://code.google.com/p/smartgwt-extensions/source/browse/trunk/mainprojects/src/main/java/com/smartgwt/extensions#extensions%2Fmodal%2Fclient%253Fstate%253Dclosed
4、TopImgButton类是自己实现的一个按钮类，当然你可以用smartgwt的按钮 ，或者你自己写个。
import com.smartgwt.client.types.Cursor;
import com.smartgwt.client.widgets.Img;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.layout.HLayout;
/**
* @author weichao
* 有激活和置灰两种状态的图片按钮
*/
public class TopImgButton extends HLayout{
Img enable = new Img();
Img disable = new Img();
private boolean _enable = true;
public TopImgButton(int buttonWidth,int buttonHeight,String enableImgSrc,String disableImgSrc){
setWidth(buttonWidth);
setHeight(buttonHeight);
enable.setSrc(enableImgSrc);
enable.setWidth(buttonWidth);
enable.setHeight(buttonHeight);
enable.setCursor(Cursor.POINTER);
disable.setSrc(disableImgSrc);
disable.setWidth(buttonWidth);
disable.setHeight(buttonHeight);
addMember(enable);
}
public void enable(){
if(!_enable){
removeMember(disable);
addMember(enable);
_enable = !_enable;
}
}
public void disable(){
if(_enable){
removeMember(enable);
addMember(disable);
_enable = !_enable;
}
}
public void setButtonClickHandler(ClickHandler handler){
enable.addClickHandler(handler);
}
public void setButtonTip(String tipMessage){
enable.setTooltip(tipMessage);
}
}
三、效果
注释里写的比较多了，还有示例也帖在类的注释里了，所以就不再解释怎么用了。
经过几番测试，感觉运行比较稳定。希望能对需要smartgwt分页的朋友有所帮助。