简介： Google Web Toolkit 发布以来，吸引了广大 Java 开发人员投身 Web 开发，也涌现出来大量基于 GWT 的扩展。新近推出的 SmartGWT 无疑是其中的佼佼者，它是包装了成熟的 Ajax 框架 SmartClient 的 GWT API。SmartGWT 包含了更丰富的 Web 控件，但使之从其它 GWT 扩展中脱颖而出的是强大的服务器端数据集成功能，用户能轻松开发出操作业务数据的 Web 应用，从而使得它成为企业级 Web2.0 开发的利器。本文将对 SmartGWT 的主要特征做全面的介绍，带领您轻松踏上企业级 Web2.0 的开发之旅。
用一句话来概括，SmartGWT 是封装了 SmartClient 的 GWT API。而 SmartClient 是一个开源的企业级 Ajax 开发框架。
Google Web Toolkit 的发布，大大降低了 Java 开发人员进行 Web 开发的门槛。然而 GWT 本身提供的控件及功能相对有限。因此出现了很多第三方开源扩展库。很多扩展库都利用 GWT，对现有的 JavaScript 库做 Java 封装，为 GWT 提供了更多可用的 API。SmartGWT 是其中的佼佼者，它的底层使用 SmartClient 这个成熟的 Ajax 库。SmartGWT 从 2008 年开始开发，一直处在非常活跃的发展状态中。2009 年 12 月正式发布了 2.0 版，已经成为一个成熟的 Web 2.0 开发框架。
SmartGWT 不仅仅是“又一个 Web 控件库”，它最大的特色在于提供了整合客户端和服务器端数据的框架。由于底层的 SmartClient 实现了 Ajax 版本的 MVC 模式，这使得在 SmartGWT 中，后台数据的集成是控件内置的能力，而不是需要用户自己去组装的模块。需要处理多种类型，结构复杂的业务数据是企业级 Web 开发的特点和难点，SmartGWT 对数据操作的关注，大大简化了企业级 Web2.0 应用开发的门槛。正是这一点让 SmartGWT 与众不同。在稍后的介绍中可以看到，一些相当复杂的典型数据应用，在 SmartGWT 中只需很少的代码即可实现。
总体来看，SmartGWT 有如下特色：
- 丰富的控件。很多较为复杂的常用界面都被包装成简单易用的控件。比如可编辑的树形表格、查询常用的过滤器创建器和类似 Google Calendar 的日历等等。
- 内置的数据整合功能。利用 SmartClient 的 MVC 模式，用户可以通过定义数据源（Data Source)，很容易地开发出能对服务器端数据进行创建，更新，获取和删除操作的界面。甚至只要 10 行以内的代码。
- 支持 Skin。通过 Skin，用户能定制整套风格一致的界面方案。只需在线切换，就可以换到全新的风格。
如此强大的功能是否上手也很难呢？否！基于 GWT 的 SmartGWT 是非常容易使用的，即使很炫的效果，实现代码也非常简短，Java 开发人员很快就可以做出炫目的 Web 应用。
SmartGWT 有四个不同的发行版：免费的 LGPL 版，收费的专业版，Power 版和企业版。除了许可证的区别外，功能上的区别主要体现在服务器端。LGPL 版是纯粹的客户端 GWT 库，而其它的收费版本，同时提供了 Servlet，SQL 连接器等服务器端组件。本文主要介绍在 LGPL 版本中包含的客户端 GWT API。
SmartGWT 提供了极其丰富的 UI 组件。除了传统的表单、菜单和对话框等组件之外，SmartGWT 还包含了具有排序、分页、分组、过滤、汇总、打印预览和实时更新功能的列表，组件元素间的拖拽，手风琴式分区和堆栈式布局等。可以说，SmartGWT 是一个强大的“高级”组件库。
下面我们介绍一些有特色的组件。这些例子都来自于 SmartGWT 发行版内自带的 Showcase 这个示例应用。
- Pick Tree
类似多级菜单的树形选择器。
Tree tree = new Tree(); … PickTreeItem departmentItem = new PickTreeItem(); departmentItem.setValueTree(tree); |
- TreeGird
树和表格的组合，处理过复杂多级数据的人都想要的控件！
TreeGrid treeGrid = new TreeGrid();
TreeGridField nameField = new TreeGridField("Name", 150);
…
treeGrid.setFields(nameField, jobField, employeeTypeField,employeeStatusField,
salaryField, genderField, maritalStatusField);
|
- 类似 Google Calendar 的日历控件
Calendar calendar = new Calendar(); DataSource eventDS = new DataSource(); ... calendar.setDataSource(eventDS); |
下面来看两个复杂一点的例子。
- 支持数据过滤的表格
如下图所示，ListGrid 控件中显示的数据能根据上面的 FilterBuilder 控件所设置的条件进行过滤。查询条件可以是一个或多个，查询条件之间可以选择 and、or 和 not 三种逻辑运算符。
FilterBuilder filterBuilder = new FilterBuilder();
ListGrid countryGrid = new ListGrid();
DataSource worldDS = new DataSource();
...
filterBuilder.setDataSource(worldDS);
countryGrid.setDataSource(worldDS);
IButton filterButton = new IButton("Filter");
filterButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
countryGrid.filterData(filterBuilder.getCriteria());
}
});
|
- 支持公式计算和总结的表格
以下是展示国家人口面积等数据的表格。如果想显示人口密度，显然是需要计算人口除以面积。
实现如上表格的是 SmartGWT 的 ListGrid 控件，它内置了对公式和加总的支持。只需增加以下两行代码：
countryGrid.setCanAddFormulaFields(true); countryGrid.setCanAddSummaryFields(true); |
在 Show Formula builder 这个按钮中，我们只需要调用一个方法，一行代码：
public void onClick(ClickEvent event) {
countryGrid.addFormulaField();
}
|
SmartGWT 为你完成了其它全部功能。你只需点下按钮，这时会显示如下公式字段创建对话框，很容易即可实现人口密度这个计算而来的字段。
保存之后，即可在原先的表格上看到你添加的字段。是不是太容易了？
看了以上这些非常吸引人的 UI 组件，你是不是已经迫不及待开始想要使用 SmartGWT 了？
图形控件和服务器端数据集成是 SmartGWT 的特色。SmartGWT 中包含一系列以数据为中心的 UI 组件。比如 ListGrid，TreeGrid，DynamicForm 等等。利用这些控件，用户可以很容易地开发出功能全面的数据操作界面。如下图所示，可以对数据进行编辑和增加的应用，只需要几十行代码就能实现。
能支持这样强大功能是因为 SmartGWT 中封装了 SmartClient 的 MVC（模型 - 视图 - 控制器）模式。这是 SmartClient 这一 Ajax 框架的独门绝技。实现数据整合的核心是控制器类数据源（DataSource），它为 UI 组件这样的视图和后台数据模型之间架起了互通的桥梁。
由上图，从客户端到服务器的数据访问大体分为两个部分：
- UI 组件和数据源对象的交互
- 数据源对象和服务器实际数据提供者的交互
在 SmartGWT 中，第一种交互称为 数据绑定，第二种交互称为 数据集成。 在本系列的后续两篇文章中，我们将分别介绍这两部分技术及应用。
数据源对象看起来像关系数据库，在数据源内支持定义数据模型。数据源提供的每条数据称为一条记录（Record），对应于数据库中的一行。 数据源内可以定义字段（Field），对应于数据库中的列。不仅能定义每个字段的类型，还可以定义数据间关系，比如通过主外键关系来确定父子表。可见数据 源类是一个完整的关系型数据的抽象表示。为 UI 组件配置数据源后，对 UI 上的操作，数据源会自动进行相关数据的创建，更新，获取和删除等基本操作。
数据源和 UI 组件的松耦合模式带来的另一个优势是对于同一个数据源，可以同时有多种表示方式，而用户在任一表示方式中对该数据源进行的操作，能同时更新到其它表示方式 中，保持显示数据的一致性。如下图所示，员工数据在树形表格控件和表格控件中同时显示，在其中一个控件中对员工数据做修改，其更新能自动同步显示到另一个 控件中。
根据用户的定制，数据源对象可以读取 XML、JSON 或者数据库等等服务器端数据。它把实际的数据来源和你的应用隔离开。带来的好处之一就是易于测试。在测试的时候，你可以直接在数据源里返回测试数据，而不 用访问真正数据源。使得测试代码可以快速运行。而在真正运行时，切换不同的数据来源也非常简单。
在 SmartGWT 的不同发行版中，最大的不同就是在服务器端的支持能力。在企业版中，提供了对常用的 Java 服务器端数据访问技术的集成，比如 Hibernate。这样用户可以利用现有的 Java 数据服务开发新应用，或者快速为现有的 Java 数据应用打造一个新的 SmartGWT 风格的界面。
SmartGWT 是基于 GWT 的 API，因此我们可以利用 GWT 所提供的开发工具来进行 SmartGWT 的开发。
Google 提供了方便 GWT 开发的 Eclipse 插件—— Google plugin for Eclipse。该插件可以支持开发 GWT 和 Google App Engine 程序，我们这里只需利用其中的 GWT 部分。
- 安装该插件，以 Eclipse 3.5 为例。使用 Eclipse 中的软件更新功能，通过以下更新站点来安装该插件：http://dl.google.com/eclipse/plugin/3.5
- 下载 SmartGWT 2.0 压缩包，并解压到本地硬盘。
- 使用 Google 插件提供的向导，创建基于 GWT 的 Web 项目：
图 11. 创建 GWT 项目
- 配置 SmartGWT 支持。首先将解压后 SmartGWT 目录中的 smartgwt.jar 加到该项目的类路径中去。然后在 GWT 模块描述文件（如上图所建项目中应该是在源文件夹下的 com\sample\MyFirstSmartGWTProj.gwt.xml）增加一行：
清单 7. 导入 SmartGWT 包
<inherits name="com.smartgwt.SmartGwt" />
基本配置至此已经完成，下一步，你就可以开始 SmartGWT 之旅。
学习 SmartGWT 最容易上手的方法就是探索发行版中的 Showcase 实例工程。在解压后的 SmartGWT 目录中，可以找到 Sample/Showcase/war/index.html，用浏览器打开即可在本地运行 SmartGWT Showcase 应用。
Showcase 应用的左边栏分类列出了对各种功能的演示。选中某个功能，会在右边打开新的演示。在每个演示的右上角，都有 View Source 这个按钮。点击它会弹出窗口显示代码。这里显示的代码是完整的 SmartGWT 应用的代码，直接将这些代码 copy 到你的项目中，即可单独运行使用。如下图所示，非常方便实用。
在生成的项目中，包含了可直接运行的 GWT 示例代码，并且有相应和项目同名的运行设置。你可以通过 Eclipse 的运行下拉菜单来选择运行这个 GWT 程序。让我们改造一下该项目，并尝试加入一些 SmartGWT 的实例代码。假设我们的应用模块名字是 Hello。
首先，修改项目 war 目录下的和模块名同名的 html 文件，即 Hello.html，这是该 Web 应用的入口网页。我们按自己的需求来改造它，先清空 <body> 标签，将原有的标题改成自己需要的或者去掉也可以。重要得是，需要在 <head> 标签中，定义 SmartGWT 所需的全局变量 isomorphicDir，必须在调用其他 javascript 前，设置该变量为“模块名 /sc/”，SmartGWT 才可以正确的找到所需的资源。
<script> var isomorphicDir = "Hello/sc/"; </script>
然后，我们选择一个 Showcase 中的简单示例，比如 Forms 类别下的 Various Controls。通过 View Source 按钮打开代码，全部拷贝。然后打开项目中的入口类，即 Hello.java，将代码全部贴入，将类名改回为 Hello，使之编译通过。
这时运行看一下效果，怎么样，跟 Showcase 里看得的一模一样吧？接下里，你可以尝试修改一些代码来学习它的使用。
本文概括介绍了 SmartGWT 这一企业级 Web2.0 开发的新框架。SmartGWT 的强大功能是无法在这样一篇短文中详细描述的。我们将在后续文章中，通过示例，进一步介绍如何利用 SmartGWT 中的高级功能开发出复杂的企业 Web 应用。
417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
