<

Create a Win7 Gadget

Published on
135,475 Points
122,875 Views
26 Endorsements
Last Modified:
Awarded
DanRollins
This article shows you how to create a simple "Gadget" -- a sort of mini-application supported by Windows 7 and Vista.  Gadgets can be dropped anywhere on the desktop to provide instant information, or to act as a gateway to a website or a larger program.  

What I like about gadgets is that they are really just small HTML pages.  That means:  No big-project development overhead.  If you have Notepad.exe and some knowledge about HTML, then you can write your own gadget.  Like HTAs, they run with with full local-program privileges, and can use ActiveX objects.  There is no limit to the creative things you can do with gadgets.Fig. 1-1:  Win7 gadgets!
How to Create a Gadget (the short version):
Here's all you need to do to create your own gadget:

1) Write an HTML page, say gadgetName.html

2) Write a short XML file, named (exactly) gadget.xml

3) Copy these two files into a particular directory:
   userDir \ AppData\Local\Microsoft\Windows Sidebar\Gadgets\ gadgetName.gadget

The Details:
Follow these steps and you'll have a new gadget in a few minutes:

1

Create a new folder on your desktop and name it
HelloGadget.gadget

2

Open that folder and create two files in that folder.  Here's the XML file (called a manifest):

gadget.xml
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
  <name>HelloGadget</name>
  <version>1.0.0.0</version>
  <description>Hello World Gadget.</description>
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="HelloGadget.html" />
      <permissions>Full</permissions>
      <platform minPlatformVersion="1.0" />
    </host>
  </hosts>
</gadget>

Open in new window

About the only place you might go wrong is misspelling the name of the HTML file in the
    <base type="HTML" apiVersion="1.0.0" src="HelloGadget.html" />
line.  Here's that HTML file:

HelloGadget.html
<html>
<script>
//----------------- resizes the gadget display surface
function DoInit() {
    document.body.style.width = 90;
    document.body.style.height= 55;
    document.body.style.margin=0;
}
</script>
<body onload="DoInit();">
<table border="5"><tr><td><center><i>Hello World!</i></center></td></tr></table>
</body>
</html>

Open in new window

3

Open a Windows Explorer and drill-down to locate the
following folder:

   userDir \ AppData\Local\Microsoft\Windows Sidebar\Gadgets\

...where userDir is your Windows User Name (the folder is in the "Desktop" virtual folder, just above "Computer" ) If you want, you can copy the following text and paste it into the address bar in any Explorer window (or in the Start/Search or Start/Run input boxes):
%localappdata%\Microsoft\Windows Sidebar\Gadgets

Open in new window

Looking in that folder, you will see the other gadgets that are already installed.  Each is in a folder that has a file extension of .gadget  A good way to learn about gadget programming is to examine the source files of the gadgets you can download from the Microsoft site.

4

Drag the HelloGadget.gadget folder from the desktop
and drop it into that Gadgets directory.
Fig. 1-2: Gadgets Folder

5

Right-click the desktop and select Gadgets.  
Your gadget is now visible in the gallery.  
Fig. 1-3:  Your gadget in the GalleryIt has the default icon, but the name is as was set in the XML file.  Drag it and drop it onto your desktop.

There you have it:  Your first gadget.  About all you can do with it is drag it around and close it.  But that's a start.  You can open the HTML file with your favorite text editor, make changes, and then drag it from the gallery to the desktop to see the effects of your changes.

Debugging
Alas, the usually-dependable all-purpose JavaScript debugging tool --  the alert() function -- is not available when running as a gadget.  One option is to drop the HTML file onto a browser and run it there -- where alert() will work.  

With Windows 7, there is a new registry key that affects debugging.  Setting...

   [HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Sidebar]
      "ShowScriptErrors"=dword:00000001

...will enable the display of script errors.  It's better than sitting there looking at the screen blankly and wondering why nothing is happening.

If you have Visual Studio, you can use its Just-In-Time debugging.  Just insert:
debugger;

Open in new window

...at a good starting point in the <script> block.  The VS script debugger will come up and let you single-step, check variables, and so forth.  I've found this technique works best if you break your JScript out into a separate file (as opposed to putting it all in the HTML file).  See Debugging JScript Programs with Visual Studio 2008 for related info.

Packaging and Deployment
Microsoft made this very easy.  All you need to do is create a ZIP file that contains your two files.  Rename the ZIP file to give it an extension of .gadget and you are done.  When you right-click a file that has the .gadget extension, Windows asks if you want to install the gadget, and then it creates the AppData directory and unpacks the files into it.  The gadget  immediately becomes available in your gallery.

But, as we've seen, you don't need to create a deployment package:  While developing, you can create the folder manually and work directly with the source code.
Caution:  If you work this way (directly in the AppData folder), then be aware that if you choose to Uninstall in the Gadget Gallery, it will delete your files!   Keep a copy of the files handy in a different place.
Rather than a renamed ZIP file, you can instead create a renamed CAB file for deployment.  CAB files can be signed, so your users might avoid a scary "Unknown Publisher" notice when installing.

