IBM Mashup Center:OpenSocial 互操作性

本文介绍了如何扩展 IBM® Mashup Center 以使用其他 widget 组件模型,比如 OpenSocial gadget,并与其进行互操作。

Han Nguyen, 资深软件工程师, IBM  

Han Nguyen 是一名软件工程师,主要致力于新出现的标准并重点关注跨各种行业标准和产品的社交计算。她之前曾从事过服务和软件启用方面的很多技术。



Kris Vishwanthan, 高级 IT 架构师, EMC

Kris Vishwanthan 是北卡罗莱纳州瑞利市 IBM Research Triangle Park 的高级 IT 架构师。他是一个团队主管并且是 IBM Mashup Center 产品的卓越贡献者。此外,他还是 iWidget 规范、iWidget 容器实现和 OpenSocial 和 OpenAjax 规范的积极贡献者。在此之前,他是 WebSphere Portal 架构师,为世界 500 强公司实现门户解决方案。Kris 是一名实践架构师和一个项目管理专家,在一些 IBM 内部和外部软件项目中扮演了很多重要角色。



2010 年 2 月 22 日

编者注:想亲自动手试一试?请立即下载 IBM Lotus 软件试用版。对此话题十分熟悉?要分享您的专家经验?立即参与 IBM Lotus software wiki 计划。

简介

IBM Mashup Center 是基于 Web 2.0 的情景应用平台,支持快速的 Web 应用组装,具有适用于企业环境部署的安全性、治理和管理功能。Mashup Center 应用基于 iWidget 组件模型,它是一个 IBM 定义的规范,记录在 iWidget Specification 2.0中。


背景

作为 Web 2.0 技术的领袖和革新者,IBM 定义了一个可重用的组件技术,叫做 iWidgets,它允许客户快速构建和部署情景应用。iWidget 技术的关键部分是 iWidget 容器。容器管理 iWidget 的生命周期,并帮助 IBM 及其客户将多种内容快速、轻松地聚合到强大的情景应用中。现在,iWidget 及其容器(称为 Mashup Enabler)用在了各种 IBM 产品中,包括 IBM WebSphere® Portal、IBM Lotus® Connections 和 Business Process Manager (BPM) 堆栈中。

IBM 业务战略的一个关键部分是提供高可用性产品和推广开发计算技术,使其客户能够构建最能满足他们需求的解决方案。作为此战略的一部分,IBM 一直与 OpenAjax Alliance 合作,OpenAjax Alliance 是一个致力于创建可互操作的 widget 技术的企业供应商团体,包括 Tibco、Microsoft® 和 Adobe®。

例如,在消费领域,一个名为 OpenSocial 的标准悄然兴起。这一社区驱动的规范定义了一个基于浏览器的组件模型,叫做 gadget。此外,OpenSocial 定义了一个 API,用于访问关于用户档案及其社交图(比如其朋友、活动、共享应用、身份验证和授权)的信息。一个名为 Shindig 的 Apache Software Foundation 的开源项目提供了一个 OpenSocial 的参考实现。

随着行业发展,如 IBM 之类的领先企业必须提供战略,允许客户根据其独特的业务需求选择合适的组件模型。作为行业领袖,IBM 正与这些开放社区合作,通过添加企业功能和提高与其他组件的互操作性改进这些技术。本文通过展示如何在 Mashup Center 中使用 OpenSocial gadget 介绍了在组件模型之间实现互操作性的几个基本步骤。


Mashup Center 和 OpenSocial 整合

各种 Web 2.0 用户界面组件的格式也日益多样化,需要工具将其组合在一起。这些 Web 组件经常交互并且相互发送消息,有时会导致互操作性问题。Mashup Center 不仅提供了工具用来发现并将不同的 widget 组件组装到同一页面上,包括 OpenSocial gadget,而且提供了功能使其互联而且能够跨各种组件保持这些连接。

Mashup 页面

