Create a Dashboard widget

• Article 38 of 89
• MacFormat, March 2007

Page 1 | Page 2 | Page 3 | All 3 Pages

Once you’ve downloaded and installed Dashcode, double-click on your hard drive icon, open the Developer folder and look for a folder called Applications. In that, you’ll find Dashcode. Double-click it to launch it.

When you launch Dashcode, you’ll be given a nice, friendly-looking window of choices. To start you off, there are eight different kinds of widget templates to start from. We did mention that Dashcode is designed to be easy to use, but parts of it can be complicated. Dashboard isn’t just for the rest of us – it’s also for any Apple developer who wants to create their own widget. That means that just below the surface, there’s a whole load of complexity, waiting to break out. In particular, some of the templates, because they access functions on your Mac, need some developer skills for you to take advantage of them. “Custom” gives you a blank page to start from, so shouldn’t be used unless you really know what you’re doing. “Gauge” creates a widget that can monitor levels of whatever you tell it to monitor; however, to do that, you have to be able to edit JavaScript to tell the gauge what to gauge, if you get our drift. Basically, if you understand what “document.getElementById(”gauge“).object.setValue(50);” means, you can use this widget type; if you can’t, you can’t, unless you fancy a little book/Internet learning. And if that sounds hard, move on immediately from “Quartz Composer”, since you’ll need Apple’s Developer Tools installed and a Quartz composition to manipulate.

The other five widget types are far better suited to most people’s purposes. “RSS” and “Daily feed” are ways to display the contents of an RSS feed in a widget; “Podcast” and “Photocast” do the same for podcasts and photocasts respectively; and “Countdown” gives a widget that counts down to an event – you can link it to an iCal calendar you’ve published as well.

Once you’ve picked a template type, the sheet will disappear leaving a window with the Dashcode widget project in it. At the top is the toolbar. Down the side are the project files and the widget workflow. In the main part of the window is the new widget. Floating on top is the Inspector, which helps when you want to customise the widget.

The workflow is probably the most important part of the window, since it gives you a series of steps you need to complete (or at least think about) if you want to produce a working widget. The workflow steps differ from widget to widget and in our walkthrough, we’ll show you how to use the workflow and take you through the steps needed to create a basic RSS feed widget.

If you want your widget to be something slicker than a basic widget, you’ll have to look at creating a widget icon and a “default image” for it, as well as a front and back. To show the front or the back of the widget, just click “front” or “back” in the project files list. The “default image”, which you can see by clicking on the “Default Image” section in the project files, is how the widget appears when you first load Dashboard or first install the widget. By default, all of the elements on the front of your widget except text parts are included in your widget’s default image. When Dashboard has finished loading the widget, it’ll show the front of the widget.

If you do decide to edit the default image, you should ensure that it has the same dimensions as the front of the widget, or else Dashboard will stretch it to fit. If Dashcode feels too limited, clicking “Open in External Editor” in either window will let you edit the current image in the default PNG editor. If you don’t give the widget an icon, it’ll get the standard widget icon in the Finder when you save it, although when Dashboard asks if you want to install the widget, the icon will be blank.

To make changes to any of the widget views, you’ll need the Inspector palette and the Library. Clicking on the “Library” button in the toolbar will give you access to your iPhoto library, iTunes and your movies, all of which you can drag and drop onto elements of the widget to change its look. The library also lets you add widget objects, such as text, movies, buttons and menus using the “Parts” tab, although you’ll need to be able to write JavaScript to make most of these items do anything. In general then, we’d recommend you stick to “text” objects and “shapes”, since these don’t do anything except look good. Some of the media parts, which allow you to add a QuickTime movie from an Internet source, for example, are also worth investigating once you gain confidence in Dashcode.

After you’ve added any more parts that you need, the Inspector palette lets you modify anything you’ve added to the widget as well as existing elements, so you can change their font, colour, stroke width, fill, et al. If you’ve ever used iWeb or iWork, it’ll all be very, very familiar.

When you’re done, click on Run to test your widget. It’ll launch without Dashboard, but you can use it just as you would a normal widget. If it works the way you expected, great: use the File menu’s “Deploy widget…” or “Deploy widget to Dashboard…” to create a widget from your project; depending on which command you pick, you’ll either be able to save the finished widget somewhere on your Mac or add it directly to Dashboard. If the widget doesn’t work as planned, you can go back and make any changes necessary to fine-tune it.

Page 1 | Page 2 | Page 3 | All 3 Pages