WSO2 User Engagement Server 1.5.0 -Milestone-1 Released !

Let me start this post with a saying.

                 "Data is worthless if you don't communicate It correctly"

I'm sure everybody reading this post will agree on the above saying. WSO2 User Engagement Server or simply known as WSO2 UES was released with the aim of providing a set of tools that will ease your data visualization.

If it is the first time that you are hearing about WSO2 UES, I would suggest you to peep a bit into WSO2 documentation about UES 1.0.0 here. Also if you are a developer who is interested in how the things have been done, UES git repo is the place for you.

UES 1.0.0 release was done sometime back and recently we released the milestone one of version 1.5.0 of the product. Milestone 1 mainly contains the initial implementation of Gadget generation tool which will simply take user through a wizard and will draw a graphing gadget visualizing his data.

Are you interested ? Let me walk you through the lanes of UES. First of all download the WSO2 UES 1.5.0 Milestone 1 pack from here.

NOTE:
   PRODUCT_HOME that I will be referring from here on-wards is the directory where you unzipped the downloaded pack. 

OK. Now we are ready to make our hands dirty with our data :)

Place your RDBMS driver at <PRODUCT_HOME>/repository/components/lib/
For an example if your data resides in a mysql database, place the mysql driver at the above location.
(IMPORTANT : If you have started the server already, you have to restart after placing the driver.)

Start the downloaded pack as you start any of the WSO2 products.

• On Windows: <PRODUCT_HOME>\bin\wso2server.bat
• On Linux/Solaris: sh <PRODUCT_HOME>/bin/wso2server.sh

You can find more information on how to start the product here.

Go to the browser and open the link http://localhost:9763/portal and login.
You will see a page similar to following.

Find the sign in button on the top right corner of the page. For the moment let's login with following credentials.
                 Username : admin
                 Password: admin
Please note that if you need to create a new user and login with that user, you can do so.

Once you logged in, you will be redirected to the dashboard creation page.

Click Create on top left corner and select Dashboard.

Give a preferred name to the dashboard and select a layout. Then click on Create new app.
Layout defines the arrangement of gadgets in your dashboard.

Then you will be redirected to the dashboard designer window where you can add gadgets to the created dashboard.

Click on "Add Gadget" button on any of the blocks visible and follow the wizard.

Select your preferred data-source and click Next.
NOTE :
    Since this is milestone 1 of the tool, we have completed the implementation only for RDBMS. So please bear with us, we will support rest of the data-source types in coming releases.

Enter the connection details of your data-source and click Next. 
See the image below where I have entered mysql connection details of the database where I want to visualize my data. My database is "std" and both the username and password for the database is "test". 

Also note that the information of the data-source needs to be of the driver that you placed in the lib folder as stated in first step.
Ex: If you place mysql driver in lib folder then connection URL, username and password fields should be of a mysql database.

Enter your SQL query to get the data from the respective table of the database and Click Next.
This SQL query can be any complex query which return the columns that you want to visualize in your gadget. 
NOTE : Do not add the semi-colon at the end of the query.

Go to "Store Items" and click on your preferred graph type.
NOTE:
   As I mentioned above, at the moment we only support the chart types that I have caged with a rectangle  (Line chart and Bar chart). Await for more chart types in future.

Let's say I select the chart type as "Bar Chart".

Do the data mapping of the columns as needed and click Next.

• Depending on the SQL query that you submitted in the previous step, the columns retrieved from that particular query will be visible as drop down for each axis. Select the column names from them.
• Give the axis label names that you want in your chart.
• You can set your chart to be updated at a given interval by setting the Update interval value. Note that update interval is in seconds.
• Click on the + mark (shown in the cage), if you want to add more series to the same graph.

Once you click on the + button, you can add multiple series as follows.
Let's say I want to show both Maths marks and Science marks of the students in the same graph. For the first series I have selected Maths marks. Now let's add Science marks for the second series.

Like wise you can add any number of series in the same graph.

Once you have finish adding the required series click on Next button and you will see your data been visualized into a bar chart as follows.

Note that you can customize your chart (change colors, bar width etc) using a simple configuration file to meet your desire.

Click on the title "Bar Chart" on the top of the added gadget and change the title of your chart.

Enjoy adding as many as gadgets you need in to your dashboard.

Once you have completed adding gadgets click on Save on top right corner to save  your dashboard.

IMPORTANT
Gadget gen tool feature is in its very early stages, you will encounter number of bugs and feature limitations, we are working on improving these in future milestones.

      Limitations

• Only supports connecting to RDBMS data source at the moment.
• Line chart and Bar chart templates have been re-factored and rest of the charts will be done in future milestones.
• Wizard UI will to be styled and polished in coming releases.
• Error handling and validations are yet to be done.
• Supporting text based x-axis ticks has been done and other special data types (ex : date/time) has not been done yet. Because by default flot (graphing library used for gadgets) supports only integer based x-axis ticks)

More good things are yet to come !!!
Be with us, tool will be improved more and more in future releases to cater all your data visualization needs.

Inter Gadget Communication with WSO2 UES

The main objective of this blog post is to explain how to implement inter-gadget communication with WSO2 User Engagement Server (UES). 

Inter - Gadget Communication

Inter-gadget communication that we are talking here is the capability of one gadget to talk with some other gadget. In simple words "is Gadget A capable of sending some data to Gadget B" and "is Gadget B capable of updating itself with the received data". The message paradigm that is used underneath is the publisher - subscriber model.

Publisher - Subscriber Model

As shown in the image given below, publisher publishes the message to a channel and subscribers listen to that channel. Upon a new message in the channel by the publisher, subscribers fetch the message and update their selves accordingly.

