Field Guide to Programmers

I wouldn't say I'm a heavy user of Dashboard, but I really like the idea of creating widgets. Widgets are also used in the iPhone and iPod Touch, so if I ever make the switch [crave] there's no doubt I'll want to develop some useless toys for my $$$ toy.

Since I've already developed a calendar control using the Prototype js and scriptaculous frameworks, I have the basic materials I need to build the widget.

Before you begin, you might want to take a look at the Dashboard Widget Tutorial on Apple's Developer site. I found it helpful, though ultimately I wanted to dig into the code. You probably do to, so let's take a look at the structure of a Widget.

The Widget Structure

Any widgets you've installed on your system are stored in ~/Library/Widgets. If you look at that directory in the Finder, you will see something like this:

The Widget application file is an archive, just like most Mac applications. This means you can open it up and see what's going on under the hood. You can also hack it if you want (customize menus, images, even code in some places). This is one of the hallmarks of the MacOS and OSX. Well, maybe that's a bit strong. Let's just say the feature has been around for awhile and it's kinda cool.

To reveal the contents of the widget, right click on the icon and choose "Show Package Contents". This will open the archive as a folder and show you all the goodies inside.

[TIP] If you are a TextMate user, you can just drag the icon of the widget onto TextMate. This will launch a new project using the Widget's folder and give you easy editing access to all of files inside the Widget.

The basic structure of a Widget is pretty simple. You have index.html, info.plist, a couple of png image files, and a stylesheet. The images are used by Dashboard to show placement when you add the Widget and as an icon in the list of Widgets. The plist file holds the base information about the control (name, size, etc). The index.html file is of course where the action takes place.

The screenshot above shows a lot of files in addition to the basic four. Don't be scared. These files are just the support files for prototype and scriptaculous and my calendar control (scal).

Scal Widget

Download Scal Widget (ZIP)

Once you've downloaded and expanded the ZIP archive, you can double-click the Scal.wdgt file to install the control in Dashboard. However, as I said above, you could also right click on the icon and choose "Show Package Contents" to open the widget as a folder. Lastly, I set up Scal to use the "dashblack" theme, so if nothing else you can see how not-close my CSS is to Apple's.

Filed under OSX, scal. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.