ColourMod :: Dynamic (DHTML) Color Picker

I was thinking the other day that when it comes to Widget design there is a lot about the structure but not a lot about the process. I’m not sure what the best process of designing a widget is but I will at least describe my process.

The first thing that I did was to create a shortcut on my desktop to the widgets folder. This enables me to access all the widgets without having to click a ton of times. I also did this because I keep my current version of the widgets that I’m working on in the widgets folder, allowing me to be able to test it via the dashboard.

Within my widget package I put the necessary files in the root of the package (Default.png, Info.plist, Icon.png, index.html). I then create two folders, one called ‘images’ (you know what that is for) and one called ‘includes.’ Within the includes folder resides my .js files and .css file and any other files that I want to include.

Once everything is all set up I start coding and piecing my widget together. As I piece the widget together I check via Dashboard to make sure things are working as they should. If something isn’t working (typically a javascript function) I need to debug somehow. Dashboard is terrible for debugging as is Safari. This is where Firefox comes in handy.

Many Dashboard Widget commands don’t work in Firefox but Firefox has an excellent Javscript debugger that tells me exactly where my code is breaking, as well as a whole host of other information. I find myself testing my widgets in Firefox a lot.

Once I am all finished with my widget I drag a copy of it from my widgets folder onto my desktop. From there I add the .wdgt extension and then right click and create an archive.

If I need a screenshot I press F12 to show the Dashboard and then hit option-shift-4. This starts the built-in screenshot function. Hitting spacebar allows me to hover over the widget and take a screenshot of just the widget.

Now I’m ready to upload and submit my widget files for people to download.