MSN and Windows Live

Creating a Web Messenger control from Scratch – Part 7

Tue, 07 Oct 2008 19:42:34 GMT

Technorati Tags: Windows Live, Messenger, Windows Live Messenger, API, Messenger API, Programming, How to

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 :-

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. abc@gmail.com - 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.

Creating a Web Messenger control from Scratch – Part 6

Mon, 06 Oct 2008 21:16:29 GMT

Technorati Tags: Windows Live, Web Messenger, Windows Live Web Messenger, Programming, API, Messenger, How to

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 :-

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 :-

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 :-

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. abc@gmail.com - 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 :-

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 :-

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 :-

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 :-

Creating a Web Messenger control from Scratch – Part 5

Thu, 02 Oct 2008 20:36:02 GMT

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.

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 :-

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 :-

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 :-

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 :-

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 :-

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….

Technorati Tags: Windows Live, Messenger, Web Messenger, API, Programming, Windows Live Web Messenger

Creating a Web Messenger control from Scratch – Part 4

Sat, 27 Sep 2008 16:41:41 GMT

Technorati Tags: Windows Live,Messenger,Windows Live Web Messenger,Web Messenger,How To,Progamming,API

In the last part of this tutorial we covered the links and the new Show and Hide functionality of the Sign-In control. In this part, as promised, we will get to the customization options that are available to you with the Sign-In control.

Taking a quick look at the Sign-In control API we see that there is a Style property. As with the links property covered in an earlier article, this is a getter that returns a class of type SignInControlStyle. So once you have got a reference to this class what does it offer you?

Taking a look at the API you’ll see that it exposes seven properties that allow you to change various aspects of the Sign-In control :-

Background gets or sets the background color property for the SignInControl
BorderColor gets or sets the border color property for the SignInControl
ButtonBackColor gets or sets the button background color property for the SignInControl
ButtonBorderColor gets or sets the button border color property for the SignInControl
ButtonForeColor gets or sets the button foreground color property for the SignInControl
ForeColor gets or sets the foreground color property for the SignInControl
LinkColor gets or sets the link color property for the SignInControl

If we take a look at the SignInControlStyle code you will see the following :-

