Building a Live.com Gadget (contd)

  • Article

I can't believe I'm writing this in FrontPage but there you go (not because I don't like FP but it's an unlikely tool for authoring a blog entry). If anyone has a recommendation for good blog editing software please let me know. My simple requirements are... it must work with Community Server, it must have a spell checker, it must let me see / mess with the markup, it must "understand" common html tags, it must have a decent "preview" capability, it should allow me to select categories and I'm sure there are a few other things I've forgotten to mention. Yesterday's post was a nightmare simply trying to get the formatting right and then I noticed the main blog formatting was wrong (not sure whether something in my post caused that) so rather than track down the issue I changed the skin. :-) Which worked a treat but it did mean I had to make a number of edits to yesterday's entry... Anyway...

Yesterday I talked about writing a gadget for Live.com and today I'm going to build the simplest gadget you can imagine. What'd I'd like to do is implement a fully fledged interactive gaming platform as a Live.com gadget. What I'm actually going to do is write "Xbox 360 Rulz" and leave you to do the rest... :-)

What do you need if you want to play? I suggest the following (you can substitute alternatives but the below is what I'm using):

  • A web server to host and test your gadget (I'm using IIS on my Windows XP box)
  • A remote web server to deploy your gadget to so the world can enjoy it (optional)
  • A text editor (I'm using Visual Studio 2005)
  • A web browser (I'm using IE6)
  • Ideally a debugger for when you run into trouble later on (Visual Studio 2005)

So, from yesterday, we had an xml manifest like this (I've marked a couple of changes):

<?xml version="1.0" ?><rss version="2.0" xmlns:binding="https://live.com">  <channel>

    <title>This is the name of your gadget on Live.com</title>    <description>Description of what the gadget is / does</description>    <language>en-us</language>    <pubDate>Mon, 7 Nov 2005 01:00:00 GMT</pubDate>    <binding:type>mikeo.test</binding:type>    <item>      <link>https://localhost/test/MyGadget.js</link>    </item>    <item>      <link binding:type="css">https://localhost/test/MyGadget.css</link>    </item>

  </channel></rss>

It's been updated with my class name and the URLs to the JavaScript and CSS files I'm going to create. Both these files, and the manifest itself are in a virtual directory called "test" on my local IIS server so the URL is https://localhost/test/xxxx. Using the Visual Web Developer / Visual Studio Template I mentioned yesterday, it autogenerates me a .js file something like this:

registerNamespace("mikeo");mikeo.test = function(p_elSource, p_args, p_namespace) {  mikeo.test.initializeBase(this, arguments);  var m_version = "1.0";  var m_module = p_args.module;  /****************************************  ** Public Methods  ****************************************/  this.initialize = function(p_objScope) {    mikeo.test.getBaseMethod(this, "initialize", "Web.Bindings.Base").call(this, p_objScope);    //TODO: add your initialization code here    var contentArea = document.createElement("div"); contentArea.innerText = "Xbox 360 Rulz"; p_elSource.appendChild(contentArea);  };  mikeo.test.registerBaseMethod(this, "initialize");  this.dispose = function(p_blnUnload) {    mikeo.test.getBaseMethod(this, "dispose", "Web.Bindings.Base").call(this, p_blnUnload);    //TODO: add your dispose code here  };  mikeo.test.registerBaseMethod(this, "dispose");  /****************************************  ** Private Methods  ****************************************/  function SavePrefs() {    if (p_args.onDashboard) {      var params = m_module.GetBindingParams();      if (!params) {params = new Object();}      //TODO: Add any data that we want to store here      //ex: params.color = "red";      m_module.Serialize();    }  }};mikeo.test.registerClass("mikeo.test", "Web.Bindings.Base");

[Update: I had to throw in the towel with FrontPage when I tried to add the above code. And I threw in the towel with everything else I tried and did most by hand in the end. Anyone got a good way to get code out of VS and into HTML cleanly?] I've marked the changes I made to the file (and named the file MyGadget.js). I made a "global" change to create a namespace called "mikeo" (replacing the "gadget" namespace in the original with my own namespace) and I added 3 lines of JavaScript to create a new div element, set its inner text and then append it to p_elSource (p_elSource represents the outermost div element of the gadget). The initialise function is what's called when the gadget loads so this is where we add our code to create our elements. Finally, I created a CSS file (MyGadget.css):

.mikeo_test .main { }.mikeo_test div {  margin: 25px 0 25px 0;  font-family: Lucida Console, Arial, Sans-Serif;  font-size: 2em;  color: Lime;}

Which sets the margin, font-family, font-size and the color (just to demonstrate the CSS properties are being picked up). Note the ".mikeo_test" selector - this is required to associate the CSS with your gadget class. Just use an underscore in place of the period in the class name. Now we're close to having something that works. I drop all three files into the directory that's mapped to https://localhost/test and I should be able to test my gadget. You have two options for this:

But just before you test it, there's one more thing to be aware of. You need to add https://*.start.com and https://*.live.com to your trusted sites to be able to run a gadget from https://localhost. You don't need this once your gadget is hosted remotely but the gadget wont run from localhost unless you make these changes in IE's Tools -> Internet Options -> Security -> Sites. For more details see here and here. Assuming your gadget works, simply create a new manifest (updating the URLs) and copy the files to your hosting server (using ftp or whatever). If you don't have a web hoster at the moment, take a look at https://www.vwdhosting.net where you can get 30 days free hosting (including ASP.NET 2.0). No need to enter credit card details etc, just register and go. A great way to play with ASP.NET 2.0!

So what if your gadget doesn't work? Well make sure you've followed all the instructions above (yes, I have tested them!). If that still doesn't work, next time I'll take a look at a few gotchas and visit the world of script debugging with Visual Studio. Oh, I can't wait....