使用 Google Web Toolkit (GWT) 与 NetBeans 开发 AJAX 应用
本文是一个利用GWT进行AJAX开发的基本入门指南,目标是简单易懂. 如果你想了解更高级的GWT技术,请参阅后面的 参考资源章节.
在个教程里,你将会了解到以下一些特性.
- 如何使用 GWT NetBeans IDE 插件开发 GWT 应用
- 如何在 NetBeans 中编译与运行 GWT 包中的范例程序.
- 如何使用 GWT 控件
- 如何创建自定义控件
- 如何执行 RPC (远程过程调用)操作
- 在一个 JSON 表单中如何从服务器取得数据.
- 如何将 CSS 与控件绑定
- 如何实现 Java 与本地 JavaScript 的互调
请注意本教程的内容将会不断更新, 同样, GWT当前(2006年9月20日)还处于 beta 测试阶段. 暂时它只支持 Windows 和 Linux 平台.
估计时间: 300 分钟
必要知识
本教程假设你已经对下列的技术有所了解,或者有过开发的经验.
- Java 程序开发
- 如果你对 Java 还很陌生, 请参阅Java 程序在线指引.
- Java Swing
- 如果你对Java Swing 开发不了解, 请参阅 Swing 指南
- 如果你对Java Swing 开发不了解, 请参阅 Swing 指南
- Web 应用程序开发
- 如果你不了解 Web 应用程序开发, 可以参阅 J2EE 开发在线指引.
- 如果你不了解 Web 应用程序开发, 可以参阅 J2EE 开发在线指引.
- AJAX 基础知识
- 如果你不了解 AJAX 基础知识, 请参阅"AJAX 基础知识" 在线指引.
软件环境
在开始以前,你首先要安装以下软件. GWT NetBeans 插件已经包含在教程的zip文件中了.这个插件虽然还处理于 alpha 状态, 不过它提供了足够的代码模板,而且可以很好的运行在 NetBeans 上了. 还会有更多的功能加入到这个 插件中去, 界时,这个教程也会做相应的更新.
- Java Standard Development Kit (JDK™) version 5.0 (下载)
- 如果你已经安装了 JDK 5.0 可以跳过这一步.
- 下面是安装程序的名称(JDK 5.0 update 7)
- jdk-1_5_0_07-windows-i586-p.exe (Windows)
- jdk-1_5_0_07-linux-i586.bin (Linux)
- jdk-1_5_0_07-solaris-i586.sh (Solaris x86)
- NetBeans IDE 5.0 (下载) or NetBeans IDE 5.5 beta (下载)
- 从 NetBeans IDE 5.0 和 NetBeans IDE 5.0 + Application Server 8.2 捆绑安装程序中任选一个安装.
- 在安装 NetBeans IDE 5.0 时,会询问你使用哪个版本的 JDK. 请选择 JDK 5.0.
- 这个教程使用Sun Java System Application Server 或 Tomcat 做为布置平台.
- 从 NetBeans IDE 5.0 和 NetBeans IDE 5.0 + Application Server 8.2 捆绑安装程序中任选一个安装.
- Google Web Toolkit (下载)
- 下载并解压到你指定的目录.
- 下载并解压到你指定的目录.
- 4275_ajaxgwtintro.zip (下载)
- 这个zip文件中包含了本教程文档和 GWT NetBeans 插件.
- 下载并解压到你指定的目录.
可用的操作系统
暂时, Google Web Toolkit Beta 只支持下列操作系统.
- Windows
- Linux
参考资源
- Google Web Toolkit (GWT) 主页
- Google Web Toolkit (GWT) 开发指南
- Google Web Toolkit (GWT) 新手上路
- Google Web Toolkit (GWT) 范例项目
- GWT 经典实例
- GWT 讨论版
问题反馈
- 欢迎你将你对本教程的问题和想法发送到下面这个地址.不过在这里,我们只针对教程本身的问题, 不解决有关于GWT的基本问题.
- 如果你有关于 GWT 本身的技术性问题,可将它们发送到 GWT 讨论版.
修改日志
- Oct. 2nd, 2006: Updated with GWT package beta 1.1.0.
- Oct. 7th, 2006: Setting CSS style to a widget exercise is added as Exercise 2.5
- Oct. 7th, 2006: Invocation of native JavaScript code and invocation of Java methods and access of Java fields from native JavaScript code exercise is added as Exercise 10
- Oct. 8th, 2006: FireBug debugger plug-in is now included as part of the hands-on lab zip file
教程练习
如果你已经安装了前面提及的软件,那你可以不用再链接到这个页面了.
- 练习 0: 安装与配置 (5 分钟)
- 练习 1: 生成并运行 HelloWorld 范例程序.(30 分钟)
- 练习 2: 生成并运行"Hello"和 "Kitchen Sink" 范例应用程序, 并加入CSS风格 (30 分钟)
- 练习 3: 创建自定义控件 (30 分钟)
- 练习 4: 通过RPC调用远程服务 (30 分钟)
- 练习 5: 生成并运行"Dynamic Table" 范例应用程序(30 分钟)
- 练习 6: 生成并运行"JSON"范例应用程序 (30 分钟)
- 练习 7: 生成并运行"Mail"范例应用程序(30 分钟)
- 练习 8: 生成并运行"SimpleXML"范例应用程序(30 分钟)
- 练习 9: 生成并运行"HistoryExample"范例应用程序(30 分钟)
- 练习 10: JavaScript 本地接口 (JSNI) (30 分钟)
- 课后练习 (适用于参与了AJAX在线培训的人.)
练习 0: 安装与配置
在这个练习中,你需要将GWT插件安装到NetBeans中. 这个插件可以被安装到NetBeans IDE 5.0或是NetBeans IDE 5.5中.
(0.1) 安装GWT 插件到NetBeans中
1. 启动 NetBeans IDE.
2. 从菜单栏上选择 工具 然后 选择 更新中心. (图-0.10 )
3. 选择 手动安装模块 (.nbm 文件). 选择 下一步. (图-0.11 )
![](http://www.javapassion.com/handsonlabs/ajaxgwtintro/index_files/0_updatecenter2.png)
图-0.11: 选择手动安装插件
4. 选择 添加 按钮. 选择目录或 .nbm 文件 对话框将会打开. (图-0.12 )
![](http://www.javapassion.com/handsonlabs/ajaxgwtintro/index_files/2_addmodule.png)
图-0.12: 选择添加按钮,添加模块
5. 进入你保存下载 4270_ajaxgwtintro.zip文件的目录. . 暂且称之为 <LAB_UNZIP_DIR>.
- Windows: 如果你将4275_ajaxgwtintro.zip 解压到 C:/ 根目录, 那么你将要进入的目录就是 C:/ajaxgwtintro/samples/Windows.
- Linux: 如果你将4275_ajaxgwtintro.zip 解压到 $HOME 目录下, 那么你将要进入的目录就是 $HOME/ajaxgwtintro/samples/Linux.
7. 选择 org-netbeans-modules-gwttemplate.nbm. 点击 确定. (图-0.13 )
![](http://www.javapassion.com/handsonlabs/ajaxgwtintro/index_files/1_gwtplugin.png)
图-0.13:
8. 单击 下一步 进入到 选择安排的模块 (继续) 面板.
问题解答: 如果你看到
下一步 按钮是灰色不可用状态, 那是因为你还没有卸载插件的旧版本. 你可以按照下面的流程卸载旧版本.
- 选择菜单栏上的 工具 菜单,然后再选择 模块管理
- 选择需要卸载的模块然后点击卸载按钮.
10. 选择 接受. 进度条出现.
11. 选择 下一步.
12. 选中 包含 复选框. 在弹出的 for 未签名模块 对话框上 选择 是 . (图-0.14 )
![](http://www.javapassion.com/handsonlabs/ajaxgwtintro/index_files/0_gwtplugin.png)
图-0.14: 安装GWT NetBeans 插件
13. 单击 完成. 你现在已经将 GWT NetBeans 插件安装到 NetBeans IDE上了.