Creating a Web Messenger control from Scratch – Part 1

The preface to this little project is that at work I have been handed a project which is all about styling. Given the recent release of Windows Live Messenger Wave 3 beta, the new 2.5 API set and the customizations that you can now do with Messenger Client, I thought this would be a good opportunity to do a new Web Messenger control from scratch.  There is a link there, believe me :)

Anyway, in my previous dealings with Web Messenger I’ve built the control directly into the web page itself. This time around I thought I’d build a User Control so that it could be easily dropped into any page. This in itself brings about some problems of it’s own.

To start with all that we’ve got is a basic aspx page that the user control will be hosted within. There is nothing special about this page except that it is Asp.Net Ajax enabled through the <scriptmanager> tag :-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagName="Msgr" TagPrefix="WL" Src="~/WebMessenger/WebMessenger.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="DefaultPage" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
                    <WL:Msgr runat="server" />
        </div>
    </form>
</body>
</html>

 

The code behind file for this page is currently empty :-

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
}
 

Next I created a new folder to place all my user control code in and pre-populated it some of the images I had lying around (these will most likely get changes as things move forward and we get into dynamically changing things but for a base mock-up to start playing around with they done just fine).  So here is the very rough outline of my project so far :-

solexplorer_thumb_6cc2847e Developer

As you can see I’ve got two sub-folders. One for Images and one for scripts. This project will use Asp.Net Ajax to a certain extent.

Just to set  a test bed up and running I took the bare bones outline from my previous Messenger code and stuck it in a user control :-

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebMessenger.ascx.cs" Inherits="WebMessenger" %>
   <div id="webmsgr">
   <table>
   <tr><td>
   <div id="signinframe"></div>
   </td></tr>
   <tr><td>
   <div id="userInfo"></div>
   </td></tr>
   <tr><td>
        <div id="setAppearance">
            <span>Change Your Appearance:</span>
            <div id="colorPicker">
                <a href="javascript:msgrui.set_BackgroundColor(‘blue’);" ><img src="WebMessenger/Images/picker_small_blue.gif" /></a>
                <a href="javascript:msgrui.set_BackgroundColor(‘red’);" ><img src="WebMessenger/Images/picker_small_red.gif" /></a>
                <a href="javascript:msgrui.set_BackgroundColor(‘green’);"><img src="WebMessenger/Images/picker_small_green.gif" /></a>
            </div>
        </div>
   </td></tr>
   <tr><td>
   <div id="setUserStatus">
      <span><b>Change Your Status:</b></span>
      <select id="selectStatus" onchange="selectStatusChanged()">
        <option>Appear Offline</option>
        <option>Away</option>
        <option>Be Right Back</option>
        <option>Busy</option>
        <option>Idle</option>
        <option>In a Call</option>
        <option>Online</option>
        <option>Out to Lunch</option>
      </select>
   </div>
   </td></tr> 
   <tr><td>
   <div id="setPersonalMessage">
   <span><b>Personal Message: </b></span> <input id="personalMessage" type="text" />
   <input onclick="setPersonalMessage()" id="btnSetPersonalMessage" type="button" value="Set" />
   </div>
   </td></tr>
   <tr><td>
   <div id="sendMessage">
    <hr />
    <span><b>Send a Message:</b></span>
    <p id="contactLabel"></p>
    <p id="msgLastRecv"></p>
    <div id="txtConv"></div><br />
    <input id="txtMessage" type="text"/><br />
    <input onclick="sendMsg()" id="btnSend" type="button" value="Send Message" disabled="disabled" />
   </div>
   </td></tr>
   <tr><td>
   <div id="divConversations"></div>
   </td></tr>
   <tr><td>
        <div id="Contacts">
            <p><b>Contact List
                <a href="Javascript:ToggleContacts();">
                <img alt="ToggleContacts" src="WebMessenger/Images/minus_icon.gif" id="ContactsExpand" class="ContactImage" />
                </a>
            </b></p>
               <div id="divContacts"></div>
        </div>
   </td></tr> 
   </table>
   </div>

 

 

 

 

Nothing special here. Most of the Javascript has not been implemented at this point as at this point I was more interested in how do you dynamically register style sheets and Asp.Net Ajax script files with the parent page?  After some playing around this wasn’t that hard to do.

First off the style sheet. I have a style sheet (default.css) that resides within the folder for my user control and I need to add that dynamically to the host page. This can be accomplished using the following code :-

HtmlHead header = (HtmlHead)this.Page.Header;
HtmlLink stylesheet = new HtmlLink();
stylesheet.Attributes.Add("href", "WebMessenger/Default.css");
stylesheet.Attributes.Add("rel", "stylesheet");
stylesheet.Attributes.Add("type", "text/css");
header.Controls.Add(stylesheet);

 

 

