GWT-Ext 入门

概述

 

Ext最早是基于yahoo-UI的一套集成工具包，后来又集成了prototype、jquery等开源框架，主要集中解决浏览器端控件功能不足的问题

GWT = Google Web Toolkit 是基于Ext开发的后台工具，网址http://code.google.com/webtoolkit/


GWT-Ext 网址http://code.google.com/p/gwt-ext/
，目前最新版本是2.0.4

MyGwt 网址http://mygwt.net/
，目前该项目已经关闭，与ext合作名为Ext GWT，网址http://extjs.com/explorer/


其实GWT-Ext与Ext GWT(MyGwt)功能和使用方法上都差不多，都是基于自身的jar包封装了ext的api，通过一些java代码替代ext复杂的javascript编程，让不懂javascript的人依然能够上手使用ext漂亮的界面和强大的功能，我个人建议学习Ext GWT，毕竟这是官方合作的版本，如果有条件的话多学学javascript吧，直接使用ext整合dwr、spring、hibernate等开源工具包效果回更好，因为这样ext会更听话，毕竟Ext GWT也只是封装了ext的部分功能。

一点个人建议，ext有两点不足，第一是树，可以用dhtmlxtree代替(网址http://dhtmlx.com
)，第二是仿word风格编辑器，可以用fckeditor代替(网址http://www.fckeditor.net
) 

GWT-Ext 是基于 Google Web Toolkit（GWT）和 ExtJs 的功能强大的网页开发控件库。它扩展了 GWT，在 ExtJs 的基础上实现了有排序功能的表格（Grid）、分页、过滤，支持有拖拽功能的树，高度可定制的组合下拉框（Combobox）、目录、对话框、表单（Form）以及功能丰富、强大且易用的 API。

GWT-Ext 拥有 GNU Lesser General Public Licence (LGPL)（请参阅 参考资料），V3.0 的许可证 。因此它是一个非常灵活，允许在开源和商业中应用的控件库。

GWT 的介绍（请参阅 参考资料）已经非常丰富，我们这个系列主要关注在 GWT-Ext 的介绍和应用上。GWT-Ext 是在 GWT 和 ExtJs 的基础上对表现层的进一步封装。我们可以理解 GWT 提供了 Ajax 的一套基础框架，而 ExtJs 提供了以 JavaScript 和 CSS 样式表为基础的非常丰富的表现层接口。那么 GWT-Ext 就是在 GWT 的基础上，将 ExtJs 的 JavaScript 接口映射或者封装为 Java 的接口。在 Java 的环境下开发和调试开发表现层，可以大大提高开发的速度。


GWT-Ext 开发环境搭建

在这个系列中，将通过示例的方式，一步步地介绍如何搭建一个 GWT-Ext 的开发环境。本章将通过图解与代码结合的方式搭建演示平台框架，并且演示如何部署这个平台到 Tomcat 容器中。

下载开发环境

我们将使用 Eclipse 和插件 Cypal Studio 来搭建控件演示平台。Cypal Stutio 是一个 GWT 成熟的开发工具。它能非常方便地帮助我们搭建 GWT 的开发以及调试环境，并且能够实现编译和打包的工作，省去了开发 GWT 过程中很多繁琐的过程。



安装 Cypal Studio 插件

解压 Eclipse 到本地硬盘，同时解压 cypal.studio.for.gwt-1.0.zip 到 Eclipse 的 plugins 目录下。然后解压下载的 gwt-windows-1.5.0.zip 。最后，启动 Eclipse 。

选择 Eclipse 目录 Window >Preferences > Cypal Stutio，填写 GWT 相关的信息如 图 1 所示。 GWT Home 填写 GWT 的解压根目录。如果 Java VM 的要求较高，可以从 512M 提高到 1024M 。如图 1 所示。

图 1. Cypal Studio 配置
Cypal Studio配置

创建第一个 GWT-Ext 工程

选择 File > New > Dynamic Web Project, 填写必要信息。Dynamic Web Module version 选择版本 2.4，因为 Cypal Studio 是在 2.4 这个版本上开发的。Configuration 选择 Cypal Studio for GWT。工程名填写 GWTEXTDemo。输入以上信息后，点击 Finish。

