SmartGWT 入门

　　SmartGWT 概览(文章来源https://www.ibm.com/developerworks/cn/web/1004_xuc y_smartgwt1/) 用一句话来概括，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 这个示例应用。 类似多级菜单的树形选择器。 图 1. 树形选择器
　　
　　清单 1. 树形选择器代码实例 树和表格的组合，处理过复杂多级数据的人都想要的控件！ 图 2. 树形表格
　　
　　清单 2. TreeGrid 代码实例 图 3. 日历
　　
　　清单 3. Calendar 代码实例 下面来看两个复杂一点的例子。 如下图所示，ListGrid 控件中显示的数据能根据上面的 FilterBuilder 控件所设置的条件进行过滤。查询条件可以是一个或多个，查询条件之间可以选择 and、or 和 not 三种逻辑运算符。 图 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. 原始表格
　　
　　实现如上表格的是 SmartGWT 的 ListGrid 控件，它内置了对公式和加总的支持。只需增加以下两行代码： 清单 5. 公式加总代码实例 在 Show Formula builder 这个按钮中，我们只需要调用一个方法，一行代码： 清单 6. 公式编辑支持代码实例 SmartGWT 为你完成了其它全部功能。你只需点下按钮，这时会显示如下公式字段创建对话框，很容易即可实现人口密度这个计算而来的字段。