Up Next:
In the next installment, we'll create a more complex gadget that illustrates how to add a non-default icon, how to populate the "details" area of the gadget gallery, and most importantly, how to display a Settings dialog and save the settings so they'll be in effect each time your gadget starts.

See: Create a Win7 Maze! Gadget
And: Create a Win7 Drop Target Gadget
And: Create a Win7 Gadget with a Flyout Panel

Resources:

Gadgets
http://msdn.microsoft.com/en-us/library/ee663278(VS.85).aspx

Developing a Gadget for Windows Sidebar  (Written for Vista, but it mostly applies)
http://msdn.microsoft.com/en-us/library/bb456468(VS.85).aspx

Gadgets for Windows Sidebar Debugging
http://msdn.microsoft.com/en-us/library/bb456467(VS.85).aspx


=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
If you liked this article and want to see more from this author,  please click the Yes button near the:
      Was this article helpful?
label that is just below and to the right of this text.   Thanks!
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
26
Comment
Author:DanRollins
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
  • +5
13 Comments
 
LVL 31

Expert Comment

by:James Murrell
Dan,

Wow great just created my 1st one :

It monitors to work web pages for up time....

couple of questions - i have a button which refresh's how would it be possible to have auto refresh (every two/ five minutes)

Already got ideas for more gadgets... great work

now reading others

James
0
 
LVL 49

Author Comment

by:DanRollins
I'm glad you liked it.  
Your gadget is written in JavaScript and it supports the window object.  Just create a timer.
-- Dan
0
 

Expert Comment

by:sukumarr
Dan,

It's really cool one. It tempted me to create my first gadget :)

~Sukumar
0
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 

Expert Comment

by:digitalpbk
Great tutorial, see a beginners demo for making a windows gadget .
0
 

Expert Comment

by:vookster82
Hi there.

So i finally found a way to get a active desktop feature in windows 7...aside from the snippage app that i dont really care for.

Its a sidebar gadget called active desktop....go figure right,
http://gallery.live.com/liveItemDetail.aspx?li=7d9c6b7c-1d5c-4736-a52e-a14dcc7f478d&bt=1&pl=1

The only thing that I want to add to it is the ability to have the gadget refresh the designated web page every so often....say every 10 min.  I dont want to change anything else.

I have very little experience with HTML and the like...but im sure this would be a easy edit for someone.

Or feel free to create a new gadget with the refresh option and post it in the sidebar gallery as im sure theres many people out there that would like this gadget / active desktop as well. :)   Just a thought.

Thanks for reading.
Any and all help is greatly appreciated
0
 
LVL 2

Expert Comment

by:dantheanswerman
FYI -- If you're in Windows 7 Ultimate 64-Bit (or at least this worked for me),

1) Place the gadgets in "C:\Program Files\Windows Sidebar\Gadgets".
2) Create a folder within your "HelloGadget.gadget" folder called "en-US"
3) Place your "gadget.XML" file in the newly created "en-US" folder.
4) Modify the "gadget.XML" file by adding "..\" in front of the link to the HTML file so it goes up one level to search in the correct location:

 <base src="..\HelloGadget.html" apiVersion="1.0.0" type="HTML"/>


My Question for Dan/All:

Based on my 64Bit Windows 7 - if I want to debug , where should I put the registry value? (and should I make it a 64Bit key (REG_QWORD) instead of a32Bit? I was thinking it should go here (am I close?!?):

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Sidebar
0
 
LVL 49

Author Comment

by:DanRollins
I'm not so sure that any debugging-related registry entry is useful or needed.  In my later efforts, I simply added the debugger; line to my JavaScript code and let VisualStudio pop up its full-featured debugger.
0
 
LVL 2

Expert Comment

by:dantheanswerman
Thanks for the tip Dan.

Great article!!
0
 

Expert Comment

by:MIKYY
i am not getting HelloGadget on right click on the desktop. please help me out in this situation. i am using windows 7 ultimate (64 bits).
0
 
LVL 49

Author Comment

by:DanRollins
A right-click on the desktop should bring up a menu that includes the "Gadgets" option.  Click it, and HelloGadget as well as many others, should then appear in the Gadget Gallery.
0
 

Expert Comment

by:MIKYY
thnxx ..now it is appearing on my desktop.
but please tell me how to apply events on it so that the gadget can be useful too.
i am thinking to make a workable gadget as my B.tech final year project.
please give me some kind of hint in this direction.
thnx a lot..
:)
0
 
LVL 49

Author Comment

by:DanRollins
Please refer to the three related articles listed above (under the heading "Up Next").  A gadget can respond to user-interface events such as keystrokes, clicks, item drops, and rollovers, and to timer events (basically anything that can be sensed in a web page), plus whatever functionality you can add by using activeX objects such as the FileSystemObject.
0
 

Expert Comment

by:saumil11
@dansrollins thanks u made my day
0

Featured Post

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Join & Write a Comment

This is Part 3 in a 3-part series on Experts Exchange to discuss error handling in VBA code written for Excel. Part 1 of this series discussed basic error handling code using VBA. http://www.experts-exchange.com/videos/1478/Excel-Error-Handlin…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month