A World of Widgets

Yahoo’s purchase of Konfabulator introduced a wider audience to widgets, nifty little applications that sit on your desktop and provide information or entertainment. Are they hard to make? And could they be useful to your site? Keep reading to find out.

A World of Widgets

Most of you will know that Yahoo! bought the popular Widget engine Konfabulator about a year ago. Prior to this, it began (commercial) life in early 2003 as a small but hugely successful Mac application aimed at providing any information you wanted in skinnable form right on your desktop. Release 1.8 saw the application ported to the Windows platform, while version 2.1 saw it transformed into freeware. The cross-platform nature of the widgets themselves ensured a steady stream of new and uniquely entertaining widgets produced by both Windows and Mac users alike, until it became so popular that the developers sold it to Yahoo! so that it could be effectively distributed to the masses. 

This is obviously just a one paragraph description of the JavaScript engine. The Konfabulator site has a far cooler, comic strip cartoon written by the original designers themselves that explains the story brilliantly for those of you that are interested. Since acquisition, Konfabulator was renamed to the Yahoo! Widget Engine when version 3 was released in December 2005, and the current version is 3.1.  Most of the widgets themselves have a very distinctive semitransparent black glass default appearance, inherited from the OSX Aqua GUI, although most are skinnable and or highly customizable. When you install either the standard widget engine or the SDK you get a selection of basic widgets, including a weather forecaster, analogue clock and various other little information providers that can either use data from the host computer or from the Internet. If these don’t satisfy your needs, there are already thousands of downloadable widgets to choose from on the http://widgets.yahoo.com site.

You can get widgets in all shapes and sizes that give you information about almost anything! Recently there were a lot of World Cup themed widgets that predict the winners of the tournament, or give team specific news and updates; there are also plenty of map and weather combos that report on all aspects of weather (standard weather reports/forecasts, pressure and temperature reports, etc) for given states/locations, and plenty of industry specific news feed scrollers.  Clock and countdown variations are also a common theme for widgets, as are online radio stream players. 

There is also a wealth of fun related widgets that do nothing more than amuse or entertain. Some of the better ones I’ve seen so far include the Coder/Decoder widget that you and a friend can download to have coded conversations, the AmazonBrowser which gives you a fully functional Amazon.com on your desktop, and ICDocs which allows you to view Office documents without an installed copy of MS Office. There are many, many more and as with the ICDocs example, not all widgets make use of external online feeds or data sources; many use properties of your system to function.

{mospagebreak title=A Closer Look at Widgets}

Widgets are made from a combination of XML and JavaScript (with images and other resources as well). It reminds me in some ways of XUL, another XML derivative concerned with application development, but my initial impression of it was that it was easier to work with and there’s a lot more automation, like with the rendering of the preferences window for example.  On the face of things, not a lot has changed with widgets since the Yahoo! acquisition; widgets on the whole look the same, the system tray icon looks the same, you even get pretty much the same default widgets following an install. 

The only visible difference is that the name Konfabulator, which appears frequently in versions prior to 3, has been changed to Yahoo! Widget Engine.  Behind the scenes, things are a little different; the file size of the installed application has more than doubled since the acquisition. That doesn’t mean much in terms of space used or anything, but it does show that quite a bit must have changed somewhere. The version history page on Yahoo’s site lists the huge number of fixes and additions to the engine since (and including) the release of version 3.0. 

Yahoo! is on to a winner with the re-branded Konfabulator. People love to get involved in things like this, and it has a real open-source community feel to it.  Yahoo wants to get people into using and making widgets and boast that it is very simple to create them, so just how easy is it to actually create a widget?

I thought that as part of this article, I would design and create a widget from scratch to find out whether it really is as easy as they make it out to be. Initially, I read through the Widgets manual and followed the instructions in the widget development article included in the SDK version of the Widget engine download.  On the whole, it was well written and pretty easy to follow. Within about 10 minutes I had a working widget sitting on my desktop.  It looked nothing like the ultra-slick widgets that came bundled with the download, but it worked nonetheless and was made using nothing but a simple text editor.

