IBM Script Portlet with IBM Sametime

Let’s build a web application using IBM Sametime and the newly released IBM Script Portlet for WebSphere Portal.

IBM Sametime integrates with WebSphere Portal already, and there’s ample documentation in the Knowledge Base on configuring the two products.  But assume you either want to quickly build upon the existing integration or forego the tight integration for a more ad hoc application approach.  To do this, I’ll use the Sametime Proxy samples (stproxy), which provides a rich client-side API – perfect for a web application.
This is a basic web sample straight from the SDK.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>IBM Sametime 9 Example 9</title>
   <link type="text/css" rel="stylesheet" href="sametime.css" />
   <script type="text/javascript">
      // Settings for the proxy
      var stproxyConfig = {
         server: "http://<YourProxyServer>:9080",      // Replace with the appropriate server & port
         tunnelURI: "http://<ThisServer>/tunnel.html", // The url of the openAjax Tunnel which must be on the same server as this file
         isConnectClient: false
      };
      djConfig = {
         parseOnLoad: true,
          locale: "<%=request.getLocale().toString().replaceAll("_","-")%>"
      };
   </script>
   <script type="text/javascript" src="http://<YourProxyServer>:9080/stwebclient/latest/dojo.blue/dojo/dojo.js"></script>
   <script type="text/javascript" src="http://<YourProxyServer>:9080/stwebclient/latest/include.js?widget=widgets&auto=false"></script>
</head>
<body>
  <div>
    <img src="logo.png" />
  </div>
  <div>
     <div>
       <h1>Example 9</h1>
       <p>This example shows how to embed the entire web client into a web page</p>
     </div>
     <div>
        <div style="width:330px;height:550px;border:1px solid black;" id="myClient"
           dojoType="sametime.WebClient">
        </div>
     </div>
  </div>
</body>
</html>

What’s going on in this code?  First, there are two configuration that get created in the head tag of the page.  Next, two script includes are loaded.  The include.js file will use the configuration objects – so order is important.  And finally, the div specifies where to render the Sametime component, which is the web client.

Using the new script portlet, you might create an application by plugging in the respective components.

Script Portlet Editor

This won’t work (besides the need to specify actual servers and remove the JSP scriptlet).  The reason this won’t work is due to how the script portlet emits the final markup.  To see this, you can review the WCM presentation template.

Script Portlet WCM Presentation Template
The [Component name=”script portlet library/links generator”] is what injects the dependencies (CSS and Javascript) into the head tag of the page.  Then another head tag is created to contain the key=Head content (not seen in screenshot).  The style tag encapsulates the key=CSS script editor content, the script tag contains the key=Javascript content, and finally the key=HTML content is created at the end.

The order of the final markup is at fault.  The external Javascript dependencies load before the configuration objects are evaluated in the script tag.  And due to the design of the portlet, I can’t move a <script src=”somescript.js”/> tag into the head editor control.  The design is such that only Javascript code can be placed there – not a reference to a Javascript file.
My point in detailing this is that you should understand what the script portlet does with the web artifacts.  You can then either refactor your code to accommodate or even create a new presentation template to re-order the emitted markup.  The latter is the value of using WCM.  I chose to simply refactor code.  The final version looks like this.

Script Portlet Sametime Code

I’ve kept the configuration objects as Javascript.  The external dependencies have moved to <script> tags in the HTML editor.  And I’m also calling the login function inside the HTML editor rather than as evaluated Javascript in the respective Javascript editor.  Again, minor code changes, but ones that required knowledge of both the Sametime code as well as the Script Portlet design.

Now you can build Sametime widgets with just a bit or markup.

Sametime ExamplesHappy coding!

1 thought on “IBM Script Portlet with IBM Sametime”

Leave a Reply

Your email address will not be published.