Gwt-Ext学习笔记之中

最新推荐文章于 2024-04-24 22:51:49 发布
最新推荐文章于 2024-04-24 22:51:49 发布
阅读量1k 收藏
点赞数
分类专栏： J2EE 文章标签： postgresql string stylesheet java email jdbc

转帖:http://www.javaeye.com/topic/192772

 

一、 配置 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点了，收工睡觉；先看看效果吧

 

youjianbo_han_87
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Gwt-ext学习笔记之基础篇
06-03
Gwt-ext学习笔记之基础篇、安装、配置、例子。
Gwt-Ext学习笔记之中级篇
LightSun----让成功成为可能!
12-18 1123
一、配置Gwt-Ext开发环境a.      请参照Gwt-Ext学习笔记之基础篇b.     此教程是在基础篇和进级篇的基础上做的扩展，具体细节请参照前面教程。二、在gwtext项目上创建客户端模型文件a.      创建模型文件InfoList.java,
Gridx入门
web开发自学
02-15 186
原创英文版链接：https://github.com/evanhw/gridx/wiki/Introduction-to-Gridx 虽然同样都是基于Dojo store， 但与DataGrid/EnhancedGrid相比，Gridx有一套完全不同的架构。它有以下特点： Gridx采用了一套与UI无关的内核来处理所有的表格数据的逻辑操作。 Gridx采用了一套灵活的模块化系统，它与基于plug...
Extjs grid 中 更改store数据
zhangkangen的专栏
10-19 8048
Extjs grid中,有时候需要直接更改grid中显示数据 会出现store数据更改后,grid中显示还是原有数据, 解决办法: 更改一行中某个字段的值. store.getAt(rowIndex).set(“fieldName”,value); 更改store多列数据. grid.getView().refresh(); 同样可以解决 1. 中的问题.
从零开始学_JavaScript_系列（十一）——dojo(5)（GRID表格进阶：更新值，name，重置表结构/缓存，重绘表格）...
weixin_33713707的博客
04-22 157
如果没接触过dojo，或者是dojo的gridx控件，请查看我之前几篇博客，写的已经非常详细了 最重要的，更新grid中指定单元格的值，请拉到最后看（59） 至此，grid表格日常所需的常见功能已经基本完结。如果有其他功能需求，请评论提出。 （54）获得某列的name属性 代码： grid.column(2).name(); 效果： ①获得第2...
Gwt-Ext学习笔记之进级篇
10-14
GWT-Ext 是基于 Google Web Toolkit（GWT）和 ExtJs 的功能强大的网页开发控件库。它非常适用于进行纯 Java 语言的富 Internet 应用的快速开发。本系列文章将详细讲解 GWT-Ext 的基本结构和功能特点，并通过代码示例...
Gwt-ext学习笔记
12-25
Gwt-ext学习笔记Gwt-ext学习笔记.pdf
（转载）GWT -EXT学习笔记-中级
03-27
该文档是关于在eclipse下进行GWT开发的一个教程文档，与网上其他教程有所区别，此文档为中级篇，建议用户先下载基础篇浏览过后再决定是否下载另外两篇~~
最好的gwt-ext学习资料
11-17
最好的gwt-ext学习资料，适合初学者。
ubuntu用户与用户组管理
CHNIM的博客
04-19 968
执行这个命令会永久性地从系统中移除指定的用户组，因此在执行此操作前，请确保不再有其他用户依赖于此组，或已经将相关的用户转移到了其他合适的组中。请注意，虽然赋予了sudo权限的新用户在执行sudo命令时能暂时获取root级别的权限，但他们在日常操作中并不是真正的root用户。在执行这些命令前，请确保你有正确的权限，并且确认没有重要的数据会被误删。这将在系统中新增一个名为“developers”的用户组，之后可以将用户添加到这个组中，以便共享相应的组权限。如果要同时删除用户的主目录及其中的所有文件，使用。
string模拟实现
m0_73969414的博客
04-23 1215
c++中string的模拟实现，面试必会知识点
【1524】java投票管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
qq_251836457的博客
04-18 946
2、开发环境为TOMCAT7.0,Myeclipse8.5开发，数据库为Mysql5.0，使用java语言开发。(5)投票选项管理：对投票选项信息进行添加、删除、修改和查看。(6)投票记录管理：对投票记录信息进行添加、删除、修改和查看。(1)管理员管理：对管理员信息进行添加、删除、修改和查看。(2)用户管理：对用户信息进行添加、删除、修改和查看。(3)公告管理：对公告信息进行添加、删除、修改和查看。(4)投票管理：对投票信息进行添加、删除、修改和查看。4）投票浏览查看、查看投票、投票记录。
javaweb-SpringBoot基础
kussm_的博客
04-20 1147
Spring的官网(Spring的简介：Spring makes Java simple。Spring Boot 可以帮助我们非常快速的构建应用程序、简化开发、提高效率。创建一个子包controller。
MSE实现全链路灰度实践
云计算、数据库、大数据、深度学习、NLP、Python
04-24 134
待更新。
Web前端 Javascript笔记5
cycyzh的博客
04-18 1015
script>'console.log("哈哈哈佳人们好困")'}, 3000)​let t1 = setTimeout('console.log("你们看到这句话的时候我早已身价百万！！")', 4000)​</script>3秒，四秒后出来的东西，出现前会返回计时器编号。
2.8 构建gradle环境
蚊者逆袭的博客
04-18 2292
Gradle是一种现代化的构建工具，用于自动化地构建、测试和部署软件项目。它是一种基于JVM（Java虚拟机）的构建工具，最初是为了解决Apache Ant和Apache Maven等传统构建工具的一些限制而开发的。
大数据Hive中的UDF：自定义数据处理的利器（上）
孙中明
04-21 1046
在大数据技术栈中，扮演着数据仓库的关键角色，它提供了丰富的数据操作功能，并通过类似于SQL的HiveQL语言简化了对Hadoop数据的处理。然而，内置函数库虽强大，却未必能满足所有特定的业务逻辑需求。此时，用户定义函数（UDF）的重要性便凸显出来。Hive UDF）是Hive中的一种扩展机制，它允许用户通过编写自定义的Java代码来扩展Hive的功能，实现Hive内置函数无法提供的一些特定数据处理逻辑。在深入探讨Hive UDF的实现之前，让我们首先确保开发环境的准备妥当。对于UDF的编写，推荐使用。
Java | 冒泡排序算法实现
最新发布
yingzix688的博客
04-24 519
题目描述 编写一个Java程序，实现冒泡排序算法。程序需要能够接收一个整型数组作为输入，并输出排序后的数组。 冒泡排序是一种简单的排序算法，它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
gwt-maven-plugin 的官方文档
03-14
很抱歉，我无法提供关于"gwt-maven-plugin"的官方文档介绍，因为我无法浏览互联网。但是我可以给你一些关于"gwt-maven-plugin"的基本信息。 "gwt-maven-plugin"是一个用于将Google Web Toolkit（GWT）与Maven构建...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值