Enabling Inter-gadget Communication

Scenario:

The publisher gadget publishes a random number to a channel and that random number will be shown in the subscriber gadget. Each time that publisher gadget publishes a new number, the number will be updated in the subscriber gadget. When the publisher gadget button with the caption Publish a random number is clicked, a random number will be published to the channel named "my-channel". 

Follow the instructions below to enable and use inter-gadget communication:

Step 1: Create the publisher gadget

1. Define the following in the 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.

  <Require feature="pubsub-2">
     <Param name="topics"><![CDATA[<Topic title="randomNumber name="my-channel" publish="true"/>]]></Param>
  </Require>

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

   <div>
      <input type="button" value="Publish a random number" onclick="publish()" />
   </div>

3. 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:

   function publish() {
   		var message = Math.random();
          	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

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

   <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>

2. Set the fetched value from the publisher's channel, by having a simple <div> in the subscriber-gadget.xml file. 
   

   <div id="output"> </div>

    

3. Activate the subscription to the respective channel. In this sample the channel is "my-channel".

   gadgets.HubSettings.onConnect = function () {
   		gadgets.Hub.subscribe("my-channel", callback);
   };

4. 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. 

   function callback(topic, obj, subscriberData) {
   		document.getElementById("output").innerHTML = "Number that is fetched from the channel : " + obj;
   }

   The pub-sub implementation will be completed when steps 1 and 2 are completed.

Step 3: Add the two gadgets in a UES dashboard

For more information, see Creating and Publishing a Gadget and Creating and Publishing a Dashboard.

Step 4: Access the UES dashboard

• UES dashboards can be accessed using the following URL format:
  https://localhost:9443/<DASHBORAD_NAME>/ 

• 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

1. 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.
    
2. Click on the Publish a random number button several times and observe that the content that appears in the subscriber gadget gets updated accordingly.