Customizing the Desktop

The desktop is a pretty simple part of Windows. Normally, you can't do much to customize its looks besides changing the wallpaper. However, several different tools are available that you can use to add features to the desktop and take advantage of some of the lesser-known features. The next few sections will show you how you can use these tools to do cool things such as animate your desktop and add cool gadgets with Windows Sidebar.

Animating your desktop

Those who purchase the Windows Vista Ultimate Edition have the opportunity to download free Ultimate Extras that are planned to be released every quarter by Microsoft. One of the Ultimate Extras is a cool application called Windows DreamScene that allows you to use movie files as your wallpaper. Microsoft has released several subtle looped movies that make great desktop backgrounds, such as waterfall scenes and computer-generated animations. Depending on the video file selected, your background can range from absolutely amazing to something that can make you sick because the motion is too much. Overall, this new Ultimate Extra adds a great feature for those who are running Windows Vista Ultimate Edition. Sorry to those of you who are not-you cannot run Windows DreamScene.

To get started, you will need to visit Windows Update to download the Ultimate Extra if you have not already done so. Follow these steps to get it installed:

1. Click the Start button, type Windows Update in the Search box, and then press Enter.

2. On the top left of the Windows Update screen, press Check for Updates. Windows will now search online for any security updates as well as new Ultimate Extras.

3. When the search is finished, click View available Extras to see what is available to download.

4. Locate and check Windows DreamScene.

5. Click Install.

After you have Windows DreamScene installed, you will be able to start using it after a quick reboot. After it is restarted, you can turn on Windows DreamScene by going to the same place where you change your background image. Right-click your desktop and select Personalize. Next, click Desktop Background and then change the location to Windows DreamScene Content, as shown in Figure 3-7, to see the stock videos. Simply select the video you want to use and press OK.

Figure 3-7: Selecting Windows DreamScene video content for your desktop

To pause the video from playing on your desktop temporarily, simply right-click the desktop and select Pause Windows DreamScene.

Using Windows Sidebar

Windows Sidebar is Microsoft's response to the growing number of available desktop gadget/widget applications. Think of it as a docking station on the side of your screen where various miniature applications, called gadgets, reside. These gadgets can do anything from displaying the current time, weather, and system information to offering simple games. The possibilities truly are endless and end users make new gadgets all the time.

So why would you want to use Windows Sidebar? Simple-it is a great way to customize your desktop because you can also drag the gadgets off of the Sidebar dock and place them anywhere on your desktop. Figure 3-8 shows what gadgets look like and how they can be used on the sidebar dock and anywhere on the desktop. Best of all, Windows Sidebar is included in Windows Vista so you can get started using it right away.

Figure 3-8: Using Windows Sidebar gadgets on the dock and the desktop

Tweaking the look of the dock

You can customize the background of the Windows Sidebar dock on the side of the screen, just as you can other aspects of Windows Vista. Hidden inside the Sidebar executable file is a PNG image file that is used for the dock background. With the help of a resource editing utility and an image editor such as Adobe Photoshop, it is possible to create your own background image and then insert it into the Sidebar executable file.

A lot of steps are involved in changing the dock background image, so I am going to assume that you already know how to create a PNG image in an image editor. If you need help creating an image, I suggest you take a look at Photoshop CS2 For Dummies (ISBN 0-7645-9969-0) by Peter Bauer to learn about the most popular image editor, Adobe Photoshop.

Before you can get started, you need to download a resource editor. I use a popular free resource editor called Resource Hacker for this section. You can download a copy from http://www.angusj.com/resourcehacker/. You also need to have your replacement image ready. It must be saved as a 24-bit PNG image and not wider than 150 pixels. The height can vary depending on your screen size. If the image is not tall enough vertically, it will be stretched.

When you have your resource editor and replacement image ready, you are ready to get started:

1. Start Resource Hacker and click File and then Open. Navigate through C:\Program Files\Windows Sidebar and open sidebar.exe. You will see the various resource types that are hidden inside the Windows Sidebar executable.

