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:
| Table of Contents |
|---|
Step 1: Create a microsite
...
| 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>
UESContainer.renderGadget('gadget-1', 'http://localhost:9763/pubsub-dashboard/g1.xml');
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.