Here we just grab the header of the parent page, create a HtmlLink object, add the relevant attributes as you would find in a normal style tag and add that to the controls collection of the header.

The actual css is very straightforward :-

#webmsgr 
{
   font-family: Tahoma,arial,sans-serif;
   font-size:12px;
   float:right;
   width:400px;
   border:solid 1px black;
   background-image: url('Images/background_small_blue.gif');
   background-repeat: repeat-x;
}
#signinframe
{
   position:relative;
}
#userInfo
{
   position:relative;
}
#setUserStatus
{
   position:relative;
}
#selectStatus
{
   width:250px;
}
#setPersonalMessage
{
   position:relative;
}
#personalMessage
{
   width:200px;
}
#txtConv
{
   width:375px;height:150px;border:black 1px solid;overflow:auto;
}
#txtMessage
{
   width:375px;
}
#divConversations
{
   width:375px;height:125px;border:solid 1px gray;position:relative;overflow:auto;
}
#divBuddies
{
   width:375px;height:150px;border:solid 1px gray;position:relative;overflow:auto;
}
#introPage
{
   font-family: Tahoma,arial,sans-serif;font-size:12px;
}
#setAppearance
{
    position: relative;    
}
#setAppearance span
{
    font-weight: bold;
}
#colorPicker a img
{
    border-width: 0px;
    border: 0px;
}
.ContactImage
{
    border: 0px; text-decoration: none;    
}

 

Next up was to create a sample Ajax Javascript file so I thought I’d create one that would deal with changing the background image of our messenger control. As you can see from the CSS above, the whole messenger control has been given a background image of “background_small_blue.gif”. I wanted to change this through Javascript, so I created a Javascript class that would do precisely this :-

Type.registerNamespace("Messenger");
 
Messenger.UI = function()
{
    this.BackgroundColor = "blue";
}
 
Messenger.UI.prototype =
        {
            get_BackgroundColor: function()
            {
                return this.BackgroundColor;
            },
            set_BackgroundColor: function(value)
            {
                this.BackgroundColor = value;
                this.SetBackgroundColor();
            },
            SetBackgroundColor: function()
            {
                var msgr = document.getElementById("webmsgr");
                var background = "url(WebMessenger/Images/background_small_" + this.get_BackgroundColor() + ".gif)";
                //alert(background);
                msgr.style.backgroundImage = background;
            },
 
            dispose: function()
            { }
        }
Messenger.UI.registerClass("Messenger.UI", null, Sys.IDisposable);
if (typeof (Sys) !== "undefined")
{
    Sys.Application.notifyScriptLoaded();
}

 

We basically have one property that holds which color background we are currently using and a method that will actually change the background color. The next step was to insert this into the Script Manager object of the parent page and then instantiate a Javascript variable that creates a new instance of this class that can be used in the page :-

//Add script to scriptmanager
ScriptManager sm = ScriptManager.GetCurrent(Page);
if (!sm.Scripts.Contains(new ScriptReference("WebMessenger/Script/MessengerUI.js")))
{
    sm.Scripts.Add(new ScriptReference("WebMessenger/Script/MessengerUI.js"));
}
sm.LoadScriptsBeforeUI = true;
if (!Page.ClientScript.IsStartupScriptRegistered(this.GetType(), "Load"))
{
    string str = "var msgrui; function pageLoad(sender, args){msgrui = new Messenger.UI();}";
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Load", str, true);
}

 

 

The first part gets a reference to the parent page’s Script Manager control then adds our Javascript file to this in the scripts section.  The second part makes use of the built in pageLoad() function to instantiate an instance of this class.

I added three simple links to my old messenger control, one each for the colors red, blue and green just to test that the functionality works and called the set_BackgroundColor method of the Javascript class that we registered and instantiated :-

<div id="setAppearance">
    <span>Change Your Appearance:</span>
    <div id="colorPicker">
        <a href="javascript:msgrui.set_BackgroundColor('blue');" ><img src="WebMessenger/Images/picker_small_blue.gif" /></a>
        <a href="javascript:msgrui.set_BackgroundColor('red');" ><img src="WebMessenger/Images/picker_small_red.gif" /></a>
        <a href="javascript:msgrui.set_BackgroundColor('green');"><img src="WebMessenger/Images/picker_small_green.gif" /></a>
    </div>
</div>

 

So lets see if our initial playing about has resulted in anything that works.

messblue_thumb_07fadd80 Developer

Here’s our control with the default blue displayed. Clicking on “red” gives us :-

messred_thumb_7545e3c8 Developer

and finally clicking on the green icon gives us :-

messgreen_thumb_5e869c3f Developer

 

 

So now we have some basics out of the way we can continue to program this control and get a little more involved with customization. Stay tuned for part 2 coming soon.