HOWTO: KoolIM as a desktop chat application

Mark Birbeck's picture

To illustrate the use of the renderer-request-newwindow event, we'll create a desktop application that uses the KoolIM chat client.

KoolIM is a very impressive web application that allows you to chat with people via any of the popular chat protocols. The KoolIM servers do all the work of translating the protocols, which means that the user interface need only communicate over HTTP to the KoolIM servers. It's therefore possible to build chat clients with HTML, which means that users do not need to install any special software and can use chat almost anywhere.

Since KoolIM supports so many protocols it's a strong candidate to be used as your main chat software, although it is limited to some extent by the browser. We can improve things somewhat by adding a renderer-request-newwindow handler that creates a new renderer whenever the KoolIM web application tries to open a new window, but since we have total control over the renderer object, we'll create one that docks to the left side of the screen, and automatically hides when the mouse is moved away.

The first part of our application just sets up some global variables so that the objects we create don't get deleted when our functions exit:

var message;
var listener;
var koolim;
var listener;

Next we create an event handler, that will create a new renderer object when triggered, and will return the renderer as part of the Event object:

function handleEvent(event)
{
  message = new Renderer(
    {
      Type     : "xhtml",
      Title    : "Sidewinder: Message",
      Style    : 0x00000040|0x00000800|0x00001000|0x00400000|0x20000000,
      Edge     : "left",
      Position : "top",
      AutoHide : true,
      Width    : 298,
      Height   : 298
    }
  );
  message.Create();
  message.Show();

  event.param.objectValue = message.GetRenderingImplementation();
}

The main function itself needs to create the main renderer:

function main()
{
  koolim = new Renderer(
    {
      Type     : "xhtml",
      Title    : "Sidewinder: Kool IM",
      Style    : 0x00000040|0x00000800|0x00001000|0x00400000|0x20000000,
      Edge     : "right",
      Position : "middle",
      AutoHide : true,
      Width    : 256
    }
  );
  koolim.Create();

before creating an EventListener object and registering for the 'new window' event:

  listener = new EventListener;
  listener.SetHandler(handleEvent);
  koolim.addEventListener("renderer-request-newwindow", listener, true);

Finally, we're ready to open the KoolIM web application:

  koolim.Load("http://web1.koolim.com/client5/html/webim.html");
  koolim.Show();
}

main();

(For detailed information on how to use the script below, see Using JavaScript to create internet-facing desktop applications.)

AttachmentSize
koolim.js.txt1.04 KB