Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Scenario:

...

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

Code Block
languagexml
titleg1.xml
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <ModulePrefs title="G1" height="350" description="g1">
		<!-- This is used to import the pubsub feature -->
        <Require feature="pubsub-2"/>
        <Require feature="dynamic-height"/>
    </ModulePrefs>
    <Content type="html">
        <![CDATA[
        <head>
			<!-- Defines the style that needs to be used for the publisher gadget -->
            <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>
				<!-- The gadgets.HubSettings.onConnect function is called by the OpenSocial container once the gadget connects to the PubSub messaging hub -->
                gadgets.HubSettings.onConnect = function() {
                    var id = 0;
<!-- This defines the message that will be printed in the publisher gadget and the message that will be published to the topic -->
                    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
                        });
<!-- This defines the interval between each message that is published -->
                    }, 2000);
                };
            </script>
        <head>
        <body>
            <div class="log"></div>
        </body>
        ]]>
    </Content>
</Module>

...

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

Code Block
languagexml
titleindex.xml
<!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.

Image Modified