Microsoft.Live.Messenger.UI.SignInControlStyle.prototype={

$0:null,$1:null,add_$2:function($p0){

this.$3=Delegate.combine(this.$3,$p0);

},

remove_$2:function($p0){

this.$3=Delegate.remove(this.$3,$p0);

},

$3:null,get_$4:function(){

return this.$0;

},

get_backColor:function(){

return this.$0.backColor;

},

set_backColor:function(value){

this.$0.backColor=this.$5(value);

this.$6();

return value;

},

get_foreColor:function(){

return this.$0.foreColor;

},

set_foreColor:function(value){

this.$0.foreColor=this.$5(value);

this.$6();

return value;

},

get_borderColor:function(){

return this.$0.borderColor;

},

set_borderColor:function(value){

this.$0.borderColor=this.$5(value);

this.$6();

return value;

},

get_linkColor:function(){

return this.$0.linkColor;

},

set_linkColor:function(value){

this.$0.linkColor=this.$5(value);

this.$6();

return value;

},

get_buttonForeColor:function(){

return this.$0.buttonForeColor;

},

set_buttonForeColor:function(value){

this.$0.buttonForeColor=this.$5(value);

this.$6();

return value;

},

get_buttonBackColor:function(){

return this.$0.buttonBackColor;

},

set_buttonBackColor:function(value){

this.$0.buttonBackColor=this.$5(value);

this.$6();

return value;

},

get_buttonBorderColor:function(){

return this.$0.buttonBorderColor;

},

set_buttonBorderColor:function(value){

this.$0.buttonBorderColor=this.$5(value);

this.$6();

return value;

},

$5:function($p0){

if(String.isNullOrEmpty($p0))

throw Microsoft.Live.Messenger._M$8.$1('color',$p0);

var $0=new RegExp('^#[0-9a-f]{6,6}$','i');

if(!$0.test($p0))

throw Microsoft.Live.Messenger._M$8.$5('color');

return Microsoft.Live.Messenger._M$7.$1($p0);

},

$6:function(){

if(!this.$1)

this.$1=new Microsoft.Live.Messenger._M$A(Delegate.create(this,this.$7),null,1,Microsoft.Live.Messenger._M$5.$0);

},

$7:function($p0){

this.$1.dispose();

this.$1=null;

if(this.$3)

this.$3.invoke(this,EventArgs.Empty);

From this code you’ll notice that any input value that you provide to a setter for a color gets assigned to $5. If you don’t provide an input value to a setter then an exception will be thrown, otherwise the value that you supply will be checked against a regular expression - RegExp('^#[0-9a-f]{6,6}$','i'). This expression basically says that must supply a color in the format "#RRGGBB", with values between 0-F hex. If you don’t then an exception will be thrown, otherwise your value will be assigned to the appropriate variable that you called. One thing I would have liked to see is the ability to have a background image for the Sign-In control rather than just be able to assign colors.

Back to our code. You’ve now seen which properties are available to you and how Microsoft have implemented the SignInControlStyle class. Lets use it. Obviously you can’t use this class until you have an instance of the Sign-In control, so lets create a function that gets called immediately after the Sign-In control has been instantiated :-

function startMessenger(backColor, linkColor)

   var privacyUrl = 'http://localhost:44444/WLWebMessenger/WebMessenger/Privacy.htm';

   var channelUrl = 'http://localhost:44444/WLWebMessenger/WebMessenger/Channel.htm';

   signincontrol = new Microsoft.Live.Messenger.UI.SignInControl('signinframe', privacyUrl, channelUrl, 'en-US');

   changeSignInStyle(backColor, linkColor);

   signincontrol.add_authenticationCompleted(Delegate.create(null, authenticationCompleted));

In our function we are going to set the background color and the link colors so that they match (as close as I can get them) to our User Controls color, so we pass in the background color and link colors to our startup routine.

As we have added some code to allow the user to customize the color of our User Control, we need to add some code so that the colors we pass into our changeSignInStyle routine match whichever color the user selects as their background color scheme. If you have been following this series so far you will remember that our colors are stored in a custom class we defined. Therefore that’s where we will add some code to store the background and link colors for our Sign-In control :-

Type.registerNamespace("Messenger");

Messenger.UI = function()

    this.BackgroundColor = "blue";

    this.SignInBackColor = "#ffffff";

    this.SignInLinkColor = "#0066A7";

    this.PassportImage = "WebMessenger/Images/Passport.gif";

Messenger.UI.prototype =

            get_BackgroundColor: function()

                return this.BackgroundColor;

},

            set_BackgroundColor: function(value)

                this.BackgroundColor = value;

                this.SetBackgroundColor();

},

            get_SignInBackColor: function()

                return this.SignInBackColor;

},

            set_SignInBackColor: function(value)

                this.SignInBackColor = value;

},

            get_SignInLinkColor: function()

                return this.SignInLinkColor;

},

            set_SignInLinkColor: function(value)

                this.SignInLinkColor = value;

},

            get_PassportImage: function()

                return this.PassportImage;

},

            set_PassportImage: function(value)

                this.PassportImage = value;

},

            SetBackgroundColor: function()

                var msgr = document.getElementById("webmsgr");

                var background = "url(WebMessenger/Images/background_small_" + this.get_BackgroundColor() + ".gif)";

                var passImage = "WebMessenger/Images/Passport";

                var PassPortImage = $get("PassportImage");

                //alert(background);

                msgr.style.backgroundImage = background;

                switch (this.get_BackgroundColor())

                    case "blue":

                        this.set_SignInBackColor("#6196BC");

                        this.set_SignInLinkColor("#FFFFFF");

                        this.set_PassportImage(passImage + "Blue.gif");

                        break;

                    case "green":

                        this.set_SignInBackColor("#ACFFAA");

                        this.set_SignInLinkColor("#0066A7");

                        this.set_PassportImage(passImage + "Green.gif");

                        break;

                    case "red":

                        this.set_SignInBackColor("#FF2727");

                        this.set_SignInLinkColor("#0066A7");

                        this.set_PassportImage(passImage + "Red.gif");

                        break;

                    case "cyan":

                        this.set_SignInBackColor("#55EFFF");

                        this.set_SignInLinkColor("#FFFFFF");

                        this.set_PassportImage(passImage + "Cyan.gif");

                        break;

                    case "yellow":

                        this.set_SignInLinkColor("#0066A7");

                        this.set_SignInBackColor("#FFF84C");

                        this.set_PassportImage(passImage + "Yellow.gif");

                        break;

                    case "purple":

                        this.set_SignInLinkColor("#0066A7");

                        this.set_SignInBackColor("#FF4CF5");

                        this.set_PassportImage(passImage + "Purple.gif");

                        break;

                    case "grey":

                        this.set_SignInBackColor("#AAAAAA");

                        this.set_SignInLinkColor("#0066A7");

                        this.set_PassportImage(passImage + "Grey.gif");

                        break;

                    default:

                        //Set default color to blue;

                        this.set_SignInBackColor("#4182B1");

                        this.set_PassportImage(passImage + ".gif");

                PassPortImage.src = this.get_PassportImage();

},

            dispose: function()

