If you are writing any custom dashboards with WSO2 UES which requires inter-gadget communication or dashboard-gadgets communications, then you may find following codes helpful.
- Create a Jaggery app named pubsub-dashboard.
- Create g1.xml, g2.xml and index.html with following contents in pubsub-dashboard app.
- Go to http://localhost:9763/pubsub-dashboard.
- You will see g1 is publishing messages while g2 is receiving.
- If you click on the "Clear" button, then the log at g2 will be cleared.
g1.xml
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="G1" height="350" description="g1">
<Require feature="pubsub-2"/>
<Require feature="dynamic-height"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<head>
<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>
gadgets.HubSettings.onConnect = function() {
var id = 0;
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
});
}, 2000);
};
</script>
<head>
<body>
<div class="log"></div>
</body>
]]>
</Content>
</Module>
g2.xml
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="G2" height="350" description="g2">
<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"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<head>
<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>
gadgets.HubSettings.onConnect = function() {
gadgets.Hub.subscribe('org.wso2.ues.samples.ch', function(topic, data, subscriberData) {
if(data.type === 'clear') {
$('.log').empty();
return;
}
$('.log').append('<div>message received, id: ' + data.id + '</div>');
});
};
</script>
<head>
<body>
<div class="log"></div>
</body>
]]>
</Content>
</Module>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<button class="clear" type="button">Clear</button>
</div>
<h4>g1</h4>
<div id="gadget-1"></div>
<h4>g2</h4>
<div id="gadget-2"></div>
<script>
UESContainer.renderGadget('gadget-1', 'http://localhost:9763/pubsub-dashboard/g1.xml');
UESContainer.renderGadget('gadget-2', 'http://localhost:9763/pubsub-dashboard/g2.xml');
$(function () {
$('.clear').click(function () {
UESContainer.inlineClient.publish('org.wso2.ues.samples.ch', {
msg: 'publishing message from dashboard',
type: 'clear'
});
});
});
</script>
</body>
</html>
No comments:
Post a Comment