Scenario:
...
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> |
...
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.
