SmartGWT 入门,第 1 部分: 企业级 Web 2.0开发轻松起步

红薯 发布于 2010/04/16 22:27
阅读 4K+
收藏 10

简介: Google Web Toolkit 发布以来,吸引了广大 Java 开发人员投身 Web 开发,也涌现出来大量基于 GWT 的扩展。新近推出的 SmartGWT 无疑是其中的佼佼者,它是包装了成熟的 Ajax 框架 SmartClient 的 GWT API。SmartGWT 包含了更丰富的 Web 控件,但使之从其它 GWT 扩展中脱颖而出的是强大的服务器端数据集成功能,用户能轻松开发出操作业务数据的 Web 应用,从而使得它成为企业级 Web2.0 开发的利器。本文将对 SmartGWT 的主要特征做全面的介绍,带领您轻松踏上企业级 Web2.0 的开发之旅。

SmartGWT 概览

用一句话来概括,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。

丰富的 UI 组件

SmartGWT 提供了极其丰富的 UI 组件。除了传统的表单、菜单和对话框等组件之外,SmartGWT 还包含了具有排序、分页、分组、过滤、汇总、打印预览和实时更新功能的列表,组件元素间的拖拽,手风琴式分区和堆栈式布局等。可以说,SmartGWT 是一个强大的“高级”组件库。

下面我们介绍一些有特色的组件。这些例子都来自于 SmartGWT 发行版内自带的 Showcase 这个示例应用。

  • Pick Tree

类似多级菜单的树形选择器。


图 1. 树形选择器
图 1. 树形选择器

清单 1. 树形选择器代码实例

				 
Tree tree = new Tree();

PickTreeItem departmentItem = new PickTreeItem();
departmentItem.setValueTree(tree);

 

  • TreeGird

树和表格的组合,处理过复杂多级数据的人都想要的控件!


图 2. 树形表格
图 2. 树形表格

清单 2. TreeGrid 代码实例

				 
TreeGrid treeGrid = new TreeGrid();
TreeGridField nameField = new TreeGridField("Name", 150);

treeGrid.setFields(nameField, jobField, employeeTypeField,employeeStatusField,
salaryField, genderField, maritalStatusField);

 

  • 类似 Google Calendar 的日历控件


图 3. 日历
图 3. 日历

清单 3. Calendar 代码实例

				 
Calendar calendar = new Calendar();
DataSource eventDS = new DataSource();
...
calendar.setDataSource(eventDS);

 

下面来看两个复杂一点的例子。

  • 支持数据过滤的表格

如下图所示,ListGrid 控件中显示的数据能根据上面的 FilterBuilder 控件所设置的条件进行过滤。查询条件可以是一个或多个,查询条件之间可以选择 and、or 和 not 三种逻辑运算符。


图 4. 数据过滤器
图 4. 数据过滤器

清单 4. 数据过滤代码实例

				 
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());
}
});

 

  • 支持公式计算和总结的表格

以下是展示国家人口面积等数据的表格。如果想显示人口密度,显然是需要计算人口除以面积。


图 5. 原始表格
图 5. 原始表格

实现如上表格的是 SmartGWT 的 ListGrid 控件,它内置了对公式和加总的支持。只需增加以下两行代码:


清单 5. 公式加总代码实例

				 
countryGrid.setCanAddFormulaFields(true);
countryGrid.setCanAddSummaryFields(true);

 

在 Show Formula builder 这个按钮中,我们只需要调用一个方法,一行代码:


清单 6. 公式编辑支持代码实例

				 
public void onClick(ClickEvent event) {
countryGrid.addFormulaField();
}

 

SmartGWT 为你完成了其它全部功能。你只需点下按钮,这时会显示如下公式字段创建对话框,很容易即可实现人口密度这个计算而来的字段。


图 6. 公式编辑器
图 6. 公式编辑器

保存之后,即可在原先的表格上看到你添加的字段。是不是太容易了?


图 7. 增加字段之后的表格
图 7. 增加字段之后的表格

看了以上这些非常吸引人的 UI 组件,你是不是已经迫不及待开始想要使用 SmartGWT 了?

强大的数据集成功能

图形控件和服务器端数据集成是 SmartGWT 的特色。SmartGWT 中包含一系列以数据为中心的 UI 组件。比如 ListGrid,TreeGrid,DynamicForm 等等。利用这些控件,用户可以很容易地开发出功能全面的数据操作界面。如下图所示,可以对数据进行编辑和增加的应用,只需要几十行代码就能实现。


图 8. 数据操作 UI 组件
图 8. 数据操作 UI 组件

能支持这样强大功能是因为 SmartGWT 中封装了 SmartClient 的 MVC(模型 - 视图 - 控制器)模式。这是 SmartClient 这一 Ajax 框架的独门绝技。实现数据整合的核心是控制器类数据源(DataSource),它为 UI 组件这样的视图和后台数据模型之间架起了互通的桥梁。


图 9. SmartGWT 中的数据集成流程
图 9. SmartGWT 中的数据集成流程

