February 2007
M	T	W	T	F	S	S
« Dec		Oct »
	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28

Archive for February, 2007

The Hello World Gadget

Posted by admin on 10th February 2007

Gadgets

Today I decided I wanted to learn a little about Windows Sidebar Gadgets. Gadgets are one of the new trends in the Web 2.0 realm. A gadget is a small visual object which provides common data such as the weather, news feeds, or stock prices. Many of the “default home page” web sites such as live.com, google.com, and yahoo.com display personalized data to you in the form of gadgets. Windows Vista and Mac OSX now both support gadgets in the operating system. Gadgets are typically small dynamic web apps utilizing client side scripting.

Windows Gadgets

A Windows Sidebar Gadget at its simplest form is an xml file called gadget.xml, a single html file, and an image in a directory. The Windows Sidebar looks for gadgets in the directory C:Program FilesWindows SidebarGadgets. If you browse to this directory on a Windows Vista PC you will see the default installed gadgets, such as RSSFeeds and Weather. Gadget folders within this directory have .Gadget extensions.

The xml file is the metadata for the gadget telling the sidebar application how to read the files in the directory, it MUST be called gadget.xml and be located in the root directory of the gadget (unless localization is supported).

<?xml version="1.0" encoding="utf-8"?>

<gadget>

  <name>Hello World</name>

  <namespace>

    catalystss.gadget

  </namespace>

  <version>

    1.0.0.0

  </version>

  <author name="Catalyst Software Solutions, Inc.">

    <info url="http://www.catalystss.com" text="www.catalystss.com"/>

    <logo src="icon.png"/>

  </author>

  <copyright>

    © 2007

  </copyright>

  <description>The HelloWorld example gadget.</description>

  <icons>

    <icon width="130" height="67" src="icon.png"/>

  </icons>

  <hosts>

    <host name="sidebar">

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

      <permissions>FULL</permissions>

      <platform minPlatformVersion="1.0"/>

      <defaultImage src="icon.png"/>

    </host>

  </hosts>

</gadget>

The html file, called gadget.html for this example, is just a simple web page.

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

  <head>

    <title>Hello World</title>

  </head>

  <body style="height:30px;width:130px;background-color:#455AC5;">

    <div style="color:White;font-family:Calibri;font-size:20px">

      Hello World

    </div>

  </body>

</html>

Installing

Installing your gadget couldn’t be easier. Once you have your gadget.xml, gadget.html, and icon.png files. You can just copy them to a gadget folder called C:Program FilesWindows SidebarGadgetsHelloWorld.Gadget. Next, open the Windows Sidebar manager from the “Notification Area”, which used to be called the system tray pre Vista. You should see your HelloWorld gadget and can right click and select add. This displays your gadget in the windows sidebar.

C:Program FilesWindows SidebarGadgets

Calander.Gadget
HelloWorld.Gadget

gadget.xml
gadget.html
icon.png

NOTE: Your xml file must be saved in the same encoding as specified in the <xml> tag at the beginning of the file. If it is not, Windows Sidebar will not display it in the manager. You will not get an error either, which I found extremely frustrating while troubleshooting the issue.

Developing

The easiest way to develop your gadget is to open the files from their location within the sidebar directory. To refresh the gadget you must remove it from the sidebar and re-add it. This is fairly simple to do if you leave the Sidebar Manager open during development.

Deploying

To deploy a Windows Sidebar gadget simply zip the folder, and rename the zip extension .gadget. Windows will automatically install gadget files when they are double clicked. Make sure that the gadget.xml file is still in the root after zipping the folder.