mashup 页面是一个简单的 HTML 标记,可以包含到 iWidget 和其他类 gadget 的引用。Mashup Center Livetext 框架解析 HTML 并将请求转交给不同的 widget 和 gadget 容器以呈现 widget。页面标记包含其他元数据,比如标题、首选项、连接以及其他组件,遵守声明性语法集合,用于将 iWidget 实例放到更广泛的标记集合中,比如 HTML。此声明式语法称为 iWidget 微格式。

清单 1 是一个 mashup 页面示例,包含 iWidget、OpenSocial gadget 和其他相关元数据。

清单 1. 样例 mashup 页面
 <span layoutdata="layout:freeForm;"
 id="ns_22f00fd0d86811deb7f591bc4648e1b3" class="mm_iWidget iWidgetSkin">
   <a href="/mum/widget-catalog/widgetPub.xml" class="mm_Definition">
   </a>
   <span style="display: none; visibility: hidden;" title="idescriptor"
   class="mm_ItemSet">
     <a href="#icon" style="visibility: hidden; display: none;"
     class="mm_Item" lang="en">
       <span class="mm_Value" lang="en">
           /mum/widget-catalog/images/widgetPub.png
       </span>
           </a>
           <a href="#title" style="visibility: hidden; display: none;"
           class="mm_Item" lang="en">
            <span class="mm_Value" lang="en">
               iWidget Publisher
            </span>
           </a>
     </span>
     </span>
     <span layoutdata="layout:freeForm;" id="ns_3c49ee10d86811deb7f591bc4648e1b3"
     class="mm_iWidget iWidgetSkin">
           <a href="/mum/widget-catalog/widgetSub.xml" class="mm_Definition">
           </a>
           <span style="display: none; visibility: hidden;" title="idescriptor"
           class="mm_ItemSet">
               <a href="#icon" style="visibility: hidden; display: none;"
               class="mm_Item" lang="en">
                   <span class="mm_Value" lang="en">
                   /mum/widget-catalog/images/widgetSub.png
                   </span>
               </a>
               <a href="#title" style="visibility: hidden; display: none;"
               class="mm_Item" lang="en">
                   <span class="mm_Value" lang="en">
                       iWidget Subscriber
                   </span>
               </a>
           </span>
           <span class="mm_ReceivedEvent">
               <a href="#ns_22f00fd0d86811deb7f591bc4648e1b3"
               class="mm_SourceEvent">
                   random-number
               </a>
               <span class="mm_TargetEvent">
                   random-number
               </span>
           </span>
      </span>
      <span layoutdata="layout:freeForm;" id="ns_272be4c0d86811deb7f591bc4648e1b3"
      class="mm_OSGadget iWidgetSkin">
<a href="http://localhost:8080/gadgets/files/container/sample-pubsub-publisher.xml"
           class="mm_Definition">
           </a>
      </span>
      <span layoutdata="layout:freeForm;" id="ns_30c10c90d86811deb7f591bc4648e1b3"
      class="mm_OSGadget iWidgetSkin">
           <a href="http://localhost:8080/gadgets/files/container/
           sample-pubsub-subscriber.xml" class="mm_Definition">
           </a>
      </span>

事件操作

现在,我们看一下 iWidget 组件模型和 OpenSocial 容器提供的以下通信模型:

  • iWidget 上的事件操作
  • OpenSocial gadget 上的事件操作

iWidget 上的事件操作

iWidget 组件模型提供了一个事件操作集合。

Mashup Center 利用 OpenAJAX Hub 作为其底层通信实现。OpenAJAX Hub 是一组标准的 JavaScript™ API,提供了一个消息传递引擎,支持同一页面上使用的 Ajax 库和 Web 2.0 组件的安全性和互操作性。这些 Web 组件间的通信通过一个名为 Managed Hub 的托管安全管理器传递。Managed Hub 接受或者拒绝连接,支持与其他组件的安全整合。

