Introducing Dashcode

Dashcode lets you quickly and easily build elegant and compelling Dashboard widgets.
Created to meet the need of widget developers, Dashcode combines powerful visual layout tools with a code editor, debugger, and comprehensive package management into a world-class integrated development environment.
It lets you easily and quickly create powerful and useful widgets for yourself, your organization, or even for distribution to the world.

From the start, Dashboard widgets were designed to be easy to develop. They use the familiar and widely used Web technologies of HTML, JavaScript, and CSS.
Because of the use of standard Web technologies, it’s possible to develop a widget using only a text editor, such as TextEdit. However, very few developers are well-versed in creating both great graphical artwork and smoothly functioning code.
As well, it became apparent that the process of packing up a widget and tracking down bugs takes too much time when using just a text editor.

Dashcode was created to address all of these issues.
It takes care of packaging so that you don’t have to create a widget’s bundle by hand.
It provides a test runtime with a built-in debugger that’s a click away so that you don’t have to deploy your widget into Dashboard to test it.
And, it provides rich library of graphic elements for you to use to give your widget a compelling design. These features let you focus on making cool, unique, and polished widgets.

This article, part of the Technology Series for Developers, introduces you to Dashcode and touches on some of its major features.
You’ll soon be on your way to creating your own widgets with Dashcode.

A Good Starting Point

One of the first ways that Dashcode helps you to work faster is that it provides several common starter templates to build some of the most popular types of widgets.
The templates range from a basic “Hello, World!” widget to a fairly complex system monitoring widget. All of these templates give you a front and back canvas layout, an icon, and the necessary HTML, CSS, and JavaScript files.
By taking care of these common items that all widgets share, you’ll be able to get to the real task of working on what makes your widget unique that much more quickly.

For example, when you first create a project, you’ll be greeted with the following:

When you pick one of these templates, everything you need to get started is created and you can immediately run the widget and get feedback on what you need to do next.

For example, here are a few widgets created with the provided templates:
Behind the scenes, when Dashcode creates a new project, it’s managing all of the needed files for you. Instead of making you deal with the files in the Finder, Dashcode presents a clean interface to work with them.

For example, here’s a view of a new Photocast widget in Dashcode:

Dashcode Interface
This view is the primary Dashcode workspace and gives you access to all of the tools you’ll need in order to create, debug, and ship your widgets.
The left side of the Dashcode window holds the Parts Outline.
This gives you quick and easy access to all the various components that make up your widget.
You’ll notice that the parts outline gives you structured access to both the front and back of your widget.
As well, it gives you access to the attributes, default image, and icon for your widget.
The following figure shows the attributes editor for the widget.

Dashcode Attributes
The parts outline isn’t the only way to navigate through your widget.
You can also use the Search box. When you enter a search term, the parts outline is replaced with a Spotlight-style results listing.

Dashcode Search
The Parts Outline, as well as the Spotlight style search functionality, gives you quick access to any part of your widget that you need to work on.
Now that you can see how to navigate your widget, let’s look at actually working with your widget.

Workflow

To help you build a widget, Dashcode provides a helpful workflow for each of the templates it provides. These workflows are tuned for each template and will walk you step-by-step through the process of taking a template and creating a finished widget from it.
You can access this list by clicking the Show Workflow Button.

Dashcode Workflow
Working with the Layout Canvas
.
You can manipulate the position of any element in a widget by simply moving it about in the layout. Alignment guides and an absolute position indicator help you adjust your widget’s user interface to perfection.
You can also adjust the total size of your widget by using the resize-handle at the lower-right corner of the widget.

Dashcode Resize
You can also work with the attributes of any element by selecting the element and bringing up the Inspector (Option-Command-I).
For example, to change the attributes of the title text in the Photocast starter widget, you could select the text, bring up the Inspector and then change the Character attributes, as shown in the following figure.

Dashcode Inspector
As you adjust the properties for an object, Dashcode makes all of the necessary changes in the widget’s CSS file.
For example, changing the color and adding a drop shadow to the text above results in the following CSS rules being set:


