GWT 2.0 UiBinder 实现一个简单的分页.实现简单的CRUD.

 简单的 分页实现. 当点击新增 和修改 的时候 弹出 窗口.

 

 

 

 

 

package com.toeoso.client.panel;

import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.SpanElement;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.Widget;
import com.toeoso.client.async.PageConf;

public abstract class BasePagePanel extends DecoratorPanel {

	@UiField
	static FlexTable dataFlexTable;
	@UiField
	Button addButton;
	@UiField
	Button firestButton;
	@UiField
	Button previousButton;
	@UiField
	Button nextButton;
	@UiField
	Button lastButton;
	@UiField
	static SpanElement pageInfo;

	private static BasePagePanelUiBinder uiBinder = GWT
			.create(BasePagePanelUiBinder.class);

	interface BasePagePanelUiBinder extends UiBinder<Widget, BasePagePanel> {
	}

	public BasePagePanel() {
		setWidget(uiBinder.createAndBindUi(this));
	}

	protected static PageConf conf = new PageConf();

	@UiHandler( { "firestButton", "previousButton", "nextButton", "lastButton" })
	public void pageOnClick(ClickEvent event) {/* 分页事件添加. */
		Object obj = event.getSource();
		if (firestButton == obj) {/* 第一页. */
			conf.getFirst();
			synTable();
		} else if (previousButton == obj) {/* 前一页 */
			conf.getPrevious();
			synTable();
		} else if (nextButton == obj) {/* 下一页 */
			conf.getNext();
			synTable();
		} else if (lastButton == obj) {/* 末页. */
			conf.getLast();
			synTable();
		}
		if (conf.hastPrevious()) {
			firestButton.setEnabled(true);
			previousButton.setEnabled(true);
		} else {
			firestButton.setEnabled(false);
			previousButton.setEnabled(false);
		}
		if (conf.hasNext()) {
			nextButton.setEnabled(true);
			lastButton.setEnabled(true);
		} else {
			nextButton.setEnabled(false);
			lastButton.setEnabled(false);
		}
	}
	
	/** 添加按钮.弹出一个form对话框. */
	@UiHandler("addButton")
	abstract public void addOnClick(ClickEvent event);
	
	abstract public void synTable();
	
}

 

 

 base分页代码.

 

 

package com.toeoso.client.panel;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Widget;
import com.toeoso.client.async.PageData;
import com.toeoso.client.async.BlogContentService;
import com.toeoso.client.async.BlogContentServiceAsync;
import com.toeoso.client.module.BlogContent;

public class BlogContentListPanel extends BasePagePanel {

	private static final BlogContentServiceAsync blogContentServiceAsync = GWT
			.create(BlogContentService.class);
	public static BlogContentFormPanel blogContentFormPanel;

	public BlogContentListPanel() {
		conf.start = 0;
		conf.limit = 10;
		conf.end = conf.limit;
		synTable();
		blogContentFormPanel = new BlogContentFormPanel(this);
	}

	/** 添加按钮.弹出一个form对话框. */
	public void addOnClick(ClickEvent event) {
		blogContentFormPanel.cleanForm();
		blogContentFormPanel.center();
		blogContentFormPanel.show();
	}

