How to make your own Dashboard Widget with Dashcode

Making your own Dashboard Widgets for Mac OS X is nothing new, but making your own Widgets using the Dashcode Developer Beta changes the entire process. Apple has taken the ease of use of Xcode and whittled it down to scale, providing all the tools necessary to quickly and easily develop your own Widgets. In this How To I'll show you how to go about creating a Download Squad RSS widget. Follow along if you like, but by all means feel free to improvise.

This is a very simple How To and is not intended to teach you how to code a Widget from scratch, but to show you how easy it is with Dashcode to create one. If you would like to find out more about developing Dashboard Widgets, check this guide on Apple's site.

Things you'll need:

• Dashcode Developer Beta
• Graphic editor (The Gimp/Gimpshop, Seashore, or Adobe Photoshop)
• Approximately 30 minutes

1.) Download and install the Dashcode Developer Beta. To download it you will need a valid Apple Developer Connection account, but don't worry if you don't have one - you can sign up for free!

2.) Once installed, launch Dashcode (located in /Developer/Applications), and at the template selection screen, select 'RSS' and click the Choose button.

Our new RSS feed widget!

As you can see, we begin with a fully assembed RSS Widget which is ready for customizing. No coding necessary, just an RSS feed URL! Now, as you can see in the screen shot it says that you simply need to drag an RSS feed URL into the window, but that would not work for me. So I took a slightly different route...

3.) In the navigator to the left, select 'Widget Attributes', and either drag an RSS feed URL into the 'Feed URL' box, or type in the URL by hand.

4.) While we're editing the Widget Attributes, specify a new Widget Identifier at the top of the page. Mine is set to 'com.cbrentano.widget.Untitled' - they generally follow a reverse domain name format (something that I believe came from Java) - I'm going to change it to 'com.downloadsquad.Widget' instead. This would also be a good time to save your work!

5.) Once you're done with both those items, let's switch back to editing the look of the widget by selecting 'front' in the navigator to the left. You'll see that the feed URL is displayed in the Widget's scroll area.

6.) Customize the display of the Widget to your liking by adjusting colors or adding graphics. Bring up the Inspector by clicking its icon in the toolbar, and then click on the blue gradient at either the top or the bottom of the widget. On the second tab of the Inspector you can adjust the gradient colors, the corner roundness, opacity and more. Experiment with the values until your Widget appears the way you like. I made my top gradient a subtle white to gray, and the bottom a light green to dark green. You can also drag and drop a graphic into the editing window if you'd like to add something unique to your Widget - I added the Download Squad logo to mine.

Here's how my Widget looks so far!

7.) Test it out! Take your Widget for a test-drive by clicking the Run button. It will plop itself on screen, and then if everything is working properly you'll see the stories displayed from the RSS feed you specified on step #3. If it says "No Items Found" then the RSS feed URL might be wrong - double-check the URL and make sure you entered it correctly under Widget Attributes. Once you're done testing, click the Stop button in the toolbar.

8.) Let's give our Widget an icon, shall we? Select Widget Icon from the navigator, and then drag-and-drop an image into the window well. You'll then be able to position it within the icon boundaries, and resize it if necessary.

Extra Credit: For all you HTML, JavaScript or CSS ninjas out there, if you'd like to even further customize your widget's behaviors or display, click the View toolbar button and select "Source Code" - you'll be taken straight to the JavaScript file for your widget, where you can tweak your Widget to your heart's content. You can select which file from the Widget Bundle you want to edit as well - click the View toolbar button again and select Files. Then in the file list you can select the HTML, JavaScript or CSS document for your Widget, and it will load the file in the Source Code display area.

9.) Once you are satisfied with the look and feel of your widget, it's time to put it to use on your Dashboard! From the File menu, select 'Deploy Widget to Dashboard...' - you'll be asked for a filename, and the minimum version of Mac OS X required for your widget. I'm not exactly sure what the difference here makes, so I would just suggest selecting 10.4.3. (Can anyone shed any light on this?)

After you click the 'Deploy' button you'll be asked by the Widget Installer if you would like to install and open your new widget, click the Install button and the Dashboard will appear. Select a location on screen for your Widget and click the Keep button. Now your new Widget is at home on your Dashboard!

I thought that here at the end I could provide you readers a link to download my Download Squad widget, but there's no fun in that. I want to see what you can come up with instead! Go forth and create your own, unique Download Squad RSS widget (or anything you can come up with in Dashcode) and post a link to a screenshot in the comments!

Tags: apple, commercial, dashboard, dashcode, how to, howto, mac, mac os x, widget