图 7. 已创建的业务空间及页面

创建小部件

在业务空间管理器中，单击页面名称“创建任务”以将其打开。

在“创建任务”页面添加两个小部件：“创建任务”和“任务信息”小部件， 如图 8 所示。

图 8. “创建任务”页面

使用WebSphere Process Server提供的Business Space开发Mashup应用(5)

在“我的工作”页面添加三个小部件：“我的任务”，“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 配置选项

使用WebSphere Process Server提供的Business Space开发Mashup应用(6)

在 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　&&　xmlhtt

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!