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

使用 Google Web Toolkit (GWT) 与 NetBeans 开发 AJAX 应用

Sang Shin, sang.shin@sun.com, Sun Microsystems, www.javapassion.com

译者:马翼超, mayichao@msn.com

本文是一个利用GWT进行AJAX开发的基本入门指南,目标是简单易懂. 如果你想了解更高级的GWT技术,请参阅后面的 参考资源章节. 

在个教程里,你将会了解到以下一些特性. 

1. 如何使用 GWT NetBeans IDE 插件开发 GWT 应用
2. 如何在 NetBeans 中编译与运行 GWT 包中的范例程序.
   
3. 如何使用 GWT 控件
4. 如何创建自定义控件
   
5. 如何执行 RPC (远程过程调用)操作
6. 在一个 JSON 表单中如何从服务器取得数据.
7. 如何将 CSS 与控件绑定
8. 如何实现 Java 与本地 JavaScript 的互调
   

请注意本教程的内容将会不断更新,  同样, GWT当前(2006年9月20日)还处于 beta 测试阶段. 暂时它只支持 Windows 和 Linux 平台.

 

估计时间: 300 分钟

必要知识

本教程假设你已经对下列的技术有所了解,或者有过开发的经验.

• Java 程序开发
  • 如果你对 Java 还很陌生, 请参阅Java 程序在线指引.
• Java Swing
  • 如果你对Java Swing 开发不了解, 请参阅 Swing 指南
    
• Web 应用程序开发
  • 如果你不了解 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 做为布置平台.
• 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的基本问题.
  • handsonlabs-ajaxgwtintro@yahoogroups.com
• 如果你有关于 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在线培训的人.)

关于 JUnit和国际化的练习会在以后加上.

练习 0: 安装与配置

在这个练习中,你需要将GWT插件安装到NetBeans中. 这个插件可以被安装到NetBeans IDE 5.0或是NetBeans IDE 5.5中.

1. 1. 安装GWT 插件到NetBeans中

(0.1) 安装GWT 插件到NetBeans中

1. 启动 NetBeans IDE.
2. 从菜单栏上选择 工具 然后 选择 更新中心. (图-0.10 )
3. 选择 手动安装模块 (.nbm 文件).  选择 下一步. (图-0.11 )


图-0.11: 选择手动安装插件

4. 选择 添加 按钮. 选择目录或 .nbm 文件 对话框将会打开. (图-0.12 )


图-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.
  

6. 进入目录 <LAB_UNZIP_DIR>/ajaxgwtintro/netbeansplugins.
7. 选择 org-netbeans-modules-gwttemplate.nbm. 点击 确定. (图-0.13 )


图-0.13:

8. 单击 下一步 进入到 选择安排的模块 (继续) 面板.

问题解答: 如果你看到 下一步 按钮是灰色不可用状态, 那是因为你还没有卸载插件的旧版本.   你可以按照下面的流程卸载旧版本.

• • 选择菜单栏上的 工具 菜单,然后再选择 模块管理
  • 选择需要卸载的模块然后点击卸载按钮.

9. 点击 下一步.  将会看到 许可协议 对话框.
10. 选择 接受.  进度条出现.
11. 选择 下一步.
12. 选中 包含 复选框.  在弹出的 for 未签名模块 对话框上 选择 是  . (图-0.14 )


图-0.14: 安装GWT NetBeans 插件

13. 单击 完成.  你现在已经将 GWT NetBeans 插件安装到 NetBeans IDE上了.