How to make your own Dashboard Widget with Dashcode
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.
- Dashcode Developer Beta
- Graphic editor (The Gimp/Gimpshop, Seashore, or Adobe Photoshop)
- Approximately 30 minutes
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.
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!