In a complex scenario, there can be one publisher publishing to multiple channels and also number of subscribers listening to multiple channels. 

The role of WSO2 User Engagement Server is to act as the Message Broker in this paradigm.

Implementation

I will explain the implementation of this publisher - subscriber (pub-sub) model with a simple example scenario.

Let's say publisher-gadget publishes a random number to a channel and that random number will be shown up in the subscriber-gadget each time that publisher-gadget will publish.

Gadgets usually communicate with the gadget-container via features and those features are declared in the the ModulPrefs section of gadget.xml file.

Gadgets convey their interest to either publish or subscribe to a channel via the gadgets.Hub.* API. Therefore the feature titled "pubsub-2" needs to be imported in-order to load the necessary API fragments . As I mentioned earlier this feature can be declared in the ModulePrefs section of our gadget.

OK. Now let's make our hands dirty with the sample that I described earlier.

Hint : Once we are done with the implementation we will have two gadgets with the following folder/file structure.

Publisher Gadget
Let's see how we can declare this in the publisher - gadget.xml file.

       <Require feature="pubsub-2">
                <Param name="topics">
                          <![CDATA[
                               <Topic title="randomNumber name="my-channel" publish="true"/>
                          ]]>
               </Param>
      </Require>

Pay attention to the sections I have marked in red in the above code snippet.  Feature that we have to import is pubsub-2. And my-channel is the channel that the publisher wishes to publish into. To indicate that this is the publisher gadget we have set publish="true".

In the sample that I'm going to describe in this post, when somebody clicks the button named "Publish a random number" in the publisher gadget, a random number will be published to my-channel. So let's have a button declared in our gadget.xml file.

         <div>
              <input type="button" value="Publish a random number" onclick="publish()"/>
         </div>

The function call that will be triggered by this button click is publish() and we define it in the js file of our publisher - gadget. (in publisher-gadget.js)

          function publish() {
               var message = Math.random();
               gadgets.Hub.publish("my-channel", message);
               document.getElementById("output").innerHTML = "Number that is published to the channel : " + message;
        }

Once again pay your attention to the red line which says publish the random number to my-channel which we declared in the ModulePrefs section.

Subscriber Gadget
As we did in the publisher gadget, we need to import the pubsub-2 feature and declare this gadget as a subscriber gadget in the subscriber-gadget.xml file.

          <Require feature="pubsub-2">
            <Param name="topics">
                <![CDATA[
<Topic title="randomNumber" name="my-channel"
description="Subscribes to random number channel" type="object"
subscribe="true"/>
]]>
            </Param>
        </Require>

And then let's have a simple div in the subscriber-gadget.xml file which we can use to set the fetched value from the publisher's channel.

          <div id="output"> </div>

After that we need to add the following snippet in the subscriber-gadget.js to activate the subscription to "my-channel" channel.

         gadgets.HubSettings.onConnect = function () {
                     gadgets.Hub.subscribe("my-channel", callback);
         };

The function that we want to invoke in the subscriber end, upon a message publishing by the publisher is written in the javascript callback function as follows which is also in the subscriber-gadget.js file.

         function callback(topic, obj, subscriberData) {
               document.getElementById("output").innerHTML = "Number that is fetched from the channel : " + obj;
         }

OK. We are done with the pub-sub implementation.

Finally what we need to do is add these two gadgets to a WSO2 UES dashboard and check out the functionality.

For that you can follow WSO2 UES documentation on how to create a gadget and how to add gadgets to dashboards.

Or else there is a bit hacky way also ;) (Not recommended. But if you want to check whether your two gadgets working fine, you can try this out.)

1. Copy your two gadgets in UES_HOME/repository/deployment/server/jaggeryapps/portal/gadgets/
2. Then create a dashboard (let's say our dashboard is pub-sub) using any two of the existing gadgets (NOT our two gadgets) in UES dashboard.
3. Open up UES_HOME/repository/deployment/server/jaggeryapps/pub-sub and open up the index.jag
4. Search for word .xml and you will find two of them.
5. Replace those two urls with the following and save the index.jag file.
             http://localhost:9763/portal/gadgets/publisher/publisher-gadget.xml
             http://localhost:9763/portal/gadgets/subscriber/subscriber-gadget.xml

So your index.jag will have two snippets as follows.

     <li class="layout_block " data-sizey="2" data-sizex="2" data-col="1" data-row="2" 
                data-url="http://localhost:9763/portal/gadgets/publisher/publisher-gadget.xml" 
                data-wid="5" data-prefs="{}" data-title="">

     <li class="layout_block " data-sizey="2" data-sizex="2" data-col="3" data-row="2"
                data-url="http://localhost:9763/portal/gadgets/subscriber/subscriber-gadget.xml" 
                data-wid="6" data-prefs="{}" data-title="">

6. And then access the dashboard as https://localhost:9443/pub-sub/
7. You'll see a dashboard as given in the below image.

8. Click on "Publish a random number" button in the publisher gadget and observe that the same number getting printed in the subscriber gadget as well.

9. Try clicking on the same button several times and observe the subscriber gadget updating its content accordingly.

You can download the complete code of the above two gadget from here.

Real World Scenario
Let's say we have a time slider as the publsiher gadget. Upon a time period selection on the slider, we need to display the number of builds per apps within that period in a seperate gadget. So the later gadget acts as the subscriber by listening to the time slider gadget's channel.

You can do whole lot of things with WSO2 UES pub-sub model :)
Enjoy !!!

Acknowledgement
- Thanks to the WSO2 Gadget Server ( currently deprecated )  documentation on pub-sub model.