Mac OS X Widgets

Step 1

Create a folder on your desktop and call it HelloWorld.wdgt . The OS will probably pop up a dialog asking if you are sure, so click add.


Step 2

Now take a look at the folder and notice how it appears with the Widget icon.


Step 3

We will now remove the .wdgt from the end of the filename. Highlight the folder and open its Info window by choosing File > Get Info. Under Name & Extension, check the box where it says Hide Extension and then close the Info window.


The ".wdgt" is now hidden.


Step 4

We will now open the widget folder and add some files. Control+click your new HelloWorld widget and a contextual menu will pop up. Choose Show Package Contents


Step 5

A new folder will open up. Keep that folder open because you'll be dragging files into it.


Step 6

Create a PNG image file called Default.png and drag the file into the widget folder. This here 100x100 pixel image is a photo of Tom Igoe's small pink monkey. Few things are not improved by its addition.


Step 7

Now we will create a file called Info.plist using TextEdit. Open TextEdit and choose the menu item Format > Make Plain Text because you are creating a simple ascii file.


Step 8

Enter in the XML code shown on the left. Here, you are creating 2 pieces of data: a CFBundleIdentifier key that holds a unique string for that widget, and a MainHTML key, telling the dashboard which HTML file in your widget to use. I've used com.jtnimoy.widget.HelloWorld in this example, but please make up your own unique string.

Choose File > Save As and call the file Info.plist. Drag this file into your widget folder.


Step 9

Enter in the XML code shown on the left. Here, you are creating 2 pieces of data: a CFBundleIdentifier key that holds a unique string for that widget, and a MainHTML key, telling the dashboard which HTML file in your widget to use. I've used com.jtnimoy.widget.HelloWorld in this example, but please make up your own unique string.

Create an HTML file called index.html with the only the code "" and place that file into the widget folder as well.


Step 10

Your widget folder should have all three files in it, looking like the image on the left.


Step 11

Double click your widget icon and it will launch the dashboard. You will see whatever you put into Default.png appear as its own useless little widget. You can drag the widget around, and close it.

Congratulations! You have just made your first dashboard widget!

The rest of this tutorial will guide you through the rest of the widget basics beyond this entry point.