Creating a Web Messenger control from Scratch – Part 5

In the last part of this series we covered customizing the Windows Live Sign-In Control and some of the new features that have been added to the API for this control.  In this part we will cover some of the new features that are available for Users’ Contacts and the User him/herself.

So now that you are able to sign-in to your messenger User Control, we want to display some information about who’s actually signed in.

messclientuser_thumb_42bcd129 Developer

This is what the actual Messenger Wave 3 Beta Client looks like when a user has signed in. We would preferably  like our Messenger User Control to look similar.  The main elements to this are the users display picture, the user’s name and a personal message if the user has set one.

So how do we do this. All the functionality to do with the currently signed in user can be found in the User class :-

messuserclass_thumb_3007d772 Developer

We don’t need all these properties at the moment and some we will go over in a later article in this series. The ones we’re interested in at the moment are :-

  • Address – Gets the IMAddress for the user.
  • Presence – Gets the IMAddressPresence for the user.

Between these two properties we can get all the information we are looking for. So first off lets take a look at the properties for the IMAddress class :-

messaddressclass_thumb_19488fe9 Developer

Although again there are various properties that we can query, we are really only interested in one at the moment which is the actual User’s Address :-

  • Address – Gets a string containing the address for the IMAddress.

This is the user’s actual email address. Why do we need this?  When we are displaying the user’s information remember that we want to display the user’s name and also their personal message. Both of these are optional. Therefore if we get the user’s name and it’s blank we want to have something to display. In this case we will display the user’s E-Mail address instead.

As with most things in the Messenger API, there are multiple ways that we could do this, for example we could create a variable that would hold the instantiated class information for the IMAddress class then get the information from this.  The method that we will use will be to simply chain the calls together.

var userAddress = msgruser.get_address().get_address();

 

 

Here we get the IMAddress instance from our user class then call the get_address() property from the instantiated IMAddress class. This will return a string containing the user’s email address into our userAddress variable.

As you can see from the Properties listed above, we could get the user’s presence from the IMAddress class however we will get the user’s presence directly from the user class :-

messpresenceclass_thumb_3faa7334 Developer

Above are the properties of the IMAddressPresence class.

  • DisplayName – Gets or sets the display name string for the instant messaging address.
  • DisplayPictureUrl – Gets the display picture URL for the instant messaging address.
  • IMAddress – Gets the associated instant messaging address (IMAddress).
  • PersonalMessage – Gets or sets the personal message for the instant messaging address.
  • Properties – Gets the properties associated with the address.
  • Status – Gets or sets the status for the instant messaging address.

From this we want the user’s display name, their personal message and also their display picture. We also want their status (which indicates if they are currently online, away etc. :-

var userDispName = msgruser.get_presence().get_displayName();
var userPersonalMessage = msgruser.get_presence().get_personalMessage();
var userPicture = msgruser.get_presence().get_displayPictureUrl();
var userStatus = Enum.toString(Microsoft.Live.Messenger.PresenceStatus, msgruser.get_presence().get_status());

 

As you can see from the above code, Status actually returns an instance of PresenceStatus which is an enumeration giving us the following options :-

messpresencestatus_thumb_6fd44ea8 Developer

We will also use the Status to show the halo effect surrounding the user’s image as does the new Live Messenger Wave 3 beta client.

The next thing that we have to do is to check whether a valid image has been returned for the call to get_displayPictureUrl(). Sometimes a user will not have a display image in which case the call should return null. Sometimes the display picture may be a downloaded animated image used by the Messenger client (as mine is). In this case, it’s not actually a valid image that can be displayed. In either of these cases we want to display a default image. Otherwise we will use the image supplied :-

var userPicLast3 = userPicture.substr(userPicture.length - 3);
var pic = new Image();
if (userPicLast3 !== "jpg" && userPicLast3 !== "gif" && userPicLast3 !== "png")
{
    pic.src = "WebMessenger/Images/MsgrNoImage.gif";
}
else
{    
    pic.src = userPicture;
    pic.onerror = function()
    {
        pic.src = "WebMessenger/Images/MsgrNoImage.gif";
    }
}

 

 

One anomaly that I have found is that the returned value from the get_displayPictureUrl() property is actually an object and not just a string. However within the object is a variable $0 which actually holds the url. Therefore we need to extract this value before we execute the above code. This is done simply by :-

userPicture = userPicture.$0;

 

So now we have either the user’s display picture or a default image to display. Next we want to create a string that concatenates the users display name, email address and status or if the user does not have a display name, just their email address and status :-

var userName = null;
if (userDispName !== '')
{
    userName = userDispName + ' (' + userAddress + '): ' + userStatus;
}
else
{
    userName = userAddress + ': ' + userStatus;
}

 

 

Finally we want to display this information.  I’ve formatted the information into a table and simply insert that table into the Div as innerHTML once it has been constructed :-

var userDisplay = getSignInCode(pic.src, userName, userPersonalMessage, userStatus);

 

 

The getSignInCode function simply creates the raw html to be inserted in the Div element :-

function getSignInCode(picUrl, userName, userMessage, userStatus)
{
    var result = "<table width='100%'><tr><td rowspan='2' width='42px' style='padding: 2px; background-color: ';
    if (userStatus.toLowerCase() == "online")
    {
        result += "#00cc00;";
    }
    else if (userStatus.toLowerCase() == "offline")
    {
        result += "#cc0000;";
    }
    else
    {
        result += "#E3AC4F;";
    }
    result += "'><img width='40px' src='";
    result += picUrl;
    result += "'></td><td align='center'><span style='font-weight: bold; font-family: Tahoma,arial,sans-serif; font-size:12px;'>';
    result += userName;
    result += "</span></td><tr><td>";
    result += userMessage;
    result += "</td></tr></table>";
    return result;
}

 

 

Here we pass in the url of the image, the users name (concatenated string from above), their display message and also their status. The status as you can see if used to color the background and emulate the halo effect around the users picture giving an at-a-glance indication of the users status.

Once we have this code, we first clear anything that we had in the user information Div then we simply insert it into the Div element we had on our page for user information and finally we also update insert the user’s personal message into a textbox should they want to change it at somepoint. We will cover this at a later date :-

removeChildrenFromNode('userInfo');
userInfo.innerHTML = userDisplay;
document.getElementById('personalMessage').value = userPersonalMessage;

 

The removeChildrenFromNode function is below :-

/* Clear all children from the specified node 
(i.e. clear messages from the conversation window). */
function removeChildrenFromNode(id)
{
    var node = document.getElementById(id);
    if (node == undefined || node == null)
    {
        return;
    }
    var len = node.childNodes.length;
    while (node.hasChildNodes())
    {
        node.removeChild(node.firstChild);
    }
}

 

The only thing left to do now is to place the call to our displayUserInfo() function in the signInCompleted handler we setup previously and you should see something like the following when you run it :-

messsignedin_thumb_2f320239 Developer

Due to my animated graphic I am just displaying a default image. Notice the green background around the image identifying that I am currently online.

More to come shortly….