Damir's Corner.

A Sample Windows Sidebar Gadget

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 okay. 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 *