Geeks With Blogs

News
Steve Clements .Net and then some....

Developing Vista Sidebar Gadgets

 

So those of you who have Vista will be well aware of the sidebar, some may love it, some may not see the point!  Personally I like it; I think from a developer’s perspective it opens some great possibilities to enhance existing applications/services and also just to have some fun with!  From a users perspective it adds some cool functionality to my desktop!

 

Vista gadgets are basically a collection of HTML, CSS and JS files; with an XML file that is the gadget manifest and contains info about the gadget properties, name, icon and description.
To make it easier to develop gadgets that perform system tasks Microsoft have provided a small framework that exposes certain properties of the host system.

 

Resources

Gadget Home

Development Overview

MSDN Reference

Sidebar blog

 

My Gadget

I wanted to develop something simple to get into using the object model and just developing gadgets in general.  So after looking at some of the documentation I decided on a “Drive Info” gadget that will display info of the drives on the host machine.  The object model exposes drive info so it should be too tricky and it wasn’t!  In the settings I am going to give the user the ability to select the drive to view the details for.

 

cdrive

Setup the file structure

To put a gadget on your sidebar you need to have the right files in the right place.  Vista user gadgets can be put in this location... C:\Users\<<username>>\AppData\Local\Microsoft\Windows Sidebar\Gadgets and then in a directory named <<gadgetname>>.gadget so in this case it’s DriveInfo.gadget.  I’ll cover preparing a gadget for deploying later.  I develop with the files in this location so it’s easy to test.

Files required:

Gadget.htm – contains the HTML mark up for the gadget displayed in the sidebar.

Settings.htm – contains the HTML mark up for the settings view.

Gadget.xml – the manifest file.

Note: You can put the JS and CSS inline in the HTML files but I prefer to have separate files referenced from the HTML. 

Here is my file structure:file structure

     

XML Manifest

You can read a full description of the gadget manifest in the MSDN documentation.  Some of the more important sections are:

·         The <name> element is required and contains a string that defines the gadgets name; this will be displayed in the Gadget Gallery.

·         The <author> element is optional and contains the gadget’s author’s name.  The author tag can contain a <logo> element that has the path to your logo!

·         The <hosts> element is required and contains the host for the gadget.  Although at present the only allowed host is “sitebar”.

     

HTML

The HTML for this gadget is very simple as the values to display are all retrieved and set in the JavaScript file so the HTML is simply declaring and positioning some <span> tags.  Looks just a like a standard web page!!

 

<html xmlns="http://www.w3.org/1999/xhtml">

       <head>

              <title>Drive Info Gadget</title>

              <script type="text/javascript" src="js/Gadget.js"></script>

              <link type="text/css" rel="stylesheet" href="css/Gadget.css" />

       </head>

       <body onload="PageLoad();">

               <div class="gadget-head">

                   <span id="driveHead"></span>

               </div>

            <div class="gadget-main">

               <span id="UsedTotal"></span><br />

               <span id="FreeTitle" class="titles">Free: </span>

               <span id="Free"></span><br />

           </div>

           <div id="used-bar">

               <div id="coverBar"></div>

           </div>

       </body>

</html>

     

     

     

Javascript

 Most of the work is done in the JavaScript.   So straight away you will notice some differences, “onreadystatechanged”, well that is the recommended events to handle instead of onload when developing gadgets.

       

document.onreadystatechange = function() {

    if(document.readyState == "complete") {

         System.Gadget.settingsUI = "Settings.htm";

         System.Gadget.onSettingsClosed = settingsUpdated;

    }

}

       

Here is the code required to display the gadget, you can see the use of the Gadget API to get the drive object and use the properties of that object to perform various calulations for the gadget display. 

The settingsUpdated function as runs when the gadget’s settings are changed; as set above.

       

function PageLoad()