#caption {
position: absolute;
text-align: center;
opacity: 0.75;
overflow: hidden;
background-color: rgb(111, 111, 111);
font-weight: bold;
font-family: Helvetica Neue;
font-size: 18px;
height: 26px;
color: rgb(255, 255, 0);
left: 0px;
top: -1px;
right: 0px;
width: auto;
text-shadow: rgb(0, 0, 0) 2px 2px 4px;
}

There’s a very direct connection between the actions you take in Dashcode and the resulting changes in the underlying files. Dashcode lets you work in both worlds easily.

Editing Code

Dashcode does everything possible to make it easy to work with your widgets graphically. When it’s time to add custom behavior, however, you’ll need to work with the actual source files.
To edit these files, Dashcode provides a fully-functional code editor for CSS, HTML, and JavaScript files.
For example, to further illustrate the connection between actions you take in the Dashcode user interface and the underlying files, here’s a view of the CSS tweaks shown above:

Dashcode Editor
The Dashcode editor is a serious coder’s editor.
It features automatic indentation, syntax highlighting, and on-demand code completion.
For example, if you were writing a CSS file by hand and wanted to get all of the possible completions starting with font, a quick click of the Option-Escape keys brings up a list, as shown in the following figure:

Dashcode Codecomplete
You can also quickly navigate your files by CSS selector or JavaScript function name, as shown in the following figure:

Dashcode Methodlist

The Library

Dashcode comes with a comprehensive set of UI widgets that you can use to create your widget’s interface.
You can open up the Library using either the Library toolbar button or the Window > Show Library menu. Not only does the Library give access to UI items, you can also browse your iLife photos, music, and movies to add them to your widget.

Dashcode Library

Running Your Widget

Once you’ve created your widget, testing it is easy.
Just press Command-R and it will run in an embedded Dashboard runtime.
You’ll even see it “splash” onto your screen.

Dashcode Run
Once started, your widget is fully functional and runs just like it would in the real Dashboard. Dashcode’s embedded runtime, however, gives you the ability to see runtime events and inspect your widget’s object model.
It also features the Code Evaluator which allows you to execute arbitrary JavaScript code against your running widget.
This allows you to get a better sense of how your widget is working and can help you debug problems.

As an example of using the Code Evaluator, if you want to work with the “Loading…” text at the bottom of the Photocast example widget at runtime, you can type the following into the Code Evaluator window:

document.getElementById("loading").innerText =
"Now loading the next photograph..."

Here’s an image showing what this looks like:

Dashcode Evaluator
With the Code Evaluator, you can manipulate almost every aspect of your widget’s runtime object model. For example, you could query the size of an RSS feed and display that information from within the Code Evaluator.
This allows you to try out snippets of JavaScript that you can then integrate into your widget once you’re happy with it.

Debugging Support

Dashcode wouldn’t be a true world-class development environment without one more important feature—a fully functional debugger.
You can set breakpoints in your JavaScript code and walk through your code step by step and inspect the values of your widget’s variables.
For example, you could set a breakpoint in the showBack method, which gets called when the user flips a widget over to access its preferences.
Once set, the debugger will stop the execution of the widget within the showBack method and let you step through your code.

Dashcode Debugger
In addition to setting breakpoints, you can also have Dashcode log every function and method call that happens as your widget runs, as shown in the following figure:

Dashcode Tracing
From tracing through your widget’s execution to setting breakpoints and stepping through your widget’s code, Dashcode gives you the right tools to make sure that your widget works the way you expect it to.

Get Started with Leopard

The next generation of the world’s most advanced operating system is now available.
Tap into the innovative technologies of Mac OS X Leopard and
design your products with new and compelling features.
With an ADC Premier or Select Membership, you have a range of developer resources from Apple engineers and experts, including ADC on iTunes, Coding Headstarts, the ADC Compatibility Labs and more.
Learn how ADC Memberships provide you Apple expertise. From code to market.