一、 配置 Gwt-Ext开发环境
a. 请参照 Gwt-Ext学习笔记之基础篇
b. 此教程是在 基础篇 和 进级篇 的基础上做的扩展,具体细节请参照前面教程。
二、 在 gwtext项目上创建客户端模型文件
a. 创建模型文件 InfoList.java,内容如下
Java代码 复制代码
1. public class InfoList implements EntryPoint {
2.
3. public void onModuleLoad() {
4.
5. ExtElement main = Ext.get("main");
6.
7. Panel mainPanel = new Panel() {
8. {
9. setTitle("测试");
10. setHeight(300);
11. setWidth(500);
12. setFrame(true);
13. setHtml("<p>如果看到这些信息,说明你的环境已经配置成功了!</p>");
14. setStyle("margin: 10px 0px 0px 10px;");
15. }
16. };
17.
18. if (main != null) {
19. mainPanel.setApplyTo(main.getDOM());
20. mainPanel.render("");
21. } else {
22. RootPanel.get().add(mainPanel);
23. }
24. }
25.
26. }
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代码 复制代码
1. <link href="js/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>
2. <script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
3. <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代码 复制代码
1. <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代码 复制代码
1. /**
2. * @author 七月天
3. *
4. */
5. public class InfoListActionImpl extends RemoteServiceServlet implements
6. InfoListAction {
7.
8. public String[][] queryData() {
9. Connection conn = null;
10. String[][] allInfo = null;
11. try {
12. Class.forName("org.postgresql.Driver");
13. String connString = "jdbc:postgresql://127.0.0.1:5432/gwtext";
14. conn = DriverManager.getConnection(connString, "julycn", "julycn");
15. String sqlQuery = "select username,password,email,phone from person";
16. Statement stmt = conn.createStatement(
17. ResultSet.TYPE_SCROLL_INSENSITIVE,
18. ResultSet.CONCUR_READ_ONLY);
19. ResultSet rst = stmt.executeQuery(sqlQuery);
20.
21. // 行数
22. int rows = 0;
23. if (rst.last()) {
24. rows = rst.getRow();
25. rst.beforeFirst();
26. }
27.
28. // 表的列数
29. ResultSetMetaData rsm = rst.getMetaData();
30. int columns = rsm.getColumnCount();
31.
32. // 初始化输组
33. allInfo = new String[rows][columns];
34.
35. int i = 0;
36. while (rst.next()) {
37. for (int j = 0; j < columns; j++) {
38. allInfo[i][j] = rst.getString(j + 1);
39. }
40. i++;
41. }
42. } catch (Exception e) {
43. e.printStackTrace();
44. } finally {
45. if (conn != null) {
46. try {
47. conn.close();
48. } catch (SQLException e) {
49. e.printStackTrace();
50. }
51. }
52. }
53.
54. return allInfo;
55. }
56.
57. }
/**
* @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代码 复制代码
1. /**
2. * @author 七月天
3. *
4. */
5. public interface InfoListAction extends RemoteService {
6.
7. public static final String SERVICE_URI = "/InfoListAction";
8.
9. public static class Util {
10.
11. public static InfoListActionAsync getInstance() {
12.
13. InfoListActionAsync instance = (InfoListActionAsync) GWT
14. .create(InfoListAction.class);
15. ServiceDefTarget target = (ServiceDefTarget) instance;
16. target.setServiceEntryPoint(GWT.getModuleBaseURL() + SERVICE_URI);
17. return instance;
18. }
19. }
20.
21. public String[][] queryData();
22. }
/**
* @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代码 复制代码
1. /**
2. * @author 七月天
3. *
4. */
5. public interface InfoListActionAsync {
6.
7. public void queryData(AsyncCallback callback);
8. }
/**
* @author 七月天
*
*/
public interface InfoListActionAsync {
public void queryData(AsyncCallback callback);
}
c. 注册服务器代码,将下面的一行加入到 InfoList.gwt.xml中
Java代码 复制代码
1. <servlet class="com.gwtext.julycn.server.InfoListActionImpl" path="/InfoListAction" />
<servlet class="com.gwtext.julycn.server.InfoListActionImpl" path="/InfoListAction" />
五、 执行客户端调用
a. 修改模型文件 InfoList.java,代码如下:
Java代码 复制代码
1. /**
2. * @author 七月天
3. *
4. */
5. public class InfoList implements EntryPoint {
6.
7. public void onModuleLoad() {
8. InfoListActionAsync action = InfoListAction.Util.getInstance();
9. action.queryData(new AsyncCallback() {
10.
11. public void onFailure(Throwable caught) {
12. // TODO Auto-generated method stub
13.
14. }
15.
16. public void onSuccess(Object result) {
17. Panel panel = new Panel();
18. panel.setBorder(false);
19. panel.setPaddings(15);
20.
21. RecordDef recordDef = new RecordDef(new FieldDef[] {
22. new StringFieldDef("username"),
23. new StringFieldDef("password"),
24. new StringFieldDef("email"),
25. new StringFieldDef("phone") });
26.
27. final GridPanel grid = new GridPanel();
28.
29. String[][] data = (String[][]) result;
30.
31. MemoryProxy proxy = new MemoryProxy(data);
32.
33. ArrayReader reader = new ArrayReader(recordDef);
34. Store store = new Store(proxy, reader);
35. store.load();
36. grid.setStore(store);
37.
38. ColumnConfig[] columns = new ColumnConfig[] {
39. new ColumnConfig("用户名", "username", 160, true, null,"username"),
40. new ColumnConfig("密码", "password", 45),
41. new ColumnConfig("邮箱", "email", 65),
42. new ColumnConfig("电话", "phone", 65) };
43.
44. ColumnModel columnModel = new ColumnModel(columns);
45. grid.setColumnModel(columnModel);
46.
47. grid.setFrame(true);
48. grid.setStripeRows(true);
49. grid.setAutoExpandColumn("username");
50.
51. grid.setHeight(350);
52. grid.setWidth(600);
53. grid.setTitle("用户信息");
54.
55. Toolbar bottomToolbar = new Toolbar();
56. bottomToolbar.addFill();
57. bottomToolbar.addButton(new ToolbarButton("清除排序",
58. new ButtonListenerAdapter() {
59. public void onClick(Button button, EventObject e) {
60. grid.clearSortState(true);
61. }
62. }));
63. grid.setBottomToolbar(bottomToolbar);
64.
65. panel.add(grid);
66.
67. RootPanel.get().add(panel);
68.
69. }
70.
71. });
72. }
73. }
/**
* @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的基础、中级和进阶学习资料,适合想要深入理解和应用Gwt-Ext的开发者。 在"基础篇"中,你将学习到以下知识点: 1. **GWT概述**:Google Web Toolkit是一个用于构建高性能、跨...
本教程“GWT-EXT学习教程(中级)”旨在帮助开发者掌握如何使用GWT和Apache Geronimo构建启用Ajax的Web应用,特别是对于有一定Java servlet基础的开发者来说,这是一个很好的学习资源。教程分为两部分,第一部分主要...
" Gwt-Ext学习笔记之基础篇.doc "、" Gwt-Ext学习笔记之中级篇.doc "、" Gwt-Ext学习笔记之进级篇.doc "这三份文档,按照从基础到进阶的顺序,系统地介绍了EXT-GWT的使用技巧和实践案例。基础篇可能涵盖EXT-GWT的...
接下来,“Gwt-Ext基础-中级-进阶”这部分教程可能涵盖了从基础到高级的GWT和EXT-GWT知识。基础部分可能涉及GWT的基本概念、环境搭建、Hello World程序的创建以及基本组件的使用;中级阶段可能涵盖事件处理、数据...
EXT-GWT2.0.1+API+DOC Gwt-Ext基础-中级-进阶GWT中文教程
另外,你将学习到如何利用GWT的Ext GWT(GXT)或SmartGWT等第三方库增强应用的功能,以及如何创建自定义的GWT模块和库。最后,高级教程可能会讨论GWT与HTML5和CSS3的集成,以充分利用现代浏览器的新特性。 总的来说...
“gwtext-2.0.5.zip”可能是一个GWT(Google Web Toolkit)的扩展库,专门用于在GWT应用程序中实现文本搜索和处理。GWT是Google提供的一款工具,允许使用Java编写客户端Web应用,然后自动编译成JavaScript。 总的来...
非常好的一本初级到中级的GXT书。英文原版。有中文版的请把它传上啊