简介： 本文基于 Business Space（业务空间）V6.2.0.1 版本的新功能，介 绍如何使用 JavaScript、Ajax、JSON 等技术来开发 Mashup 应用。通过本文， 读者可以了解 Business Space（业务空间）V6.2.0.1 的新特性，以及如何利用 这些新特性在业务空间中快速开发业务流程应用系统。。
引言
WebSphere 提供支持的Business Space（业务空间）是 IBM WebSphere BPM 产品线中重要的组件之一，它为广大用户提供了一个协作的和基 于角色的用户体验。业务空间整合 WebSphere Process Server、WebSphere Business MoniTor、WebSphere Business Service Fabric, WebSphere Modeler Publishing Server、FileNet BPM 等产品的功能，通过使用 Widget（以下简称 小部件）为客户创建敏捷、强大的Web 2.0应用程序。
Mashup 是一种新型 的基于 Web 的交互式应用程序，它集成了来自多个源的内容并将其交付到一个页 面中进行显示。
Ajax 由 HTML、JavaScript™技术、DHTML 和 DOM 组成，是构建 Mashup应用的利器。它能够使 Web 页面从服务器获取内容并使用 JavaScript. 代码在适当位置异步地进行自我更新。这样，用户就可以与指定用户 界面进行交互而无需重新加载整个页面。
在 Ajax应用中，JavaScript. 发出异步请求后，得到的响应并非总是 XML 格 式，这是因为 XML 通常缺乏本地的、易于使用的JavaScript. 解析器。这种情况 下，使用 JSON 就成为不错的选择。JSON 即 JavaScript. Object Notation，它 是一种轻量级的数据交换格式，非常适用于服务器与 JavaScript. 的交互。
小部件是业务空间中最基本的可定制单元，是构建业务空间应用的基础。 在业务空间中，可以创建一个或多个 Mashup 页面，然后在每个 Mashup 页面中 加入小部件并进行配置，最后将各个小部件绑定在一起，使它们协同工作，就构 成了业务空间中的一个 Mashup应用。
本文的目的在于，介绍业务空间 V6.2.0.1 版本中小部件集成方面的新特性， 以及如何基于这些新特性，使用 JavaScript、Ajax、JSON 等技术来开发 Mashup 应用。
问题的提出
WebSphere 提供支持的业务空间为用户提供了许多预定义的小部件，包括 IBM PBM 产品相关的业务小部件，以及一些通用的小部件，比如 Web Site、演示和 Google 日历等。这些预定义的小部件可以方便、灵活地显示在页面上，能够满足 用户的基本业务需求。但在 V6.2.0.1 之前，业务空间中各个小部件之间的逻辑 关系和消息传递必须在开发期间就预先定义好，在运行时无法灵活配置。用户如 果想针对自身企业或组织现状灵活搭配各个小部件，以达到真正自由定制业务流 程的目标还是一个比较大的挑战。
解决方案
有什么好的办法来解决这个问题呢？在业务空间 V6.2.0.1 之前，用户不得不 重新开发相应小部件，来满足自己的业务需求。针对这个问题，业务空间 V6.2.0.1 专门提供了一些新的特性，以满足用户在现有小部件基础上快速灵活地 搭建 Mashup应用的需求。
这些新特性包括：
小部件 Wiring –同一页面中的小部件通过 Wiring（以下简称绑定）来达到 相互协作的目的。一个绑定包括一个源小部件和目标小部件，而每个小部件可以 有若干个发送和接收事件，一个绑定就是将源小部件的发送事件和目标小部件的 接收事件关联起来，以实现两个小部件之间的逻辑关系确立和消息传递。
Script. Adapter 小部件– Script. Adapter 是 V6.2.0.1 中全新开发的小部 件，用于连接同一页面中其他两个小部件，以便对事件有效内容执行数据转换。 使用该小部件，可以显示有助于调试小部件的事件数据以及在小部件事件通信中 插入逻辑；例如，将事件从一种格式映射为另一种。
Hiding 小部件– 通过这个功能可以将一个小部件在页面上设置成不可见，但 不会影响该小部件的功能。一般来说，Script. Adapter 小部件对最终业务用户是 没有意义的，我们会借助这个功能让它在运行时隐藏起来。
URL Addressability – 不同页面中的小部件可以通过 URL Addressability 来达到相互协作的目的。在 V6.2 中已经提供了创建 URL 的功能，但是 URL 中 只包括目标空间和页面地址。而 V6.2.0.1 中产生的URL 则还会有目标页面的状 态信息，其中可以指定页面中各个小部件及其接收事件名称和内容。
Global Page –可以将业务空间中的页面属性设置为全局页面，这样业务空间 中的所有用户都有权限看到这个页面。一般来说这个设置与 URL Addressability 是密切相关的：业务空间中的每个空间和页面都是有权限控制的，当用户根据产 生的URL 来访问别人创建的页面时必须获得该页面的访问权限。这就要求被访问 页面的管理员赋予相应的权限。如果系统中存在大量的访问用户且属于不同的用 户组，管理员的任务会非常繁重。而使用 Global Page 就会解决这样的问题。
接下来我们就基于上面介绍的前三个新特性，来实现一个业务空间中一个页面 内的Mashup应用。如果想要在多个 Mashup 页面间传递信息或跳转，则还需要借 助后两个新特性。
环境准备
1. 安装 WebSphere Process Server（以下简称 WPS） V6.0.2.1，并创建一 个独立 WPS 概要文件。
在创建应用程序服务器过程中，请确认在管理安全页面选中“启用管理安全性 ”选项，如图 1 所示。请记住所输入的用户名和密码，本例为 admin/admin。
图 1. 启用管理安全性
假如您选择高级概要文件创建，请确认选中“配置 Business Space”选项， 否则业务空间不会被安装和配置。如图 2 所示。
图 2. 配置 Business Space
2. 启动 WPS 服务器
业务空间服务会随着 WPS 服务器一同启动。
创建一个业务空间
下面我们会创建一个业务空间，其中包含两个页面：“创建任务”和“我的工 作”。通过“创建任务”页面，我们会利用 WPS 提供的预定义小部件为自己或他 人分配查询任务；通过“我的工作”页面，我们可以知道自己的任务，并看到任 务标题在 Google 中的查询结果。
登陆业务空间
在浏览器中输入地址 http://host_name:port_number/BusinessSpace，以创 建 WPS 概要文件时输入的管理安全信息作为登陆页面的用户名 / 密码，本例为 admin/admin。
创建一个业务空间
在业务空间管理器中，单击“创建新的业务空间”图标以创建业务空间，如图 3 所示。
图 3. 创建新的业务空间图标
在弹出对话框中输入业务空间名称，如“我的工作空间”。使用缺省值“从头 开始”作为将要创建的空间类型，如图 4 所示。
图 4. 创建新的业务空间对话框
创建页面
在业务空间管理器中，选中刚刚创建的业务空间，然后单击“创建新页面”图 标向业务空间添加一个页面，如图 5 所示。
图 5. 创建新页面图标
在弹出对话框中输入新页面的名称“创建任务”，然后点击“确定”按钮。如 图 6 所示
图 6. 创建新页面对话框
同样的方法，在该业务空间中创建页面“我的工作”。
至此“我的工作空间”以其两个页面已经创建完毕，如图 7 所示。
图 7. 已创建的业务空间及页面
创建小部件
在业务空间管理器中，单击页面名称“创建任务”以将其打开。
在“创建任务”页面添加两个小部件：“创建任务”和“任务信息”小部件， 如图 8 所示。
图 8. “创建任务”页面
在“我的工作”页面添加三个小部件：“我的任务”，“Script. Adapter”和 “Web Site”。如图 9 所示。
图 9. “我的工作”页面
在业务空间中创建 Mashup应用
至此，我们已经创建了两个 Mashup 页面。在“创建任务”页面中，WPS 提供 的两个预定义小部件会自动相互绑定，可以为自己或他人分配查询任务；在“我 的工作”页面，我们的目标是当在“我的任务”列表中选中一个任务时，“Web Site”小部件会自动显示该任务主题在 Google 中的搜索结果。“我的任务”是 WPS 提供的预定义小部件，“Web Site”是业务空间中的常用小部件，两者之间 没有直接联系，不会自动绑定。因此，我们需要分析两个小部件的接收和发送事 件，并手工的将它们绑定在一起。
当一个任务被选中时，“我的任务”小部件会发送事件 “com.ibm.widget.FocusChanged”，该事件类型为 JSON，内容为被选中任务的 编号和类型。
而“Web Site”小部件只有一个接收事件“displayHtml”，该事件类型为 String，内容为具体网站 / 页面的URL。
以上分析可知，这两个小部件之间无论是事件数据类型还是事件内容均不匹配 ，无法直接将二者绑定起来，这时候我们就需要用到 Script. Adapter 小部件。
使用 Script. Adapter 小部件将两个小部件关联起来
在“我的工作”页面，单击“Script. Adapter”小部件的下拉图标，然后选择 “Widget Wiring”。如图 10 所示。
图 10. Widget Wiring 选项
在“Widget Wiring”页面，将 Script. Adapter 小部件与另外两个小部件通 过指定事件连接起来，请注意在“我的任务”小部件的发送事件中选择的是 “com.ibm.widget.FocusChanged”，如图 11 所示。
图 11. Widget Wiring 页面
编辑 Adapter 小部件以传递事件内容
在“我的工作”页面，单击 Script. Adapter 小部件的下拉图标，然后选择“ 配置”，如图 12 所示。
图 12. Script. Adapter 配置选项
在 Java Script. 输入框中输入以下代码：
清单 1. Script. Adapter 代码
var payloadJson = dojo.toJson(payload);var payloadObj = eval('(' + payloadJson + ')');var taskId = payloadObj.id;var xmlhttp = null;if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();if ( typeof xmlhttp.overrideMimeType != 'undefined') {xmlhttp.overrideMimeType('text/xml');}} else if (window.ActiveXObject) {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} else {alert('Your browser does not support xmlhttprequests?');}var strUrl = "/rest/bpm/htm/v1/task/" + taskId;xmlhttp.open('GET', strUrl, false);xmlhttp.send(null);if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {responseJSON = eval( "(" + xmlhttp.responseText + ")" );} else {alert("error");}var subjectDescription = responseJSON.description;var subjectText = subjectDescription .split("：")[1];return "http://www.Google.cn/search?q=" + subjectText;
代码解析：
“payload”为 Script. Adapter 从源小部件发送事件中接收到的数据对象；
前三行代码获取到所选择任务的标识；
第 4 行到第 27 行是根据任务标识，利用 WPS 提供的REST API 获取该任务 的详细信息；
最后三行是从任务的详细信息中获取任务主题，然后把它作为 Google 搜索的 关键字。
注意：如果是英文环境，请在倒数第二行中将”：”替换为”:”。
隐藏 Script. Adapter 小部件
缺省 Script. Adapter 小部件运行时会显示接收和发送事件信息，便于 IT 人 员进行调试。一般来说，Script. Adapter 小部件对于业务用户来说是不可见的， 所以本例中我们要隐藏 Script. Adapter 小部件：在“我的工作”页面，单击 Script. Adapter 小部件的下拉图标，然后选择“Convert to Hidden Widget”。 如图 13 所示。
图 13. 隐藏小部件
下图是隐藏 Script. Adapter 小部件后的页面效果 , 如图 14 所示。如果想 要将 Script. Adapter 小部件恢复成可见状态，需要在页面下拉框中选择“Show All Widget”，然后在 Script. Adapter 小部件下拉框中选择“Convert to Visible Widget”。
图 14. 小部件隐藏效果
以上我们已经创建了一个业务空间，其中包含两个 Mashup 页面。通过第一个 页面，我们能够为自己或他人分配查询任务；通过第二个页面，我们可以知道自 己的任务，并看到任务标题在 Google 中的查询结果。接下来，我们就在这个业 务空间中实际操作一下，来验证 Mashup应用运行的结果。
运行 Mashup应用
创建任务
在“创建任务”页面，为自己创建一个查询任务，以便该任务能在“我的工作 ”页面中显示出来：在“创建任务”小部件中选择“查询”选项，然后点击“创 建”按钮；在 “任务信息”小部件中输入详细信息，确保用户标识中的输入值为 当前用户标识。此处输入的查询主题（也就是“WebSphere 业务空间”）会作为 Web Site 小部件中的Google 查询关键字。如图 15 所示。
图 15. 创建任务
查看任务
在“我的工作”页面，在“我的任务”小部件中选择刚刚创建的任务，Web Site 小部件中会自动显示该任务主题在 Google 中的查询结果。如图 16 所示。
图 16. 查看任务
小结
本篇文章介绍了业务空间 V6.2.0.1 在集成方面的新特性，并利用这些特性对 业务空间中两个相互独立的小部件进行绑定，实现了一个基于业务空间的Mashup 应用。从实例中可以看出，业务空间可以帮助业务人员和 IT 人员快速地进行业 务流程定制和实现，为企业和组织真正实现随需应变的业务提供了强有利的支持 。
本文配套源码
最可怕的敌人，就是没有坚强的信念。
