The world is widget-crazy, and rightfully so. Rather than large cumbersome multipurpose applications, a widget is a small, friendly little bit of single-purpose functionality that is easy on our eyes, wallets, and computer resources.
Widgets can be defined for a specific environment, such as the desktop, or can easily migrate from desktop to mobile. The difference is the toolset used.
Microsoft also supports HTML-based widgets in Vista and Windows 7 (http://www.microsoft.com/windows/windows-vista/features/sidebar-gadgets.aspx). Yahoo! has a nice summary of desktop widgets at http://widgets.yahoo.net/blog/?p=16.
Widgets came into their own when Apple released the Mac Dashboard, an environment conducive to embedding small, single-purpose applications. Currently on my Mac’s Dashboard, I have a weather widget, a clock, a calendar, and a countdown timer. Some I downloaded, some I made.
The best environment for building Dashboard widgets is to use Apple’s Dashcode, which comes bundled with Xcode 3.0 and up. Dashboard comes prebuilt with templates you can select from in order to short-cut the widget development effort. As Figure 21-3 shows, there are a lot of different widget templates.
Dashcode is installed with the XCode tool set, which you can either install from your Mac discs or access from http://developer.apple.com.
Opera doesn’t have an add-on or extension API/SDK, but it does have a very nice widget development environment. This isn’t surprising when you consider Opera’s focus on its very popular mobile browser. However, you can also run Opera widgets as standalone desktop applications, as long as Opera 10.2 or higher is installed somewhere on your computer. Beginning with Opera 10.5, the widgets install as first-class citizens (like a regular application).
Building an Opera widget is little different than building any other widget: you create an HTML file for the widget, add script, a CSS stylesheet, and a configuration file (in XML) to manage the packaging of the widget. Opera widgets can be downloaded and installed and given chrome—more like an application than a widget.
I created a simple Opera widget, but instead of the traditional Hello World, decided to print the date and time. I also added widget-like behavior to flip the widget when the front is clicked, in order to show the back, and to return.
The HTML file is simple, and includes
One very nice thing about developing for a specific browser and
environment, is you don’t have to worry about cross-browser support,
and can use something like
window load event without
worrying about IE. I could have also split the style into a
stylesheet and the
script into a
script file—separate or inline, makes no
The config.xml file is also simple, just providing some basic information about the widget and the widget author:
<?xml version='1.0' encoding='UTF-8'?> <widget> <widgetname>Date and Time</widgetname> <description>Prints out current date and time</description> <width>440</width> <height>200</height> <author> <name>Shelley Powers</name> <email>email@example.com</email> <link>http://burningbird.net</link> <organization>Burningbird</organization> </author> <id> <host>burningbid.net</host> <name>DateTime</name> <revised>2010-03</revised> </id> </widget>
To package the widget, all we need do is zip it up and change the file extension to .wgt. When downloaded and double-clicked, the widget is installed and run, as shown in Figure 21-5.
Of course, this is a simple widget, without chrome (which can be added), or controls (ditto), and it doesn’t update the time with a timer. But it does demonstrate how simple it can be to create a working widget.
There are any number of widget SDKs and instructions for making both desktop and mobile widgets. Among those I thought most interesting are the following:
The W3C’s Widget Packaging and Configuration specification is in Candidate Recommendation state.
The Yahoo! Konfabulator SDK. The site also provides a widget converter.
Microsoft has provided a how-to on creating widgets for Windows Mobile 6.5. Windows Mobile 7 should be released towards the end of 2010.
Widgetbox is a commercial site that provides tools and hosting for widgets. You can use the site’s free services, or sign up for a Pro account.