Windows

Replace Vista's missing Computer desktop icon with a custom gadget on the Windows Sidebar

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

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

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

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

Figure D

The MyComputer.html file uses JScript and Windows Script Host to launch Computer.

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

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

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!

About

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.

10 comments
rickhal
rickhal

Uhhh, never mind..I got it to work. Went back and checked my file names CAREFULY this time. Found out the image file had dual file extension...uggghh. Works great now! Thx.

DougalScott2
DougalScott2

Good tutorial, easy to understand and demonstrates ease of creation of gadgets. However, I too am a screen scrooge, don't want to use 10k pixels for a button that doesn't give me access to the context menu. Now if I could fit the big four (computer, network, documents, control panel) into the same space, and have right click access to their context menus I would be very impressed.

Hey_Joe
Hey_Joe

Nice job on the tutorial. Simple, straight forward and shows how easy a simple gadget is. Thanks. I initially turned Sidebar off b/c like many with a 4:3 ratio display, I considered it a desktop hog AND I had the quick launch bar. But the advantage of Sidebar is that the gadgets can be interactive. I like the one that fires an RDP session to the computer anme I type in or one that can shutdown/sleep/logoff with a single click. I'd urge XP users to troll the LIVE gallery for useful ones. BTW, VS2008 has built-in templates for gadgets creation. This makes corporate gadgets creation a snap. I'm building one that is a mini-portal to launch corporate CRM, finance and other apps. You can also build flyouts (nice!) but you may need to brush up on your javascript!!

HappyAndyk
HappyAndyk

Nice useful tutorial. Thank You.

ndavies
ndavies

Why bother? For years I have had those important icons listed on my quick launch or task bar. So My Computer lives on the task bar and it works really well. It also comes up looking cleaner than the all intrusive SideBar, which can then be permanently turned off. This seems like making work for the sake of it.

C4Ever
C4Ever

Frankly, the day I started using Vista I immediately got rid of the Windows Sidebar. Maybe otherlike it. I found it more obstructive and useless: wasted desktop realestate.

rickhal
rickhal

I tried doing this using the code supplied with the exception that I changed the name of "MyComputer" to "3Demon" in both the XML and HTML script. And named the icon "3Demon". It doesn't show up in the Gadgets on the Sidebar at all. On another note; who cares if you don't like the sidebar? Many of us out here do. This post was directed to those of who do and want to learn how to make gadgets from scratch using XML and HTML.

tundraroamer
tundraroamer

What a crock! If the users can't drag and drop an icon into some make-me-a-gadget-too window or function, then it won't get used and becomes just more bloatware waiting for someone to use it. I've turned gadgets off and nobody is complaining of it's demise.

WoW > Work
WoW > Work

I like the sidebar (I guess the widescreen helps with the "sidebar takes up desk space" argument.) But mostly I use it as a read-only, I have the calendar, clock and CPU/Mem viewer on, haven't found many gadgets that I want to use it for, however having something like this is nice. Though, I saw recently a (custom) gadget that encorperated a number of Windows functions, Explorer, Firefox, IE, etc: http://gallery.live.com/liveItemDetail.aspx?li=4ccdc564-3d94-48a5-82f6-4693940e4ab6&bt=1&pl=1 If you do more creating gadgets features, I'd love to know how to make one for multiple programs. Great article. EDIT: Hit reply to the wrong message, I guess (meant to reply to the article, not the comment.) No biggie.