{ }

Messenger.UI.registerClass("Messenger.UI", null, Sys.IDisposable);

if (typeof (Sys) !== "undefined")

    Sys.Application.notifyScriptLoaded();

We add a couple of variables to the routine to store the background and link colors, provide some getters and setters turning them in properties and then in the main routine we assign appropriate colors based on which color scheme the user has chosen.

//Add some startup script

if (!Page.ClientScript.IsStartupScriptRegistered(this.GetType(), "Load"))

            string str = "var msgrui; function pageLoad(sender, args)";

            str += "{msgrui = new Messenger.UI(); startMessenger(msgrui.get_SignInBackColor(), msgrui.get_SignInLinkColor());}";

    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Load", str, true);

In our User Control code behind page we need to amend the startup script so that we now pass in the values of our intended background and link colors.

<div id="setAppearance">

    <span>Change Your Appearance:</span>

    <div id="colorPicker">

        <a href="javascript:msgrui.set_BackgroundColor('blue');changeSignInStyle(msgrui.get_SignInBackColor(), msgrui.get_SignInLinkColor());" >

            <img src="WebMessenger/Images/picker_small_blue.gif" />

        </a>

        <a href="javascript:msgrui.set_BackgroundColor('cyan');changeSignInStyle(msgrui.get_SignInBackColor(), msgrui.get_SignInLinkColor());">

            <img src="WebMessenger/Images/picker_small_cyan.gif" />

        </a>

        <a href="javascript:msgrui.set_BackgroundColor('purple');changeSignInStyle(msgrui.get_SignInBackColor(), msgrui.get_SignInLinkColor());">

            <img src="WebMessenger/Images/picker_small_purple.gif" />

        </a>

        <a href="javascript:msgrui.set_BackgroundColor('red');changeSignInStyle(msgrui.get_SignInBackColor(), msgrui.get_SignInLinkColor());" >

            <img src="WebMessenger/Images/picker_small_red.gif" />

        </a>

        <a href="javascript:msgrui.set_BackgroundColor('green');changeSignInStyle(msgrui.get_SignInBackColor(), msgrui.get_SignInLinkColor());">

            <img src="WebMessenger/Images/picker_small_green.gif" />

        </a>

        <a href="javascript:msgrui.set_BackgroundColor('yellow');changeSignInStyle(msgrui.get_SignInBackColor(), msgrui.get_SignInLinkColor());">

            <img src="WebMessenger/Images/picker_small_yellow.gif" />

        </a>

        <a href="javascript:msgrui.set_BackgroundColor('grey');changeSignInStyle(msgrui.get_SignInBackColor(), msgrui.get_SignInLinkColor());">

            <img src="WebMessenger/Images/picker_small_grey.gif" />

        </a>

    </div>

</div>

Also in our User Control itself we need to alter the section where we allow the user to select which color scheme they want and place a call directly into our changeSignInStyle function.

function changeSignInStyle(backColor, linkColor)

  //Obtain an instance of the SignInControlStyle class

    signinstyle = new Microsoft.Live.Messenger.UI.SignInControlStyle();

    signinstyle = signincontrol.get_style();

    //Set the controls background color and link color

    signinstyle.set_backColor(backColor);

    signinstyle.set_linkColor(linkColor);

Finally in our MessengerFns Javascript code we put the changeSignInStyle routine. Here we are instantiating the SignInControlStyle class, calling the get_style() property of the Sign-In control then assigning the background color and link color passed in with our code above to the appropriate properties of the SignInControlStyle class. Now whenever the user chooses a new color scheme, our Sign-In control changes color to match rather than staying the default white :-

Our messenger User Control is starting to come together style wise. In the next part we will take a look at what else you can do once a user has signed in.