Upcoming Gadget

We are gearing up for an interesting talk on Vista Sidebar Gadgets next week and I have been looking in to the technology the last few days. The sidebar is a pretty straightforward and simple way to make small applications or gadgets that reside in the sidebar or right on the Vista desktop. The only three things you need to make a complete sidebar gadget is a folder, a manifest file and a html file. It’s really that simple.

This is only where the fun begins though. The nice thing about gadgets is that you can use all the tricks and technologies that you ordinarily use in a web page. The only differences between a gadget and a web page is that the gadget doesn’t navigate and have a page history and that it runs as a fully trusted application in windows. Yes, that’s right, it’s fully trusted so you can wreak all sorts of havoc if you are so inclined or if you play with stuff that you don’t master. Take it easy!

I have been visiting the Programmable Web lately, looking through some of the interesting and fun API:s that are listed there and finally this gadget seminar gave me a reason to experiment a bit with one of them. I choose Upcoming just because I like the service a lot. It is a site that lets you register events, concerts, speaks and all other kind of meetings in a structured manner so that other people will find them. What better way to present the information from Upcoming, than by showing it in a sidebar gadget?

The Upcoming API is RESTful and thus really simple to use.  Just send away a Http GET request with the command and your API Key and you are good to go. The result is sent to you as a simple XML document.

The gadget starts by calling the event.search-method by using an asynchronous XMLHTTPRequest in the javascript. The returned response (an XML response) is parsed by the Microsoft.XmlDom activeX component and the list of event names is populated by setting the innerHTML in a <span> in the gadget html. The rest of the information for all the events are stored in a couple of arrays and the links to open the flyout contains the array index for each of the events. It may not be the most elegant solution, but it works. Maybe I’ll refactor it later, maybe not.

When one of the listed events is clicked, the flyout html is constructed and hidden in an invisible <span>-element in the gadget, waiting to be transferred to the flyout as soon as it’s done loading and triggers it’s onload event. I also added some logic for opening new events while the flyout is open and a few lines of code for a settings dialog that uses the metro.getCountryList-call to populate a simple drop down list with the countries. (Sweden is the default country when you install the gadget btw.)

I like the relative simplicity by which you can create a gadget and I will definitely try to make a few more gadgets in the future if I have some time to spend. The programmable web is filled with all kinds of interesting, useful and strange API:s to use and I really recommend you to dive into it if you are looking for inspiration or if you are into this whole Web 2.0-thing.

Download the gadget here. (And by the way: The Upcoming web API requires an API key to be usable so if you want to alter my gadget or make it into something else you’ll have to register for one and use that instead of mine. Thanks!)

C# in the Sidebar

The Sidebar is one of my favourite features in Windows Vista. I like to keep a lot of important and/or interesting information visible. The sidebar is a useful tool to cram even more information into my already overpopulated desktop. (Having around 20 tabs loading at startup in my Opera browser (one of these being Netvibes , in itself containing 13 tabs) I consider myself somewhat of an information junkie.)

Sidebar gadgets are also pretty simple to create so if you find some useful gadget lacking, chances are good that you can put a new one together pretty quickly. It is often possible to make the gadget just using html some lines of javascript and a maybe few XMLHttpRequest()-calls. Sometimes though, you wish for a bit more power, preferrably of the C# variety.

Sadly, I knew now way of easily writing gadgets using C# until yesterday when I found this article at the Code Project. The author has published a small framework for registering and loading a COM object that enables javascript to load an assembly, instantiate objects from that assembly and use them seamlessly in the script. You only have to mark your objects [ComVisible(true)], make sure that your objects implement the IDisposable interface and compile your assembly as a .dll and then you’re good to go.

Put your assembly, the Gadget.Interop.dll and GadgetInterop.js files in your gadget folder and make sure that the search path for the dll files are correct. Then you instantiate the GadgetBuilder object in javascript and call the Initialize method (that registers the Gadget.Interop.dll as a COM object if it hasn’t already done so earlier). After that you can use the GadgetBuilder object to create and dispose of your own home made objects as much as you like.

My first experiment with the GadgetInterop framework, a small gadget for FTP uploads, took me a just a few hours to put together. It’s still quite rough around the edges, but it works. The gadget javascript listens to the onDrop-event and gets the file name from the event.dataTransfer which it sends to an Uploader object that I made in C#. The Uploader object takes care of uploading the file to an FTP server using the FTP url, the username and the password that the user specified in the settings dialog of the gadget.

The GadgetInterop framework opens up a whole new world of possibilities for the Sidebar and I expect to see a lot of interesting new gadgets coming out in the year to come. Aside from this framework, there are a lot of other ways to make cool and useful gadgets, for example Flash, WPF, Java, IE behaviours, VML, Director and a whole lot of other browser based techniques that can be used. Only your imagination is the limit.

One widget API to rule them all

The thick jungle of gadget, widget, whateverlet API:s seem to be clearing up a bit. Netvibes recently announced the Unified Widget API which aspires to be the “ring to rule them all” if their promises is fulfilled. Starting with support for Netvibes, Google IG and Apple Dashboard, Opera support is soon to follow. Vista Sidebar support is also under development.

Another clearing in the format foliage might be the upcoming gadget/ig product from Donavon West. When (and if) it is released it will consist of a Live.com gadget that can host a Google module. An interesting, albeit somewhat temporary solution to the problem.

Meanwhile, the W3C widget standardization effort slowly works it’s way towards consensus. Here’s the current incarnation.