If I told you to build an application using mainly HTML and Javascript, you’d probably think it was 1996 all over again. Surely you’d argue that you’d rather use PHP, Ruby or even .NET to create your state-of-the-art application. However, truth-be-told, the combination of simple HTML and Javascript creates an incredibly stable platform to build just about anything.

Apple’s latest operating system, Mac OS X 10.4, has a built-in feature called Dashboard. Dashboard is, in effect, a platform to build or use small applications built with HTML and Javascript (among other things) to help you with tasks that needn’t be handled by larger apps.

For instance, checking the weather online has been a rather simple process for some years. Typically pointing your browser to Weather.com, typing in your U.S. Zip Code, and saving that page as a bookmark/favorite made it quick and easy to access your local weather whenever you wanted to. With Dashboard, you can access the weather on your desktop quickly and easily without ever needing to bring up your browser, find your bookmark/favorite and loading the page. [Screenshot of Weather widget] This example is obviously not a critical part of your everyday computer use, but using Dashboard Widgets can actually save huge amounts of time.

Take for example the WikityWidget. This Widget allows you to run and manage a Wiki right within Dashboard. This will be, by far, my most used Widget going forward. Although built with the professional in mind, WikityWidget can be extremely useful to everyone and save countless hours. How so? Have you ever forgotten something more than once? Say, as an example, you are constantly forgetting the ingredients to your Mother’s homemade apple pie. Simply add the recipe to your personal copy of the WikityWidget and you’ll have it forever! As a developer, constantly trying to remember solutions to some of the most troubling problems can be impossible. WikityWidget will save me, and many others countless hours of Googling to find the answer again.

This brings me to FlickIt, my attempt to save the World time and even possibly money. FlickIt, in general, gives you instant access to your Flickr photos to use anywhere. For bloggers that use a Mac, this is a must-have Widget. For bloggers that use a Mac, and use MarsEdit or Ecto – this is a critical Widget to have in your arsenal.

Every photo on Flickr, which you own, has a “Blog this” button on the page. Flickr has provided a relatively easy way to get your photos from Flickr to your blog. However, blogging multiple photos via Flickr’s “Blog this” feature can be cumbersome and irritating to say the least. That’s where FlickIt steps in and does the job for you. Making it quick and easy to access the HTML, Markdown or even bbCode that you need to post your photos just about anywhere on the Web. FlickIt also has a feature to make it easy to email your family and friends photos that you’ve posted to Flickr.

Developing FlickIt

Ok, now onto the meat and potatoes. Having a strong knowledge in HTML, CSS and Javascript is definitely a plus. However, keeping a book handy is also a good idea.

Apple’s documentation makes creating your Widget more than clear, and referring to their tips is definitely recommended. Apple has included some built-in resources for Dashboard, which any Widget developer can utilize. This makes creating Widgets much faster, in that you will have some valuable resources already included on the user’s system.

A Widget consists of a few standard files, but is not limited to this list in anyway. A HTML file, a Javascript file, a CSS file (unless you write your CSS inline), 3 PNG files, and a Preference List file.

The HTML file is typically your starting point. Almost everything your Widget needs usually resides in this file. Think of it this way, this HTML file holds the structure for all the features your Widget includes.

The Javascript file contains all of the functionality your widget requires to function. For instance, the functions for animating the “flip over” animation would be in this file. Apple has provided some prebuilt Javascript functions to make your Widget fit in with the rest. This way your Widget doesn’t take 15 minutes to flip over, when everyone else’s flips over in 1 second.

The CSS file is typically used for styling and positioning various elements inside of your Widget. Just like CSS is used to style and position elements on a Web page, the same rules apply for Widgets. Making the learning curve to making your widget practically zero.

The PNG files are used as background images for each “panel” your Widget contains. The 3-standard PNG files are; Default.png, Front.png and Back.png. Default.png is loaded when your Widget is being loaded. This way you can display a friendly “loading” message to the user. Front.png is used for the “first panel” which is displayed after the Widget loads. Back.png is used when the user flips your Widget over to reveal the settings or preferences panel for your Widget.

Although these are the standard files and filenames used for the Widgets that are currently available, you are not limited to the number of files nor their filenames in any way. Your Widget can contain as many files as you’d like. Many Widgets utilize Applescripts to do some high-end system functions which would otherwise be practically impossible using Javascript only. For instance, you can use Applescript to call Unix commands to do various things like uploading files to remote servers, using curl, or even just saving a file to the desktop. Using Applescript can take your Widget to a completely different level.

Widget plugins is something that I have not yet gotten into, but the premise is this. If you are a software developer, and would like to have a Dashboard Widget to control various functions found within your application, you can use a Widget plugin. For instance, I use MarsEdit to author my blogs – having a Dashboard Widget to quickly get information from various resources into MarsEdit would be killer. Dear Mr. Simmons, I’d be more than happy to help you out with that!

Building FlickIt was very fun, and I look forward to extending its features in the near future. So far I have received a number of emails stating that they love FlickIt, and that its saving them a lot of time. That is just what Apple’s Dashboard, and FlickIt, were created to do.

As users submit, and I have time, I will be posting articles on ChanceCube.com entitled: Practical uses of FlickIt – which will show the enumerable amount of ways that FlickIt can be utilized.

Save time on development

Packaging your Widget can become a pain. Constantly copying, pasting and renaming your project folder becomes old fast. I’ve put together an Automator Workflow that makes it quick and easy to package your Widget. Also included in this package are a few small Javascript functions I found useful for my Widget.

Share and Enjoy

  • StumbleUpon
  • Reddit
  • Digg
  • del.icio.us
  • Facebook
  • TwitThis

Related posts:

Developing Dashboard Widgets
Yahoo! Buys Konfabulator
W3C Proposes Standards For Widgets
iBegin Launches branding free Weather Widget
Shortstat Dashboard Widget

Hope you like that post!

Forever Geek is a resource for all things geek. You can stay tuned by having the latest FG news delivered to you for free via RSS.