Dev Chair : Create a Tumblr widget using Dashcode
Meanwhile, we like Tumblr here at Download Squad. It is great for posting quick snippet of content onto a blog-like web page without the need to compose a full length blog post. Tumblr provides a great bookmarklet to make this process even easier. You just click on it to post the current web page in your browser to Tumblr, or you can select some text which becomes a quote on your Tumblr.
Last week, I realised that Tumblr makes an ideal candidate for a Dashboard widget! So I decided to combine these two ingredients and see how easy it is to make a Tumblr widget using Dashcode.
Creating the widget
After firing up Dashcode, the first thing it asks you is which type of widget you want to create. Since a Tumblr widget does not fit within the pre-defined types (Countdown, RSS, Podcast, Photocast, Quartz Composer, Daily Feed, or Gauge), I pick 'Custom'. This tells Dashcode to present a completely blank widget in the Canvas window.
Adding UI elements to the widget canvas is very easy. Just drag the UI element from the 'Library' and drop them onto the canvas. The 'Library' not only includes standard elements such as a text box, text field, button, etc. but also photos from iPhoto and QuickTime movies from iTunes and iPhoto.
Then use the 'Inspector' to set the UI element's properties (e.g. position, name, colours, etc.). You can also use the 'Inspector' to create Javascript event handlers and Dashcode automatically creates the corresponding Javascript function for you.
It was at this point that I suddenly realized a widget is just a web page! Pretty obvious you may think but being a predominately desktop application developer my initial mindset is that widget is like a mini-desktop application.
Talking to Tumblr
Tumblr releases the Write API this week which makes it real easy to create entries in Tumblr. To make a long story short, it involves making a HTTP form POST request to http://tumblr.com/api/write. This is easily done by using the XmlHttpRequest object in JavaScript, and send the data as form data in query strings format. If you have been involved in AJAX, you probably already have an intimate relationship with XmlHttpRequest!
Testing the widget
Testing and debugging the widget is what Dashcode is good at. Before Dashcode, you would have to run the JavaScript code in Safari to test it out. Not a big deal you may say, but after doing this many times over the course of debugging the code, it can become a pain in the butt really quickly!
Dashcode integrates debugging into the IDE so now it's simply a click of a button to start the debug session. And since you are now debugging within an IDE, you have some of the usual IDE tools at your disposal. You can set breakpoints and step through them. There is an 'Evaluator Window' to check out object values, and a 'Stackframes & Variables' window to show all the variables in the current stack.
The Good, the Bad, and the Ugly
So what is good about Dashcode? If the type of widget you are creating falls into one of the pre-defined type then Dashcode will make it almost trivial to create your own widget. More effort is required for creating a custom widgets but Dashcode's drag-n-drop interface and great IDE make it very straightforward; letting you jump into the coding very quickly.
The bad parts? The most glaring omission in this beta release is that the documentation, though functional, is still very barebone in terms of teaching new users how to create a widget. The documentation also doesn't refer to any existing Dashboard documentation on Apple's site which is rather strange. Furthermore, there is only a single reference to Safari's documentation which is also strange since a widget is basically a Safari web page and the user has to know how the JavaScript DOM works in Safari in order to get a widget to do anything mildly interesting.
The ugly part? It is so much fun creating widgets that I can spent all weekend playing with it! Maybe I should file a bug report with Apple about my inability to do anything else from Friday to Sunday?
