Gwt-Ext学习笔记之中级篇

一、配置 Gwt- Ext 开发环境

b. 此教程是在基础篇和进级篇的基础上做的扩展，具体细节请参照前面教程。

二、在 gwtext项目上创建客户端模型文件

a. 创建模型文件 InfoList.java,内容如下

Java代码

publicclassInfoListimplementsEntryPoint{
publicvoidonModuleLoad(){
ExtElementmain=Ext.get("main");
PanelmainPanel=newPanel(){
{
setTitle("测试");
setHeight(300);
setWidth(500);
setFrame(true);
setHtml("<p>如果看到这些信息，说明你的环境已经配置成功了！</p>");
setStyle("margin:10px0px0px10px;");
}
};
if(main!=null){
mainPanel.setApplyTo(main.getDOM());
mainPanel.render("");
}else{
RootPanel.get().add(mainPanel);
}
}
}

public class InfoList implements EntryPoint {

	public void onModuleLoad() {

		ExtElement main = Ext.get("main");

		Panel mainPanel = new Panel() {
			{
				setTitle("测试");
				setHeight(300);
				setWidth(500);
				setFrame(true);
				setHtml("<p>如果看到这些信息，说明你的环境已经配置成功了！</p>");
				setStyle("margin: 10px 0px 0px 10px;");
			}
		};

		if (main != null) {
			mainPanel.setApplyTo(main.getDOM());
			mainPanel.render("");
		} else {
			RootPanel.get().add(mainPanel);
		}
	}

}

b. 修改 HTML宿主页面 InfoList.html文件

i. 在 InfoList.html文件中加入以下代码

Java代码

<linkhref="js/resources/css/ext-all.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"src="js/adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="js/ext-all.js"></script>

<link href="js/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>

c. 在 InfoList.gwt.xml文件中加入以下代码

Java代码

<inheritsname="com.gwtext.GwtExt"/>

<inherits name="com.gwtext.GwtExt"/>

d. 测试环境是否配置成功,运行方式参考 Gwt-Ext学习笔记之基础篇 ,效果如下图

三、定义服务

a. 在 gwtext项目上，创建名为 InfoListAction.java远程服务接口。

b. 把 PostgreSQL数据库的 JDBC包 postgresql-8.2-505.jdbc3.jar加入到项目中（其他数据库，加入相应的 JDBC包）。

c. 远程服务的实现类，在 InfoListActionImpl.java中加入如下代码：

Java代码

/**
*@author七月天
*
*/
publicclassInfoListActionImplextendsRemoteServiceServletimplements
InfoListAction{
publicString[][]queryData(){
Connectionconn=null;
String[][]allInfo=null;
try{
Class.forName("org.postgresql.Driver");
StringconnString="jdbc:postgresql://127.0.0.1:5432/gwtext";
conn=DriverManager.getConnection(connString,"julycn","julycn");
StringsqlQuery="selectusername,password,email,phonefromperson";
Statementstmt=conn.createStatement(
ResultSet.TYPE_SCROLL_INSENSITIVE,
ResultSet.CONCUR_READ_ONLY);
ResultSetrst=stmt.executeQuery(sqlQuery);
//行数
introws=0;
if(rst.last()){
rows=rst.getRow();
rst.beforeFirst();
}
//表的列数
ResultSetMetaDatarsm=rst.getMetaData();
intcolumns=rsm.getColumnCount();
//初始化输组
allInfo=newString[rows][columns];
inti=0;
while(rst.next()){
for(intj=0;j<columns;j++){
allInfo[i][j]=rst.getString(j+1);
}
i++;
}
}catch(Exceptione){
e.printStackTrace();
}finally{
if(conn!=null){
try{
conn.close();
}catch(SQLExceptione){
e.printStackTrace();
}
}
}
returnallInfo;
}
}

/**
 * @author 七月天
 *
 */
