Page Comparison

The following code sample will be useful if you are writing any custom dashboards with WSO2 UES that requires inter-gadget communication or dashboard-gadgets communications.

...

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

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:

Code Block

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

Versions Compared

Old Version 1

New Version 2

Key

Follow the instructions below to enable and use inter-gadget communication and dashboard to gadget communication:

Step 1: Create a microsite

Step 2: Create the publisher gadget

Step 5: Use the inter-gadget communication enabled gadgets to verify the inter-gadget communication