Page Comparison

Scenario:

...

Note
The entire code for the two sample gadgets can be downloaded from the following URL: https://svn.wso2.org/repos/wso2/people/tanya/pub-sub/

Step 1: Create the publisher gadget

Create a gadget named publisher-gadget

...

Define the following in the publisher.
Create a file named publisher-gadget.xml and add the following code:
Code Block
title publisher-gadget.xml
file:
Import is pubsub-2 feature.
Define the channel that the publisher will use to publish messages. In this case the channel has been named my-channel.

Set publish="true" to indicate that the gadget is the publisher gadget.

Code Block

<Require feature="pubsub-2"> <Param name="topics"><![CDATA[

<?xml version="1.0" encoding="UTF-8" ?>
    <Module>
    <ModulePrefs title="Publisher Gadget"
                 author="WSO2 User Engagement Server"
                 height="230"
                 scrolling="true"
                 tags="pub-sub"
                 description="Demonstrate the basic behaviour of a publisher gadget in pub-sub model">
    <!-- This is used to import the pubsub-2 feature -->
	<Require feature="pubsub-2">
	<!-- This is used to define the channel that the publisher will use to publish messages. In this case the channel has been named my-channel. 		     publish="true"needs to be set to indicate that the gadget is the publisher gadget. -->
            <Param name="topics">
                <![CDATA[
         <Topic title="randomNumber name="my-channel" publish="true"/>

]]></Param> </Require>

Based on the sample, define the button with the caption Publish a random number in the publisher gadget.xml file.

Code Block

<div>
         ]]>
            </Param>
        </Require>
     </ModulePrefs>
     <Content type="html">
    <![CDATA[
 <html>
 <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Publisher Gadget</title>
	<script language="javascript" type="text/javascript" src="js/publisher-gadget.js"></script>
 </head>

<body>
	<div>
    <!-- Based on the sample, a button with the caption Publish a random number has been defined -->
           <input type="button" value="Publish a random number" onclick="publish()"/>
        </div>
      <div id="output"> </div>

The publish() function call will get triggered when the latter mentioned button is clicked. This function call needs to be defined in the publisher-gadget.js file of the publisher gadget as follows:

Code Block
</body> </html> ]]> </Content> </Module>

Create a folder named js. As a best practice XML files are maintained at the top-most level, while other files (such as JS, CSS) are maintained within separate sub-folders.

Create a file named publisher-gadget.js with the following code within the js folder:

Code Block

<!-- This defines the publish() function call that will get triggered when the latter mentioned button is clicked.  -->
function publish() {
		var message = Math.random();
		<!-- This defines that a random number needs to be published to my-channel, which has been declared in the ModulePrefs section -->
       	gadgets.Hub.publish("my-channel", message);
       	document.getElementById("output").innerHTML = "Number that is published to the channel : " + message;
}

Note that the following line of code defines that a random number needs to be published to my-channel, which has been declared in the ModulePrefs section.
gadgets.Hub.publish("my-channel", message);

Step 2: Create the subscriber gadget

Import the pubsub-2 feature and declare this gadget as a subscriber gadget in the subscriber-gadget.xml file.

Code Block

<Require feature="pubsub-2">
      <Param name="topics">
          <![CDATA[
                  <Topic title="randomNumber" name="my-channel"
                          description="Subscribes to random number channel" type="object"
                          subscribe="true"/>
          ]]>
      </Param>
</Require>

Set the fetched value from the publisher's channel, by having a simple <div> in the subscriber-gadget.xml file.
Code Block
<div id="output"> </div>
Activate the subscription to the respective channel. In this sample the channel is "my-channel".
Code Block
gadgets.HubSettings.onConnect = function () { gadgets.Hub.subscribe("my-channel", callback); };
Add the function that needs to be invoked at the subscriber's end.
In this sample the message that is published by the publisher gadget will be written in the JavaScript callback function, which is in the subscriber-gadget.js file.
Code Block
function callback(topic, obj, subscriberData) { document.getElementById("output").innerHTML = "Number that is fetched from the channel : " + obj; }
Note
The pub-sub implementation will be completed when steps 1 and 2 are completed.

...

Access this sample dashboard via the following URL:
https://localhost:9443/pub-sub/
This sample dashboard will appear as follows:

Step 5: Use the inter-gadget communication enabled gadgets to verify the inter-gadget communication

Click on Publish a random number button in the publisher gadget and observe that the same number gets printed in the subscriber gadget as well.
Image Modified
Click on the Publish a random number button several times and observe that the content that appears in the subscriber gadget gets updated accordingly.

Versions Compared

Old Version 3

New Version 4

Key

Step 1: Create the publisher gadget

Step 2: Create the subscriber gadget

Step 5: Use the inter-gadget communication enabled gadgets to verify the inter-gadget communication