Google Web Toolkit 和 Google App Engine 综合教程 启蒙篇
2009年4月15日 由 KyleWu留言 »
什么是Google Web Toolkit 和 Google App Engine?
Google Web Toolkit : 如今，编写网络应用程序是一个单调乏味且易于出错的过程。开发人员可能要花费 90% 的时间来处理浏览器行话。此外，构建、重复使用以及维护大量 JavaScript 代码库和 AJAX 组件可能困难且不可靠。Google Web 工具包 (GWT) 通过允许开发人员用 Java 编程语言快速构建和维护复杂但高性能的 JavaScript 前端应用程序来减轻该负担。
Google App Engine : Google App Engine 使您可以在支持 Google 应用程序的同一可扩展系统上构建网络应用程序。
上面是直接摘自Google Web Toolkit 和 Google App Engine 的主页。总的来说，前者提供一个用Java编写Javascript的工具，后者提供一个网络平台，用户可以在上面搭建自己的应用。
为什么要使用Google Web Toolkit 和 Google App Engine?
首先，如Google一贯作风，两者都是免费的，是code.google.com下的项目。
其次，Google App Engine开始支持Java，这样，两个工具在一起使用更加方便了。
当然，熟悉了Google Web Toolkit有助于开发JavaScript，了解Google App Engine可以在网上搭建自己的应用。
最后，学习新技术是提升自己的途径，能够开阔自己的眼界，锻炼自己的思想。
如何获得Google Web Toolkit 和 Google App Engine?
我推荐最简单的方法就是去下载Eclipse插件。具体的方法请Google或者baidu，有空的话我会再写一篇介绍的文章。
如何使用Google Web Toolkit 和 Google App Engine?
Google Web Toolkit 和 Google App Engine 都有各自的教程，喜欢看的可以看一下。当然在这里就不是仅仅翻译一下教程了，我将带领大家来构建一个Google Web Toolkit 和 Google App Engine 整合的应用。
最近我总是有一些想法或者创意，可总是没时间实现，这样时间一长，就忘记了，所以我想写一个列
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
，这样，每当我有新的想法，那么我就可以记录下来，以后就可以回顾，看看自己都想了什么都做了什么
上面就是我问什么做这个应用的原因，东西十分的简单，其实主要还是希望能够与大家一同入门，熟悉Google Web Toolkit 和 Google App Engine 的开发。
好了废话不多说了，开始吧，这个教程最终的结果见这里。
Google Web Toolkit 和 Google App Engine 综合教程 界面篇
2009年4月15日 由 KyleWu留言 »
诸位还不清楚Google Web Toolkit 和 Google App Engine是什么的同学，请移步这里，看我的综合教程 启蒙篇。
请装好Eclipse的插件，后面的程序都是以插件为准，用命令行的同学请自己注意。
创建Eclipse工程
Google Web Toolkit 部分
打开Kylewuidea.java，里面已经写好了一个事例程序，有兴趣的同学可以先熟悉一下。接下来删除这个文件里多余的代码，仅保留下面这些。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package net.kylewu.idea.client;
import com.google.gwt.core.client.EntryPoint;
/**
* Entry point classes define onModuleLoad().
*/
public class Kylewuidea implements EntryPoint {
/**
* This is the entry point method.
*/
public void onModuleLoad() {
}
}
下面我们就要往里面填东西了，同学们来看一下页面的结构，一个表格，包括了IdeaId，Idea主题，Idea详情，Idea完成进度及完成时间，按钮，备注。最后有一个添加Idea按钮，用来加入Idea。结构清晰了，就来写代码吧。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
package net.kylewu.idea.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.ListBox;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextArea;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
/**
* Entry point classes define onModuleLoad().
*/
public class Kylewuidea implements EntryPoint {
private FlexTable table = new FlexTable();
/**
* This is the entry point method.
*/
public void onModuleLoad() {
// Initial all items.
init();
// Add table to html page.
RootPanel.get("idea").add(createBasePanel());
// Initial table.
importFromDatabase();
}
private void init() {
// TODO Initial table structure.
// TODO Set table attribute.
}
private void importFromDatabase() {
// TODO Add initial data to table or get from database.
}
private Panel createBasePanel() {
// Base Panel of this project.
VerticalPanel mainPanel = new VerticalPanel();
// TODO Add click handler to add button.
// TODO Assemble the panel.
return mainPanel;
}
}
onModuleLoad()方法就是程序的入口，这里我们写了一下初始化的代码。我在这里是直接写成方法了，这样看入口感觉清爽一些。
写Google Web Toolkit的代码与写普通Java界面很相似，在Panel里加入一些组件。这里要注意，RootPanel.get()方法得到的就是HTML页面中的某个元素，也就是我们的最上级容器。在这里我get名为idea的panel，那么它到底在什么地方呢？
打开war/Kylewuidea.html，删除body内除iframe的所有内容，改为如下代码。
1
Kyle Wu's Idea
看到了么，我们将一个div命名为idea，这样我们Project都会在这个div标签下，当然，你也可以get到其他的元素。
到这里页面中还没有任何元素，下面任务很简单了。点击添加Idea的按钮，弹出一个对话框，可以填入主题和详情等。当我们点击添加Idea的时候，一条新的Idea将显示在表格中。对于每条idea，都需要更新或者删除，功能应该不难了吧，同学们可以自己写写看。
Google Web Toolkit 的任务差不多了，让我们看看最后的代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
package net.kylewu.idea.client;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import net.kylewu.idea.client.service.DBWorkerService;
import net.kylewu.idea.client.service.DBWorkerServiceAsync;
import com.google.gwt.core.client.EntryPoint;
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.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.ListBox;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextArea;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
/**
* Entry point classes define onModuleLoad().
*/
public class Kylewuidea implements EntryPoint {
private final int COL_ID = 0;
private final int COL_SUBJECT = 1;
private final int COL_DETAIL = 2;
private final int COL_PROGRESS = 3;
private final int COL_TIME = 4;
private final int COL_OPERATION = 5;
private FlexTable table = new FlexTable();
private ArrayList subjectList = new ArrayList();
private Map mapStrToInt = new HashMap();
private Map mapIntToStr = new HashMap();
/**
* This is the entry point method.
*/
public void onModuleLoad() {
// Initial all items.
init();
// Add table to html page.
RootPanel.get("ideastorm").add(createBasePanel());
// Initial table.
importFromDatabase();
}
private void init() {
mapStrToInt.put("0%", 0);
mapStrToInt.put("25%", 1);
mapStrToInt.put("50%", 2);
mapStrToInt.put("75%", 3);
mapStrToInt.put("100%", 4);
mapIntToStr.put(0, "0%");
mapIntToStr.put(1, "25%");
mapIntToStr.put(2, "50%");
mapIntToStr.put(3, "75");
mapIntToStr.put(4, "100%");
// Initial table structure.
table.setText(0, COL_ID, "ID");
table.setText(0, COL_SUBJECT, "Subject");
table.setText(0, COL_DETAIL, "Detail");
table.setText(0, COL_PROGRESS, "Progress");
table.setText(0, COL_OPERATION, "Operation");
table.setText(0, COL_TIME, "Time");
// Set table attribute.
table.setCellPadding(5);
table.getColumnFormatter().setWidth(0, "10");
table.getColumnFormatter().setWidth(1, "200");
table.getColumnFormatter().setWidth(2, "400");
table.getColumnFormatter().setWidth(3, "150");
table.getColumnFormatter().setWidth(4, "100");
}
/**
* Initial table data
*/
private void importFromDatabase() {
// Get exist ideas from db
}
/**
* Create base panel
*
* @return
*/
private Panel createBasePanel() {
// Base Panel of this project.
VerticalPanel mainPanel = new VerticalPanel();
Button btnAdd = new Button("Add Idea");
// Add click handler to add button.
btnAdd.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// Show Add Idea Dialog
showIdeaEditDialog(true, -1);
}
});
// Assemble the panel.
mainPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
mainPanel.add(table);
mainPanel.add(btnAdd);
return mainPanel;
}
/**
* Show Add Idea Dialog
*/
private void showIdeaEditDialog(final boolean isNew, final int index) {
// Initial Add Idea Dialog.
final DialogBox dialog = new DialogBox();
final TextBox txtBoxSubject = new TextBox();
final TextArea txtAreaDetail = new TextArea();
final ListBox listBox = new ListBox();
VerticalPanel dialogPanel = new VerticalPanel();
HorizontalPanel itemPanel = new HorizontalPanel();
Button btnInsert = new Button();
Button btnClose = new Button("Close");
// Set attribute.
dialog.setText("Input your idea");
dialog.setAnimationEnabled(true);
txtAreaDetail.setSize("300", "380");
listBox.clear();
listBox.addItem("0%");
listBox.addItem("25%");
listBox.addItem("50%");
listBox.addItem("75%");
listBox.addItem("100%");
listBox.setVisibleItemCount(5);
if (isNew) {
btnInsert.setText("Insert");
txtBoxSubject.setText("Input your indea");
listBox.setSelectedIndex(0);
} else {
btnInsert.setText("Update");
txtBoxSubject.setText(table.getText(index, COL_SUBJECT));
txtAreaDetail.setText(table.getText(index, COL_DETAIL));
listBox.setSelectedIndex(mapStrToInt.get(table.getText(index,
COL_PROGRESS)));
if (table.getText(index, COL_PROGRESS).compareTo("100%") == 0 )
listBox.setEnabled(false);
}
// Add ClickHandler to Insert button
btnInsert.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// Check empty
if (txtBoxSubject.getText().length() == 0
|| txtAreaDetail.getText().length() == 0)
return;
// Check exist
if (subjectList.contains(txtBoxSubject.getText()) == true
&& isNew) {
return;
}
insertIdeaIntoTable(index, "", txtBoxSubject.getText(), txtAreaDetail.getText(),
mapIntToStr.get(listBox.getSelectedIndex()), "");
dialog.hide();
}
});
// Add ClickHandler to Close button
btnClose.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
dialog.hide();
}
});
// Assemble dialog panel.
itemPanel.setWidth("100%");
itemPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
itemPanel.add(listBox);
itemPanel.add(btnInsert);
itemPanel.add(btnClose);
dialogPanel.add(txtBoxSubject);
dialogPanel.add(txtAreaDetail);
dialogPanel.add(itemPanel);
// Associate the dialog with the panel.
dialog.setWidget(dialogPanel);
// Show dialog.
dialog.center();
}
private void insertIdeaIntoTable(int index, final String id,
final String subject, String detail, String progress, String date) {
//
if (index == -1) {
index = table.getRowCount();
subjectList.add(subject);
} else {
subjectList.set(index - 1, subject);
}
HorizontalPanel panel = new HorizontalPanel();
Button btnUpdate = new Button("Update");
Button btnRemove = new Button("Remove");
// Add handler to buttons
btnUpdate.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
int i = subjectList.indexOf(subject);
showIdeaEditDialog(false, i + 1);
}
});
btnRemove.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
// Remove
}
});
panel.add(btnUpdate);
panel.add(btnRemove);
table.setWidget(index, COL_OPERATION, panel);
table.setText(index, COL_ID, id);
table.setText(index, COL_SUBJECT, subject);
table.setText(index, COL_DETAIL, detail);
table.setText(index, COL_PROGRESS, progress);
if (progress.compareTo("100%") == 0 && table.getText(index, COL_TIME).length() == 0) {
table.setText(index, COL_TIME, date);
}
}
}
好奇的同学肯定会问，光写Google Web Toolkit 的东西了，怎么不见Google App Engine 呢？呵呵，不要着急，休息，休息一下：） 在下一篇里将介绍Google App Engine 在我们这个应用里如何帮助诸位同学把idea存储起来。
Google Web Toolkit 和 Google App Engine 综合教程 存储篇
2009年4月17日 由 KyleWu留言 »
前面已经向同学们简要介绍了Google Web Toolkit 和 Google App Engine ，并且做出了一个初步的界面。在这篇教程里，我们将一起学习如何使用Google App Engine 的数据库。
简单介绍Google App Engine 的数据库
Google App Engine 的数据库提供了健壮的可扩展的分布式数据存储，我们不必考虑连接哪一个数据库，也不需要配置连接参数。我们需要做的是调用简单的API来进行各种操作。
Google App Engine 的数据库提供了两套API ：
标准
excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载
API和底层API。标准API是与App Engine解耦的，所以使用标准API你可以很方便的将你的应用移植到其他环境中；而是用底层API，你可以让你的应用拥有更好的性能。
Google App Engine 支持两种连接数据库的标准： Java Data Objects (JDO) 和 Java Persistence API (JPA)。从Google App Engine 的网站中可以看到，它们都是由DataNucleus Access Platform提供的，不过我没有细看，有兴趣的同学可以自己点进去学习。
什么是JDO ?
Java Data Objects (JDO) 是存储对象的标准接口。使用了JDO的应用程序不需要关心数据库类型，不论是关系数据库，层次数据库还是对象数据库，这样在我们更换数据源的时候会非常的方便。
要在Google App Engine项目中支持JDO，需要进行配置，不过Eclipse的插件已经帮我们做好了，再次请有兴趣的同学移步这里仔细学习。
Java Persistence API (JPA) 和JDO的作用相似，我现在使用的JDO，所以就不多做介绍了，链接补上。
建立数据库的POJO类
前面进行了简单介绍，下面来实际操作一下。新建一个net.kylewu.idea.db.dataobject.Idea类。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
package net.kylewu.idea.server;
import java.io.Serializable;
import javax.jdo.annotations.IdGeneratorStrategy;
import javax.jdo.annotations.IdentityType;
import javax.jdo.annotations.PersistenceCapable;
import javax.jdo.annotations.Persistent;
import javax.jdo.annotations.PrimaryKey;
@PersistenceCapable(identityType = IdentityType.APPLICATION)
public class Idea implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1083036616443527590L;
@PrimaryKey
@Persistent(valueStrategy = IdGeneratorStrategy.IDENTITY)
private Long id;
@Persistent
private String subject;
@Persistent
private String detail;
@Persistent
private String progress;
@Persistent
private String date;
public Idea(Long id, String subject, String detail, String progress,
String date) {
super();
this.id = id;
this.subject = subject;
this.detail = detail;
this.progress = progress;
this.date = date;
}
public Idea(String subject, String detail, String progress, String date) {
this.subject = subject;
this.detail = detail;
this.progress = progress;
this.date = date;
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getSubject() {
return subject;
}
public void setSubject(String subject) {
this.subject = subject;
}
public String getDetail() {
return detail;
}
public void setDetail(String detail) {
this.detail = detail;
}
public String getProgress() {
return progress;
}
public void setProgress(String progress) {
this.progress = progress;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public String toString(){
return String.valueOf(id)+"|"+subject+"|"+detail+"|"+progress+"|"+date;
}
}
JDO使用annotations来表示数据如何在数据库中存储。这里我们把id设置为主键。
与数据库交互需要用到PersistenceManager对象，它是由PersistenceManagerFactory中获得的，为了免去重复创建factory的开销，使用singleton模式来实现这个类。Google App Engine 上提供了一个很好的例子，我直接拿来用了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package net.kylewu.idea.db;
import javax.jdo.JDOHelper;
import javax.jdo.PersistenceManagerFactory;
public final class PMF {
private static final PersistenceManagerFactory pmfInstance = JDOHelper
.getPersistenceManagerFactory("transactions-optional");
private PMF() {
}
public static PersistenceManagerFactory get() {
return pmfInstance;
}
}
好了，这样就可以get到PersistenceManager对象了，那么该如何存储查询对象呢？代码很简单。
1
2
3
4
5
Idea idea = new Idea ("Kylewu Idea", "This is Kyle Wu's idea.", "75%", "");
PersistenceManager pm = PMF.get().getPersistenceManager();
pm.makePersistent(idea);
String query = "select from " + Idea.class.getName();
(List) list = pm.newQuery(query).execute();
同学们要问了，我们怎么让他跑起来呢？这个涉及到Google Web Toolkit 与服务器端的交互了，下一篇教程将详细介绍。
Google Web Toolkit 和 Google App Engine 综合教程 交互篇
2009年4月23日 由 KyleWu留言 »
前面几篇教程已经把Google Web Toolkit 和 Google App Engine 两方面的代码完成了很大部分，这篇教程将让Google Web Toolkit 的客户端代码与 Google App Engine 的服务器端代码联合起来，实现客户端和服务器端的交互。
Google Web Toolkit 如何与服务器交互？
Google Web Toolkit 的程序最终会以JavaScript代码的形式在用户的浏览器上运行。所以，如果要与服务器交互，要使用JavaScript支持的方法。Google Web Toolkit 为我们提供了3种方法。
远程过程调用 (Remote Procedure Calls, GWT RPC)
如果项目的服务器端使用Java，并且为服务器端的操作都使用了各种接口，那么 GWT RPC是最好的选择。因为我们使用 Google App Engine 作为服务器端，使用Java编码，所以接下来将使用 GWT RPC来完成我们接下来的教程。
更详细的有关 Remote Procedure Calls 的介绍，请看这里。
HTTP 取回 JSON
如果项目的服务器端没有使用Java，亦或是已经使用了JSON 或 XML，那么就可以通过HTTP来取得JSON来实现与服务器端的交互。
更详细的有关 JSON 的介绍，请看这里。
利用 JSONP
协议
离婚协议模板下载合伙人协议 下载渠道分销协议免费下载敬业协议下载授课协议下载
如果你对 mashup 很感兴趣，那么一定不能错过 Google Web Toolkit 提供的这种方法。
更详细的有关 JSONP 的介绍，请看这里。
定义 Service Interface
RPC Service 要由一个 继承自 RemoteService 的接口来定义。这里我们在 net.kylewu.myideastorm.client.service 包下面新建一个名为 DBWorkerService 的接口。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
package net.kylewu.idea.client.service;
import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;
/**
* * The client side stub for the RPC service.
* */
@RemoteServiceRelativePath("myidea")
public interface DBWorkerService extends RemoteService {
// Remove one idea
Boolean delete(Long id);
String getIdeaBySubject(String subject);
// Read from db
String[] getIdeas();
// Add a new idea
String save(String subject, String detail, String progress);
// Update one idea
String update(String id, String subject, String detail, String progress);
}
肯定有人注意到了，这里方法返回的值都是String，为什么不使用我们之前定义过的Idea呢。这里我只能说很抱歉了，我测试过返回Idea对象，但是在运行时会出现 “did you forget to inherit a required module?”的错误，搜索了很久也没有搞定，希望知道的同学联系我，谢谢。
定义服务器端Service实现
服务器端的类要实现刚才写过的 DBWorkerService 接口，在这里实现我们具体的操作。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
package net.kylewu.idea.server;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import javax.jdo.PersistenceManager;
import javax.jdo.Query;
import net.kylewu.idea.client.service.DBWorkerService;
import com.google.gwt.user.server.rpc.RemoteServic
浙公网安备 33021202002483