Configuring Gadgets for Inter Widget Communication

This section covers how to configure two or more gadgets to communicate with each other. This is achieved via the pub/sub model where one gadget is assigned the role of a publisher, and the other gadget is assigned the role of a subscriber. You can select the information displayed in the subscriber by providing the required input via the publisher gadget.

To configure a gadget to communicate with another gadget, follow the steps below:

Step 1: Publish the data in the publisher

To publish data in the publisher, follow the procedure below:

To import the pubsub-2 module into the publisher gadget, add the <Require feature="pubsub-2"/> element to the <DAS_HOME>/repository/deployment/server/jaggeryapps/portal/store/<TENANT_DOMAIN>/fs/gadget/<PUBLISHER_GADGET_NAME>/index.xml file as shown below.

...
<ModulePrefs title="SampleBarChart" description="This is a template gadget">
<Require feature="pubsub-2"/>
<Require feature="dynamic-height"/>
...

This module is required for the gadget to receive messages from other gadgets via the pub/sub pattern.
In the same file, enter the method that defines a global method for publishing. This is used to publish the data using the publisher channel. The format can be as follows.
Format

gadgets.Hub.publish(publisher_channel_name, message)
- publisher_channel_name : The name of the channel defined as the notifier in the <DAS_HOME>/repository/deployment/server/jaggeryapps/portal/store/<TENANT_DOMAIN>/fs/gadget/<PUBLISHER_GADGET_NAME>/ gadget.json file.
- message : Data to publish through the channel.
e.g.,
Example

var message = "Publisher channel" ;
gadgets.Hub.publish( 'publisher' , message);
- publisher_channel_name : In the publisher gadget of this scenario, the publishing channel is named publisher. Therefore, the data publishing takes place under the channel name publisher. You can use the above code block in the respective event to publish data.
- message : This refers to the publishing data that can be of any data type.
In the same file, include a method to specify how data is published via this gadget. The following is a sample.

<Module>
   <ModulePrefs title="Publisher" height="300" description="Publisher">
<Require feature="pubsub-2" />
<Require feature="dynamic-height" />
   </ModulePrefs>
   <Content type="html"><![CDATA[<head>

<style type="text/css">

body {
padding: 12px;
}

.log {
width: 400px;
height: 400px;
background-color: #415b76;
color: #fff;
}
#txtMessage {
margin-right: 10px;
}

#btnSend, #btnAutoGen {
margin-top: 10px;
}
#autoMessage {
margin-top: 10px;
margin-bottom: 0px;
}
</style>
<link rel="stylesheet" href="/portal/libs/bootstrap_3.3.5/css/bootstrap.min.css">
<head>
<body>
<p>Type a message and click on the Publish.</p>
<input id="txtMessage" class="form-control" type="text" placeholder="Message">
<p>
<button id="btnSend" type="button" class="btn btn-primary">Publish</button>
</p>
<p>Click Auto button to publish auto generated messages.</p>
<div id="autoMessage" class="well well-lg">No Messages...</div>
<button id="btnAutoGen" type="button" class="btn btn-primary">Auto</button>

<script language="javascript" type="text/javascript" src="/portal/libs/jquery_1.11.0/jquery-1.11.3.min.js"></script>
<script language="javascript" type="text/javascript" src="/portal/libs/bootstrap_3.3.5/js/bootstrap.min.js"></script>
<script>
var interval;

$("#btnSend").on("click",function(e){
if(interval){
clearInterval(interval);
}

// Object (or String) to be publish
var message = {
message: $("#txtMessage").val()? $("#txtMessage").val() : "No Message"
};

// Publish the user written message
gadgets.Hub.publish('publisher', message);
});

$("#btnAutoGen").on("click",function(e){
var id = 0;
if(interval){
clearInterval(interval);
}

interval = setInterval(function() {
$('#autoMessage').text('publishing message from publisher, Message : ' + (++id));

// Publish the auto generated ID
gadgets.Hub.publish('publisher', id);
}, 2000);
});
</script>
</body>]]></Content>
</Module>
Define the gadget publishing channel in the <DAS_HOME>/repository/deployment/server/jaggeryapps/portal/store/<TENANT_DOMAIN>/fs/gadget/<PUBLISHER_GADGET_NAME>/conf.json file as shown in the example below.

