IBM Mashup Center: OpenSocial interoperability

This article describes how you can extend IBM® Mashup Center to use and interoperate with other widget component models, such as OpenSocial gadgets.


Han Nguyen, Software Engineer, IBM

Han Nguyen is a software engineer for IBM, working on emerging standards with a focus on social networking across various industry verticals and products. She has previously worked on several technologies both in the services and software enablement. You can reach Han at

Kris Vishwanthan, Senior IT Architect, IBM

Kris Vishwanthan is a Senior IT Architect at IBM Research Triangle Park, Raleigh, NC. He is been a team lead and a solid contributor of IBM Mashup Center product since its inception. In addition, he is an active contributor to iWidget specifications, iWidget container implementation, and OpenSocial and OpenAjax specifications. Prior to this he was a WebSphere Portal architect implementing portal solutions for Fortune 500 companies. Kris is a practicing architect and a project management professional who played many key roles in some of the IBM internal and external software projects. He can be reached at

19 January 2010

Also available in Chinese Portuguese

Editor's note: Know a lot about this topic? Want to share your expertise? Participate in the IBM Lotus software wiki program today.


IBM Mashup Center is a Web 2.0-based situational application platform, supporting rapid assembly of Web applications with security, governance, and management capabilities suitable for deployment in enterprise environments. Mashup Center applications are based on the iWidget component model, an IBM-defined specification that is documented in the iWidget Specification 2.0.


As a long-time leader and innovator in Web 2.0 technologies, IBM has defined a reusable component technology called iWidgets that allows customers to build and deploy situational applications rapidly. A key part of iWidget technology is the iWidget container. This container manages the life cycle of iWidgets and has helped both IBM and its customers aggregate a wide variety of content “on the glass” into powerful situational applications quickly and easily. Today, iWidgets and its container (known as the Mashup Enabler) are used across a wide variety of IBM products, including IBM WebSphere® Portal, IBM Lotus® Connections, and the Business Process Manager (BPM) stack of products.

A key part of the IBM business strategy is to provide high-quality products and promote open-computing technologies so that its customers can build solutions that best meet their needs. As part of this strategy, IBM has been working with the OpenAjax Alliance, a group of enterprise vendors that includes Tibco, Microsoft®, and Adobe®, to create interoperable widget technologies.

For example, in the consumer space, a standard called OpenSocial has emerged. This community-driven specification defines a browser-based component model, known as gadgets. In addition, OpenSocial defines an API for accessing information about user profiles as well as their social graph, for example their friends, activities, shared applications, authentication, and authorization. An open-source project at the Apache Software Foundation, known as Shindig, provides a reference implementation of OpenSocial.

As the industry evolves, leaders such as IBM must provide strategies that allow customers to choose the right component model based on their unique business requirements. As an industry leader, IBM is engaging these open communities to advance these specifications by adding enterprise capabilities and promoting interoperability with all other component models. This article explains some initial steps toward interoperability between component models by demonstrating how you can use OpenSocial gadgets in Mashup Center.

Mashup Center and OpenSocial integration

Various Web 2.0 user interface components have increasingly become available in different formats, requiring tools to assemble the components together. These Web components often interact and send messages to each other, sometimes resulting in interoperability problems. Mashup Center not only provides the tools to discover and assemble different widget components on the same page, including OpenSocial gadgets, but also provides the capability to interconnect and persist these connections across the various components.

Mashup pages

A mashup page is simple HTML markup that can contain references to iWidgets and other type of gadgets. The Mashup Center Livetext framework parses the HTML and hands over the request to different widget and gadget containers to render the widget. Page markup contains other metadata, such as titles, preferences, wires, and other components that comply with a set of declarative syntax for placing an iWidget instance into a broader set of markup, such as HTML. This declarative syntax is known as iWidget microformat.

Listing 1 is an example of a mashup page that contains iWidgets, OpenSocial gadgets, and other related metadata.

Listing 1. Sample mashup page
  <span layoutdata="layout:freeForm;" 
id="ns_22f00fd0d86811deb7f591bc4648e1b3" class="mm_iWidget iWidgetSkin">
   <a href="/mum/widget-catalog/widgetPub.xml" class="mm_Definition">
   <span style="display: none; visibility: hidden;" title="idescriptor" 
     <a href="#icon" style="visibility: hidden; display: none;" 
     class="mm_Item" lang="en">
       <span class="mm_Value" lang="en">
      	<a href="#title" style="visibility: hidden; display: none;" 
      	class="mm_Item" lang="en">
      	  <span class="mm_Value" lang="en">
      		iWidget Publisher
     <span layoutdata="layout:freeForm;" id="ns_3c49ee10d86811deb7f591bc4648e1b3" 
     class="mm_iWidget iWidgetSkin">
      	<a href="/mum/widget-catalog/widgetSub.xml" class="mm_Definition">
      	<span style="display: none; visibility: hidden;" title="idescriptor" 
      		<a href="#icon" style="visibility: hidden; display: none;" 
      		class="mm_Item" lang="en">
      			<span class="mm_Value" lang="en">
      		<a href="#title" style="visibility: hidden; display: none;" 
      		class="mm_Item" lang="en">
      			<span class="mm_Value" lang="en">
      				iWidget Subscriber
      	<span class="mm_ReceivedEvent">
      		<a href="#ns_22f00fd0d86811deb7f591bc4648e1b3" 
      		<span class="mm_TargetEvent">
      <span layoutdata="layout:freeForm;" id="ns_272be4c0d86811deb7f591bc4648e1b3" 
      class="mm_OSGadget iWidgetSkin">
      	<a href="http://localhost:8080/gadgets/files/container/sample-pubsub-publisher.xml" 
      <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">

Event operations

Now, let's look at the following communication models provided by the iWidget component model and OpenSocial containers:

  • Event operations on iWidgets
  • Event operations on OpenSocial gadgets

Event operations on iWidgets

The iWidget component model provides a set of event operations.

Mashup Center leverages OpenAJAX Hub as its underlying communication implementation. OpenAJAX Hub is a set of standard JavaScript™ APIs that provide a messaging engine that enables security and interoperability for Ajax libraries and Web 2.0 components used on the same page. Communications between these Web components are passed through a hosted security manager called Managed Hub. Managed Hub accepts or denies the connection, which allows safe integration with other components.

Here are some of the iWidget event operation APIs. For broadcast code examples, see widgetPub.js and widgetSub.js:

  • broadcastEvent(String targetEvent, Object payload, String payloadType, String sourceid). Allows page components to broadcast an event to all the widgets or components on the page.
  • publishEvent(String topic, Object payload, String payloadType, String sourceid). Allows page components to publish a global event that is available to all other page components.
  • subscribeEvent(String event, Object object, String eventCallback, String subscribeCallback, String sourceid). Allows page components to subscribe to a global event that is available to all other page components.
  • unsubscribeEvent(Object subscriptionHandler, String sourceid). Allows page component to unsubscribe from a global event that is available to all other page components.

Event operations on OpenSocial gadgets

OpenSocial uses Remote Procedure Call (RPC) and pubsub APIs in its container to achieve intergadget communication. For example, Shindig rpc.js provides the underlying communication mechanism for OpenSocial gadgets and the container. In a cross-domain communication scenario, rpc.js ensures that the message receiver knows the creator and that the creator knows the message receiver.

The pubsub.js and pubsub-router.js interfaces invoke the RPC APIs for gadget-to-gadget communication and message routing between the container and the gadgets.

To enable the pubsub capability on an OpenSocial container page, you can load the rpc.js and pubsub.js interfaces by using an HTML <script> tag to point to the location of the hosted files as shown in listing 2.

Listing 2. HTML <script> tag
                  <script type="text/javascript" 
                  <script type="text/javascript" 

