For several months I’ve been meaning to build a Dashboard widget. There are several reasons for this endeavor – First, learning new tools and languages is a hoot. Second, widgets are your friend and won’t be going away anytime soon (read, it’s always good to keep up with technology). Finally, I’m all about sharing interesting code, tips and tricks through collaborative (open source) development. Read on for more about that last point.

I plan for this to be an on-going series, with each new post offering a new version of the widget. With each new release I will include all code in the form of a Dashcode project, which will offer a means for you to import the project, poke around to better understand how to build widgets and modify the code as you see fit. Future releases (and the accompanying blog post) will include descriptions, code snippets, screenshots and videos (screencasts) demonstrating concepts from visual layout to code examples to debugging.

Version 1.0 looks as follows, it’s quite simple, from both the feature perspective and development point of view – an image across the top, a listing of recent blog posts, and an option to get more information (clicking the little in the lower right flips the widget to show the reverse side).

I want this to become a community built widget. I’ll run with the first few releases, however, to take this widget to the next level here are a few things where I would welcome some expertise:

  • Artwork for a logo (see the Top 50 Widget List for some nice examples)
  • JavaScript / Dashcode expertise to help create unique & interesting functionality

All contributors will be acknowledged on the back of the widget. For example, as of release 1.0, the flipside looks as follows:

Depending on how this project progresses, and the support I can rally around extending the widget, at some point it may make sense to move this to Google Code as a community project. We’ll worry about that another day…

Without further ado, let me introduce the inaugural MacDevTips widget. The files included in the 1.0 release:

You have two options to give the widget a try:

  1. Install the widget on your Dashboard (download, unzip and double-click the widget)
  2. Run the widget from Dashcode (download, unzip, open and run the project within Dashcode)

In the next post on this widget I’ll demonstrate through a screencast how I created the widget in Dashcode. I’ll also bump the release to 1.1 by adding code to resize the widget.

It’s always good to have a goal, and for this widget I think we should shoot for landing in the top 50 of the Apple Dashboard Widget repository. With the right mix of features and an open source approach to enable others to learn/build widgets, I have no doubt we’ll reach that goal sooner rather than later.

If you’d like to get involved in building an upcoming release of the MacDevTips widgets, drop me a note and we’ll get things rolling!

If you are interested in working with the next beta of Dashcode, although there is no public announcement of the beta, it is available, read on for the details…

If you are not familiar with Dashcode, it’s a development tool created by Apple for building Dashboard widgets. The 1.0x release was bundled with Leopard. Dashcode is an impressive application, with drag-n-drop support and a no-coding option for creating a widget. Of course, as with any “no coding required” statement there is the unstated disclaimer that there are limitations on how far you can take a widget without digging into some code. And on that note, Dashcode offers excellent support for both writing and debugging code that make up a widget (CSS, HTML and JavaScript).

To give you an idea of what you can do with Dashcode, the widget below is an RSS feed of this blog that was created with version 1.0x.

You can try Dashcode 1.0 if you are running Leopard by installing the developer tools on the Leopard install DVD.

Interested to try the 2.0 Beta? There isn’t a download solely for Dashcode, however, if you download the iPhone SDK, Dashcode is one of many tools included in the download. If you do not have an Apple ID, follow the link near the bottom of this page to download the iPhone SDK, where you’ll find an option to create an ID.

Important note: if you import a 1.0 project into the beta, be aware that you might be able to work in the project with 1.0 if you save the project. To get around this, save any imported project with a new name (and/or location). An additional suggestion is to install the iPhone SDK in a different directory than the default /Developer. I opted to install the beta into /Developer/Beta such that I can use both versions of the tools.

In a screencast to follow, I’ll show you how I created the widget above with Dashcode 1.0.