Fun with Web AIM Using Whimsicals
As promised, I continued working on creating an operational instance of Web AIM on a web site I use primarily for experimentation. My working web page is rather simple, consisting of two text links, labeled:
- Launch my Buddy List
- Send Me an IM!
This is a direct cut and paste from the AIM Whimsicals documentation page.
Four elements
A working Whimsical-based Web AIM web page consists of four elements, one placed in the HTML file <head> section, and three placed in the <body> section:
1. Within the <head> section, we identify the aimapi.js script that performs the dynamic activity, and which serves as the interface to the AIM server functions:
<head>
<script type="text/javascript" src="http://o.aolcdn.com/aim/web-aim/aimapi.js"></script>
</head>
2. In the <body> section, the deployment key that was generated using your AIM screen name and the web page where you'll be embedding Web AIM is identified. Using a <div> element is the best way to do this, according to the AIM Whimsicals documentation. For example:
<div id="AIMBuddyListContainer" wim_key="your_Web_AIM_key"></div>
3. Also in the <body> section, I inserted a Web AIM Buddy List widget, my link labeled "Launch my Buddy List," using the following code:
<a onclick="AIM.widgets.buddyList.launch();return false;" href="nojavascript.html">Launch my Buddy List</a>
4. And I inserted a link to launch the widget to let anyone send me a message using AIM, again in the <body> section of my HTML document:
<a href="nojavascript.html" onclick="AIM.widgets.IMMe.launch('diyincite');return false;">Send Me an IM!</a>
Here's my entire HTML file, which I named index.html (substitute your actual wim_key value in your own page):
-----------
Listing 1. index.html
<html>
<head>
<title>diyINcite: Do-It-Yourself Technology Insight: AOL Technologies</title>
<script type="text/javascript" src="http://o.aolcdn.com/aim/web-aim/aimapi.js"></script>
</head>
<body>
<div id="AIMBuddyListContainer" wim_key="_my_Web_AIM_key_"></div>
<a onclick="AIM.widgets.buddyList.launch();return false;" href="nojavascript.html">Launch my Buddy List</a>
<a href="nojavascript.html" onclick="AIM.widgets.IMMe.launch('diyincite');return false;">Send Me an IM!</a>
</body>
</html>
-----------
The hardest part
This all looks and sounds easy, right? Indeed, the coding for getting basic Web AIM functionality running on a web page is very easy.
The hardest part in getting Web AIM to work, for me, was understanding how to specify the URL on the AIM WIM Registration page, where the AIM API server provides you with your Web AIM deployment key. The "Note" for the "Destination URL" says:
your new key will only work for pages located in the same directory as the Destination URL provided
To me, this implied that I was to specify a URL that identifies a directory within a web domain, for example:
http://www.diyincite.com/aol
But when I did this, then uploaded my index.html file into the aol subdirectory in my web domain www.diyincite.com, my Web AIM links did not work. When I clicked my links, I eventually (after entering my AIM login information) received an error message stating something like:
invalid devID or site not registered
If you receive this message, it's a clue that your key is not valid for the actual URL you're accessing, from Web AIM's point of view. It could be something else, such as a typo when you applied for your key. But if you're sure everything was entered correctly, your problem could be the same one I encountered. I did find a solution, which I describe below, but I'd still like to talk a bit more about what may have been happening. If what I'm saying doesn't make sense, please feel free to jump in with a comment to set the record straight. I don't claim to know everything...
Anyway, my guess is that I received those error messages because my web server (which is Apache) automatically changes the URL when I direct my browser to a specific directory in my web domain. For example, if I point my browser to http://www.diyincite.com/aol, my Apache server looks in that directory, sees my "index.html" file, loads that file, and changes it's definition of the current URL to http://www.diyincite.com/aol/index.html.
Now, when I first requested a Web AIM deployment key, the URL I specified was http://www.diyincite.com/aol. So, when my browser loaded a page named http://www.diyincite.com/aol/index.html, but I had inserted into that page a Web AIM deployment key created using the URL http://www.diyincite.com/aol, then I apparently had a mismatch between the page URL and the key I'd created.
The simple fix
The problem disappeared when I returned to the AIM WIM Registration page and requested a key for the URL http://www.diyincite.com/index.html. Once I put that key into my index.html <div> element as the "wim_key" attribute, my Web AIM page went live, with quite exciting results!
Web AIM in action
Clicking my "Launch my Buddy List" link brought up a graphical box that listed my AIM screen name, my status ("Available"), my buddy groups and all of my buddies in each group who were online using AIM at the time. This Buddy List widget is actively updated.
I know that the "Send Me an IM!" link worked too, because I asked a couple friends to go to http://www.diyincite.com/aol/index.html and click the link and send a message. And, I received the message. It turns out that I was actually able to receive the messages both on my web page and/or in any AIM client application that I had running (for example, on another computer).
One thing I really like is the way that multiple conversation windows pop up right onto the web page when newly logged-on friends contacted me. I was logged into AIM viewing the Web AIM web page I had created, and each conversation with a buddy appeared as a new Web AIM conversation widget box. You're able to drag the individual conversation boxes around the web page, and arrange them however you'd like within the browser window. It's very much as though your web browser window/tab (I was using Firefox) is functioning as a local desktop. Like you're dragging windows to different locations across your local Windows desktop.
What's the underlying technology?
Now, the technology behind this interests me considerably. I do intend to find out how this works. What I observed reminds me of what I've seen in my initial studies of AIM Pages, which implement the AOL ModuleT ("A Module Transport Microformat Profile") technology. With ModuleT you create snippets of code that create containers that perform a specific function, and you can move these containers to any location on your web page, again working with and designing your web page as though you were working with a select, drag, and drop canvas on your local desktop. It's very interesting! But, I can't say for certain that ModuleT is involved in Web AIM, at this point in my investigation. I'll find out, though, I promise.
The other interesting AOL technology that potentially lurks in the background here is Boxely, the XML and Javascript based technology upon which the newest versions of AIM are built. Again, I can't say today that Boxely has anything to do with Web AIM. But I'm certainly curious to find out about this!
Are we done yet?
"Are we done discussing Web AIM?" you ask. Well, we've actually barely scratched the surface. What about custom themes for your Web AIM widgets? You can apply one of the already available themes, or if you're really creative and you know how to create Cascading Style Sheets, you can study the Web AIM CSS Reference and make the theme that's perfectly suited for your target web page.
Also, the discussion in this blog post and the last one was really only about creating a web page that embeds Web AIM using the Whimsicals construct. That's really a template-based approach. One of many possible templates. If you want truly customizable integration, the possibilities are fairly endless if you get into applying Web AIM using the JSON and URL-based APIs.
I'll write about some of that in some future posts, but probably not in the immediate future. As you can see from my references above to ModuleT and Boxely, there's a lot going on at AOL, and I'd like to introduce all of it, rather than stay fixed on one topic right at the start of this blog, since different developers will find different APIs and toolkits more useful for their own desktop application and web development.
As always, I welcome comments and questions in response to this and all my dev.aol.com blog posts. Please do comment, and please do suggest topics that interest you for future posts.
-- Kevin Farnham
- kevinfarnham1's blog
- Login or register to post comments