In yesterday’s Leopard Feature Presentation, I did my best to review Dashboard, even though it’s one of those features that I haven’t really taken part of. However, Leopard introduces another thing for Dashboard, but this new feature is aimed towards developers. It’s called Dashcode, and it’s an integrated development environment specifically for Dashboard widgets. Although it’s great for anyone who knows all of the JavaScript necessary for making a custom widget, it’s also advertised as being easy enough for anyone to make a widget without writing any lines of code. Yesterday, right after I finished my Leopard Feature Presentation on Dashboard, I opened up Dashcode to give it a whirl. Let’s take a look at how it went.

Because Apple considers Dashcode a Developer Tool, Dashcode is not installed automatically along with the rest of Mac OS X Leopard. However, if yo go into the Leopard DVD and navigate to the Additional Installs folder, you can install Dashcode from there, or you can install the full Xcode Developer Tools (which includes Dashcode).

Dashcode does not take widget development to the point where it’s as easy as, say, iLife or iWork. Indeed, I did find myself having to open up the Dashcode documentation to find my way around, so it really is a developer tool. However, as someone who had tried before to make a Dashboard widget and completely failed, I will say that Dashcode makes the process SO much easier. No longer do you have to write up the different CSS, HTML, JavaScript, and Info.plist files by hand, ram them together in a folder and then rename the folder with a .wdgt extension. Dashcode truly is the premiere development environment for widget development.

When you first open Dashcode, you’re presented with a list of templates to choose from, or you can create your own custom widget. The templates, however, cover most kinds of widgets, such as feeds, podcasts, photos, gauges, and others. These templates include almost all of the code already completed and almost ready to go.

The test widget that I developed to try out Dashcode was a widget that would count down until the Steve Jobs keynote, which I’ll assume that it will be on January 15, 2008, at 9:00 AM, as per usual. All I had to do was pick the Countdown template, and right there on the canvas was a Dashboard widget with the countdown, almost all finished for me.

The Dashcode window focuses on the canvas, which is where the widget is displayed, but on the sidebar is a list of the various elements of the widget, including the ability to switch between the front and back of the widget (the back being the part that you get to via the i button). The sidebar also gives you the options to display the Widget Attributes, Default Image, and the Widget Icon. In addition, a list of Workflow Steps is provided which nicely lays out for you all of the steps that you need to do to develop your widget, including links to take you to the places that let you accomplish those steps, and a way to mark which ones you can check off.

For my Macworld 2008 countdown, all I had to do was go into the Widget Attributes window, and under the Properties section, specify the target date and time and a few additional settings, as well as the name and version number for the widget, and I had a functional countdown widget. Pressing the Run button in the toolbar let me run the widget right within Dashcode to test it out.

However, not wanting to be the kind to stick with the default, I sought to customize my widget. Resizing the widget was as easy as resizing a window, and adding an image (I added the Macworld Expo logo) was also drag and drop. Dashcode provides the usual Inspector window that iWork users have come to know and (reluctantly) love. The inspector gives you an amazing amount of control over the various aspects of the widget. For example, I set the background color of the widget to match the Macworld Expo logo, and was able to turn on the “glass” effect that most Dashboard widgets enjoy, along with controls for fine tuning Shine, Tone, Horizon, Curvature, Corner Roundness, Opacity, and Stroke. There’s also similar controls for the Metrics of an object, and of course for getting text just right, which I was able to do for the back of my widget which, of course, gives all the credit to me.

However, one very important part of the Inspector window is the Behaviors pane, which is how you make objects in your widget do things. The behaviors pane includes a list of the available JavaScript actions to fill in, and to make the object do something, you select the event you want to customize and under the Handlers section, specify a function. When you specify the function you want, Dashcode automatically creates that function in the JavaScript source code and prompts you to define what the function does.

For example, I wanted the Macworld Expo logo in my widget to launch the Macworld Expo website when clicked, so I selected the image, went to the Behaviors pane of the Inspector, selected the onclick event, and entered “showMacworld” for my handler. In the source that opened, I just had to type “widget.openURL(’http://www.macworldexpo.com’);”, and that was it! That, and the identical line I did linking to my website on the back of the widget, represented the only two lines of code I used in developing my widget.

Obviously, I’m a newbie when it comes to widget development, but Dashboard has a number of things that even seasoned widget developers will enjoy. No longer will they have to worry about a bunch of CSS and HTML to design and layout their widget. Dashcode provides a true WYSIWYG environment for laying out and designing your widget, and Dashcode also includes a library of UI elements including pop-up menus, scroll bars, and more, along with a number of useful tools for developers who do write their own JavaScript.

My overall experience with Dashcode was a positive one. Although I did have to resort to reading a bit of the documentation to get started in the right direction, it was still fairly easy to figure out how to find my way around Dashcode, and I produced a pretty good first widget from my experience. Although I’m sure that Dashcode will be seeing more improvements in the future, there’s no doubt that every single Dashboard widget author is going to want to get their hands into this thing, and that this app will probably attract a number of people to get into the world of widget making.

Incidentally, you can download my Macworld Countdown Widget if you’d like.

Feature Satisfaction Rating:

Be sure to check out the other articles in the Leopard Feature Presentation, occurring throughout the month of November here on Webmacster87.info.

Tags: application, Dashboard, Dashcode, development, Leopard Feature Presentation, Mac OS X Leopard, Macworld, review, Software, widgets, XCode