Ajit Monteiro

Vista Gadgets

Posted in Gadget, Microsoft, Vista by amonteiro on January 17, 2007

I just finished creating my first Vista gadget and was surprised at how easy it was. All it is, is a html and an xml document and any web developer should have no problem creating one. Heres the quick synopsis of how its done (taken from MicrosoftGadgets.com).

“Creating a gadget is a process that should be familiar to any web page author.

  • Create a directory to contain the gadget files.
  • Create an HTML page that does something interesting
  • Create the XML file for the gadget manifest
  • Test the newly-created gadget from sidebar.
  • Close the gadget to make changes as necessary.
  • Open the gadget again in the sidebar to view changes
  1. Open the Sidebar
    1. a. Click the Start button, then click on All Programs. The Windows Sidebar can be found under the “Accessories” folder.
  2. Locate your gadgets folder.
    1. In a “Run” prompt (Windows Key+R), type

      “%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets”

      without quotes

  3. Your gadgets folder will now open. It will be something similar to:

    c:\Users\<your user name>\AppData\Local\Microsoft\Windows Sidebar\Gadgets

    Some gadgets are located in the Program Files folder, but gadgets for a specific user are under this hidden folder.

  4. Create the gadget folder
    1. Create a folder called HelloWorld.gadget inside the Gadgets folder. Gadgets must be a folder whose name ends in “.gadget” for the Sidebar to recognize the gadget.
  5. Create the HTML file
    1. Use something capable of creating an HTML text file, such as Notepad. The HTML file should contain the following content:
  6. HelloWorld.html

     

    <html>
    <head>
    	<title>Hello, World!</title>
    	<style>
    		body {
    			width:130;
    			height:50;
    		}
    	</style>
    </head>
    <body>
    	<span id="gadgetContent" style="font-family: Tahoma; font-size: 10pt;">Hello, World!</span>
    </body>
    </html>
  7. Finally, create the gadget manifest
    1. The manifest file must be named “gadget.xml”
    2. Make sure to change the extension from .txt to .xml, typically by changing the option for “Save as type” to “All Files” and then typing “.xml” after the file name.
    3. c. Also make sure the file is saved with UTF-8 encoding.
  8. The XML file should be contain the following content:
    gadget.xml

     

    <?xml version="1.0" encoding="utf-8" ?>
    <gadget>
        <name>Hello World!</name>
        <namespace>Example.You</namespace>
        <version>1.0</version>
        <author name="Your Name">
            <info url="www.example.com" />
        </author>
        <copyright>2006</copyright>
        <description>My first gadget</description>
        <hosts>
            <host name="sidebar">
                <base type="HTML" apiVersion="1.0.0" src="HelloWorld.html" />
                <permissions>full</permissions>
                <platform minPlatformVersion="0.3" />
            </host>
        </hosts>
    </gadget>

You may also want to use Paint to create an icon file, and give it the same file name that you specify in the above gadget.xml file. This is optional; the Windows Sidebar will provide a generic icon if you do not have an icon.

Click the “+” symbol at the bottom of the Sidebar. In the Gadget Gallery, you should see “Hello World!” (as defined in gadget.xml) in your Gadget Gallery”

Read the rest at MicrosoftGadgets.com

Advertisements

3 Responses

Subscribe to comments with RSS.

  1. Jerome said, on March 22, 2008 at 3:22 am

    Cool! This is first time to know Vista could do this 🙂 I’ll try this myself. Thank’s

  2. tech gadget said, on February 15, 2010 at 3:35 am

    Well I was just searching on Google for some videos and songs of my favorite singers and just came across your blog, generally I just visit blogs and retrieve my required information but this time the useful information that you posted in this post compelled me to reply here and appreciate your good work. I just bookmarked your blog :).

  3. pandu ari said, on April 7, 2014 at 9:41 pm

    Create a directory to contain the gadget files.
    Create an HTML page that does something interesting
    Create the XML file for the gadget manifest
    Test the newly-created gadget from sidebar.
    Close the gadget to make changes as necessary.
    Open the gadget again in the sidebar to view changes


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: