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.
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"> </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>
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.
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
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"?> <Module> <ModulePrefs title="OS Gadget Subscribe"> <Require feature="opensocial-0.8"/> <Require feature="pubsub"/> </ModulePrefs> <Content type="html"> <![CDATA[ ]]> </Content> </Module>
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 220.127.116.11. 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.
- Download and install Apache Maven 2.0.10.
- Download and install the SVN client.
- Download and install JRE6.
- Download and install the patch for running on Microsoft Windows®.
- From your command prompt, change the directory to the wanted folder,
and enter the following command to download Shindig BETA3:
svn co http://svn.apache.org/repos/asf/incubator/shindig/tags/shindig-project-1.1-BETA3-incubating/
- 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.
- 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:
- Change directory to <shindig-project-1.1-BETA3-incubating
location>, and enter the
mvncommand. Be prepared to wait a while to download your maven repository and build the Shindig WAR file.
- After the maven build completes successfully, locate the WAR file in
the following location:
Do the following steps to deploy the Shindig WAR file on Mashup Center 18.104.22.168 and later.
- Start Mashup Center, and go to the IBM WebSphere Application Server
administrative console using the following URL:
- 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:
- Under the Mashup Center installation root, change the directory to
mm/config and uncomment the following line in
- 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:
- 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.
- Copy catalog_os.xml to MashupCenter_install_root/mm/config/. This file contains other sample gadgets for your reference.
- 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:http://localhost:9080/sampleGadgets/osgPub.xml
- Save your changes.
- 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">......
- From the command prompt, go to the MashupCenter_install_root/config
folder, and enter
- 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.
This sample scenario provides a simple example of how iWidgets and OpenSocial widgets interoperate to send and receive random numbers.
Do the following steps:
- Create a page, as shown in figure 1. Select Welcome, and then select
Create a New Page.
Figure 1. Creating a new page
- In edit mode, open the OpenSocial category in the palette, and drag the iWidgets Publisher and Subscriber widgets on to the page.
- 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.
- 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.
- 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
Figure 2. Sending and receiving random numbers
- 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
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.
com.ibm.mashups.iwidget.services.ServiceManager.getService("eventService"). publishEvent("random-number", message);
For the OpenSocial gadgets, you can use the following regular pubsub APIs:
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.
- Participate in the discussion forum.
- Refer to the IBM Mashup Center product page.
- Refer to the IBM Lotus Mashups Center.
- Read more articles in the IBM Mashup Center Wiki.
- Learn more about IBM Mashup Center on Lotus Greenhouse.
- Learn more about OpenSocial.
- Learn more about Apache Shindig.
- Learn more about building projects using Apache maven.
Dig deeper into IBM collaboration and social software on developerWorks
Get samples, articles, product docs, and community resources to help build, deploy, and manage your cloud apps.
Experiment with new directions in software development.
Software development in the cloud. Register today to create a project.
Evaluate IBM software and solutions, and transform challenges into opportunities.