您的位置：首页 > 其它

Gwt-Ext学习笔记之中

2009-02-27 16:41 471 查看
转帖:http://www.javaeye.com/topic/192772



一、

配置
Gwt-Ext开发环境

a.

请参照
Gwt-Ext学习笔记之基础篇

b.

此教程是在
基础篇

和
进级篇

的基础上做的扩展，具体细节请参照前面教程。

二、

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

a.

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



Java代码

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);

}

}



} 

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代码

<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> 

<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代码

<inherits name="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 七月天

*

*/

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,password,email,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;

}



} 

/**
 * @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,password,email,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 七月天

*

*/

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();

} 

/**
 * @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 七月天

*

*/

public interface InfoListActionAsync {



public void queryData(AsyncCallback callback);

} 

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

	public void queryData(AsyncCallback callback);
}




c.

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

Java代码

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

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



五、

执行客户端调用

a.

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

Java代码

/**

* @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);



}



});

}

} 

/**
 * @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点了，收工睡觉；先看看效果吧

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航