Creating a Web Messenger control from Scratch – Part 4

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.

signinapi_thumb_1ddf22c2 Developer

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?

styleapi_thumb_368e4a05 Developer

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

messcyan_thumb_17f4595c Developer

 

messblue_thumb_038e93d1 Developer

messpurple_thumb_39b00c20 Developer

messyellow_thumb_037e6e04 Developer

 

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.