Scenario:
...
Create a microsite named pubsub-dashboard. For more information, see Creating and Publishing 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.
| 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> |
...
Create a file named index.xml with the following code. Please see the code comments inline for descriptions.
| 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> |
...
For more information, see Publishing your a microsite to the store.
Step 6: Access the microsite
...
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.
