We have just released our first Sidebar Gadget – Slovenian Radio.

The gadget features a centralized list of radio stations (retrieved from our server) and basic controls for selecting the station and adjusting the volume. Everything is packaged in a nice and simple GUI.

Try it out. It really is the most convenient way of listening to Slovenian radio stations online. You can download it for free here. Spread the word if you like it.

Since gadgets are HTML applications and the Windows Sidebar uses Internet Explorer 7 to render them, I prefer running their code directly in IE7 during development. It makes debugging easier and allows me to develop them in Windows XP on my primary development machine with all the tools properly setup.

While this works great in early development stages, it becomes a problem later on when you start using the Windows Sidebar object model (to implement settings, visibility changes handlers etc.). This specific code understandably can only be debugged while running in Windows Sidebar but the unfortunate side effect is that the calls to objects which don’t exist in IE7 break the scripts and effectively prevent running the would-be gadget in IE7 even without this functionality.

The following function can help you keep the gadget running directly in IE7 even after the gadget specific functionalities are already implemented:

function isGadget()
{
    try
    {
        var dummy = System;
        return true;
    }
    catch (err)
    {
        return false;
    }
}

Just check if the application is running in Windows Sidebar at gadget startup and make sure to use the object model only when this is true. You can also add alternative initialization for running directly in IE7 to provide default values for settings and any other gadget specific variables. By doing this you can still test new features directly in IE7 if they are not gadget specific.

The whitepaper sample code doesn’t exactly follow the guidelines for web development therefore I wrote my own sample with clearly separated HTML structure, CSS styles and JavaScript code. I decided to make it publicly available in case anyone else finds it useful. A few things are worth mentioning.

• Empty XHTML tags. For some reason the XHTML style empty tags don’t work as expected when they are filled from JavaScript code. It seems as if the engine would parse them as opened tags without the corresponding closing tag. Therefore you should always use the long form <span id=”mySpan”></span> instead of the short one <span id=”mySpan” />. This problem seems to be specific for gadgets. The same code runs just fine in IE7.
• Localization. I haven’t managed to get the localization to work at all. I suppose the engine uses the files from the locale directory corresponding to the current display language not the locale settings. This does make sense but with only English language available in Vista there’s no way to check that the current file organization in my sample gadget is really ok. I kept it in the sample since I’m pretty convinced that it is.
• Deployment. If you double click a file with a .gadget extension in Vista, you will automatically start the gadget installation process. The file needs to be a zip or cab archive containing the actual gadget directory structure. Vista behaves as if an application setup was started. This means that you should sign the file to increase the end user trust. You can use the Sign Tool to do that but in this case you need to make a cab file since zip files can’t be signed with it. I tried to make the cab file using a CAB Project template in Visual Studio 2005 but I couldn’t make the correct directory structure. I ended up using Cabarc. After all, I only had to run the following line in the gadget directory to build the cab file correctly.
  cabarc –p –r N ..\HelloWorld.gadget *

This whitepaper should definitely be your first source of information when starting with gadget development. Unfortunately I didn’t find it as helpful as it could be. Find below a few issues that could be covered better since I’ve been struggling with them for some time before I get everything to work as expected.

• The style definition for body in both pages is missing the unit – px. Without it the definition is invalid and the gadget shows up with minimum size. The correct style definition would be in the likes of:
  body
  {
     width: 130px;
     height: 50px;
  }
• The settingsUI property is a member of System.Gadget not System.Gadget.Settings. This time the error is in the reference not the whitepaper.
• If you’re only replacing the files in the C:\Users\<username>\AppData\Local\Microsoft\Windows Sidebar\Gadgets directory to update the gadget you might have some problems with caching even if you close all gadget instances as the whitepaper suggests. In my case the old image files and gadget.xml file were still used although they have been replaced. Restarting Windows Sidebar should help.
• Don’t forget that gadget settings are stored with a particular gadget instance. This makes it possible to display two instances of the gadget with different settings. The side effect is that they get lost every time you remove the gadget from the sidebar and put it back on. It works like that by design and if you need persistent common settings for all instances you’ll have to use a different solution.

I though I’d gather in one place all the useful links I found with information on development of Windows Sidebar gadgets.

• Gadget Development Overview whitepaper should be you first stop. It’s a short article explaining the basics of gadget development.
• Windows Sidebar Reference is the only documentation that is currently available. It’s not very detailed, neither always accurate but it should still serve you well.
• Gadget Corner is a blog maintained by the Windows Sidebar team. It contains a few articles with information that can’t be found anywhere else.
• Sidebar Gadgets Forum is the only forum dedicated to gadget development. On top of that the Windows Sidebar team members have the habit of answering the posted questions.