{

    var curDrive = System.Shell.drive(driveToView);

       driveHead.innerText = curDrive.driveLetter + ":\\ " + curDrive.driveFormat;

      

       // Get the used and total space into new Number objects.

       var usedSpace = new Number((curDrive.totalSize - curDrive.freeSpace) / 1012);

       var totalSpace = new Number(curDrive.totalSize / 1012);

       // Set the vars to two decimal places.

       usedSpace = usedSpace.toFixed(2);

       totalSpace = totalSpace.toFixed(2);

      

       // Get free space

       var freeSpace = new Number(curDrive.totalFreeSpace / 1012);

       freeSpace = freeSpace.toFixed(2);

      

       // % Free

       var percFree = freeSpace / totalSpace * 100;

       percFree = Math.round(percFree);

      

       UsedTotal.innerText = usedSpace + " GB of " + totalSpace + " GB";

       Free.innerText = freeSpace + " GB / " + percFree + "%";

      

       // % bar at the bottom

       coverBar.style.width = (100 - percFree) * 1.15;

}

       

function settingsUpdated()

{

    driveToView = System.Gadget.Settings.read("DriveToView");

    PageLoad();

}

 


 

Settings

In the settings section of the gadget (which you can see by clicking the little spanner on the top left corner of the gadget) the user can change the drive to view.  Rather than simply allowing the user to type in a drive letter I search for all active drives on the machine and give the user the option to select which drive (by drive letter and name) to view.

Settings

HTML

The mark-up for the settings is very simple and uses JavaScript for DHTML display and CSS for styling.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml">

       <head>

              <title>Drive Info Settings</title>

              <script type="text/javascript" src="js/Settings.js"></script>

              <link type="text/css" rel="stylesheet" href="css/Settings.css" />

       </head>

       <body onload="PageLoad()">

           <span id="title">Select Drive Letter:</span>

           <select id="ddlDrives" style="width: 150px;"></select>

       </body>

</html>

 

JavaScript

Here I setup and array with every letter and iterate through each index checking for valid drives and adding to the drop down box items when I find a valid drive.  Again using the Gadget API.

var Drives = new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","X","Y","Z");

var DRIVE_TO_VIEW = "C"; // Default to C - everyone has a C drive; right!?

       

//

// Exec on page load - add all drive that the user has to the drop down.

//

function PageLoad()

{

    //set the close event handler

    System.Gadget.onSettingsClosing = onClose;

   

    // Check which drive are in use and add to the array any that are ready....

    for(var i = 0; i <= Drives.length; i++) {

        try {

            if(System.Shell.drive(Drives[i]).isReady) {

                // If drive is found add to the collection

                ddlDrives.options[ddlDrives.options.length] = new Option(Drives[i] + ":\\ " + System.Shell.drive(Drives[i]).volumeLabel, Drives[i], "", false);

            }

        }

        catch(e) {

            // Exception will be thrown if the drive doesnt exists...

            // ....this is a big perf hitter but not sure how else to do it as I cant use FileSystemObject

            continue;

        }

    }

}

       

function onClose(event)

{

    if(event.closeAction == event.Action.commit) {

   

        //save settings

        System.Gadget.Settings.write("DriveToView",   

               ddlDrives.options[ddlDrives.selectedIndex].value);

       

        //indicate success

        event.cancel = false;

    }

}

onClose function is called by the Gadget API when the settings panel is closed.  I then set a settings-variable to the value selected from the drop down box.  This is then used in the Gadget.js file, settingsUpdated() function.

Changed my drive letter to S:\Sdrive

Deployment

Deploying your gadget really could not be easier, simply compress your files then change the extension to .gadget (you will see the icon change), you can now simply double click to install.
Gallery

       

Conclusion

This is a brief introduction into developing sidebar gadgets for Vista and gives you a glimpse of the new gadget API that you have to help develop cool gadgets.  You can of course develop really cool gadgets consuming feeds from Flick for example.  Nikhilk has recently blogged about developing gadgets with script#, his own compiler that compiles C# into JavaScript, check it out here.

Although gadgets are not mind boggling, I was pleasantly surprised how easy they were to develop and I am now looking to develop one that can be used within Bath Spa University (where I work as a developer) on every desktop – just need a spark of inspiration!!

  Download the source for this article from here

Posted on Tuesday, February 20, 2007 7:59 PM | Back to top


