Windows gadget development tutorial

The script element is used to specify the content and working of the gadget. Finally, a span element is used to display the gadget. Following is the code of the gadget. Create a folder called DigitalClock. Right-click on the sidebar and select Add Gadgets option. Select DigitalClockgadget. Note I have attached the DigitalClock. The following figures show how to add the gadget to the sidebar. Create the manifest file and save it to the development folder.

For more information on the gadget manifest, see Gadgets for Windows Sidebar Manifest. Depending on where you created your development folder, you may need to copy the folder or its content to one of the two previously identified Sidebar system folders.

Alternatively, you may want to package the gadget for general distribution and test the gadget installation process. For more information on installing and updating a gadget, see Gadgets for Windows Sidebar Updating and Refreshing. You can also click the Start button, click Run Locate and open your gadgets folder.

Click the Start button, and then click Run In the Open text box, type:. Copy and paste the following code into Notepad or a similar editor that allows you to create an HTML file. The Gadget API provided by the Sidebar environment allows us to interact with the local machine, the Windows shell, and the Sidebar itself.

For example, the System. Wireless object allows us to check the signal strength and connectivity of any wireless network. We can use the System. Powerstatus object to query the remaining battery capacity. For a full reference, consult the MSDN documentation. Our primary use of the System. Gadget objects is to customize the relationship between our gadget and the sidebar. For example, we can provide a custom user interface for our gadget when the user wants to adjust settings.

This interface we provide is the interface that will appear when the user clicks on the small wrench that appears beside a gadget when we hover the mouse over the gadget. We can also handle docking events when the user attaches our gadget to the sidebar and undocking events when the user releases the gadget from the Sidebar and drops it on the desktop. We wire these events to the resizeGadget function, shown below.

Here we are using the System. Gadget API to determine if our gadget is in a docked or undocked state. The ideal width for a docked gadget is pixels, so we adjust the width and height to make our gadget look appealing.

When the gadget is undocked, we can expand a bit, and give our photograph more viewing room. Earlier we talked about using a settingsUI to take user input and customize our gadget. If our gadget was displaying stock quotes, we could use the settingsUI to let the user enter stock symbols. Our gadget is displaying photographs from Flickr, so we let a user enter a search term. Here is our settings. Basically, we've given the user a textbox to type in a search term.

The Sidebar gadget environment will provide an OK and Cancel button for the user. In our script, we just need to load and save the search term. Here we can see the System. Settings object provides read and write methods. We can use these methods to save and restore simple name-value pairs during a gadget session. It's important to realize that these settings are only available when the gadget is attached to the sidebar.

In other words, if the user removes our gadget from the sidebar, any settings we've saved are not kept, and the next time the user adds the gadget to the sidebar the settings will return to their defaults.

When the user closes the settings interface, we can read the settings by attaching to the onSettingsClosed method and reading the values.

The following code lives in the ShowMeLife. Most of the code in ShowMeLife. We won't cover the details of the Flickr API in this article, but you can read the documentation on the Flickr site. As a sampling, the following code makes a request to the Flickr service to request a list of photos with the search tags attached. The code uses the built-in XmlHttp object of IE7.

The code asks for a specific page of results, and specifies the response to use JSON format for easy parsing. All we need to do is set up the following method to display a new photo every 10 seconds.

The timer is managed with JavaScripts setInterval method. A Settings value is retrieved by using read or readString with the key declared when the value was stored. There is a character limit for Settings keys and a character limit for Settings values; values longer than these limits will be truncated. To limit type conversion errors, the use of writeString and readString is recommended.

The following example demonstrates how to store a Settings value when the user clicks OK in the Settings dialog. A Settings dialog is modal and does not disappear if it or the parent gadget loses focus.

The user must select Ok or Cancel to dismiss the dialog. Flyout functionality is exposed by the System. Flyout scripting element. Communication between the Flyout and the main gadget can be accomplished through the use of the parentWindow property of the System. The Flyout file is specified by setting System. Since a Flyout can disappear at any time, unpredictable behavior or errors may result from attempting to communicate with a Flyout from the main gadget.

The following example demonstrates how to set the gadget Flyout UI from the gadget script file and listen for the Flyout events.