Hello, please sign in or register
You are here: Home

Windows Live Chat Control - the non declarative way

So the windows live chat control is a really easy to deploy, drop-in-and-play instant messaging service. Which looks a little like this...


To get this chat widget you can follow the tutorial here .... http://msdn.microsoft.com/en-us/library/ff750122.aspx

The tutorial requires a splattering of HTML like so...

Code
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wl="http://apis.live.net/js/2010">
<script src="http://js.live.net/4.0/loader.js"></script>
<wl:chat-frame
   event-name = "Example Event Name"
   client-id="[put your appid here]">
</wl:chat-frame>
</html>

... however?

NO space for Namespace

For large websites, complex templates etc adding the "xmlns:wl="http://apis.live.net/js/2010" namespace isn't always feasible. So what's the alternative...

The imperative way saves the day

Rather than having to use the <wl:chat-frame> otherwise known as the declarative method...  (see more on the difference at http://msdn.microsoft.com/en-us/library/ff750239.aspx)

... We can use pure javascript to bind this widget to an html tag of our choosing.

Demo

http://sandbox.knarly.com/winconnect/chat.htm

Code

<html xmlns="http://www.w3.org/1999/xhtml">
<script src="http://js.live.net/4.0/loader.js"></script>
<script type="text/javascript">


Microsoft.Live.Core.Loader.load(["Messenger.UI.ChatFrame"], function () {
        $create(Microsoft.Live.UI.Messenger.ChatFrameControl,
            { eventName: 'Word', clientId : '000000004002CC1F' },
            {},
            {},        
            $get('chatDiv')
            );
});

</script>
<div id="chatDiv"></div>
</html>

The aforementioned code does the following things
  1. Loads in loader.js
  2. Loads in the additional module we need "Messenger.UI.ChatFrame"
  3. Calls the $create method on callback with the appid and the target element of the chat widget.

$create

Is a neat little elusive function which underlines all the UI widgets in the MWT arsenal... more info can be found at http://msdn.microsoft.com/en-us/library/ff355367.aspx

Simply though this is what $create is doing for us...
  1. For the widget defined in the first parameter
  2. And Attributes defined in the second parameter, i.e. clientId, eventName, theme, height, width. 
  3. It Bind it to the element defined in the Fifth parameter: note: i'm using $get which comes with the Microsoft JS API it is synonymous with document.getElementById.




Comments

dwuIiDwXHvqulF
Stands back from the keyboard in aamezment! Thanks!
Created 08/08/11
rTQFXwJKE
Uv4P9Q jtvvzkeenjew
Created 08/08/11
pfRlOzCGZamQNQGJ
EoX4Y5 , [url=http://vgcjpormvnrs.com/]vgcjpormvnrs[/url], [link=http://qveygenydtla.com/]qveygenydtla[/link], http://nzebxblombve.com/
Created 09/08/11
lLfzNeBapexPaC
A2MxFo mucytnszyfpd
Created 11/08/11
NgIIfApruMrU
Tg7TrC , [url=http://ferfwdtrhsmt.com/]ferfwdtrhsmt[/url], [link=http://vfuuwtkewuti.com/]vfuuwtkewuti[/link], http://vyzvtakyvvtt.com/
Created 16/08/11
Title*
Comment

Prove you are not a robot

To prove you are not a robot, please type in the six character code you see in the picture below
Security confirmation codeI can't see this!
Contact
Name*
Email never shown*
Home Page

Author

Andrew Dodson
Since:Feb 2007

Comment | flag

Categories

Bookmark and Share