Create A Widget From The Ground Up With Dashcode
by Tony on July 6, 2008
This tutorial will show you how to create your own widget using Dashcode. You can create all kinds of widgets with Dashcode including Photocasts, Guages, RSS Feeds, Maps and anything else you can think of.
You’ll need Dashcode installed on your Mac. You can download Dashcode free from Apple or you can use your Leopard install disk to install Dashcode.
For this example, we’re going to create a custom RSS widget for your favorite website AppleSlut.com! Of course, you can create this RSS widget for any website with an RSS feed, but we’ll use this website for now.
Sounds good? Let’s rock…
Open Dashcode
Dashcode will be installed in your Developer folder by default – NOT your regular Applications folder as shown above. Open your hard drive > Developer folder > Applications > Dashcode. Double click Dashcode to open it.
Select RSS
Now that you’ve got Dashcode open, you should see the list of Widget Templates.
1. Click the RSS template.
2. Click Choose at the bottom of the screen.
RSS Widget Started!
Your RSS Widget has now been started and you should see the screen above. Got it? Great… Next step…
Grab Your Favorite RSS Feed
1. Open Safari and go to www.AppleSlut.com
2. Click the blue RSS button as shown.
Find The Feed URL
Now you should see the address: feed://appleslut.com/feed – This is the URL we need to plug into our Widget. We’ll Copy and Paste it. Highlight the entire URL so it turns blue like shown. (To highlight it, just click at one end and drag your mouse all the way across to the other side.)
Copy And Paste The Feed URL
Go to the Edit menu and select Copy
Back To Dashcode
Go back to Dashcode and click on the little arrow next to RSS Properites as shown.
Select The Feed URL Field
Click inside the empty field next to Feed URL. The Field should be outlined in blue when it’s selected.
Paste The Feed URL
Go to the Edit menu and select Paste from the drop down. This will paste the Feed URL we copied from AppleSlut.com
Mark As Done
In the Workflow Steps area, Find the Provide RSS Feed box. Click Mark as Done. This will show us how many tasks are left so we can keep track of what’s left until our Widget is ready to be used! Cool right?…
Set Attributes
Click on the Set Attributes button to open the panel.
Click The Attributes Arrow
Click the tiny arrow next to Attributes to open the next area.
Add The Widget Itentifier
Every Widget needs an original “Widget Identifier.” The Widget Identifier must be written in the required format or it won’t work. Just type this exactly to make sure it works: com.appleslut.widget.rssfeed
Mark As Done
In the Set Attributes panel, click Mark as Done to show you’ve finished this step.
Test Your Widget!
In the top, left corner of the screen, click on the green Run arrow to test your widget and make sure it’s actually working!
It Works!
You’re RSS widget should be working just like it will in the Dashboard. Use the scroll bar to see all of the previous posts on the blog.
Stop The Test
In the top, left corner of the screen, click on the red Stop button to end the test and get back into editing mode.
Give Your RSS Widget A Cool Name
Click on Untitled in the left panel to edit your Widget.
Name The RSS Widget
Now double click on the text “My RSS Feed” to begin editing. Type something cool like “AppleSlut.com Rules!” – or something else. Totally up to you.
Customize The Font Size & Color!
Click on the blue Inspector button to open up the text editor window
Go Nuts!
In the Text window, you’ll have the chance to change everything about the text. The font family, style, color and size. You can even add a shadow to the text. Go crazy… but make it look good!
Customize Your RSS Widget Even More
If you want to change the look of your widget, just click the buttons shown as 1, 2, 3 and 4 above. They’ll bring up new ways to change the look of your widget. Check out the Help files in Dashcode for more information on customizing your widget.
Deploy Your Widget!
You’re almost done! Just a couple quick steps and you’ll have your custom widget done…
To get your widget ready to use in Dashboard, you’ve got to “Deploy” it. To do this, click on the File menu and select Deploy Widget from the dropdown.
Name & Save Your RSS Widget
1. Give your widget a name you’ll remember. I went with “AppleSlut RSS Widget”
2. Select the 10.4.0 backward-compatible widget version – just incase you give this widget to somebody else!
3. Click the Save button
Install Your Widget!
Your new widget is now sitting on your desktop. Double click it to start the install!
Confirm The Widget Install
Click Install to continue
LAST STEP!
Just click Keep and you’ve got a brand spankin new widget! Congratulations!
6 comments
wicked.
by Eirn on July 7, 2008 at 11:12 am. #
thanks for writing this post. very cool.
by Chris O. on August 8, 2008 at 7:45 pm. #
You’re welcome Chris. Good luck with widgets & Dashcode!
by Tony on August 10, 2008 at 6:38 am. #
i know the post i am responding to is rather old, but….
i have built an rss feed widget with dashcode and saved to my desktop. (I wish i’d seen your instructions before i did it, would have made it even easier.)
i have read, pretty much everywhere, that the widget can be emailed to whoever i like.
but i can’t. i can’t even select it. (its icon is gray.)
am i missing something in the setup? or….is it not meant to be emailed?
by brett howlett on April 28, 2009 at 2:02 pm. #
Hi Brett – I don’t know if the widget can be emailed. You could try going back to the “Install Your Widget” step – but don’t install. Instead, create a folder on your desktop then put the widget in the folder. Now you should be able to hold Control and click the folder, then select “Compress.” This will create a zip file that can be emailed… Might work, but I haven’t tried it.
by Tony on May 3, 2009 at 12:04 pm. #
tony,
you’re a genius!
creating the zip did the trick…and emailed just fine.
thanks for your help.
b
by brett on May 4, 2009 at 5:36 am. #