Scenario:
Two independent gadgets (named g1 and g2) are placed on a page and configured with PubSub. Gadget g1 is the publisher gadget that generates the input for the g2 gadget. Gadget g2 is the subscriber gadget that receives the message sent by gadget g1 and publishes it. When the clear button is pressed in the dashboard (index.html), the dashboard will communicate with gadget g2 and clear all the messages that were previously displayed.
Follow the instructions below to enable and use inter-gadget communication and dashboard to gadget communication:
Step 1: Create a microsite
Create a microsite named pubsub-dashboard. For more information, see Creating a Microsite.
Step 2: Create the publisher gadget
Create a file named g1.xml with the following code. Please see the code comments inline for descriptions.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="G1" height="350" description="g1">
<!-- This is used to import the pubsub feature -->
<Require feature="pubsub-2"/>
<Require feature="dynamic-height"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<head>
<!-- Defines the style that needs to be used for the publisher gadget -->
<style type="text/css">
.log {
width: 400px;
height: 400px;
background-color: #415b76;
color: #fff;
}
</style>
<script language="javascript" type="text/javascript" src="/portal/js/flot/jquery.js"></script>
<script>
<!-- The gadgets.HubSettings.onConnect function is called by the OpenSocial container once the gadget connects to the PubSub messaging hub -->
gadgets.HubSettings.onConnect = function() {
var id = 0;
<!-- This defines the message that will be printed in the publisher gadget and the message that will be published to the topic -->
setInterval(function() {
$('.log').append('<div>publishing message from g1, id : ' + (++id) + '</div>');
gadgets.Hub.publish('org.wso2.ues.samples.ch', {
msg : 'A message from g1',
id: id
});
<!-- This defines the interval between each message that is published -->
}, 2000);
};
</script>
<head>
<body>
<div class="log"></div>
</body>
]]>
</Content>
</Module>
Step 3: Create the subscriber gadget
Create a file named g2.xml with the following code. Please see the code comments inline for descriptions.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="G2" height="350" description="g2">
<!-- This is used to import the pubsub feature -->
<Require feature="pubsub-2">
<!-- This defines the topic that the subscriber gadget has subscribed to -->
<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"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<head>
<!-- Defines the style that needs to be used for the subscriber gadget -->
<style type="text/css">
.log {
width: 400px;
height: 400px;
background-color: #1abc9c;
color: #fff;
}
</style>
<script language="javascript" type="text/javascript" src="/portal/js/flot/jquery.js"></script>
<script>
<!-- The gadgets.HubSettings.onConnect function is called by the OpenSocial container once the gadget connects to the PubSub messaging hub -->
gadgets.HubSettings.onConnect = function() {
gadgets.Hub.subscribe('org.wso2.ues.samples.ch', function(topic, data, subscriberData) {
<!-- This defines that the message log needs to be cleared if this clause is fulfilled -->
if(data.type === 'clear') {
$('.log').empty();
return;
}
<!-- This defines that the published message IDs will be appended to the current message log -->
$('.log').append('<div>message received, id: ' + data.id + '</div>');
});
};
</script>
<head>
<body>
<div class="log"></div>
</body>
]]>
</Content>
</Module>
Step 4: Create a dashboard
Create a file named index.xml with the following code. Please see the code comments inline for descriptions.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Defines how the publisher and subscriber gadget should appear -->
<style type="text/css">
#gadget-1, #gadget-2 {
width: 500px;
height: 400px;
margin-bottom: 20px;
}
</style>
<script language="javascript" type="text/javascript" src="/portal/js/flot/jquery.js"></script>
<script src="/portal/themes/portal/js/shindig.js"></script>
<script src="/portal/themes/portal/js/UESContainer.js"></script>
</head>
<body>
<div>
<!-- This is used to create the Clear button -->
<button class="clear" type="button">Clear</button>
</div>
<!-- Defines the how the publisher gadget heading should appear -->
<h4>g1</h4>
<div id="gadget-1"></div>
<!-- Defines the how the subscriber gadget heading should appear -->
<h4>g2</h4>
<div id="gadget-2"></div>
<script>
<!-- This defines what is defined as gadget-1 -->
UESContainer.renderGadget('gadget-1', 'http://localhost:9763/pubsub-dashboard/g1.xml');
<!-- This defines what is defined as gadget-2 -->
UESContainer.renderGadget('gadget-2', 'http://localhost:9763/pubsub-dashboard/g2.xml');
$(function () {
<!-- This defines the action that will take place when the clear button is clicked -->
$('.clear').click(function () {
UESContainer.inlineClient.publish('org.wso2.ues.samples.ch', {
msg: 'publishing message from dashboard',
type: 'clear'
});
});
});
</script>
</body>
</html>
Step 5 : Publish the microsite
For more information, see Publishing your microsite.
Step 6: Access the microsite
Access the dashboard via the following URL:
http://localhost:9763/pubsub-dashboard
Step 5: Use the inter-gadget communication enabled gadgets to verify the inter-gadget communication
The messages that are published by the publisher gadget (g1) are received by the subscriber gadget (g2).
Step 6: Verify the dashboard to gadget communication
Click the Clear button. The message logs in the subscriber gadget (g2) will be cleared.
