Chapter 1 - Define the Dashboard Widget.
This tutorial is for those who are new to widget development and are somewhat familiar with html. Tt is however not required.
In this tutorial, we will make a widget that counts the days left to a certain date.
Before you start this tutorial, you will need 2 programs, one for coding, and one for making graphics.
For the coding, I recommend SubEthaEdit, but apple's TextEdit which is included in Mac OS X will work as well.
For the graphic, I use Photoshop. However, any graphic program you like will suffice.
There are some things every widget needs to work:
1. A default background image that defines not only the background image but also the size of the widget
2. An icon, it's not "required" but if you don't have one, the widget icon will be a black square with no individuality.
3. An info.plist file that contains the necessary information elements of the widget.
This file is most easily edited with the "Property List Editor" included in the Apple "Xcode Tools", but you will not need those tools in this tutorial. All you need is a text editor and a program in which you can make your graphic.
I'll start this tutorial with the plist file "Info.plist" which you can download here.
There are 5 properties that should be included in a widget.
1. CFBundleDisplayName - The widget display-name
2. CFBundleIdentifier - The widget identifier
3. CFBundleName - The widget name
4. CFBundleVersion - The widget version
5. MainHTML - A link to the html file it should load on start, if you are into web, you can think of the file as index.html
Now, if you open "info.plist" in your text-editor, you should see this:
You will see all the key elements I wrote about between the <key></key> tags, and the value between the <string></string> tags.
Change them to whatever you see fit your widget.
When the plist file is ready, we should make a background image for your widget. Think carefully now because this will be the foundation of your widget. There are some things you should think about when you make the graphics for your widget.
1. Don't make it larger than it has to be!
2. Try to make it blend in with dashboard if it suits the widget.
3. Make the shadow look somewhat the same as the rest of the widgets
When you are done with the background for your widget, save it as 24-bit PNG. This image format supports alpha channel and is the best choice.