以下是一些 iWidget 事件操作 API。有关广播代码示例,请参见 widgetPub.js 和 widgetSub.js:

  • broadcastEvent(String targetEvent, Object payload, String payloadType, String sourceid)。允许页面组件将事件广播到页面上的所有 widget 或组件。
  • publishEvent(String topic, Object payload, String payloadType, String sourceid)。允许页面组件将可用的全局事件公布到所有其他页面组件。
  • subscribeEvent(String event, Object object, String eventCallback, String subscribeCallback, String sourceid)。允许页面组件将一个可用的全局事件订阅给所有其他页面组件。
  • unsubscribeEvent(Object subscriptionHandler, String sourceid)。允许页面组件取消所有其他页面组件对可用的全局事件的订阅。

OpenSocial gadget 上的事件操作

OpenSocial 使用 Remote Procedure Call (RPC) 及其容器中的 pubsub API 来实现 gadget 间的通信。例如,Shindig rpc.js 为 OpenSocial gadget 和容器提供了底层通信机制。在一个跨域通信场景中,rpc.js 确保消息接收方知道创建方而创建方知道消息接收方。

pubsub.js 和 pubsub-router.js 接口调用 RPC API 用于 gadget 到 gadget 通信以及容器和 gadget 之间的消息路由。

要在 OpenSocial 容器页面上启用 pubsub 功能,可以下载 rpc.js 和 pubsub.js 接口,使用 HTML <script> 标记指向托管文件的位置,如清单 2 所示。

清单 2. HTML <script> 标记
 <script type="text/javascript"
    src="http://<host:port>/gadgets/js/rpc.js?c=1"></script>
 <script type="text/javascript"
    src="http://<host:port>/gadgets/js/pubsub.js?c=1&debug=1">
    </script>

现在,我们来看一下 gadget 级的发布和订阅 API。gadgets.pubsub API 提供了针对 gadget 的发布和订阅操作。要使 API 可用,gadget 定义文件必须将 pubsub 要求的特性(<Require feature="pubsub"/>)声明为 <ModulePrefs> 的子元素,如清单 3 所示。

