How To Make Your Own Dashboard Widgets 1

Widgets

Share
How To Make Your Own Dashboard Widgets

Hey

Widgets are great, but how do you make them? The answer is use Dashcode. Dashcode is Apples answer to a super simple, yet super powerful way to drag and drop code for widgets. It really doesn’t take long to make a widget. In this tutorial I am going to show you the basic steps in how to create an RSS widget for use on your site. I have been playing around with it for the last couple of days and as a result I have got to know how the program works. Soon I am also going to produce a widget for this site, cool.

1) The first step is to install Dashcode. Dashcode is part of the XCode tools. You don’t need to install all of the XCode tools to get this to work. If you have the Leopard disk handy pop it in your CD drive and navigate to Optional Installs > XCode Tools > Dashcode.pkg. Install this app. It doesn’t take long and is placed in Developer > Applications. Not in your applications folder. It took me a while to figure that out.

2) Once you have figured out how to install Dashcode and found out where it is located open up Dashcode and you will be presented with a couple of default options for templates. This type of choice is very similar to many Apple apps. For RSS you have two options RSS and Daily RSS. I have chosen the first option. It really doesn’t matter which. Like I have said many times before, play. Follow through this guide so you have the general jist of what happens and then just play about if what happens, it is more fun that way anyway.


3) Once you click on the RSS template, you will be presented with a very simple interface. The left hand side contains all of the bits you are using. This could be images, sliders etc, they are contained here. As well as this the draw also includes images for the icon and more importantly settings for you widget. On the left hand side contains the interface used to build and design you widget. This is the very visual part of the interface. You can move parts around the canvas, resize your widget, pretty much do what ever you want. Widgets are built up from CSS, HTML and javascript. It takes a bit of a while to get use to but it is very easy to figure out how it works. Finally at the top there is the toolbar which contains tools such as play, to make your widget work, as well as the inspector and library. You will use these tools more and more when you start to play around with the application. The library button is very useful for inserting code for parts such as buttons or sliders.

When you have figured out how everything works drag and drop your RSS feed onto the widget. Alternatively your can go through the attributes option at the bottom.


4) It is worth noting at this point that you should look through the widget attributes and the source code of the widget, even though you don’t have to change anything it is very good to see how the underly coding works. You will slowly get an idea of how things work and what happens when you change things.


5) The final stage is to test and build you widget. To test click on the play button in the top left corner, this will open a mock style dashboard, you can then proceed to play with the the widget to make sure everything works. To build and export your widget go to File > Deploy Widget. It will save it out as the necessary file and you are done.


It is really easy to complete and doesn’t take long at all for a widget to be made. I am going to continue to fiddle with the code and produce a widget for this site. At the moment it is half done, I just have to finish off a few things. Stay tuned.


If you want to keep up with the latests post from Mac Tricks And Tips I recommend you subscribe to the RSS Feed.

Where To Next?

  • Subscribe To Mac Tricks And Tips