Creating a gadget for Windows 7

In this blog post, I will discuss the steps needed to create a basic gadget in Windows 7. A gadget consists of XML, HTML, and CSS files. I will create a gadget that will use rssxpress-lite to display an RSS feed straight to the desktop.

1. Create the gadget directory

I created a directory to hold my gadget files in c:\Program Files\Windows Sidebar\Gadgets. It's best practice for the directory name to be the same as the name of the gadget, along with the .Gadget extension. For example, I will name my gadget SampleGadget, so my gadget directory will be named SampleGadget.Gadget.

2. Create the manifest - gadget.xml

The manifest is an XML file that contains the basic information about the gadget, such as the name, version, and permissions.



Above is a very simple manifest. I have specified the name (SampleGadget), the version, and then a few bits of specific information about this gadget. Be sure to save this file as type UTF-8. For more information about the gadget manifest and additional properties, visit Gadgets for Windows Sidebar Manifest. Here

3. Create the base HTML file - SampleGadget.html

This HTML file is the main one used to display the gadget and also contains the CSS used for styling. It's location is specified in the <base> tag of the manifest XML file (gadget.xml). Since my gadget is utilizing a 3rd party component, I only have a few lines of code besides the CSS:



This file should be saved as type Unicode. I set a specific height on my gadget so that large amounts of content wouldn't cover a large area on the desktop. I also specified that a scrollbar should show if the content will expand past the set height of the gadget. The CSS styles starting with '.rss' are specific to the 3rd party RSS functionality I am using.

4. Installing the gadget

If you saved your gadget files into the windows gadget directory, installation of the gadget should be simple. Go to the Windows 7 desktop, right-click and select 'Gadgets'. The new gadget (SampleGadget) should be listed in the available gadgets. Double-click the gadget to install it.

5. Adding settings

Configuring a Settings dialog for your gadget is a way to allow the user to customize the gadget to a user's personal preferences. For this example, we need three files: SampleGadget.js, Settings.js and Settings.html.

SampleGadget.js should contain the following two lines of code to refer to the HTML page that will format the settings dialog:



Settings.html will contain the html code needed to display the settings dialog. For my gadget, I only needed one text box where the user would specify the URL to the feed they wish to display:





The Settings dialog for my sample gadget looks like this:



The Settings.js and SampleGadget.js will contain the code needed to save the user input in the Settings dialog, and use those settings to update the gadget. For more information about setting up Settings for your gadget, visit Developing a Gadget for Windows Sidebar Part 3: Settings and Flyouts. Here