非常好的Gwt-Ext培训教程

hzdyg

贡献于2014-03-16

字数:40539 关键词: GWT JavaScript框架 培训

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 样式表的相对路径,我们应用到的 JavaScript 的文件相对路径,和所有异步通信中 Servlet 的映射信息。 在 GWT 的应用规范中,显示层的 Java 代码必须放在以包名 client 结尾的目录或者子目录下,并且不能依赖其它非 client 目录下的 Java 代码。 对其它的服务器端的代码,要放到以 server 结尾的包或者子包当中。 图 5. 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 开发文件 刷新工程,得到图 7 ExtJs 的目录结构。 图 7. 拷贝 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 已加入工作空间 为了让 GWTEXTDemo 工程能够引用到 GWT-Ext 和 ExtJs 的开发包,并且应用本工程的 CSS 文件,打开 DemoControlPanel.gwt.xml 文件。加入如下代码。 清单 1. GWT 配置文件