图 2. 创建 GWTExt 开发工程
创建GWTExt开发工程

在新创建的工程上点击右键，选择 new-> other. 在 Cypal Studio 下找到并选择 GWT Module 节点。

图 3. 创建 GWT Module
创建GWT Module

在打开的 Panle 里填写 GWT Module 的信息，主要需要填写的是 GWT Module 所在的包名以及它的类名。 GWT Module 必须实现 com.google.gwt.core .client.EntryPoint 接口。点击 Finish 完成 Module 的创建。

图 4. 填写 GWT Module 信息
填写GWT Module信息

新创建的 GWT 开发工程的结构如图 5 所示。

在 public 这个目录下放置图片，JavaScript 脚本，CSS 样式表和每个 GWT module 对应的 html 文件。

DemoControlPanel.gwt.xml 是一个 GWT 工程的配置文件。所有 GWT 的配置信息需要在这里声明。这些配置信息包括 Module 的信息，CSS 样式表的相对路径，我们应用到的 JavaScript 的文件相对路径，和所有异步通信中 Servlet 的映射信息。

在 GWT 的应用规范中，显示层的 Java 代码必须放在以包名 client 结尾的目录或者子目录下，并且不能依赖其它非 client 目录下的 Java 代码。

对其它的服务器端的代码，要放到以 server 结尾的包或者子包当中。

图 5. GWT 开发工程的结构图
GWT开发工程的结构图

以上，是建立 GWT 工程的详细过程，接下来，我们开始创建 ExtJs 的开发文件。

因为 GWT-Ext 依赖于 ExtJs，因此在 GWTEXTDemo 工程的 GWTEXTDemo\src\com\ibm\developworks\demo\public 目录下创建 js 目录，js 目录下创建 ext 目录。解压下载的文件 ext-2.0.2.zip，拷贝解压的文件夹 adapter，resources 和文件 ext-all.js 到工程的 public /js/ext 目录下。上述的两个文件夹和文件包括了 ExtJs 的核心 JavaScript 脚本，CSS 样式表和基本图案。如图 6 所示。

图 6. 工程所需的 ExtJs 开发文件
工程所需的ExtJs开发文件

刷新工程，得到图 7 ExtJs 的目录结构。

图 7. 拷贝 ExtJs 后的目录结构
拷贝ExtJs后的目录结构

在 public 目录下创建 DemoControlPanel.css 空文件。解压 gwtext-2.0.5.zip，拷贝 gwtext.jar 到工作空间 WebContent/WEB-INF/lib 目录下。 Gwtext.jar 是我们本系列介绍的核心。他包括了所以 GWT 和 ExtJs 的扩展。在后面的文章中，我们要介绍的 Panel，tree 和拖拽等功能和 API 都在这个 jar 文件中能够找到。现在，我们将 gwtext.jar 放到上述目录下，eclipse 会自动将它设置在 classpath 下。

刷新 WebContent/WEB-INF/lib 目录， 可见 gwtext.jar 已被加入工作空间。

图 8. gwtext.jar 已加入工作空间
gwtext.jar已加入工作空间

为了让 GWTEXTDemo 工程能够引用到 GWT-Ext 和 ExtJs 的开发包，并且应用本工程的 CSS 文件，打开 DemoControlPanel.gwt.xml 文件。加入如下代码。

清单 1. GWT 配置文件

<! — - GWTEXTDemo 工程的代码继承于 GWT-Ext -->
<inherits name="com.gwtext.GwtExt"/>
<! — - GWTEXTDemo 工程 css 样式表，这里填写相对于 public 目录的相对路径 -->
<stylesheet src="DemoControlPanel.css"/>
<! — - 如下三个是 GWTEXTDemo 工程应用的 ExtJs 的基本 JavaScript 文件和样式表 -->
<stylesheet src="js/ext/resources/css/ext-all.css"/>
<script src="js/ext/adapter/ext/ext-base.js"/>
<script src="js/ext/ext-all.js"/>


4 第一个 Hello GWT-Ext