2. Expand the RCDATA section and resource number 20001. This is where the image is stored for the sidebar background when your sidebar is on the right side of the screen. If you have changed your sidebar properties to show the sidebar on the left side of the screen, select resource number 20000 instead.

3. Right-click the 1033 property and select Replace Resource, as shown in Figure 3-9.

   
   Figure 3-9: Replacing the background resource with Resource Hacker

4. On the Replace a Resource screen, press the Open file with new resource button and select your replacement background image PNG file.

5. Type RCDATA as the resource type and 20001 as the resource name. Leave the Resource Language box blank.

6. Press the Replace button to insert the new PNG background image. The image has now been replaced.

7. Save the modified sidebar.exe as a new file to save the changes. Click File and select Save As. Save the file as sidebar2.exe or another filename that is different from sidebar.exe. Because of security restrictions in Vista, you will need to save this new sidebar2.exe file to your desktop.

8. After you have the new file saved to your desktop, copy and paste it to your C:\Program Files\Windows Sidebar\ folder. You are now ready to test your new file. First, make sure that the sidebar is currently closed on your computer. Then, just double-click your new file. If your replacement image is successful, you should see your new background when Windows Sidebar starts.

9. If everything is looking good with your new sidebar test, move ahead and set up the sidebar so that your version is loaded instead of the Microsoft version. Once again, close the Sidebar program if it is currently running. Then, in C:\Program Files\Windows Sidebar\, rename sidebar.exe to sidebar_old.exe and rename your new file to sidebar.exe. This will make it so that your file runs when Windows starts as well as when you click the various sidebar shortcuts.

Remember that if you ever want to revert back to the Microsoft sidebar backgrounds, just rename your sidebar.exe file with your backup called sidebar_old.exe.

Adding gadgets

Gadgets are what Windows Sidebar is all about. After all, without them the sidebar is just a waste of space. As I mentioned earlier, gadgets are basically miniature applications that can provide all sorts of information and functions. On my sidebar, for example, I have a calculator, CPU & memory meter, the current weather, a battery meter, and my latest Outlook e-mails. Some of these gadgets came with Windows Vista, whereas others I had to download and add to my sidebar. When you are finished with this section, you are going to know where to download more gadgets and add them to your sidebar so your sidebar can be just as useful as mine.

First let's go over the basics: The process of adding and removing gadgets to your sidebar is very simple. To add, you just press the big + button located at the top of the sidebar on your screen and then drag the gadget you want over to the sidebar into the location you want. To remove, press the little X button on the top-right side of the gadget that is shown when you hover over the gadget with your mouse. Feel like changing the order of gadgets around? Simply drag them into the order you want.

After you use Windows Sidebar for a little while you will definitely want to go exploring and see what other gadgets are online that you can use. There are dozens of high-quality gadgets online that will add a lot of value to your sidebar. Now that you know the basics, let's go online and start downloading some new gadgets:

1. Various sidebar gadget sites are starting to pop up on the Web but the most popular one is Microsoft's own located at http://www.gallery.microsoft.com. This is a very comprehensive site that has gadgets and plug-ins for various Microsoft applications including Windows Sidebar. Because the site is so large, I have a trick for you that will help you get right to the Windows Sidebar gadgets section. Click the + sign on the top of the sidebar as you normally add gadgets. Then, just click the link in the bottom right of the window that says Get More Gadgets Online. That will take you right to the correct section of the site.

2. Once you are in the Microsoft Windows Sidebar gadget section, navigate through the pages until you find a gadget you would like to add to your sidebar, and then click Download.

3. Click OK on the third-party warning screen on the web page and the file will begin to download. Click Open on the file download screen.

4. When the gadget is downloaded, press Allow on the Internet Explorer Security screen and then press Install on the Windows Sidebar-Security Warning screen. The gadget will now be installed and will automatically show up on your sidebar.

After the gadget is installed and on your sidebar, you might need to configure settings for it. For example, if you are using a weather gadget, you will probably need to tell it your ZIP code so that it downloads the right weather information for your area. You can do this by clicking the little tool icon located on the top-right border (just under the X that is used to remove a gadget) of the gadget that is shown when you hover over the gadget with your mouse.

