The Desktop Widget Concept
So what exactly are desktop widgets? Well, they're small components executed within a larger engine application running on client platforms. Widgets typically provide simple, commonly used utility functions like calculators or battery-life meters. They are always resident when the engine is running; there's no need to launch them when the function is required.
Although there are different desktop widget engine implementations, they do have similarities. The engine provides a framework that reduces the code required for a widget. A widget specification is interpreted rather than compiled, and consists of a combination of a markup language (such as XML or HTML), a scripting language (such as JavaScript), and sometimes CSS.
The engine also handles aspects common to widgets simplifying the development of widgets. Widget developers are free to focus on defining the look-and-feel of widgets and implement functions that widgets are intended to perform, rather than focusing on the low-level details engineers typically address when developing applications.
Again, there are several implementations of desktop engines:
- Apple Dashboard Widgets are included in MacOS X. A widget definition is similar to a website, consisting of a combination of HTML, CSS, and JavaScript.
- Microsoft Desktop Gadgets are incorporated in the Windows Sidebar in Windows Vista. Similar to a Dashboard Widget, Gadgets are defined with a combination of XML, JavaScript, and CSS.
- Google Desktop Gadgets are available for Windows; application logic may be either VBScript or JavaScript. Gadgets interact with external URLs and on-platform ActiveX components.
- Yahoo! Widgets provide the only open API toolkit, and only engine that runs on both Windows and Mac OS X.
Yahoo! Widget Components
Depending on your environment, you must install a few components to develop and run Yahoo! Widgets. Regardless of environment, you need the Yahoo! Widget Engine (widgets.yahoo.com/download) to run widgets. If you want to develop widgets, you also need the Developer SDK if you're on Windows, or a widget converter application on a Mac. Both are available at the developer site (widgets.yahoo.com/workshop), which also contains a variety of other tools, templates, and tutorials for widget developers, regardless of platform. Of course, you also need a text editor, and you may want a graphics application such as Gimp or Photoshop because you typically need to create images for widgets.
After installing the engine and exploring available widgets, you see that widgets come packaged as .widget files. These are similar to archive files, and contain the files necessary to deploy and run widgets. They can be packed/unpacked using the widget converter, available as a widget or command-line version. When you unpack a widget, you see directory structure similar to this:
ClipNotes
- Contents
- ClipNotes.kon
- ClipNotes.js
+ Resources
- background.png
- upload-button.png
...
The top-level directory name corresponds to the name of the widget, and contains a single subdirectory, Contents. This typically contains two main elements—a Resources folder that contains images used by the widget, and a file with a ".kon" extension. This file looks like a normal XML file and contains the widget's specification. More complex widgets may also include JavaScript files for the code required by the widget. The motivation for this is akin to the motivation for separating the JavaScript from an HTML page. It separates the specification of the widget (or HTML page) from the processing logic.
Opening and examining widget specification files (.kon files) reveals aspects common to a widget specification. They are based on XML and start with the standard XML processing instruction followed by a widget element that contains one or more window elements. The window element generally contains a collection of elements that define the images, text fields, and text areas to include in the window. After the window specification, the widget's actions are defined. An action is a bit of JavaScript code that gets invoked when an associated triggering event occurs. Actions are typically followed by one or more preferences that let users tailor the widget, such as text font or color. Finally, an about-box element may contain child elements that define a window containing information about the widget and its developer. Listing One is the skeleton commonly seen in a widget specification file.
