Article Preview

COLUMN

Throw it on the Dash, Part III

Write your own Dashboard Widget

Issue: 4.2 (November/December 2005)
Author: Toby Rush
Author Bio: Toby Rush is a music instructor, consultant, freelance programmer, web designer, husband, and Dad in Greeley, Colorado.
Article Description: No description available.
Article Length (in bytes): 10,847
Starting Page Number: 42
Article Number: 4220
Resource File(s):

4220.zip Updated: 2005-11-17 12:42:42

Related Link(s): None

Excerpt of article text...

In the last two issues, we have gone through the process of creating a simple widget: a simple utility that exists on the Dashboard in Mac OS X 10.4 Tiger. This time, we'll take our simple widget and add some additional customizability to it.

Rolling the Dice

Our project thus far has given us a functional dice-rolling widget; the simple interface includes only the face of the die and a "Roll" button to roll the die. (If you didn't go through the project from the last issue, you can find an "in-progress" version of the project on the REALbasic Developer web site.)

We are now going to add the capability to limit the roll to a number less than six; for example, we want the user to be able to roll a two- or five-sided die if she wishes. To do this, we need to allow the user to set the die roll preference, and we'd like to have that value stored somewhere so the preference doesn't need to be reset every time the widget is opened.

The way that preferences are handled in widgets is to enable a "backside" to the widget; the user clicks a button and the widget appears to flip over, revealing controls for setting preferences. The button used to flip the widget over is a small, italicized, lower case "i" that fades in when the cursor is moved over the widget. Further feedback is given when the cursor is placed over the "i" button: a solid circle appears behind the italicized letter, begging the user to click it.

To create the "i" button, we will add the following HTML to our Dice.html file. Because the CSS file places the graphics where they need to appear, the exact place where these lines should be inserted doesn't matter much, so long as they are within the opening "<div id='front'>gt;" tag and its corresponding "</div>gt;" tag; I've placed it directly beneath the "<div id='roll'>gt;...</div>gt;" construction that defines our roll button.

...End of Excerpt. Please purchase the magazine to read the full article.