	public void synTable() {
		dataFlexTable.removeAllRows();
		dataFlexTable.setText(1, 0, "加载中...");
		/** 设置加载提示..在ajax读取之后被替换. */
		blogContentServiceAsync.listBlogContent(conf,
				new AsyncCallback<PageData<BlogContent>>() {
					public void onSuccess(PageData<BlogContent> result) {
						/* 设置标题. */
						int titleNo = 0;
						
						dataFlexTable.setText(0, titleNo ++, "id");
						dataFlexTable.setText(0, titleNo ++, "title");
						dataFlexTable.setText(0, titleNo ++, "createDate");
						dataFlexTable.setText(0, titleNo ++, "blogType");
						dataFlexTable.setText(0, titleNo ++, "content");
						dataFlexTable.setText(0, titleNo ++, "userId");
						dataFlexTable.setText(0, titleNo ++, "descContent");
						dataFlexTable.setText(0, titleNo++, "操作");
						int j = 1;
						for (int i = 0; i < 10; ++i) {
							if (i < result.data.length) {
								int dataNo = 0;
								BlogContent blogContent = result.data[i];
								
								dataFlexTable.setHTML(j, dataNo++, "&nbsp;"
										+ blogContent.getId() + "");
								dataFlexTable.setHTML(j, dataNo++, "&nbsp;"
										+ blogContent.getTitle() + "");
								dataFlexTable.setHTML(j, dataNo++, "&nbsp;"
										+ blogContent.getCreateDate() + "");
								dataFlexTable.setHTML(j, dataNo++, "&nbsp;"
										+ blogContent.getBlogType() + "");
								dataFlexTable.setHTML(j, dataNo++, "&nbsp;"
										+ blogContent.getContent() + "");
								dataFlexTable.setHTML(j, dataNo++, "&nbsp;"
										+ blogContent.getUserId() + "");
								dataFlexTable.setHTML(j, dataNo++, "&nbsp;"
										+ blogContent.getDescContent() + "");
								/** 对每一行数据进行操作. */
								dataFlexTable.setWidget(j, dataNo++,
										addOperatePanel(blogContent.getId()));
							} else {
								int dataNo = 0;
								
								dataFlexTable.setHTML(j, dataNo++, "&nbsp;");
								dataFlexTable.setHTML(j, dataNo++, "&nbsp;");
								dataFlexTable.setHTML(j, dataNo++, "&nbsp;");
								dataFlexTable.setHTML(j, dataNo++, "&nbsp;");
								dataFlexTable.setHTML(j, dataNo++, "&nbsp;");
								dataFlexTable.setHTML(j, dataNo++, "&nbsp;");
								dataFlexTable.setHTML(j, dataNo++, "&nbsp;");
								dataFlexTable.setHTML(j, dataNo++, "&nbsp;");
							}
							j++;
						}
						conf.total = result.conf.total;
						pageInfo.setInnerHTML((conf.start + 1) + " - "
								+ Math.min(conf.end, conf.total) + " / " + conf.total);
					}

					public void onFailure(Throwable caught) {
					}
				});
	}

	/**
	 * 添加操作按钮.
	 */
	private static Widget addOperatePanel(final Long id) {
		HTML editButton = new HTML("修改");
		editButton.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				blogContentServiceAsync.getBlogContentById(id,
						new AsyncCallback<BlogContent>() {

							public void onSuccess(BlogContent result) {
								blogContentFormPanel.setFormValue(result);
								blogContentFormPanel.center();
								blogContentFormPanel.show();
							}

							public void onFailure(Throwable caught) {
							}
						});
			}
		});
		editButton.setStyleName("htmlOperate");

		HTML deleteButton = new HTML("删除");
		deleteButton.addClickHandler(new ClickHandler() {

			public void onClick(ClickEvent event) {
				blogContentServiceAsync.deleteBlogContentById(id,
						new AsyncCallback<Void>() {
							public void onSuccess(Void result) {
								/** 删除之后table刷新下数据. */
								blogContentFormPanel.blogContentListPanel.synTable();
							}

							public void onFailure(Throwable caught) {
							}
						});
			}
		});
		deleteButton.setStyleName("htmlOperate");
		HorizontalPanel panel = new HorizontalPanel();
		panel.setStyleName("operatePanel");
		panel.add(editButton);
		panel.add(deleteButton);
		return panel;
	}

}

 

 分页代码.

 

 

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:g="urn:import:com.google.gwt.user.client.ui">
	<g:VerticalPanel>
		<g:HTMLPanel>
			<g:Hidden ui:field="id" />
			
			<div style="text-align: right;">
				标题
				<g:TextBox ui:field="title"/>
			</div>
			<div style="text-align: right;">
				创建时间
				<g:TextBox ui:field="createDate"/>
			</div>
			<div style="text-align: right;">
				类型
				<g:TextBox ui:field="blogType"/>
			</div>
			<div style="text-align: right;">
				内容
				<g:TextBox ui:field="content"/>
			</div>
			<div style="text-align: right;">
				用户Id
				<g:TextBox ui:field="userId"/>
			</div>
			<div style="text-align: right;">
				描述
				<g:TextBox ui:field="descContent"/>
			</div>
		</g:HTMLPanel>
		<g:HTMLPanel>
			<div style="float: right;">
				<g:Button text="保存" ui:field="saveButton" />
				<g:Button text="关闭" ui:field="closeButton" />
			</div>
		</g:HTMLPanel>
	</g:VerticalPanel>
</ui:UiBinder>

 

 弹出窗口.代码

 

javaeye 在上传 zip 文件 的时候 服务器报错.

 

所以 源代码 没有上传成功. 

 

等什么时候服务器 好使用了. 在上传.

 

 

从简单的开始.慢慢的前进 这样 稳健 而 扎实.