Integrating Sametime into Portal

I recently worked with a client that wished to integrate Sametime instant messaging into WebSphere Portal. After evaluating the options available, I found that although IBM provides a Sametime portlet, it has one big drawback in that it takes so much space on the screen. User interfaces are already limited by screen size and resolution, it makes sense to use this space well.

Using a Tooltip Dialog
Most native instant messaging clients hide their user interfaces until they're needed - either to send a message or to handle an incoming message. The remainder of the time it just provides a status indicator on a tray at the bottom of the screen. This same concept can be applied to a web interface using a dojo tooltip dialog. Suppose that we've identified a location in the HTML where we want to show the Sametime status:

<div id="myClient2" onclick="ShowSTClientInFloatingPane()">Show tooltip dialog</div>

Now we can programmatically create a sametime.WebClient dojo widget using javascript:

var dsixe = {};
var tooltipDialog = null;

dojo.ready(function() {

  // Instantiate the sametime client widget
  dsixe.ST_Client = new sametime.WebClient({
      style : "width:200px;height:300px;border:1px solid black;"
  });

  dojo.require("dijit.TooltipDialog");
  
  tooltipDialog = new dijit.TooltipDialog({
    content : dsixe.ST_Client,
    onBlur : function() {
        dijit.popup.close(tooltipDialog);
    }
  });
});

and add a script to handle the onClick event that will display the Sametime buddy list:

function ShowSTClientInFloatingPane() {
   var node = dojo.byId("myClient2");
   var coords = dojo.coords("myClient2");
   var x = coords.x + 15;
   var y = coords.y + (coords.h / 2) + 5;

   dijit.popup.open({
       popup : tooltipDialog,
       x : x,
       y : y
   });

   dsixe.ST_Client.main.initLayout();
}

When we put this all together in a proper HTML page, we get something that looks like this:

Conclusion
Using this technique I was able to provide an instant messaging experience that is familiar to the end user while consuming very little screen space.