Create a Windows 7 or Windows Vista gadget

Windows 7 & Vista provide a set of very useful and handy desktop applications known as gadgets. You must be using them. Gadgets are lightweight HTML and script-based applications which can be used to provide some information or functionality to the user such as today's date and time. Wanna develop your own gadget for Windows 7 or Windows Vista? Lets start!

On the very basic level a gadget consists of mainly two files -

  • Gadget.xml - This is an XML file which contains the information and general configuration of the gadget.
  • name.html - This is where the real magic takes place. Its an HTML file where name is specified in the <name> tag of the associated Gadget.xml.

Steps to create your own Windows 7 or windows Vista gadget -

  1. Open your favorite HTML editor (even Notepad.exe will do) and create a file named MyFirstApp.html and copy the following code into it.


    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=Unicode" /> <style type="text/css">
            body
            {
                margin: 0;
                width: 130px;
                height: 100px;
                font-family: verdana;
                font-weight: bold;
                font-size: 12px;
            }
            #gadgetContent
            {
                margin-top: 20px;
                width: 130px;
                vertical-align: middle;
                text-align: center;
                overflow: hidden;
            }
            </style>
        </head>
            <body>
            <div id="gadgetContent">
    This is my first Windows Gadget! :-)
            </div>
        </body>
    </html>

    Well its a simple html file and the code is self explanatory. The div id gadgetContent inside the body tag contains the gadget body content. The inline css here contains some important properties such as height, width, font type, font size, margin, etc. The height and width properties of the body tag determines the height and width of your gadget respectively.
           
  2. Next create another file Gadget.xml and copy the following code into it.

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

    As you can see this an XML file and it contains the general configuration and information about the gadget such as its name, source file, version, etc.
     
  3. Save both the files inside a folder named as name.gadget where name should be same as name.html file. In our case the name of the folder should be MyFirstApp.gadget.
     
  4. Now open Windows Explorer and type %localappdata%\Microsoft\Windows Sidebar\Gadgets in the address bar and press ENTER as shown below.



     
     
  5. Copy MyFirstApp.gadget folder to the above mentioned location as shown below.


    Windows 7 or windows gadet folder
     
     
  6. Now close everything and right click on desktop and click on Gadgets.


    Gadget Menu

     
  7. The Gadget window will open containing a list of all gadget. Look for MyFirstApp in it and double click on it.


    Gadget window
     
  8. And now your first gadget should be visible on desktop. Congratulations! 

 My first windows 7 gadget

You can download source files from here