SmartGWT 进阶，第 2 部分: 服务器端数据轻松集成
SmartGWT 企业版概览
这是 SmartGWT 入门系列的第三篇文章。在这篇文章中，我们将用实例介绍 SmartGWT 版的数据集成功能。与前两篇不同，本篇将使用 SmartGWT 企业版。SmartGWT 企业版是 SmartGWT 四个不同的发行版中功能最强大的一个。它的强大主要体现在丰富的服务器端 Java 类库，对数据访问的强有力支持，以及一系列可视化编程工具。
本文将使用 SmartGWT 企业版来介绍 SmartGWT 中的简单易用而功能强大的数据集成。本文扩展本系列第二篇文章中的实例，讲 xml 数据源替换为真正数据库。使用本文实例，需要先下载 SmarGWT 企业版 2.0 的试用版，下载链接请查看参考资料。
回页首
SmartGWT 数据集成
在本系列第二篇文章中，我们主要介绍了数据绑定，即界面组件如何和数据源连接并协同工作。这篇文章将重点介绍数据源和后台数据库如何交互。
在 SmartGWT 中，术语“数据集成”指的是将客户端程序中的数据源（DataSource）和服务器端的数据提供程序连接起来的过程。数据提供程序可能是关系型数据库，也可能是 Web Services 等能返回数据的网络服务。集成后的数据源必须能提供 CURD 四种基本数据操作，界面程序通过数据源对后台数据库进行这四种操作。
由于 SmartGWT 本身是用 Java 所写，对数据服务是否使用 Java 做了不同的处理。据此，分出了两种数据集成：服务器端数据集成和客户端数据集成。服务器端数据集成指的是，通过使用 SmartGWT 中基于 Java 的服务器程序来连接 Java 对象或者 JDBC 访问的数据库。这里不需要事先存在能访问数据库的 Web 应用，只要数据能用 Java 或 JDBC 访问即可。SmartGWT 在服务器端提供了将这些 Java 数据服务集成到 Web 应用中的能力，所以称为服务器端数据集成。客户端数据集成是指将 SmartGWT 的数据源与现有的可以返回 XML，JSON 或其他文本格式的 HTTP 数据服务连接。由于 HTTP 服务已经存在，SmartGWT 客户端可以直接通过 HTTP 协议来访问数据，SmartGWT 提供的数据连接功能发生在客户端，故称之为客户端数据集成。
下图展示了 SmartGWT 应用中可能的组件结构和数据访问路径。路径 1 是服务器端数据集成；路径 2，3，4 则表示了客户端数据集成。
图 1. 数据集成路径示意图
这么多条路径，如何来选择合适的方式？ SmartGWT 的文档中给出了简明的流程图，如图 2 所示。
图 2. 数据集成方式选择示意图
如果你不是在使用支持 Java 的 Web 服务器，那么你需要选择客户端数据集成。客户端数据集成主要涉及到实现支持 CRUD 四个基本操作的 HTTP 数据服务和创建客户端数据源。由于本系列以 Java Web 应用开发为主，将不深入探讨客户端数据集成。
对于服务器端数据集成，用户可以 SmartGWT 企业版中包含的类库和工具，不写一行代码来实现应用和数据库的连接。客户端组件和数据服务之间的桥梁是数据源（DataSource），用户的任务就是创建合适的数据源。SmartGWT 企业版内置了对 JDBC 和 Hibernate 的支持，对这样的数据源，只需通过定制配置文件的方式即可动态的创建，大大简化了开发。而且数据源将界面组件和后台数据分隔开来，带来的好处是可以替换数据源而不改动任何客户端代码。
回页首
辅助开发工具介绍
在进行实例讲解之前，我们先对 SmartGWT 提供的丰富的辅助开发工具做简单介绍。正是由于这些工具的存在，才让使用 SmartGWT 做开发变得更加轻松。
可视化生成器（Visual Builder）
SmartGWT 提供的可视化生成器，具有强大的可视化开发和预览界面的功能，不写一行代码就能灵活方便地使用整个 SmartGWT 框架，创建出复杂的 Web 应用程序。非开发人员能在这个“所见即所得”的环境中生成功能原型，而开发人员能利用此工具快速便捷地完成复杂的开发工作。
利用该工具，用户通过直接拖拽组件到项目树中，就能把组件加到项目里，并且能通过模板设置组件的各种属性。同时，它还提供了便捷的数据集成功能。用户能够通过向导定义和配置数据提供者以及数据源，并且通过拖拽就能直接将定义好的数据源加到组件上。“画”好的页面能够被保存成项目，并能被重新装载回可视化生成器进行编辑。
可视化生成器的界面如图 3 所示。
图 3. 可视化生成器的界面
为了支持数据集成，可视化生成器提供了数据源生成模板（DataSource Creation Wizard）和数据源编辑器（DataSource Editor）两个工具。前者能从现有的 Hibernate 实体或者 SQL 表生成出功能完全的数据源，而后者则能对现有的数据源进行可视化编辑。
数据源管理控制台（DataSource Admin Console）
该工具主要提供三个功能：一是配置数据提供者，即数据库；二是测试连接到任意配置好的数据库，并远程浏览数据库中的数据；三是将生成的数据源导入项目。该工具能操作 SmartGWT 所支持的所有类型的数据库，包括 Oracle、DB2、Mysql、HSQLDB、Cache、SQLServer 和 PostgreSQL。界面如图 4 所示。
图 4. 数据源管理控制台的界面
批量数据源生成器（Batch DataSource Generator）
该工具能从现有的数据库表、Hibernate 映射和 Java 类中生成 XML 或 JSON 格式的数据源定义文件，也能选择性地从现有数据库表中抽取测试数据。为了达到批量产生数据源的目的，用户应在 List of table names 选项中，输入用逗号分隔的多个数据库表名；或者在 List of class names 选项中，输入用逗号分隔的多个 Hibernate 实体名或者 Java 类名。批量数据源生成器的界面见图 5 所示。
图 5. 批量数据源生成器的界面
开发控制台（Developer Console）
开发控制台不仅提供查看服务器日志信息的功能，而且还提供直接的 DOM 检查和 RPC 访问的监控，从而使开发人员能更容易地进行代码调试。开发控制台的界面如图 6 所示。
图 6. 开发控制台的界面
如何调用辅助开发工具
要调用上述辅助开发工具，我们首先都需要在 GWT 模块描述文件（如 com\sample\MyFirstSmartGWTProj.gwt.xml）增加一行代码
清单 1. 描述文件中工具定义
| |
然后在 Java 代码中增加对相应工具的调用，也就是，用 com.smartgwtee.tools.client.SCEE.openVisualBuilder () 调用可视化生成器，用 com.smartgwtee.tools.client.SCEE.openDataSourceGenerator () 调用批量数据源生成器，用 com.smartgwtee.tools.client.SCEE.openDataSourceConsole () 调用数据源管理控制台。这样我们就完成了对前三种工具的调用。
而调用开发控制台，主要有两种方式：
- 在当前浏览器中敲入 URL: javascript:isc.showConsole()，即会新弹出开发控制台窗口。
- 如果想通过快捷键（如 Ctrl-A）打开开发控制台，需要在入口类，即 EntryPoint 的实现类中加入如下代码：
清单 2. 通过快捷键打开开发控制台
if (!GWT.isScript()) {
KeyIdentifier debugKey = new KeyIdentifier();
debugKey.setCtrlKey(true);
debugKey.setKeyName("A");
Page.registerKey(debugKey, new KeyCallback() {
public void execute(String keyName) {
SC.showConsole();
}
});
}
|
回页首
员工信息系统实例：准备工作
下面我们通过对该系列上一篇文章中介绍员工信息管理系统进行扩展，把后台数据库集成到应用中去，一步步的展示如何使用 SmartGWT 企业版的服务器端数据集成。
实例数据库配置
在该实例中，后台员工数据库使用的是 IBM 的 DB2。建立数据表的 SQL 语句如清单 2 所示。成功创建数据表后，可以插入几条数据备用。
清单 3. 建立员工信息表的 SQL 语句
CREATE TABLE "DB2ADMIN"."EMPLOYEEINFO" ( "SALARY" DOUBLE WITH DEFAULT 0.0 , "REPORTSTO" BIGINT WITH DEFAULT NULL , "NAME" VARCHAR(10) WITH DEFAULT '' , "EMPLOYEEID" BIGINT NOT NULL PRIMARY KEY , "ONBOARD" TIMESTAMP , "JOB" VARCHAR(10) WITH DEFAULT '' , "ORGUNIT" VARCHAR(10) WITH DEFAULT '' ) |
运行环境配置
SmartGWT 分为两部分，运行在浏览器端的客户端组件，以及运行在 J2SE 容器的服务器组件。参考本系列的第一篇文章中的 SmartGWT 开发环境搭建部分的前三步骤，用户可以新建标准的基于 GWT 的 Web 项目，要在此基础上配置基于 SmartGWTEE 的 Web 项目，需要在 GWT 模块描述文件（如 com\sample\MyFirstSmartGWTProj.gwt.xml）增加一行：
清单 4. 引入 SmartGWT EE 模块
| |
要集成 SmartGWT 的服务器组件，我们需要对每个项目进行以下步骤的配置：
- 把下载的 smartgwtee-2.0.zip 解压到 C 盘根目录。
- 把 C:/smartgwtee-2.0/lib 下的所有 .jar 文件加到当前项目的 classpath 里。
- 把 C:/ smartgwtee-2.0/samples/showcase/src 下的 log4j.isc.config.xml 文件拷贝到当前项目的 src 目录。
- 把 C:/ smartgwtee-2.0/samples/showcase/src 下的 server.properties 文件拷贝到当前项目的 src 目录。
- 把 C: /smartgwtee-2.0/samples/showcase/war/WEB-INF 下的 iscTaglib.xml 文件拷贝到当前项目的 /war/WEB-INF 目录。
- 把 C:/smartgwtee-1.2.1/samples/showcase/war/WEB-INF 下的 web.xml 文件拷贝到当前项目的 /war/WEB-INF 目录，删除 web.xml 文件中与 spring 和 HSQLDB 相关的配置。
回页首
员工信息系统实例：创建数据源
在前文我们介绍过 SmartGWT 提供的辅助开发工具，其中的可视化生成器，数据源管理控制台以及批量数据源生成器都包含了与创建数据源有关的功能。下面我们来一步步地创建数据源。
- 配置 server.properties 文件
在 server.properties 文件中，我们需要提供作为持久层的数据库的连接信息。在默认情况下，SmartGWT 会连接内置的 HSQLDB 数据库。在本实例中，我们使用 DB2 作为后台数据库，相关设置如清单 3 所示。
清单 5. 配置 DB2 的连接信息
# -------------- SETTINGS FOR DB2 -------------------- sql.DB2.database.type: db2 sql.DB2.interface.type: driverManager # DataSource sql.DB2.driver: com.ibm.db2.jcc.DB2Driver sql.DB2.driver.serverName: 9.181.84.1 sql.DB2.driver.databaseName: GWTTEST sql.DB2.driver.portNumber: 50000 sql.DB2.driver.user: db2admin sql.DB2.driver.password: db2admin sql.DB2.driver.driverName:db2 sql.DB2.interface.credentialsInURL:false
- 配置 classpath
我们需要将连接数据库所依赖的 Jar 文件都加到项目中。在本实例中，我们把 db2jcc.jar 和 db2jcc4.jar 加进了项目的 classpath。
- 生成数据源
根据前文所述的步骤，启动批量数据源生成器。选择配置好的 DB2 数据库，填写正确的表名（EMPLOYEEINFO），即能马上根据数据库中的表的信息自动生成数据源，可以选择是否同时导出表中的数据。生成的数据源文件会默认保存在 shared/ds 目录下。对生成的文件需要做些修改，调整各个字段的顺序；增加
foreignKey 和 rootValue 信息。详细内容如清单 4 所示。
清单 6. 生成的数据源
注意：这里数据源中字段的标题定义都是英文的。由于对 XML 数据源定义做本地化需要比较复杂的 GWT 本地化知识，为了不引入更多枝节，所以此处保留英文。
- 导入数据源
根据前文所述的步骤，启动数据源管理控制台。在“Import DataSources”页面，选择刚生成的 EMPLOYEEINFO 数据源，并导入当前项目。用户还可以有选择地导入数据作为测试数据。
为了页面能正确加载数据源，我们需要在入口页面文件（EmployeeInfo_SmartGWTEE.html）中加入以下一行代码。
清单 7. 配置 DB2 的连接信息
- 应用数据源
定义好数据源后，要想在组件中显示数据源对应的数据是非常简单的。用户只需直接给组件设置定义好的数据源即可。例如，如下代码就能在表单中显示 EMPLOYEEINFO 数据源对应的数据。
清单 8. 配置 DB2 的连接信息
DynamicForm form = new DynamicForm(); form.setDataSource(DataSource.get("EMPLOYEEINFO"));
回页首
员工信息系统实例：运行结果
虽然只是做了一些简单的配置工作，但是我们已经可以运行这个程序了！首先，我们在数据库表里插入一些数据，看是否可以成功加载。
让我们编译该项目，并运行它。如下图，可以看到，已经成功加载数据。
图 7. 保存新数据运行界面
可以对该程序做各种操作，在数据库中可以及时看到更新的结果。查看 Eclipse 的控制台，调试信息中会打出所进行的各种 SQL 操作。
清单 8. 控制台中的调试信息
=== 2010-01-13 16:30:26,859 [l0-2] INFO SQLDriver -
[builtinApplication.EMPLOYEEINFO_add] Executing SQL update on 'DB2':
INSERT INTO EMPLOYEEINFO (ONBOARD, ORGUNIT, SALARY, REPORTSTO, NAME,
JOB) VALUES ('2004-01-01 00:00:00.0', '后勤部', 18100.0, 4, '诸葛亮',
'CFO')
|
回页首
常见问题及解决方法
- Server error: taglib not defined
检查 war/WEB-INF 目录下是否有 iscTaglib.xml 文件。
- DB2 Driver Class Not Found
检查 classpath 里是否正确的配置了 JDBC driver 文件。
- 数据库连接出错
检查 server.properties 文件是否放在了 src 目录下。
检查 server.properties 文件中数据库相关配置是否正确
回页首
总结
本文通过实例介绍了如何将数据库服务和 SmartGWT 应用集成。至此，本系列完整的介绍了使用 SmartGWT 开发企业级应用程序的主要步骤，相信读者已经体会到了它的易用和强大。
SmartGWT 已经成熟并且稳定发展，是 Web2.0 开发的优秀框架，希望通过本系列文章，大家能轻松的开始 SmartGWT 开发之路。