Using gadgets on your desktop

Windows Sidebar is a cool little application that can be very helpful, depending on the gadgets you have on your sidebar. One feature of the application that is often overlooked or simply unknown by the vast majority of users is the ability to also use gadgets anywhere on your desktop. Figure 3-8 shows this in action.

How? It is so simple you are going to hit yourself in the head for not trying this before. Simply drag the gadget off the sidebar and onto your desktop. After you release your mouse button, the gadget will be stuck to that location on your desktop. You may even notice that some gadgets expand into a larger form when they are undocked from the sidebar. This is often very useful for some gadgets, such as RSS feed readers, because the expanded version makes it much easier to read the news.

Experiment with dragging your gadgets off the sidebar and onto your desktop and see how your gadgets work. You might find additional features and functionality.

Creating your own gadgets

Now that you are an expert at using gadgets, you are ready to start creating your own. Creating a Windows Sidebar gadget is a lot like creating an interactive HTML web page that uses JavaScript. Those are the same two technologies that are at the core of Windows Sidebar gadgets. A gadget basically breaks down to an HTML page that uses special Windows Sidebar JavaScript APIs (application programming interfaces) to get access to various system information and interact with other Windows components.

Window Sidebar gadgets can be very complex and take a great deal of time to create. You use the expansive sidebar JavaScript APIs and even WMI to access all sorts of information and work with other Windows components. To keep things simple, I am going to show you how to create a simple gadget that will enable you to search a Web site such as http://www.TweakVista.com. This gadget will not be the best looking and will not use any of the advanced features of gadgets, such as JavaScript. However, you will have a thorough understanding of creating gadgets and the foundation necessary to start making more advanced gadgets.

Gadget creation overview

The three main steps to creating all gadgets are as follows:

1. You start off by creating an XML gadget information file that tells the Windows Sidebar application information about your gadget, such as what it is called, who created it, and the main files it uses so that the sidebar application knows which files to read.

2. Next comes the most time-intensive part of the creation process in which you actually create the HTML and JavaScript that makes the gadget user interface and adds the interactive element of a gadget. Here you start off creating the interface, usually in plain HTML and with the help of PNG images. Then you add your JavaScript elements to the HTML to bring it to life.

3. The final step in the creation process is packaging the gadget into a Windows Sidebar gadget package. This allows you to easily install and distribute your gadget to multiple computers when you are ready.

Now let's get started making your own gadget with the first step, creating the XML gadget information file.

Creating the XML gadget information file

As I mentioned earlier, the XML gadget file is what tells the Windows Sidebar application what your gadget is called and which files it uses. To start the creation process, create a new folder somewhere on your computer to store all the gadget files that you create. Then, follow these steps to create the XML information file:

1. Open Notepad by clicking the Start button, typing Notepad in the Search box, and then pressing Enter.

2. You are now ready to start creating your XML gadget file. The following text shows the basic structure of the XML file:

    <?xml version="1.0" encoding="utf-8" ?> <gadget>     <name>Search Gadget</name>     <namespace>search.gadget</namespace>     <version>1.0</version>     <author name="Your Name">         <info url="www.YourWebsite.com" />     </author>     <copyright>2007</copyright>     <description>This gadget will search a website</description>     <hosts>         <host name="sidebar">             <base type="HTML" apiVersion="1.0.0" src="/books/3/124/1/html/2/search.html"/>             <permissions>full</permissions>             <platform minPlatformVersion="0.3" />         </host>     </hosts> </gadget> 

   The key parts of this XML file are the name, description, and base type sections, where the src (source) is set to search.html (the HTML file that has the gadget code). Type the preceding text into Notepad on your computer and replace the appropriate sections, such as name, description, and author name, with your info. Make sure that you point the base src value to the name of the HTML file that you plan on using to store your gadget code-such as search.html for this example.

3. Once you have your version of the gadget XML file typed into Notepad and you have checked it to make sure you typed it in the correct syntax, as shown in the preceding example code, you are ready to save it as an XML file. Click File and select Save As.