{
   "id":"publisher",
   "title":"Publisher",
   "type":"gadget",
   "thumbnail":"gadget/usa-business-revenue/index.png",
   "category":"Publishers",
   "data":{
      "url":"gadget/publisher/index.xml"
   },
"notify" :{
     "history" :{
        "type" : "year" ,
        "description" : "This notifies the selected year"
     }
}
}

The notify property defines whether the gadget is a publisher or not. By adding this property we can define a channel to publish messages. In this sample, a channel named history is being created. The notify property has two sub properties named type and description. The property named type is used to define the type of the publisher.

Step 2: Configure a pub/sub link between the publisher and subscriber

In the previous section, you configured a publisher gadget to publish data to a channel. Now let's see how to configure a subscriber gadget to consume this data from the channel.

To import the pubsub-2 module into the publisher gadget, add the <Require feature="pubsub-2"/> element to the <DAS_HOME>/repository/deployment/server/jaggeryapps/portal/store/<TENANT_DOMAIN>/fs/gadget/<SUBSCRIBER_GADGET_NAME>/index.xml file as shown below.

<ModulePrefs title="Subscriber" height="250" description="Subscriber">
<Require feature="pubsub-2"> <Param name="topics"><![CDATA[<Topic title="geodata" name="org.wso2.ues.samples.ch" description="sample channel to demonstrate intergadget communication" type="object"
subscribe="true"/>]]></Param> </Require> <Require feature="dynamic-height" /> <Require feature="wso2-gadgets-controls" /> </ModulePrefs>
In the same file, enter the global method for subscribing for data via the channel. The format is as follows.
Format

gadgets.Hub.subscribe(listener_name, function (topic, message, subscriber_data) {
//put your code here
})

This includes the following parameters:
- listener_name : Enter the name of the listener channel (which is defined in the <DAS_HOME>/repository/deployment/server/jaggeryapps/portal/store/<TENANT_DOMAIN>/fs/gadget/<SUBSCRIBER_GADGET_NAME>/gadget.json file) as the first parameter being passed.
After entering this parameter, enter the callback function. This callback function receives three parameters to get notifications on the published data that is being published by the publisher gadget.

It is not required to define all three parameters in the callback function. Instead, only define the required parameters in the order given in the above format, based on the information that you want to receive from the publisher.
1. - topic : This defines the topic that corresponds to the publisher channel (Notifier channel).
  - message : This contains the data published by a publisher gadget.
  - subscriber_data :This defines the subscriber channel (Listener channel).
e.g., The following example defines a subscriber gadget that has a listener channel named subscriber. Therefore, the data subscribing takes place under the subscriber channel name.
Example

gadgets.HubSettings.onConnect = function() {
gadgets.Hub.subscribe('subscriber', function(topic, data, subscriberData) {
if(data.type === 'clear') {
$('.log').empty();
return;
}
wso2.gadgets.controls.showGadget();
$('.log').append('<div>Message received, <span class="message">Message: ' + JSON.stringify(data) + '</span></div>');
});

The gadgets.HubSettings.onConnect() callback function is called when the connection between publisher and subscriber channel is established.
Define the gadget listening channel in the <DAS_HOME>/repository/deployment/server/jaggeryapps/portal/store/<TENANT_DOMAIN>/fs/gadget/<SUPPLIER_GADGET_NAME>/conf.json file as shown in the example below.

{
   "id":"subscriber",
   "title":"Subscriber",
   "type":"gadget",
   "category":"Subscribers",
   "thumbnail":"gadget/usa-business-revenue/index.png",
   "data":{
      "url":"gadget/subscriber/index.xml"
   },
   "listen":{
      "subscriber":{
         "type":"message",
         "description":"Used to listen to Any message of type address"
      }
   }
}