使用 GWT 实现基于 Ajax 的 Web 开发（2）基于 Eclipse 的 GWT 开发环境的搭建

look_w

基于 Eclipse 的 GWT 开发环境的搭建Eclipse 是一个用 Java 开发的开源 IDE，由包括 IBM 在内的主要几家技术型公司所支持。使用 Eclipse 可以使开发者以高效的方式编写、组织、测试和调试软件。Eclipse 集成了对 GWT 脚本的支持，在 Eclipse 环境下使用 GWT 开发 Ajax Web 应用程序，无论是代码编写、组织、测试还是调试，都能够获得较高的生产力。基于 Eclipse 的 GWT 开发环境是业界公认的，最佳的 GWT 开发环境。
搭建 Eclipse 开发环境搭建 Eclipse 开发环境很简单。只需要从 http://www.eclipse.org/downloads/下载后解压即可使用。Eclipse 的版本很多，本文中将以 Eclipse Java EE IDE for Web Developers(Version: Helios Release) 为例进行说明。
搭建 GWT 开发环境在 Eclipse 中安装 GWT，步骤如下：
选择 Eclipse 的菜单 Help | Install New Software …， 然后在 Work with 中输入 http://dl.google.com/eclipse/plugin/3.6，在出现的列表中选择 Google App Engine Tools for Eclipse(required) 和 SDKs，之后点击”Next”并完成安装 。
安装完成后重启 Eclipse.
基于 Eclipse 的 GWT Designer 开发环境的搭建搭建 GWT Designer 开发环境在 Eclipse 中安装 GWT Designer，步骤如下：
选择 Eclipse 的菜单 Help | Install New Software …， 然后在 Work with 中输入 http://dl.google.com/eclipse/inst/d2gwt/latest/3.6，在出现的列表中选择 GWT Designer 和 WindowBuilder Engine (required)，之后点击按钮”Next”并完成安装 。
安装完成后重启 Eclipse.
下载 Ext GWT(GXT)（http://www.sencha.com/products/extgwt/download/），解压后将其中相应的 jar（本例中选用的是 gxt-2.2.4-gwt2.jar）加入到 ClassPath 中。
建立带有 GWT Designer 支持的 Web 应用GWT Designer 安装之后，就可以建立带有 GWT Designer 支持的 Web 应用了，建立此 Web 应用的步骤如下：
选择 Eclipse 的菜单 File | New | Other。弹出如图 2 所示的对话框。
图 2.创建 GWT Designer 支持的 Web 应用在图２的对话框中选择 WindowBuilder | GWT Designer | Model | GWT Java Project。然后选择按钮”Next” ，将会弹出 Create a Java Project 对话框。
在 Create a Java Project 对话框中的 Project Name 中输入项目名称如 : EmployeeManagement，然后点击按钮”Next” ，将会弹出 New GWT Module 对话框：
在 New GWT Module 对话框中的 Module name 中输入 EmployeeManagement，在 Package name 中输入 com.employeemanagement。在 Configure for third-party toolkit 中选择 Ext GWT(GXT)。点击按钮”Finish” .
如果之前没有配置 Ext GWT(GXT) 的路径，此时会弹出一个对话框提示输入 GXT 的路径，这里直接选择已经下载的 GXT 包的存放路径即可。
GWT Designer 各组件简介及举例带有 GWT Designer 支持的 Web 应用建立以后，右键点击所需编辑的类文件如 employeeViewer.java 类，然后选择菜单 Open With | GWT Designer。 在右面的区域中选择 Design 选项卡，就可以看到 GWT、 GXT 支持的所有组件，表１给出了常用的 GWT 和 GXT 组件。
表 1. GWT、GXT 常用组件列表 GWT 组件 GXT 组件功能描述 HorizontalPanel  RowLayout，Horizontal 用于横向单行排列组件内部组件的布局组件 VerticalPanel  RowLayout，Vertical 用于竖向向单列排列组件内部组件的布局组件 FlexTable
用于定位的布局组件，类似于 HTML 中 Table  Button  Button 按钮组件 Label  Text 标签组件 TextBox  TextField 输入框组件 RadioButton  Radio 单选按钮组件 ChekcBox  CheckBox 多选按钮组件 ListBox  LsitFied 列表组件 Combo  ComboBox 下拉列表组件 Image
图片组件 Tree/TreeItem  Tree/TreeItem 树结构组件 MenuBar/MenuItem  MenuBar/MenuBarItem 主菜单组件
Menu/MenuItem 右键菜单组件
在 Designer 中可以很方便地使用这些组件，以下是一个使用 Button 按钮的例子。
在前面创建的例子中，右击类文件 EmployeeManagement.java 选择 Open With | GWT Designer.
在右面的 Tab 页中选择 Design 选项卡。
在 Palette 中选一个需要创建的组件，放在设计窗口上，本例中选择了 GXT 的 button 按钮，如图 3 所示。
图 3.创建 button 按钮组件创建后可在 Properties 区域修改其样式属性，比如将 button 的标题改为 test。
图 4.修改 button 按钮的样式属性添加事件处理代码 :
在 Properties 中选择显示按钮 。然后，在事件列表中双击 ComponentSelected 事件，可以看到 Designer 已经创建好了此事件的外围代码，此时，光标也已经定位到 ComponentSelected 事件的代码上。接下来只需要根据实际情况添加具体的业务代码即可。