第 1 部分 GWT-Ext 入门.docxVIP

GWT-Ext 体验之旅，第 1 部分: GWT-Ext 入门GWT-Ext 是基于 Google Web Toolkit（GWT）和 ExtJs 的功能强大的网页开发控件库。它非常适用于进行纯 Java 语言的富 Internet 应用的快速开发。本系列文章将详细讲解 GWT-Ext 的基本结构和功能特点，并通过代码示例来演示该技术的具体实现。本文是该系列的第一部分，将带领您快速入门 GWT-Ext，并演示如何快速搭建 GWT-Ext 的开发环境。概述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 配置创建第一个 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 开发工程在新创建的工程上点击右键，选择 new- other. 在 Cypal Studio 下找到并选择 GWT Module 节点。图 3. 创建 GWT Module在 打开的 Panle 里填写 GWT Module 的信息，主要需要填写的是 GWT Module 所在的包名以及它的类名。 GWT Module 必须实现 com.google.gwt.core .client.EntryPoint 接口。点击 Finish 完成 Module 的创建。图 4. 填写 GWT Module 信息新创建的 GWT 开发工程的结构如图 5 所示。在 public 这个目录下放置图片，JavaScript 脚本，CSS 样式表和每个 GWT module 对应的 html 文件。DemoControlPanel.gwt.xml 是一个 GWT 工程的配置文件。所有 GWT 的配置信息需要在这里声明。这些配置信息包括 Module 的信息，CSS 样式表的相对路径，我们应用到的 Ja