{mospagebreak title=Read the Widget Manual} 

The Yahoo widget gallery used to contain a widget converter widget that you could drag and drop your widget’s folder structure onto in order to package your creation into a .widget file, or vice versa. Due to changes in how the engine opens and runs widgets however, the widget reference manual advises against the use of the current converter, which is why it’s been removed from the gallery.  Instead, there is a command line tool included in the SDK download that will handle all of your packaging and unpackaging needs. 

Unfortunately, while the reference manual lists the available commands, neither the manual nor the tutorial offer any instruction on the use of this command line interface. I managed to work out how to unpack a widget bundle into its constituent parts by trial and error, but as of the time of writing, I haven’t yet converted a widget folder hierarchy into a flat widget file.  If Yahoo wants more people involved, it must either improve the instructions for use included with the command line converter, or upgrade the converter to deal with the new runtime methods.  

Additionally, there is no guidance on how to transform your creation into that trademark black glass effect, although as pointed out in the walk-through, you can always unpack any existing widget to see how the graphical elements of widgets are presented, or make use of the excellent Photoshop widget making script (if you have Photoshop, that is).

Aside from these two points, the documentation included is first class; it is well presented, clear and concise and gives people not just an introduction into the world of widgets, but also a very basic crash course in XML and JavaScript for those that are new to these languages too. There is also an extremely comprehensive reference manual, which gives definitive examples of every single XML tag used in widget programming. Both of these documents have been produced by Yahoo, who has the time and resources to include additional extras like these to help build a community of developers, exactly as envisioned by the original creators.

{mospagebreak title=How to be a Widget Wizard}

So, the walk-through was a doddle, but how easy is it when your hand isn’t being held by the friendly scholars of Yahoo? You’ll need a working knowledge of JavaScript at the very least, access to and again a working knowledge of Photoshop or another decent graphics program for any pictures you’ll need and most importantly, you’ll need inspiration. Primarily, you’ll want your widget to have the same visual quality as some of the other widgets available in the gallery, with that gorgeous polished black glass effect. Unless you already know how to draw aqua-style icons, you’re going to need to learn how to if you want to give your widget that effect. 

There are some great tutorials out there for this, and with a little bit of practice, it’s fairly easy to come up with something that looks like it should. I’d recommend using Photoshop to make the presentation layer of your widget, not just because it’s a great application, but also because once you’ve drawn your widget, you can use the Widget Creation.jsx script and have Photoshop create the basic kon file that will ultimately hold the rest of the code that makes your widget do whatever it’s supposed to do. Once you have this, you can just add in any other code needed.

Once you have the appearance of the widget down, it is just a case of looking through the reference manual to see what XML elements you need to use, and then looking at the JavaScript objects you need in order to wire up the XML elements into a working application. Before I wrote this article, I had no previous experience in creating widgets, and yet now, in just a couple of days, I have a working widget on my desktop that does what I set out to make it do. It’s a simple news reader that takes an XML feed from the BBC Technology news website and displays clickable links to the articles on the site (you can see the code behind it in a follow-up article that will be on the Dev Articles site soon). It’s not the most complex widget in the world, and it’s not the best looking, but it works in the way that I’d envisioned and I think shows how easy it is to get started in Widget creation.

Making widgets is a great thing to do for several reasons. First, it can be a great way to get yourself or your company known to a wider audience by uploading your widget to the widget gallery. There are thousands of widgets on the site and many daily visitors. Second, widgets can be used a catalyst for driving traffic to your site; you can include links to your site on the About page of your widget, and although these won’t be picked up by search engine spiders, they may still prompt people to visit your site, and increased traffic is a good thing in anyone’s book.  

[gp-comments width="770" linklove="off" ]