由上图,从客户端到服务器的数据访问大体分为两个部分:

  1. UI 组件和数据源对象的交互
  2. 数据源对象和服务器实际数据提供者的交互

在 SmartGWT 中,第一种交互称为 数据绑定,第二种交互称为 数据集成。 在本系列的后续两篇文章中,我们将分别介绍这两部分技术及应用。

数据源对象看起来像关系数据库,在数据源内支持定义数据模型。数据源提供的每条数据称为一条记录(Record),对应于数据库中的一行。 数据源内可以定义字段(Field),对应于数据库中的列。不仅能定义每个字段的类型,还可以定义数据间关系,比如通过主外键关系来确定父子表。可见数据 源类是一个完整的关系型数据的抽象表示。为 UI 组件配置数据源后,对 UI 上的操作,数据源会自动进行相关数据的创建,更新,获取和删除等基本操作。

数据源和 UI 组件的松耦合模式带来的另一个优势是对于同一个数据源,可以同时有多种表示方式,而用户在任一表示方式中对该数据源进行的操作,能同时更新到其它表示方式 中,保持显示数据的一致性。如下图所示,员工数据在树形表格控件和表格控件中同时显示,在其中一个控件中对员工数据做修改,其更新能自动同步显示到另一个 控件中。


图 10. 一个数据源,多种显示方式
图 10. 一个数据源,多种显示方式

根据用户的定制,数据源对象可以读取 XML、JSON 或者数据库等等服务器端数据。它把实际的数据来源和你的应用隔离开。带来的好处之一就是易于测试。在测试的时候,你可以直接在数据源里返回测试数据,而不 用访问真正数据源。使得测试代码可以快速运行。而在真正运行时,切换不同的数据来源也非常简单。

在 SmartGWT 的不同发行版中,最大的不同就是在服务器端的支持能力。在企业版中,提供了对常用的 Java 服务器端数据访问技术的集成,比如 Hibernate。这样用户可以利用现有的 Java 数据服务开发新应用,或者快速为现有的 Java 数据应用打造一个新的 SmartGWT 风格的界面。

SmartGWT 开发起步

SmartGWT 是基于 GWT 的 API,因此我们可以利用 GWT 所提供的开发工具来进行 SmartGWT 的开发。

Google 提供了方便 GWT 开发的 Eclipse 插件—— Google plugin for Eclipse。该插件可以支持开发 GWT 和 Google App Engine 程序,我们这里只需利用其中的 GWT 部分。

开发环境环境搭建

  1. 安装该插件,以 Eclipse 3.5 为例。使用 Eclipse 中的软件更新功能,通过以下更新站点来安装该插件:http://dl.google.com/eclipse/plugin/3.5
  2. 下载 SmartGWT 2.0 压缩包,并解压到本地硬盘。
  3. 使用 Google 插件提供的向导,创建基于 GWT 的 Web 项目:

    图 11. 创建 GWT 项目
    图 11. 创建 GWT 项目

  4. 配置 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 到你的项目中,即可单独运行使用。如下图所示,非常方便实用。


图 12. Showcase 的使用
图 12. Showcase 的使用

尝试运行示例

在生成的项目中,包含了可直接运行的 GWT 示例代码,并且有相应和项目同名的运行设置。你可以通过 Eclipse 的运行下拉菜单来选择运行这个 GWT 程序。让我们改造一下该项目,并尝试加入一些 SmartGWT 的实例代码。假设我们的应用模块名字是 Hello。

首先,修改项目 war 目录下的和模块名同名的 html 文件,即 Hello.html,这是该 Web 应用的入口网页。我们按自己的需求来改造它,先清空 <body> 标签,将原有的标题改成自己需要的或者去掉也可以。重要得是,需要在 <head> 标签中,定义 SmartGWT 所需的全局变量 isomorphicDir,必须在调用其他 javascript 前,设置该变量为“模块名 /sc/”,SmartGWT 才可以正确的找到所需的资源。


清单 8. 设置 isomorphicDir 变量

 <script> var isomorphicDir = "Hello/sc/"; </script> 

 

然后,我们选择一个 Showcase 中的简单示例,比如 Forms 类别下的 Various Controls。通过 View Source 按钮打开代码,全部拷贝。然后打开项目中的入口类,即 Hello.java,将代码全部贴入,将类名改回为 Hello,使之编译通过。

这时运行看一下效果,怎么样,跟 Showcase 里看得的一模一样吧?接下里,你可以尝试修改一些代码来学习它的使用。

总结

本文概括介绍了 SmartGWT 这一企业级 Web2.0 开发的新框架。SmartGWT 的强大功能是无法在这样一篇短文中详细描述的。我们将在后续文章中,通过示例,进一步介绍如何利用 SmartGWT 中的高级功能开发出复杂的企业 Web 应用。

加载中
0
sunday
sunday

学习了。。thanks

 

0
sunday
sunday
SmartGWT 是封装了 SmartClient 的 GWT API。而 SmartClient 是一个开源的企业级 Ajax 开发框架。
返回顶部
顶部