Creating a Web Messenger control from Scratch – Part 6

Continuing our series on the Web Messenger control we will take a look at a couple of more API calls you can make and give your control added functionality.

Going back to our class there are another couple of properties that are quite interesting :-

messuserclass_thumb_4d1a79d9 Developer

The first of these is the Mailbox property. The official documentation states that this property “Gets the user’s Mailbox”.  Whilst this isn’t the whole truth it does actually give you a few properties that you can work with :-

messmailboxproperties_thumb_0c782d6a Developer

  • InboxInitialCount – Gets the initial mail count of the inbox.
  • InboxUnreadCount – Gets the current unread mail count of the inbox.
  • OtherInitialCount – Gets the initial mail count for all folders.
  • OtherUnreadCount – Gets the current unread mail count for all folders

As has been stated, what we want to do with this User Control is try to closely match the actual Messenger Client :-

messclient_thumb_2ecfc2e3 Developer

Taking a look at the messenger client, you will see a small envelope in the bottom right. This is an indicator of how many unread emails that you have, and even if you don’t have any, it’s a shortcut to your mailbox.

With the properties that are available to us, we can emulate this behavior in our own Messenger Control.

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();
    userPicture = userPicture.$0;
    var userStatus = Enum.toString(Microsoft.Live.Messenger.PresenceStatus, msgruser.get_presence().get_status());
    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";
        }
    }
    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_inboxInitialCount();
    var userDisplay = getSignInCode(pic.src, userName, userPersonalMessage, userStatus, Mail);
      //First clear the userInfo display area
    removeChildrenFromNode('userInfo');
    userInfo.innerHTML = userDisplay;
    document.getElementById('personalMessage').value = userPersonalMessage;
}

 

 

This is our displayUserInfo function that we went into in the last part of this Web Messenger series. Most of this remains the same however we have changed the signature of the userDisplay() function and added a call into Mailbox properties. The two changes of note are :-

//Get the number of unopened mail messages
var Mail = msgruser.get_mailbox().get_inboxInitialCount();
var userDisplay = getSignInCode(pic.src, userName, userPersonalMessage, userStatus, Mail);

 

The first gets the number of unread emails in the users inbox, and the second calls the userDisplay() function adding the returned value as an input parameter.  Our userDisplay() has now been updated to display the number of unread messages :-

function getSignInCode(picUrl, 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;";
    }
    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><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 += "</td></tr></table>";
    return result;
}

 

 

Notice the assumption that we are making in comments at the top of the function. What we have added to this function is code that gets the second part of somebody’s email address, add “http://www.” to the beginning of this and are assuming that this will point to their email provider. Then we insert code into our function that will display this number beside an image of an envelope. I’ll leave it up to you to re-arrange things, for example we could have made the image of the envelope the background of the cell and then written the number of unread emails into that cell so that it would appear that the number is actually in front of the image, as the Messenger Client does.

The second property from the User class that we want to take a look is the PendingContacts property. The Pending Contacts property gets the PendingContactCollection containing all of the user’s pending contacts :-

 

messpendingcontactcollection_thumb_5c50e2a6 Developer

This class exposes two properties as shown above :-

  • Count – gets the number of items in the collection
  • Item – gets the PendingContact at the specific index

This class is a collection class containing a list of Pending Contact objects. If we take a look at the PendingContact class we will see that there are two methods and two properties that are of interest. The properties are :-

messpendingcontact_thumb_09d2026a Developer

  • IMAddress – Gets the instant messaging address for the pending contact (requestor).
  • InviteMessage – Gets the text of the invitation message.

And the two methods of interest are :-

messpendingcontactmethods_thumb_3348d45b Developer

  • Accept – Accepts the pending contact and adds it to the user’s contacts collection (which we will be going over in a later article).
  • Decline – Declines the pending contact and adds it to the user’s blocked contacts list.

So first we want to display whether or not the user has any pending contacts. We will put this indicator directly below the number of unopened emails indicator on our control :-

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

 

 

This simply calls a javascript function that will iterate through each pending contact and ask the user whether they want to accept the contact or deny them. If the user does not have any pending contacts then an alert will be displayed to tell them as much :-

//display list of pending contacts
function PendingContacts()
{
    var pendingCount = msgruser.get_pendingContacts().get_count();
    if (pendingCount > 0)
    {
        for (var i = 0; i < pendingCount; i++)
        {
            var pendingContact = msgruser.get_pendingContacts().get_item(i);
            var msg = pendingContact.get_imAddress().get_address();
            msg += " wants to be your contact<br>";
            msg += pendingContact.get_inviteMessage();
            msg += "<br>Do you accept?";
            var res = confirm(msg);
            if (res == true)
            {
                pendingContact.accept();
            }
            else
            {
                pendingContact.decline();
            }
        }
        //Now reset the pending Contact count to 0
        var pendContacts = $get("PendingContacts");
        pendContacts.innerHTML = "0";
    }
    else
    {
        alert("You have no pending contacts");
    }
}

 

When you run the code now you have two indicators off to the right of the user information area, one for unread emails and the second for pending contacts :-

messcontrol_thumb_4bd871ab Developer