I think this post should begin with a few sayings: “Never say never”, “When hell freezes over”, “Once in a blue moon”, “I would rather shoot myself”, “Over my dead body”, but the best suited one for this post comes from Ciprian Jichici, the Microsoft Regional Director from Romania: “In this line of business, there’s no room for talibanisms”.
I will be talking about developing Sidebar gadgets. These Sidebar gadgets are small applications that offer useful information, do frequent tasks more easily, or just offer a good laugh for the Windows Vista user. Until recently, I’ve been trying very hard to stay away from technologies like JavaScipt and PHP because it is my personal opinion that they fall miles away from a proper programming language (C#, VB.NET, C++). I won’t go into the details of why I dislike these languages.
From here, the purpose of the new gadget has to be formulated. It can be as simple as “Hello World”, or as complicated as interfacing with your Windows Media Player. The first step is to go over to the Live Gallery dedicated to Vista Sidebar Gadgets and have a look at what’s out there. I settled on creating a gadget that would display the postal code (ZIP) for a given address from Romania. I chose this because I had been searching too many times for postal codes on websites. The gadget is a very welcomed shortcut. The data is to be obtained from one of the many sites that offer Romanian ZIP search. The only requirement is to be able to pass the search string as a query string directly in the URL to keep things simple. I settled on http://coduri-postale.ro.
<input type="button" value="Flyout" onclick="flyout();" />
The gadget.xml file contains the name, author, description of the gadget, but also it specifies the main source file for the gadget in the <base> node from <hosts>. The file also contains the path to an icon which represents the gadget and an image to display (defaultImage in <hosts>) while dragging the gadget (only when dragging it from the “Add Gadgets” window).
<?xml version="1.0" encoding="utf-8" ?>
<!-- The name will appear on the Gadget Tile and settings window -->
<name>[ YOUR GADGET NAME ]</name>
<namespace>[YOUR CUSTOM NAMESPACE]</namespace>
<author name="[AUTHOR NAME]">
<info url="[URL FOR INFO]" />
<!-- The logo file will display on the more details window of the Gadget Tile window -->
<logo src="logo.png" />
<copyright>© [COPYRIGHT INFO]</copyright>
<!-- The description displays in the Gadget Tile window when the Gadget is selected -->
<icon height="48" width="48" src="icon.png" />
<base type="HTML" apiVersion="1.0.0" src="gadget.html" />
<platform minPlatformVersion="1.0" />
<defaultImage src="drag.png" />
One can specify a settings HTML page by setting the settingsUI property of System.Gadget. The settings page cannot be opened programmatically, only by the user’s action (the settings button that the runtime creates for each gadget that supports settings automatically). The event onSettingsClosed is raised whenever the settings page closes, either by pressing ok or cancel. The onSettingsClosing event can be handled in order to save settings. It’s handlers have a parameter which has a property closeAction. If this property is event.Action.commit, where event is the parameter passed to the handler, then the ok button was pressed. In order to write settings, one calls the write method and for reading, the read method of System.Gadget.Settings.
var xmlhttp = false;
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
The simplest usage scenario involves using the GET http verb in order to simply retrieve a page.
xmlhttp.open("GET", url, true);
//do something with ret;
//anything other than success can
//be treated as an error
Sometimes it’s useful to do a POST request in order to get to a page that cannot be accessed through an URL. For example for filling out a form in order to obtain some search results (that are not accessible through URL query string parameters). Besides changing the GET into POST, you must also specify the form parameters just as you would query string parameters,only without “?” (‘par1=val1&par2=val2’) and pass the resulted string to the send method of the request object. Also, some HTTP header have to be set: Content-Type to “application/x-www-form-urlencoded” in order to pass the parameters of the form, Content-length to the length of the string of parameters and Connection to “close” in order to specify that the connection is to be closed once the response is obtained.
xmlhttp.open("POST", url, false);
//do something with ret
// error occurred
This concludes a basic, but comprehensive article on developing Sidebar gadgets. Even though I was not very specific, I hope you will have no problem stating your own gadget after reading this post.
Currently I have developed 2 gadgets: one to display postal codes from Romania and one to search for schedule and route information for urban transportation in a few major cities from Romania. The source code for these gadget can be obtained by installing them, then by getting the contents of the “C:\Users\%YourUser%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\GadgetName” folder. Also, these two gadgets are competing in the Romanian edition of Gadget Competition. You can download and vote for my gadgets by clicking the two screenshots below.