使用GWT 与 NetBeans 开发 AJAX 应用(1)

练习 1: 生成并运行简单的 HelloWorld 程序

在这部分练习中,你将会学会在NetBeans中生成一个简单的HelloWorld GWT 程序. 还会让你在 NetBeans 配置 GWT 类库.不过这个配置只需要做一次.

创建一个空的 Google Web Toolkit Web应用程序项目

添加一个按钮,并绑定事件响应.

创建一个可布署的WAR包.(编者注:这个功能将会在我正在编写的下一版本的插件中被支持).

(1.1) 创建新的 Google Web Toolkit Web应用程序项目

0. 启动 NetBeans IDE.
1. 选择 文件->新增项目(Ctrl+Shift+N). 弹出新增项目 对话框.
2. 在 选择项目 面板的中, 选择Web 类型 以及 Google Web Toolkit Application 项目. 点击 下一步. (图-1.10 )



图-1.10: 创建新的 Google Web Toolkit Web应用程序项目

3. 在 名称和位置 面板上, 在 项目名称 输入框中, 输入任意你想要的项目名称. 我现在使用默认的 GWTApplication 做为项目名称. 在 项目位置 区域中, 可以使用IDE默认的位置,也可以自定义一个位置 - 在这个练习中,我们使用C:/myprograms - 来创建项目. (图-1.11 )



图-1.11: 指定项目名称

4. 在第一次创建 GWT项目是, IDE会询问你你存放解压后的Google Web Toolkit(GWT) 包的位置.这个包,在前面已经说过了. 点击 浏览 , 进入存入GWT文件的目录. (图-1.11.1 )



图-1.11.1: GWT 配置

5. 单击 完成, 关闭新增项目对话框.
6. 现在可以看到在NetBeans的项目 tab 窗口中出现了一个GWTApplication 项目节点. IDE自动生成的Main.html 显示在代码编辑器中. (图-1.12 )



图-1.12: GWTApplication 项目

7. 右键点击GWTApplication 项目节点并选择 Run Project. 注意观察,Google Web Toolkit Development Shell 在 8888 端口被启动了. (图-1.13) 接着GWTApplication 被显示在shell模式中.(图-1.14 )



图-1.13: Hosted mode shell



图-1.14: Hosted mode 浏览

正如你看到的,现在没有任何内容被显示,因为还没有可显示的代码被加入. 你将在下一步, 开始加入可运行的代码.

8. 关闭 Google Web Toolkit Development Shell 窗口必须要点击窗口右上角的X 按钮. 这样你才可以再次运行这个程序. (图-1.15 与 图-1.16 )



图-1.15: 关闭 Google Web Toolkit Development Shell



图-1.16: 确认关闭

问题解答: 如果你遇到了<No main classes found> 问题, 请看下面的问题解答 .

问题解答: 如果你遇到 "Port 8888 is already in use; you probably still have another session active" 的错误信息,好像图-1.15 一样, 这是因为你没有关闭上一次的打开的 Google Web Toolkit Development Shell 窗口. 关闭之前打开的 Google Web Toolkit Development Shell 然后重新运行这个项目,如 图-1.15 . (第当你修改了代码需要重新运行项目,就一定要这样做.)



图-1.15: 8888 端口已经在使用中

回到本节头部

(1.2) 添加一个按钮,并绑定事件响应

1. 修改 Main.java 文件.这个文件在 GWTApplication->Source Packages->GWTApplication.client路径下,参看代码-1.20. 需要加入的代码部分已经被高亮显示成粗体蓝色 字体. 你可以直接从在线文档上复制这部分代码.

/* * Main.java * * Created on July 5, 2006, 11:18 AM * * To change this template, choose Tools | Template Manager * and open the template in the editor. */ package GWTApplication.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.ClickListener; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.Widget; /** * * @author sang */ public class Main implements EntryPoint { /** Creates a new instance of Main */ public Main() { } public void onModuleLoad() { Button b = new Button("Click me", new ClickListener() { public void onClick(Widget sender) { Window.alert("Hello, AJAX"); } }); RootPanel.get().add(b); } }

代码-1.20: Main.java 加入一个按钮

2. 右键单击 GWTApplication 项目节点,然后选择 Run Project.
3. 可以看到 "Click me" 按钮被 显示在主机模式中.(图-1.21 )



图-1.21: 在主机模式中运行应用程序

4. 单击 "Click me" 按钮.
5. 可以看到 Hello, AJAX 信息被显示在一个对话框中. 点击确定.



图-1.22: 点击按钮后的结果

6. [循序渐进] 在 Main.java中修改"Hello, AJAX" 字符串为"Hello, <Your name>" 然后重新运行项目.

回到本节头部

小结

在本节中, 你学会了如何在NetBeans中生成并运行HelloWorld GWT 应用程序. 你还学会了如何运行 Google Web Toolkit Development Shell.

回到页首