Dashcode Tutorial

Apple has released a preview version of Dashcode, a feature of Mac OS 10.5 (“Leopard”). With this tool, you can easily create Dashboard widgets for all kinds of purposes.

You can download the preview [here](http://developer.apple.com/tools/dashcode/), you’ll need to register a free account with ADC (Apple Developer Connection), but you can also use your existing Apple ID (probably from the iTunes Store) if you have one.

In this post, I’d like to take you step-by-step through the process of creating a RSS Widget for Distant-Help (or whichever site you want one for).

First of all, you’ll need to download and install Dashcode at the URL given above. Once you launch it, the following window will greet you:

Select *RSS* and click *Choose*. Your window should look something like this:

As you can see, Apple doesn’t leave you at the very beginning of creating a widget, there’s already a template you only have to fill with your content and you’re good to go. Of course, you can also customize it to your wishes, from the looks to the core JavaScript code.

Now, the first thing we’ll want to do is give our widget a name. To do so, double click on “My RSS Feed” and type in the name you want for it:

Not only does Dashcode give us a template to start from, there’s also the “Workflow Steps” panel that tells us what we need to do and what we can optionally do:

If you watch quickly enough, the row that we need to edit even lights up once to show us where our attention should be right now. The *Feed URL* is where we enter what source our data should come from. We can also specify how many posts should be displayed, for example only the 30 most recent ones, or all posts from the last month, etc.

In the next step, we give our widget an *Identifier*, a unique name. The syntax is com.*username*.widget.*Identifier*

We’ve now completed all that is required for this type of widget, and in fact you can already click the *Run* button at the top left of the Dashcode window to have a look, with animation and everything:

Let’s put the finishing touches on our widget; every widget has an icon, so go ahead and click on *Design widget icon* in the Workflow panel:

Clicking on *Widget icon composer* will take you to a blank icon on the right, and you can drag in any image file:

Alrighty, the last thing we might want to add to our widget is a search box to filter the posts. Clicking on *Untitled* (that is, if you haven’t saved your widget already) will take you back to the widget designer. Click on *Library* on the top right of the Dashcode window to bring up the Parts Library and drag your search box whereever you want it:

Dashcode provides the code for searching the feed, we just have to bind the search box to that code. To do that, right click (or control-click) on the search box, and click *Events* → *onsearch*

In the box that appears, type *search*:

Once you’ve clicked *Add*, you’re done! You can hit the *Run* button to test the widget locally, save the project and choose *File* → *Deploy widget…* (command-option-S) to save the actual widget file (.wdgt) that you can send others!

Of course, there’s much more you can do with Dashcode, this is just a basic tutorial to get you started. You can download my version of the widget [right here](http://www.distant-help.com/download/DHBlogReader.wdgt.tgz).

Similar Posts:

• Dashcode Tutorial II – Buttons
• Just add water
• Boardtracker activated
• Mozart in mp3 legaly, till Friday 10th November.
• Google-bombing energy giant Eon

Related Reading:

Topological Library: Part 1: Cobordisms and Their Applications (Series on Knots and Everything)

The iPod Book: Doing Cool Stuff with the iPod and the iTunes Store (5th Edition)