public class InfoListActionImpl extends RemoteServiceServlet implements
		InfoListAction {

	public String[][] queryData() {
		Connection conn = null;
		String[][] allInfo = null;
		try {
			Class.forName("org.postgresql.Driver");
			String connString = "jdbc:postgresql://127.0.0.1:5432/gwtext";
conn = DriverManager.getConnection(connString,"julycn","julycn");
String sqlQuery = "select username,phone from person";
			Statement stmt = conn.createStatement(
					ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
			ResultSet rst = stmt.executeQuery(sqlQuery);

			// 行数
			int rows = 0;
			if (rst.last()) {
				rows = rst.getRow();
				rst.beforeFirst();
			}

			// 表的列数
			ResultSetMetaData rsm = rst.getMetaData();
			int columns = rsm.getColumnCount();

			// 初始化输组
			allInfo = new String[rows][columns];

			int i = 0;
			while (rst.next()) {
				for (int j = 0; j < columns; j++) {
					allInfo[i][j] = rst.getString(j + 1);
				}
				i++;
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			if (conn != null) {
				try {
					conn.close();
				} catch (SQLException e) {
					e.printStackTrace();
				}
			}
		}

		return allInfo;
	}

}

四、绑定代码

a. 定义一个远程接口类 InfoListAction.java,代码如下：

Java代码

/**
*@author七月天
*
*/
publicinterfaceInfoListActionextendsRemoteService{
publicstaticfinalStringSERVICE_URI="/InfoListAction";
publicstaticclassUtil{
publicstaticInfoListActionAsyncgetInstance(){
InfoListActionAsyncinstance=(InfoListActionAsync)GWT
.create(InfoListAction.class);
ServiceDefTargettarget=(ServiceDefTarget)instance;
target.setServiceEntryPoint(GWT.getModuleBaseURL()+SERVICE_URI);
returninstance;
}
}
publicString[][]queryData();
}

/**
 * @author 七月天
 * 
 */
public interface InfoListAction extends RemoteService {

	public static final String SERVICE_URI = "/InfoListAction";

	public static class Util {

		public static InfoListActionAsync getInstance() {

			InfoListActionAsync instance = (InfoListActionAsync) GWT
					.create(InfoListAction.class);
			ServiceDefTarget target = (ServiceDefTarget) instance;
			target.setServiceEntryPoint(GWT.getModuleBaseURL() + SERVICE_URI);
			return instance;
		}
	}

	public String[][] queryData();
}

b. 定义远程异步接口类 InfoListActionAsync.java，代码如下：

Java代码

/**
*@author七月天
*
*/
publicinterfaceInfoListActionAsync{
publicvoidqueryData(AsyncCallbackcallback);
}

/**
 * @author 七月天
 * 
 */
public interface InfoListActionAsync {

	public void queryData(AsyncCallback callback);
}

c. 注册服务器代码，将下面的一行加入到 InfoList.gwt.xml中

Java代码

<servletclass="com.gwtext.julycn.server.InfoListActionImpl"path="/InfoListAction"/>

<servlet class="com.gwtext.julycn.server.InfoListActionImpl" path="/InfoListAction" />

五、执行客户端调用

a. 修改模型文件 InfoList.java,代码如下：

Java代码

/**
*@author七月天
*
*/
publicclassInfoListimplementsEntryPoint{
publicvoidonModuleLoad(){
InfoListActionAsyncaction=InfoListAction.Util.getInstance();
action.queryData(newAsyncCallback(){
publicvoidonFailure(Throwablecaught){
//TODOAuto-generatedmethodstub
}
publicvoidonSuccess(Objectresult){
Panelpanel=newPanel();
panel.setBorder(false);
panel.setPaddings(15);
RecordDefrecordDef=newRecordDef(newFieldDef[]{
newStringFieldDef("username"),
newStringFieldDef("password"),
newStringFieldDef("email"),
newStringFieldDef("phone")});
finalGridPanelgrid=newGridPanel();
String[][]data=(String[][])result;
MemoryProxyproxy=newMemoryProxy(data);
ArrayReaderreader=newArrayReader(recordDef);
Storestore=newStore(proxy,reader);
store.load();
grid.setStore(store);
ColumnConfig[]columns=newColumnConfig[]{
newColumnConfig("用户名","username",160,true,null,"username"),
newColumnConfig("密码","password",45),
newColumnConfig("邮箱","email",65),
newColumnConfig("电话","phone",65)};
ColumnModelcolumnModel=newColumnModel(columns);
grid.setColumnModel(columnModel);
grid.setFrame(true);
grid.setStripeRows(true);
grid.setAutoExpandColumn("username");
grid.setHeight(350);
grid.setWidth(600);
grid.setTitle("用户信息");
ToolbarbottomToolbar=newToolbar();
bottomToolbar.addFill();
bottomToolbar.addButton(newToolbarButton("清除排序",
newButtonListenerAdapter(){
publicvoidonClick(Buttonbutton,EventObjecte){
grid.clearSortState(true);
}
}));
grid.setBottomToolbar(bottomToolbar);
panel.add(grid);
RootPanel.get().add(panel);
}
});
}
}

/**
 * @author 七月天
 *
 */
public class InfoList implements EntryPoint {

	public void onModuleLoad() {
		InfoListActionAsync action = InfoListAction.Util.getInstance();
		action.queryData(new AsyncCallback() {

			public void onFailure(Throwable caught) {
				// TODO Auto-generated method stub

			}

			public void onSuccess(Object result) {
				Panel panel = new Panel();
				panel.setBorder(false);
				panel.setPaddings(15);

				RecordDef recordDef = new RecordDef(new FieldDef[] {
						new StringFieldDef("username"),new StringFieldDef("password"),new StringFieldDef("email"),new StringFieldDef("phone") });

				final GridPanel grid = new GridPanel();

				String[][] data = (String[][]) result;

				MemoryProxy proxy = new MemoryProxy(data);

				ArrayReader reader = new ArrayReader(recordDef);
				Store store = new Store(proxy,reader);
				store.load();
				grid.setStore(store);

				ColumnConfig[] columns = new ColumnConfig[] {
new ColumnConfig("用户名","username",160,true,null,"username"),new ColumnConfig("密码","password",45),new ColumnConfig("邮箱","email",65),new ColumnConfig("电话","phone",65) };

				ColumnModel columnModel = new ColumnModel(columns);
				grid.setColumnModel(columnModel);

				grid.setFrame(true);
				grid.setStripeRows(true);
				grid.setAutoExpandColumn("username");

				grid.setHeight(350);
				grid.setWidth(600);
				grid.setTitle("用户信息");

				Toolbar bottomToolbar = new Toolbar();
				bottomToolbar.addFill();
				bottomToolbar.addButton(new ToolbarButton("清除排序",new ButtonListenerAdapter() {
public void onClick(Button button,EventObject e) {
								grid.clearSortState(true);
							}
						}));
				grid.setBottomToolbar(bottomToolbar);

				panel.add(grid);

				RootPanel.get().add(panel);

			}

		});
	}
}

b. AsyncCallback 接口定义了两个方法： onSuccess(Object result) 和 onFailure(Throwable caught)。必须定义一个可以实现这两个方法的类。当执行远程调用时，模型类的实例并将其传递给异步服务方法。最后，服务器端资源完成，然后调用代码中两个方法之一。成功方法的参数是接口和实现中的调用的返回值。

六、展示效果

a. 凌晨1点了，收工睡觉；先看看效果吧

Gwt-Ext学习笔记之中级篇

相关推荐