使用 GWT 和 RESTful Web 服务构建动态的组织树(1)
 
- UID
- 1066743
|

使用 GWT 和 RESTful Web 服务构建动态的组织树(1)
简介最近几年,Web 应用程序开发的潮流是创建富 Internet 应用程序,其中大多数是使用 Asynchronous JavaScript + XML (Ajax) 实现的。但是,由于编写 JavaScript 代码比较复杂,这种方法并不容易,尤其是很难构建大型 Web 应用程序。因此出现了 GWT:它让我们能够使用 Java 编程而不是 Ajax 构建功能丰富的响应性的 Web 界面。GWT 还提供 Java 开发的所有优势,比如出色的 IDE 支持和高级调试功能。GWT 可以显著提高生产力并丰富用户的体验。在本文中,我要解释如何在 Eclipse 中构建 GWT 应用程序,以及如何使用 GWT Tree 和 TreeItem 部件为 University Corporation of Atmosphere Research (UCAR) 创建一个示例组织结构。我要解释如何实现惰性装载、如何与 RESTful Web 服务集成以及如何实现 GWT 回调和定制的异常。使用 JSON 作为 RESTful Web 服务的数据格式。
软件需求首先,需要下载以下软件包,按照相应网站上的安装指南安装它们(见 中的链接)。
- Eclipse IDE for Java EE Developers Galileo (Eclipse 3.5)
- GWT 2.0
- GWT plug-in for Eclipse
- MySQL 5.1 或 DB2® Express-C
- Tomcat 6.x
RESTful Web 服务RESTful Web 服务为 GWT 客户机提供组织数据。在本文中,我不讨论实现 RESTful Web 服务的步骤;您只需设置数据库并把 WAR 文件部署到 Tomcat 服务器上。可能还需要在配置文件中修改几个数据库属性,比如数据库主机、登录名和密码。RESTful Web 服务是使用多层架构实现的,我在两篇文章 “” 和 “” 中讨论过这种架构。
设置数据库我使用 MySQL Community Server 5.1 作为本文的数据库。但是,也可以使用 DB2 Express-C 等其他数据库。在 中可以找到 MySQL 的下载链接。在您选择的主机上下载并安装它(如果还没有这么做的话)。然后创建数据库 gwtresttutorial 和用户 gwtresttutorial,密码为 gwtresttutorial。连接 gwtresttutorial 数据库并作为 gwtresttutorial 登录。从 部分下载 sql 脚本,运行脚本以创建表并在表中插入数据。
对于让 RESTful Web 服务服务器连接 DB2 Express-C 或其他 DB2 系列数据库,所用的配置与清单 1 中的 MySQL 配置非常相似,只需做以下修改:
- 使用 com.ibm.db2.jcc.DB2Driver 作为 driverClassName。
- 使用 jdbc:db2://<host>:<port>/<database_name> 作为 URL,其中的 host 是安装 DB2 Express-C 的主机的名称,port 是用于访问数据库的端口号,database_name 是数据库实例的名称。
- 把 DB2 Express-C 安装目录中的 db2jcc.jar 和 db2jcc_license_cu.jar 文件复制到 WEB-INF/lib 目录。
- 可能需要修改下载的 setup.sql 脚本,改用 DB2 语法。
把 WAR 文件部署到 Tomcat 服务器从 部分下载 WAR 文件并把它保存到 Tomcat 文件夹 <TOMCAT_HOME>/webapps 中,其中的 TOMCAT_HOME 是安装 Tomcat 服务器的位置。如果还没有安装 Tomcat,可以从 下载它。
把 WAR 文件部署到 <TOMCAT_HOME>/webapps 目录之后,如果 Tomcat 服务器正在运行,它会把 WAR 文件解压为 gwtRESTTutorial 文件夹。检查 <TOMCAT_HOME>/webapps/gwtRESTTutorial/WEB-INF/classes/applicationContext.xml(清单 1),确保 dataSource bean 的配置值与 MySQL 数据库所用的值匹配。注意,如果做了任何修改,可能需要重新启动 Tomcat 服务器。
清单 1. 在 applicationContext.xml 中配置 dataSource bean 1
2
3
4
5
6
7
| 1. <bean id="dataSource"
class="org.springframework.jdbc.datasource.DriverManagerDataSource">
2. <property name="driverClassName" value="com.mysql.jdbc.Driver"/>
3. <property name="url" value="jdbc:mysql://localhost:3306/gwtresttutorial"/>
4. <property name="username" value="gwtresttutorial"/>
5. <property name="password" value="gwtresttutorial"/>
6. </bean>
|
访问 RESTful Web 服务我为本文实现了两个 RESTful Web 服务。第一个提供特定职员的信息。访问这个 Web 服务的 URI 是 http://localhost:8080/gwtRESTTutorial/rrh/employees/<EMP_ID>,其中的 EMP_ID 是职员的 ID。它返回一个 JSON 字符串,其中包含详细的职员数据。清单 2 给出返回的 JSON 字符串的示例。
清单 2. 职员 RESTful Web 服务返回的示例 JSON 数据1
2
3
4
5
6
7
8
9
| 1. {
2. "id":20,
3. "firstName":"Robert",
4. "nickName":"Bob",
5. "lastName":"Sunny",
6. "title":"SE",
7. "phone":"303-123-1234",
8. "email":bobs@ucar.edu
9. }
|
第二个 Web 服务提供特定组织单元的信息。它的 URI 是 http://localhost:8080/gwtRESTTutorial/rrh/organizations/<ORG_ID>,其中的 ORG_ID 是组织单元的 ID。与职员服务一样,它返回一个 JSON 字符串,其中包含详细的组织数据(清单 3)。详细数据包含 ID、首字母缩写、名称、负责人姓名、负责人头衔、组织及其各级子组织中职员的总数。它还包含在这个组织单元工作的职员的数据数组和直接子组织单元的数据数组。职员数据和子组织数据只包含 ID 和显示名。
清单 3. 组织 RESTful Web 服务返回的示例 JSON 数据1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| 1. {
2. "id":1,
3. "acronym":"NCAR",
4. "name":"National Center for Atmospheric Research",
5. "leadName":"Dan Bush -Director",
6. "leadTitle":"Director",
7. "totalEmployees":15,
8. "employees":
9. [{
10. "id":2,
11. "displayName":"Dan Bush - Director"
12. },
13. {
14. "id":3,
15. "displayName":"Lori Stanley - Deputy Director"
16. }],
17. "subOrgs":
18. [{
19. "id":3,
20. "displayName":"CISL"
21. },
22. {
23. "id":5,
24. "displayName":"EOL"
25. },
26. {
27. "id":6,
28. " displayName ":"RAL"
29. },
30. {
31. "id":4,
32. "displayName":"ESSL"
33. }]
34. }
|
|
|
|
|
|
|