Comments on this post: Developing Vista Sidebar Gadgets

# re: Developing Vista Sidebar Gadgets
Requesting Gravatar...
try not copying other ppl's work, k?
Left by UCFknight10 on May 30, 2007 3:30 PM

# re: Developing Vista Sidebar Gadgets
Requesting Gravatar...
Dude, are you have laugh?? Nothing copied here. All my own work. So take ur attitude and put it somewhere useful.
Left by Steve on May 30, 2007 3:55 PM

# re: Developing Vista Sidebar Gadgets
Requesting Gravatar...
I have no permission to view that site. SFKilla took his background from the same place as me - Vista weather gadget.
I will say again but no doubt you will struggle to grasp - this is very old and copied from nowhere. I wrote this before Vista was released. I dont dispute there are others very similar/better and worse but none the same - unless of course they copied me.
Left by Steve on May 30, 2007 4:08 PM

# re: Developing Vista Sidebar Gadgets
Requesting Gravatar...
*lets steve dwell in his own self righteousness*
Left by UCFknight10 on May 30, 2007 4:13 PM

# re: Developing Vista Sidebar Gadgets
Requesting Gravatar...
Copied or not... Thanks for bringing this... ;)
Left by Martin Verner on Sep 11, 2007 5:25 PM

# re: Developing Vista Sidebar Gadgets
Requesting Gravatar...
Any chance of fixing your CSS? Your code examples are unreadable unless I highlight the text then they magically appear. Took me a while to work out why I was seeing so much whitespace.

Same things happens in both IE7 and Firefox
Left by NiceGuyUK on Dec 01, 2007 2:39 PM

# re: Developing Vista Sidebar Gadgets
Requesting Gravatar...
When someone trys to put up a tutorial and helps everybody... appreciate him

UCFKnight keep ur useless comments to urself.....

Nice wrk steve thank u, keep it up
Left by Joel on Feb 06, 2008 8:30 PM

# re: Developing Vista Sidebar Gadgets
Requesting Gravatar...
Thx for all your feedback and support.

Apologies for the problems reading it...the theme of the blog auto sets the default font to white, so combined with a yellow background for code sections made it unreadable! I have now explicitly set the code colour to black in the code sections. Hope that sorts it :)
Left by Steve Clements on Feb 16, 2008 8:04 AM

# re: Developing Vista Sidebar Gadgets
Requesting Gravatar...
Thanks for the manual. It is excellent reading.
Left by Hackish Code on Jun 10, 2008 2:35 PM

# re: Developing Vista Sidebar Gadgets
Requesting Gravatar...
Can you suggest another articles or post (it may be yours) about Vista Gadgets.
Left by WEB Developer on Jul 24, 2008 2:47 PM

# re: Developing Vista Sidebar Gadgets
Requesting Gravatar...
Nice article.

One small error: 1 GB = 1024 MB, not 1012.
Left by Michiel on Aug 01, 2008 11:05 AM

# re: Developing Vista Sidebar Gadgets
Requesting Gravatar...
Thanks for that, but do you know how to catch a javascript function by changing just the option, without clicking on OK Button.

I have tried <SELECT onchange="doThis();" > but this doesn't load my doThis(); function in the gadget.js...

Thanks,
Darius
Left by Darius on Aug 29, 2008 1:44 PM

# re: Developing Vista Sidebar Gadgets
Requesting Gravatar...
Please correct the page. Some images are not loaded. Thank you.
Left by .NET File Explorer Developer on Feb 09, 2009 12:08 PM

# re: Developing Vista Sidebar Gadgets
Requesting Gravatar...
Is anybody here? The images in the post aren't available.
Left by WEB Developer and Consultant on Mar 18, 2009 1:25 PM

# re: Developing Vista Sidebar Gadgets
Requesting Gravatar...
Thx guys for pointing it out...i have been away for a while...I'll sort it when asap.
Left by Steve CLements on Mar 18, 2009 1:44 PM

Your comment:
 (will show your gravatar)


Copyright © Steve Clements | Powered by: GeeksWithBlogs.net