The Vista desktop is very clean, having many familiar icons removed by default. Why not put those missing desktop icons on the Windows Sidebar as gadgets? Creating gadgets in Vista is easier than you might think, says Greg Shultz, and the code required for duplicating the missing desktop icons is very simple.

In my article about putting familiar icons on your Vista desktop, I mentioned that Microsoft put a good deal of time into making the desktop a clean environment on which the Windows Sidebar can really stand out as the main desktop component. I then showed you how to restore the Computer, Documents, Network, and Internet Explorer icons to the desktop.

It occurred to me that that not everyone will want to have icons on their desktop, so I began exploring other possibilities. Why not put those missing desktop icons on the Windows Sidebar as gadgets? Creating gadgets is easier than you might think, and the gadget code required for duplicating the missing desktop icons is very simple.

In this edition of the Windows Vista Report, I'll show you how to create a gadget that will launch Computer. In future articles, I'll show you how to create the other gadgets.

Gadget overview

A gadget is a mini-application that lives on the Windows Sidebar. Vista comes with a number of gadgets that you can easily add and remove from the Windows Sidebar, and you can download literally thousands more from the Internet. (See my six favorite Sidebar gadgets.)

While some gadgets are pretty complex, some are as simple as a pair of text files and a single graphic file. That's all you need to create gadgets that can replace the Computer, Documents, Network, and Internet Explorer icons on the desktop.

All three of these files live in a specially named folder located inside the Gadgets folder. For example, since I've decided to call this gadget My Computer, the files will go into a folder named MyComputer.gadget inside of \c:\users\{yourname}\appdata\local\microsoft\windows sidebar\gadgets folder. (In this case, {yourname} is the folder with your account name.)

With this overview in mind, let's take a more detailed look at the steps involved in creating the My Computer gadget.

Creating the special folder

The quickest way to access the Gadgets folder in Vista is to press [Windows]R to access the Run dialog box and then type the following command in the Open text box:

%userprofile%\appdata\local\microsoft\windows sidebar\gadgets

Once you access the Gadgets folder, pull down the Organize menu, select the New Folder command, and create the MyComputer.gadget folder (Figure A).

Figure A

You'll create the MyComputer.gadget folder inside of the Gadgets folder.

Creating the manifest file

Use Notepad to create the Gadget.xml manifest file. Figure B shows the Gadget.xml file you'll need to create. Be sure that you type the codes exactly as they appear in this screenshot, or the gadget will not function. (If you don't want to type the code, you can download the Gadget.xml file here.)

Figure B

This manifest file contains all the base settings for the My Computer gadget.

To help you to better decipher the content of the Gadget.xml file, I've color coded the text. Everything in black is required code, and everything in red is my custom code. I've named this gadget My Computer, the gadget's icon MyComputer.png, and the HTML file MyComputer.html.

When you finish typing the file, you will need to save it to the MyComputer.gadget folder as an XML file with UTF-8 encoding; if you don't, the gadget will not function. To do so, pull down the File menu and select the Save As command. When you see the Save As dialog box, type gadget.xml in the File Name text box, select All Files from the Save As Type drop-down menu, and then select UTF-8 from the Encoding drop-down menu (Figure C).

Figure C

It is very important that you save the gadget.xml file using UTF-8 encoding.

Creating the HTML file

The HTML file (Figure D) contains basic tags and the script code that essentially serves as the gadget's engine. You may create the MyComputer.html file in Notepad. Again, be sure that you type the code exactly as it appears in this screenshot. (If you don't want to type the code, you can download the MyComputer.html file here. Be sure to open it in Notepad - not in your browser.)

Figure D

When you finish typing, you will need to save the file to the MyComputer.gadget folder. Save the file as MyComputer.html, select All Files from the Save As Type drop-down menu, and then select ANSI from the Encoding drop-down menu.

Let's take a closer look at a few of the key parts of this file. Within the style tags at the top, you use the body section to specify your icon. The icon for the My Computer gadget, MyComputer.png, is 100 pixels wide by 100 pixels high. (If you choose to use a different icon, you'll need to specify different values within the style tags.)

In the script section of the My Computer gadget, I use a combination of Microsoft JScript and Windows Script Host to launch Computer. Without getting too technical, the line containing the command ActiveXObject("WScript.Shell") prepares the script to access the operating system's Windows Script Host using the moniker WshShell. The next section lays out the LaunchComputer function, which uses the WshShell.Exec command to launch Windows Explorer in the Computer view.

Within the body tags, a single line prepares the My Computer gadget to respond when you click its icon. When you click the icon in the Windows Sidebar, the OnClick command will direct the script to the LaunchComputer function, which uses the WshShell.Exec command to launch Windows Explorer in the Computer view.

Creating the icon

Creating the icon for your gadget is easy — all you have to do is create or capture an image in your favorite graphics editor and save it as a PNG file in the MyComputer.gadget folder. As illustrated in Figure E, I captured an image of the Computer icon and framed it with a black box in Paint. To capture an image, press [Alt][PrintScreen] to copy a screenshot to the clipboard and then paste the screenshot in Paint. Or, you can download the MyComputer.png file here. Remember to open it in Paint - not in your browser!

Figure E

You can use Paint to capture and customize an image and then save it as a PNG file.

The image file must have the same name and be the same size as specified in the Gadget.xml and MyComputer.html files. In the case of the My Computer gadget, the name must be MyComputer.png, and the image must be 100 pixels high by 100 pixels wide. If you plan to create your own image file, it's important to know that the image must be a minimum of 60 pixels high and anywhere from 25 pixels to 130 pixels wide in order to fit within the maximum width of the Windows Sidebar.

Installing the My Computer gadget

Once you create and save all three files in the MyComputer.gadget folder, you can install the My Computer gadget by accessing the Windows Sidebar and clicking the plus (+) sign in the Gadgets header at the top of the Windows Sidebar. When you see the Gadget Gallery, double-click the new My Computer gadget to add it to the Windows Sidebar (Figure F).

Figure F

Once you create the My Computer gadget, it will appear in the gallery, and you can easily add it to the Windows Sidebar.

When you want to access Computer from the desktop, just activate the Windows Sidebar and click the My Computer gadget.

What's your take on these gadgets?

If you use gadgets, do you like the idea of creating your own? Would you like to see future articles showing you how to add Documents, Network, and Internet Explorer gadgets to the Windows Sidebar?

Get Vista tips in your mailbox!

Delivered each Friday, TechRepublic's Windows Vista Report newsletter features tips, news, and scuttlebutt on Vista development, as well as a look at new features in the latest version of the Windows OS. Automatically sign up today!

Related Topics:

About Greg Shultz

Greg Shultz is a freelance Technical Writer. Previously, he has worked as Documentation Specialist in the software industry, a Technical Support Specialist in educational industry, and a Technical Journalist in the computer publishing industry.

Full Bio

Greg Shultz is a freelance Technical Writer. Previously, he has worked as Documentation Specialist in the software industry, a Technical Support Specialist in educational industry, and a Technical Journalist in the computer publishing industry.