Enabling Inter-gadget and Dashboard to Gadget Communication

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:

Step 1: Create a microsite

Create a microsite named pubsub-dashboard. For more information, see Creating 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.

<?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>

Step 3: Create the subscriber gadget

Create a file named g2.xml with the following code. Please see the code comments inline for descriptions.

<?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>

Step 4: Create a dashboard

Create a file named index.xml with the following code. Please see the code comments inline for descriptions.

<!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>

Step 5 : Publish the microsite

For more information, see Publishing your microsite.

Step 6: Access the microsite

Access the dashboard via the following URL:

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.