Now, let's look at the publish and subscribe APIs at the gadget level. The gadgets.pubsub API provides publish and subscribe operations for gadgets. To make the APIs available, a gadget definition file must declare the pubsub required feature (<Require feature="pubsub"/>) as a child element of <ModulePrefs> as shown in listing 3.

Listing 3. A gadget definition file
    <?xml version="1.0" encoding="UTF-8"?>
         <ModulePrefs title="OS Gadget Subscribe">
           <Require feature="opensocial-0.8"/>
           <Require feature="pubsub"/>
          <Content type="html">

Here are descriptions of the publish and subscribe APIs:

NOTE: For code examples, see the osPub.xml code example in the sampleGadgets.war file in the Download section of this article.

  • gadgets.pubsub.subscribe(channel-name, callback). Subscribes a gadget to a channel. callback is a function that is called with the received message.
  • gadgets.pubsub.publish(channel-name, message). Publishes a message of type String to a channel.
  • gadgets.pubsub.unsubscribe(channel-name). Unsubscribes a gadget from a channel.

Enabling OpenSocial features for Mashup Center

The following steps show you how to enable OpenSocial features for Mashup Center 2.0 with fix pack You use Apache Shindig BETA3 with Apache Maven to build a Shindig WAR file.

To download and install the necessary programs and build the Shindig WAR file, do the following steps:

NOTE: If you are installing any of these programs for the first time, be sure to add the executable paths to your system PATH variable so that you can run them from the command prompt.

  1. Download and install Apache Maven 2.0.10.
  2. Download and install the SVN client.
  3. Download and install JRE6.
  4. Download and install the patch for running on Microsoft Windows®.
  5. From your command prompt, change the directory to the wanted folder, and enter the following command to download Shindig BETA3:

    svn co
  6. Important: In a Web browser, navigate to the Apache site and download the SHINDIG-1288.patch file. This patch modifies the Shindig gadgets.js file and changes the default secure server, serverBase, value to a full URL. You might want to open the downloaded file in a text editor to view the changes.
  7. To apply the SHINDIG-1228.patch, go to a command prompt, navigate to the patch location, and enter patch -p0<SHINDIG-1228.patch. Specify the following file path so that it knows where to apply the patch:

    shindig-project-1.1-BETA3-incubating location>/javascript/container/gadgets.js.
  8. Change directory to <shindig-project-1.1-BETA3-incubating location>, and enter the mvn command. Be prepared to wait a while to download your maven repository and build the Shindig WAR file.
  9. After the maven build completes successfully, locate the WAR file in the following location:

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

Do the following steps to deploy the Shindig WAR file on Mashup Center and later.

  1. Start Mashup Center, and go to the IBM WebSphere Application Server administrative console using the following URL:

  2. Deploy shindig-server-1.1-BETA3-incubating.war. Be sure to select / as the context root because Shindig runs on ROOT by default. You might have to stop the DefaultApplication and other applications running on ROOT for Shindig to start correctly.

Do the following steps to enable the Shindig container to the bootstrap:

  1. Under the Mashup Center installation root, change the directory to mm/config and uncomment the following line in
  2. From the command prompt, go to the MashupCenter_install_root/Config folder, and enter config.bat update-was-config. This task enables Mashup Center to bootstrap Shindig server from the root Web context.

Do the following steps to add the OpenSocial gadgets to the Mashup Center palette:

  1. Deploy sampleGadgets.war to the Mashup Center WebSphere Application Server server using the following context root: /sampleGadgets. This WAR file contains the widgets and gadgets that you use in the sample scenario explained later in this article.
  2. Copy catalog_os.xml to MashupCenter_install_root/mm/config/. This file contains other sample gadgets for your reference.
  3. Make changes to the catalog_os.xml file to reflect the correct mm_OSGadget definition URLs, according to your environment.

    NOTE: Step 1 assumes that you are deploying the gadgets into a simple webapp that uses port 9080 and a Web context of /sampleGadgets/. Therefore, the widget definition looks like this:

  4. Save your changes.
  5. Locate the MashupCenter_install_root/mm/config folder, and edit the catalog_default.xml file by adding an <include catalog="os"/> tag directly under the <resource-type> element, for example:

    <?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. From the command prompt, go to the MashupCenter_install_root/config folder, and enter config.bat update-was-config.
  7. Restart Mashup Center. Log in, and switch to edit mode. Now, you see the OpenSocial category in the palette.