清单 3. gadget 定义文件
 <?xml version="1.0" encoding="UTF-8"?>
    <Module>
        <ModulePrefs title="OS Gadget Subscribe">
            <Require feature="opensocial-0.8"/>
            <Require feature="pubsub"/>
        </ModulePrefs>
        <Content type="html">
            <![CDATA[
            ]>
        </Content>
    </Module>

以下是发布和订阅 API 的说明:

注:有关代码示例,请参见本文下载部分 sampleGadgets.war 文件中的 osPub.xml 代码示例。

  • gadgets.pubsub.subscribe(channel-name, callback)。订阅到信道的 gadget。callback 是接收的消息调用的函数。
  • gadgets.pubsub.publish(channel-name, message)。将类型为 String 的消息发布到信道。
  • gadgets.pubsub.unsubscribe(channel-name)。取消订阅到信道的 gadget。

启用 Mashup Center 的 OpenSocial 特性

以下步骤展示了如何使用补丁包 2.0.0.1 启用 Mashup Center 2.0 的 OpenSocial 特性。使用带有 Apache Maven 的 Apache Shindig BETA3 构建一个 Shindig WAR 文件。

要下载和安装必要的程序并构建 Shindig WAR 文件,按以下步骤操作:

注:如果第一次安装这些程序,确保向系统 PATH 变量添加可执行路径,这样可以在命令提示符处运行它们。

  1. 下载并安装 Apache Maven 2.0.10
  2. 下载并安装 SVN 客户机
  3. 下载并安装 JRE6
  4. 下载并安装 在 Microsoft Windows® 上运行的补丁
  5. 在命令提示符处,将目录改变到需要的文件夹,并输入以下命令来下载 Shindig BETA3:

    svn co http://svn.apache.org/repos/asf/incubator/shindig/tags/shindig-project-1.1-BETA3-incubating/

  6. 重点:在 Web 浏览器中,导航到 Apache 站点并下载 SHINDIG-1288.patch 文件。此补丁修改 Shindig gadgets.js 文件并将默认安全服务器 serverBase 的值改成完整 URL。您可能想在一个文本编辑器中打开下载文件来查看变更。
  7. 要应用 SHINDIG-1228.patch,转到命令提示符处,找到补丁位置,并输入 patch -p0<SHINDIG-1228.patch。指定以下文件路径,这样它知道将补丁应用到哪儿:

    shindig-project-1.1-BETA3-incubating location>/javascript/container/gadgets.js
  8. 将目录改为 <shindig-project-1.1-BETA3-incubating location> 并输入 mvn命令。下载 maven 库和构建 Shindig WAR 文件需要一些时间,要稍等一会。
  9. 成功构建 maven 后,将 WAR 文件定位到以下位置:

    <shindig-project-1.1-BETA3-incubating location>\java\server\target\shindig-server-1.1-BETA3-incubating

按以下步骤在 Mashup Center 2.0.0.1 或更高版本上部署 Shindig WAR 文件。

  1. 启动 Mashup Center,使用 URL 转到 IBM WebSphere Application Server 管理控制台:

    http://<host:port>/admin
  2. 部署 shindig-server-1.1-BETA3-incubating.war。确保选择 / 作为上下文根,因为 Shindig 默认运行在 ROOT 上。您可能要停止 DefaultApplication 和其他运行在 ROOT 上的应用程序,以便 Shindig 可以正确启动。

按以下步骤启用 Shindig 容器:

  1. 在 Mashup Center 安装根下面,将目录改为 mm/config 并在 configService.properties 中注释掉以下行:
    com.ibm.mashups.common.js=/gadgets/files/container/../../js/core:rpc?
    debug=1,/gadgets/files/container/util.js,/gadgets/files/container/gadgets.js,
    /gadgets/files/container/../../js/rpc.js?c=1&debug=1,
    /gadgets/files/container/../../js/pubsub.js?c=1&debug=1,
    /mum/js/com/ibm/mm/enabler/opensocial.js
  2. 在命令提示符处,转到 MashupCenter_install_root/Config 文件夹并输入 config.bat update-was-config。此任务使 Mashup Center 能够从根 Web 上下文引导 Shindig 服务器。

按以下步骤将 OpenSocial gadget 添加到 Mashup Center 面板:

  1. 使用以下上下文根将 sampleGadgets.war 部署到 Mashup Center WebSphere Application Server 服务器:/sampleGadgets。本 WAR 文件包含在稍后要介绍的样例场景中使用的 widget 和 gadget。
  2. 将 catalog_os.xml 复制到 MashupCenter_install_root/mm/config/。本文件包含其他样例 gadget,供您参考。
  3. 更改 catalog_os.xml 文件以根据您的环境反映正确的 mm_OSGadget 定义 URL。

    注:第一步假设您要将 gadget 部署到使用端口 9080 和 /sampleGadgets/ Web 上下文的简单 webapp。因此,widget 定义应该如下所示:

    http://localhost:9080/sampleGadgets/osgPub.xml
  4. 保存您的更改。
  5. 找到 MashupCenter_install_root/mm/config 文件夹,并通过将 <include catalog="os"/>标签直接添加到 <resource-type>元素下面,编辑 catalog_default.xml 文件,例如:

    <?xml version="1.0" encoding="UTF-8"?><catalog id="default" unique-name="optional_name"><resource-type>Catalog</resource-type><include catalog="os"/><category name="Demo">......
  6. 在命令提示符处,转到 MashupCenter_install_root/config 文件夹,并输入 config.bat update-was-config
  7. 重启 Mashup Center。登录并切换到编辑模式。现在,在面板中可以看到 OpenSocial 类。

您已经完成了本节中的所有步骤,现在可以将 OpenSocial gadget 和 iWidget 拖放到 Mashup Center 画布上创建页面。

样例场景

此样例场景提供了一个简单的示例,展示了 iWidget 和 OpenSocial widget 如何通过交互操作来发送和接收任意数字。

按以下步骤操作:

  1. 如图 1 所示创建页面。选择 Welcome,然后选择 Create a New Page。
    图 1. 新建页面
    新建页面
  2. 编辑模式下,在面板中打开 OpenSocial 类,将 iWidgets Publisher 和 Subscriber widget 拖动到页面上。
  3. 在 iWidget Subscriber 中,单击 Subscribe 按钮。此操作允许 iWidgets Subscriber 侦听 iWidgets Publisher 的名为 random-number 的特定事件信道。
  4. 在 iWidget Publisher,单击 Publish a random number。此操作触发一个事件,将任意数字发送到信道 random-number。因为 iWidget Subscriber 订阅了此信道,iWidget 接收数字并显示它。
  5. 现在,回到面板中的 OpenSocial 类,将 OpenSocial Publisher 和 Subscriber gadget 拖动到页面上。这两个 gadget 以与 iWidget 相同的方式发布和订阅。iWidget 和 OpenSocial gadget 订阅方接收 OpenSocial Publisher 或 iWidget Publisher 发送的相同的任意数字。测试案例如图 2 所示,展示了 Mashup Center 如何支持 iWidget 和 OpenSocial gadget 之间的互操作性。
    图 2. 发送和接收任意数字
    发送和接收任意数字
  6. 要保存更改,单击面板右侧的 Save 图标,如图 3 所示。
    图 3. 保存页面
    保存页面

现在您了解了 widget 如何在页面上交互操作,可以进一步创建一个更为复杂的场景。例如,可以编辑 catalog_os.xml 并添加自己的 iWidget 和 OpenSocial gadget。还可以指向 OpenSocial 目录中现有的组件来体验这些 Web 2.0 组件之间的其他互操作性。在这些场景中,要记住如果 Mashup Center 正在运行要停止它,然后输入 config.bat update-was-config,这样您的 OpenSocial 类可以刷新。

在本示例场景中另一个要注意的地方是 Web 2.0 组件是隐式通信的。iWidget 和 OpenSocial gadget 要在同一个预定义的特定信道上发布和订阅。OpenSocial 和 iWidget 开发人员只需调用常规事件和为每个组件类型指定的 pubsub API,并且 Mashup Center 面板必须能够处理它们之间的通信。

如上例所示,iWidget 使用以下的 iWidget API 来发布和订阅。

  • com.ibm.mashups.iwidget.services.ServiceManager.getService("eventService").publishEvent("random-number", message);

  • com.ibm.mashups.iwidget.services.ServiceManager.getService("eventService").subscribeEvent("random-number",null,this.updateMessage);

对于 OpenSocial gadget,您可以使用以下常规 pubsub API:

  • gadgets.pubsub.publish("random-number", message);
  • gadgets.pubsub.subscribe("random-number", callback);

现在您应该能够了解 Mashup Center 如何允许 iWidget 和 OpenSocial gadget 交互操作和通信了。


结束语

本文展示了 IBM Mashup Center 如何使用其他组件模型,比如 OpenSocial gadget。用户可以试用不同的组件模型来了解使用它们的最佳方式。IBM 将继续与开发社区合作,比如 OpenAjax Alliance 和 OpenSocial Foundation,通过改进企业需求、互操作性和客户选择来推动行业发展。


致谢

Mark Weitzel、Jon Ferraiolo、Anna G. O'Neal 和 Andy Smith 对本文进行了审阅并提出了宝贵意见,在此表示感谢。


下载

描述名字大小
sampleGadgets.war4.57KB

参考资料

学习

获得产品和技术

讨论

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Lotus
ArticleID=467562
ArticleTitle=IBM Mashup Center:OpenSocial 互操作性
publish-date=02222010