Apple's Dashboard: sample gadget


I’m not really a programmer; I’ve been a Perl hacker since ’88, though, after discovering v1.010 and asking Larry Wall where the rest of the patches were (his reply: “wait a week for 2.0”). If I’m anything, I’m a toolsmith; I mostly write small programs to solve specific problems, and usually avoid touching large projects unless they’re horribly broken in a way that affects me, and no one else can be persuaded to fix them on my schedule.

So what does this have to do with learning Japanese? Everything. I’m in the early stages of a self-study course (the well-regarded Rosetta Stone software; “ask me how to defeat their must-insert-CD-to-run copy-protection”), and authorities agree that you must learn to read using the two phonetic alphabets, Hiragana (ひらがな, used for native Japanese words) and Katakana (カタカナ, used for foreign words). A course that’s taught using Rōmaji (phonetic transcriptions using roman characters) gives you habits that will have no value in real life; Rōmaji is not used for much in Japan.

So how do you learn two complete sets of 46 symbols plus their variations and combinations, as well as their correct pronunciations? Flashcards!

The best software I’ve found for this is a Classic-only Mac application called Kana Lab (link goes direct to download), which has a lot of options for introducing the character sets, and includes recordings of a native speaker pronouncing each one. I’ve also stumbled across a number of Java and JavaScript kana flashcards, but the only one that stood out was LanguageBug, which works on Java cellphones (including my new Motorola v600).

When the misconceptions about Apple’s upcoming Dashboard feature in OS X 10.4 were cleared up (sorry, Konfabulator, it will kill your product not by being a clone, but simply by being better), I acquired a copy of the beta (why, yes, I am a paid-up member of the Apple Developer Connection) and took a look, with the goal of building a functional, flexible flashcard gadget.

Unfortunately, I’ve spent the past few years stubbornly refusing to learn JavaScript and how it’s used to manipulate HTML using the DOM, so I had to go through a little remedial course. I stopped at a Barnes & Noble on Sunday afternoon and picked up the O’Reilly JavaScript Pocket Reference and started hacking out a DHTML flashcard set, using Safari 1.2 under Panther as the platform.

Note: TextEdit and Safari do not a great DHTML IDE make. It worked, but it wasn’t fast or pretty, especially for someone who was new to JavaScript and still making stupid coding errors.

I got it working Tuesday morning, finished off the configuration form Wednesday afternoon, and squashed a few annoying bugs Wednesday night. Somewhere in there I went to work. If you’re running Safari, you can try it out here; I’ve made no attempt to cater to non-W3C DOM models, so it won’t work in Explorer or Mozilla.

There’s a lot more it could do, but right now you can select which character sets to compare, which subsets of them to include in the quiz, and you can make your guesses either by clicking with the mouse or pressing the 1-4 keys on the keyboard. I’ve deliberately kept the visual design simple, not just because I’m not a graphic designer, but also to show how Apple’s use of DHTML as the basis for gadgets makes it possible for any experienced web designer to come in and supply the chrome.

So what does it take to turn my little DHTML web page into a Dashboard gadget?


Stylesheet changes:

< .prefs { font-family: Verdana, sans-serif; font-size: 10px;}
---
> .prefs { font-family: Verdana, sans-serif; font-size: 10px;
>       -khtml-user-modify:read;-khtml-user-select:text; }

JavaScript changes:

80a81,82
>     if (gadget)
>         gadget.finishEdit();
82a85,94
>     if (gadget) {
>         gadget.openControlRects();
>         gadget.clearAllControlRects();
>         gadget.addControlRect(15,150,50,30);
>         gadget.addControlRect(75,150,50,30);
>         gadget.addControlRect(135,150,50,30);
>         gadget.addControlRect(195,150,50,30);
>         gadget.closeControlRects();
>         setTimeout ('gadget.runEditTransition();', 0);
>     }
115a128,129
>     if (gadget)
>         gadget.startEdit();
118a133,140
>     if (gadget) {
>         gadget.openControlRects();
>         gadget.clearAllControlRects();
>         gadget.addControlRect(5,5,250,180);   // entire form
>         gadget.closeControlRects();
>         setTimeout ('gadget.runEditTransition();', 0);
>     }

That’s it, pretty much copied right out of the preliminary manual. If anyone with the Tiger beta wants to try it out in Dashboard, download this file, unzip it, copy the bundle to ~/Library/Gadgets/, and double-click it.