准备好以上开发环境后，下面我们开始编写我们的第一个 Hello GWT-Ext 文件。本文件实现的功能是在页面上实现一个 Panel，Panel 的 Title 是 Hello GWT-ext，内容是文字加粗的 Hello GWT-ext ！

打开 DemoControlPanel.java 文件，替换已有的 onModuleLoad() 方法。另外添加没有声明的 com.gwtext.client.widgets.Panel 类。如清单 2 所示。

清单 2. Hello GWT-ext

public void onModuleLoad() {
Panel panel= new Panel();
panel.setTitle("Hello GWT-ext");
panel.setHtml("<b>Hello GWT-ext!</b>");

new Viewport(panel);  
}


5 配置 GWT 运行环境

选择 Run － > Run Configurations … , 双击 GWT Hosted Mode Application 节点，此时会出现一个 New_configuration 节点用于配置 GWTEXTDemo 工程的运行。选择运行的工程 GWTEXTDemo，接着选择要运行的 Module 名称。如图 9 所示。

图 9. GWTEXTDemo 运行配置
GWTEXTDemo运行配置

执行这个运行配置，我们就得到了第一个 Hello GWT-Ext 的示例。如图 10 所示。

图 10. 第一个 GWT-Ext 示例
第一个GWT-Ext示例

通过上述配置开发，我们已经完成了从工程的搭建，代码的编写，到页面运行展示的过程。因为 GWT 是应用 Java 的编程，因此通过断点调试程序变得异常简单。 GWT 帮助开发人员做到了 Java 到 JavaScript 的映射工作，大大方便了 JavaScript 调试过程，加快了开发的进度。


GWT-Ext 的部署

GWT 将 Java 的面向对象的编程和 JavaScript 的编程映射起来，因此要将 eclipse 工程里的示例部署到 web 容器中，首先要编译，其次要打包，最后部署与测试。使用 Cypal Studio 插件可简化编译打包过程。

1 编译

选择 Project － >Clean, 弹出 Clean 的窗口如图 11 。选择 Clean projects selected below 同时勾选 GWTEXTDemo 工程。

图 11. 编译 GWT-Ext 工程
编译GWT-Ext工程

因为 GWT 工程的编译不同于普通的 Java 程序，他包括了 Java 到 JavaScript 的转换，编译的时间会相对较长。当在 console 窗口看到“ Compilation succeeded ”表示编译成功，如图 12 所示。

图 12. 编译成功
编译成功

2 打包

在 GWTEXTDemo 工程上点右键，选择 exportWAR file 如图 13 所示。填写目标存储路径，选择确定。如图 14 所示。

图 13. 打 WAR 包
打WAR包

图 14. 填写目标存储路径
填写目标存储路径

点击 Finish 后，可得到 GWTEXTDemo.war 包 .

3 部署

将打包得到的 GWTEXTDemo.war 文件拷贝到 tomcat 的 webapps 目录下，启动 tomcat 。

4 测试

在浏览器中测试如下 URL：http://localhost:8080/GWTEXTDemo/DemoControlPanel.html 。如果显示如图 10 所示，则部署成功。


搭建 GWT-Ext 控件演示平台框架

在后面的系列中，我们将在 GWT-Ext 的控件演示平台上对 GWT-Ext 进行详细介绍。

这个 GWT-Ext 的演示平台包括了屏幕左侧的控件导航栏，通过 Accordion Layout 分类显示每章将要介绍的内容。例如在 Layout cases 的导航 tab 上，预先添加了 Accordion Layout 节点，单击这个节点，在右侧就会出现演示结果，如图 15 所示。

图 15. GWT-Ext 的控件演示平台框架
GWT-Ext的控件演示平台框架

由于 GWT-Ext 控件演示平台本身也是基于 GWT-Ext 的开发，代码实现的原理和细节将在后面的章节中具体介绍。因此在本章的最后，我们把已开发好的 Java 文件拷贝到 GWTEXTDemo 工程中，为后面的章节的介绍做好准备。

读者可以拷贝下图中高亮的几个文件到对应的工程当中。

图 16. 需要 copy 的文件
需要copy的文件