Scenario:
...
Create a file named g1.xml with the following code. Please see the code comments inline for descriptions.
| Code Block | ||
|---|---|---|
| ||
<?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.
| Code Block | ||
|---|---|---|
| ||
<?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""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> |
...
| Code Block |
|---|
<!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> |
...
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.