4. In the Save As window, change the Save As type to All Files.

5. Type gadget.xml as the filename. Your file must be called gadget.xml.

6. Navigate to the folder that you created to store all of your gadget files in and press Save.

After you have your gadget.xml file saved, you are ready to move on to creating the HTML code file the gadget will use.

Creating the HTML and JavaScript

Now that the XML information file is created, you are ready to create the main part of the gadget. For this step, you are going to use some HTML to create a simple text box and button form that will post back to the http://www.TweakVista.com servers to display the search results.

1. Open Notepad again and enter the following HTML code:

    <html> <head>     <style>         Body         {             width:140;             height:75;         }     </style> </head> <body>     <form name="SearchForm" method="get" action="http://www.tweakvista.com/SearchResults.aspx">         <input type="text" name="q">         <input type="submit" name="Search" value="Search">     </form> </body> </html> 

   The preceding code is what draws the text box on the screen and the Search button as well as what creates the form that directs where to send the data when the Submit button is pressed. It starts off with a few formatting HTML commands, such as HTML and HEAD. Then it sets the width and height of the gadget that will be drawn on the sidebar. Finally, you get to the guts of the gadget: the code that specifies that this is a form and where it submits the data to, as specified by the action property.

2. After you have entered the preceding code, save it as search.html (because that is what you set in the gadget.xml file). Click File and select Save As.

3. In the Save As window, change the Save As type to All Files.

4. Type search.html as the filename.

5. Navigate to the folder that you created to store all your gadget files and press Save.

When you have your search.html file saved in the same folder as the gadget.xml file, you are ready for the final step.

Creating the gadget package

Now that you have your XML information file and search.html code file, you are ready to package your gadget into a single file format that the Windows Sidebar application can read. This is very easy to do because the gadget package file is just a compressed zip file with the extension changed from .zip to .gadget.

Perform the following steps to package your gadget so that you can easily install it:

1. Navigate to the folder that you created earlier and saved both the XML information file and the search.html code file in.

2. Select both files in this folder.

3. Right-click one of the files while both are selected, expand Send To, and then select Compressed Folder. This will compress the two files into a zip file.

4. Name the file and change the file extension to .gadget from .zip. This can easily be done at a command prompt with the rename command if you have Show known file extensions turned off for Windows Explorer.

5. After you have the zip file renamed as .gadget, you will notice that the file icon changes. To test your new gadget, just double-click the new package file. If you properly renamed the extension, you should see an install warning screen. Press Install and your new gadget will be installed and displayed on your sidebar.

You are now finished creating your first gadget!

As I mentioned earlier, this is an extremely basic gadget. However, it gives you an idea how gadgets are made because they are all started the same way. If you have a background in programming and would like to learn how to go to the next level with your gadget creation, check out http://www.microsoftdgagets.com and press the Build link on the menu. There you will find links to more articles on building gadgets as well as links to the JavaScript Sidebar API.

Keep in mind that you can use various technologies in your gadgets, including CSS, WMI, and VB Scripting (VBS), in addition to the JavaScript APIs. I also recommend looking at some of the other gadgets that were created by Microsoft and other sidebar users; learning by example is very helpful.

Adding a Quick Launch show sidebar button

Since I have been using Windows Vista, I have loaded my sidebar and desktop up with all types of useful gadgets. Unfortunately, quite often the sidebar gets buried behind various open windows and all my useful gadgets are gone. Here is a quick tip that I personally always set up on my computer that will help you in this situation:

1. Click the Start button, type Sidebar in the Search box, and then press Enter. This will search your Start menu for the Windows Sidebar shortcut.

2. Drag the shortcut that shows up in the Start menu over to your Quick Launch bar and release. This will create a very useful button on your Quick Launch toolbar that, when clicked, will automatically bring the sidebar and any desktop gadgets you have running to the front of your screen.

3. I like to drag my Sidebar shortcut next to my Show Desktop icon, as shown in Figure 3-10, so that I can easily find it when I have a ton of shortcuts on my Quick Launch bar.

Figure 3-10: Showing the Windows Sidebar button on the Quick Launch bar