Now that you have completed all the steps in this section, you are ready to drag OpenSocial gadgets and iWidgets on to the Mashup Center canvas to create pages.

Sample scenario

This sample scenario provides a simple example of how iWidgets and OpenSocial widgets interoperate to send and receive random numbers.

Do the following steps:

  1. Create a page, as shown in figure 1. Select Welcome, and then select Create a New Page.
    Figure 1. Creating a new page
    Creating a new page
  2. In edit mode, open the OpenSocial category in the palette, and drag the iWidgets Publisher and Subscriber widgets on to the page.
  3. In iWidget Subscriber, click the Subscribe button. This action allows iWidgets Subscriber to listen to iWidgets Publisher on a specific event channel called random-number.
  4. In iWidget Publisher, click Publish a random number. This action triggers an event that sends a random number to the channel random-number. Because iWidget Subscriber subscribes to this channel, the iWidget receives the number and displays it.
  5. Now, return to the OpenSocial category in the palette, and drag the OpenSocial Publisher and Subscriber gadgets on to the page. These two gadgets publish and subscribe in the same manner that the iWidgets do. Both iWidget and OpenSocial gadget subscribers can receive the same random number sent from either OpenSocial Publisher or iWidget Publisher. The test case shown in figure 2 demonstrates how Mashup Center supports interoperability between iWidgets and OpenSocial gadgets.
    Figure 2. Sending and receiving random numbers
    Sending and receiving random numbers
  6. To save your page, click the Save icon on the right side of the palette, as shown in figure 3.
    Figure 3. Saving your page
    Saving your page

Now that you understand how the widgets interoperate on the page, you can take it a step further and create a more complex situation. For example, you can edit catalog_os.xml and add your own iWidget and OpenSocial gadgets. You can also point to existing components in the OpenSocial catalog to experience a different flavor of interoperability between these Web 2.0 components. In these scenarios, remember to stop Mashup Center if it is running, and then enter config.bat update-was-config so that your OpenSocial category gets refreshed.

Another important thing to note in the example scenario is that the Web 2.0 components communicate implicitly. The iWidget and OpenSocial gadgets have to publish and subscribe on the same predefined and specific channel. OpenSocial and iWidget developers need to call only the regular eventing and pubsub APIs specified for each type of component, and the Mashup Center palette must be able to handle the communication between them.

As shown in the preceding example, iWidgets use the following iWidget APIs to publish and subscribe.

  •"eventService"). publishEvent("random-number", message);
  •"eventService") .subscribeEvent("random-number",null,this.updateMessage);

For the OpenSocial gadgets, you can use the following regular pubsub APIs:

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

Now you understand how Mashup Center allows iWidgets and OpenSocial gadgets to interoperate and communicate.


This article demonstrated how IBM Mashup Center can use other component models like OpenSocial gadgets. Users can begin to experiment with different component models to learn the best way to use them. IBM continues to work with the open communities, such as the OpenAjax Alliance and the OpenSocial Foundation, to advance the industry by promoting enterprise requirements, interoperability, and customer choice.


Many thanks to Mark Weitzel, Jon Ferraiolo, Anna G. O'Neal, and Andy Smith for reviewing the article and providing valuable input.


Code samplesampleGadgets.war4.57KB



developerWorks: Sign in

Required fields are indicated with an asterisk (*).

Need an IBM ID?
Forgot your IBM ID?

Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.


All information submitted is secure.

Dig deeper into IBM collaboration and social software on developerWorks

ArticleTitle=IBM Mashup Center: OpenSocial interoperability