Creating a Web Messenger control from Scratch – Part 7

Corrections

Before moving onto the next part of the Web Messenger User Control, I was running through the code I have developed so far and happened upon a couple of bugs, so this part of the Web Messenger User Control tutorial will be a short one fixing the bugs in the code we have so far.

On fixing these bugs the User Control works as expected and you end up with something akin to the following :-

messusercontrol_thumb_58cf932d Developer

Both of the bugs appear in the displayUserInfo() function, and following onto that there have been changes made to the getSignInCode() function as well.

The first bug is to do with displaying the user’s stored picture. In my original code, I retrieved the Image by using the get_displayPictureUrl() property of the Presence class. Then I checked for a valid file extension using the following code :-


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”;

    }

}

This code is incorrect as the DisplayPictureUrl() property will never return a file extension, therefore when running the code you would always end up with the default image and never get the user’s actual display image.  This code should be removed and replaced with :-

var userPicture = msgruser.get_presence().get_displayPictureUrl();
var img = new Image();
img.onerror = function()
{
    img.src = "WebMessenger/Images/MsgrNoImage.gif";
}
img.src = userPicture;
//Now we need to scale the image down to 40 pixels width
//and the appropriate height
var scale = Math.round(img.width / 40);
img.style.width = "40";
img.style.height = Math.round(img.height / scale)

 

 

Here we again use the DisplayPictureUrl() property however we assign this directly to a new Image() object which will render correctly. Just in case it doesn’t we put an onerror condition in to point to our default image. Reasons for it not rendering correctly can be things like the user hasn’t actually assigned themselves an image and therefore the property call returns null, the user has a specialized animated for messenger (like I do for one of my accounts) etc.

Since we now have an actual image object and are not just creating an <img> html tag, we need to change certain things in our getSignInCode() function. We no longer pass in the img.src attribute as we did before and instead just assign a placeholder in which we will put the image :-

function getSignInCode(userName, userMessage, userStatus, MailMessages)
{
    //This is basically a guess. Because we can't assume the user has a hotmail.com
    //inbox as Live ID allows for non-hotmail accounts, we are assuming that the
    //users email can be found at the address following the @.
    //e.g. [email protected] - take the part after the @, add www and you end up with
      //www.gmail.com
    var EmailAddress = msgruser.get_address().get_address();
    var Email = "http://www." + EmailAddress.substr(EmailAddress.indexOf("@") + 1);
    var PendingContacts = msgruser.get_pendingContacts().get_count();
    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;";
    }
      //A placeholder for the users picture
    result += "'><div id='userPic'></div>";
    result += "</td><td align='center'><span style='font-weight: bold; font-family: Tahoma,arial,sans-serif; font-size:12px;'>";
    result += userName;
    result += "</span></td><td width='24px' style='padding: 2px; a:visited: #000000; a:hover: #ffffff; a:link: #000000;'>";
    result += "<a href='";
    result += Email;
    result += "' target='_blank' >";
    result += "<img src='WebMessenger/Images/Mail.gif' style='border: 0px;' />";
    result += "<span style='font-weight: bold; text-decoration: none;'>&nbsp;";
    result += MailMessages;
    result += "</span></a></td>";
    result += "</tr><tr><td>";
    result += userMessage;
    result += "</td><td style='padding: 2px; a:visited: #000000; a:hover: #ffffff; a:link: #000000;'>";
    result += "<a href='javascript:PendingContacts();'>";
    result += "<img src='WebMessenger/Images/PendingContact.gif' style='border: 0px;' />";
    result += "<span style='font-weight: bold; text-decoration: none;' id='PendingContacts'>&nbsp;";
    result += PendingContacts;
    result += "</span></a>";
    result += "</td></tr></table>";
    return result;
}

 

Now since this hasn’t been added to the document/page yet, we cannot get a reference to the “userPic” div that we have created and therefore cannot insert the image. So we need to wait until this has been added using the innerHTML first. Here is the full working code for the displayUserInfo() function :-

/* Populate the user information string. */
function displayUserInfo()
{
    var userInfo = $get('userInfo');
    var userAddress = msgruser.get_address().get_address();
    var userDispName = msgruser.get_presence().get_displayName();
    var userPersonalMessage = msgruser.get_presence().get_personalMessage();
    var userPicture = msgruser.get_presence().get_displayPictureUrl();
    var img = new Image();
    img.onerror = function()
    {
        img.src = "WebMessenger/Images/MsgrNoImage.gif";
    }
    img.src = userPicture;
    //Now we need to scale the image down to 40 pixels width
    //and the appropriate height
    var scale = Math.round(img.width / 40);
    img.style.width = "40";
    img.style.height = Math.round(img.height / scale)
    var userStatus = Enum.toString(Microsoft.Live.Messenger.PresenceStatus, msgruser.get_presence().get_status());
    var userName = null;
    if (userDispName !== '')
    {
        userName = userDispName + ' (' + userAddress + '): ' + userStatus;
    }
    else
    {
        userName = userAddress + ': ' + userStatus;
    }
    //Get the number of unopened mail messages
    var Mail = msgruser.get_mailbox().get_inboxUnreadCount();
    var userDisplay = getSignInCode(userName, userPersonalMessage, userStatus, Mail);
      //First clear the userInfo display area
    removeChildrenFromNode('userInfo');
    userInfo.innerHTML = userDisplay;
    document.getElementById('personalMessage').value = userPersonalMessage;
    //Now that the users Information is displayed, the placeholder for their
    //picture is available and we can insert it.
    document.getElementById('userPic').appendChild(img);
}

 

 

As you can see, the last line of this function actually inserts the image onto the page.

The second bug was that I called the wrong property to check whether the user had any unread in their inbox. The actual call I used was :-

var Mail = msgruser.get_mailbox().get_inboxInitialCount();

This gets the total number of emails from the user’s inbox, not their unread amount. The actual property I should have called is :-

var Mail = msgruser.get_mailbox().get_inboxUnreadCount();

 

This is reflected in the updated displayUserInfo() function above. If you’ve been following along, simply replace these two functions with the code above and you’re good to go. Next we will be taking a look at Contacts.