Etch-A-Sketch Technical Support

I can't really describe how I found myself there, but this Etch-A-Sketch FAQ gave me quite a laugh today.

Wanted: Eclipse IDE widget to quickly change the editor font size

Does anyone know of an existing Eclipse widget / plugin that puts a quick font-size dropdown on the IDE toolbar? If so, please share and the Flex presenter / speaker community will give you a hug.

Can y’all see this in the back?

Changing the font size of the Eclipse text editor is a royal pain. It is a completely undiscoverable feature. It seemed that all the 360 Flex sessions I attended had the same scene:

Presenter: OK, let’s look at some code now. (switches to the IDE, either Flex Builder or full-blown Eclipse)

Guy At The Back Of The Room: Umm. Can you increase the font size so that we can read it back here?

Presenter: Oh, OK, no problem. (fiddles with Eclipse for a few seconds) Umm. Anyone know the secret handshake?

GATBOTR: Preferences —> General —> Appearance —> Color And Fonts —> Text Font —> Change …

Presenter: Whut?

GATBOTR: (louder and more slowly, as if talking to one's great Aunt Ethel) Preferences —> General —> Appearance —> Color And Fonts —> Text Font —> Change …

Presenter: (kinda sorta fiddles some more, and eventually stumbles onto the right path) OK, got it.

GATBOTR: Thanks.

I think the brain is wired to immediately forget such painful experiences. It almost made me long for the intuitiveness of Ctrl-Alt-Delete again. As the conference progressed, some of the presenters got wise early, and had pre-configured their IDE for “presenter mode”, but if they were like me, they still had a hard time finding it buried in the UI. I had to search the Eclipse online help the night before my presentation in order to find the setting.

Turn down the suck

Now, I’m not trying to bash Eclipse here. Really. I like Eclipse. I have all their albums.

I’m just guessing that this UI just sort of grew unwieldy over time, rather than by design. Maybe it is already scheduled to be fixed in the 4.x codebase. But the current experience sucks.

Preferences —> General —> Appearance —> Color And Fonts —> Text Font —> Change …

I'm counting seven clicks (7!!!) until I see a familiar font size selection dialog. There are at least three glaring issues at play:

1. The "Colors and Fonts" category is too long, and by default is clipped to "Colors an". So I can't even just use the tree control to expand and navigate the categories. I have to click each expanded item to see if its full name gives me some clue about what it controls.
   
   
2. Once selected, the "Colors and Fonts" panel displays the list of settings, and the "Text Font" entry is selected (it is highlighted in blue), but there are no obvious controls that suggest "click me to change the font".
   
   
   
3. So now you click the already-selected entry "Text Font" and viola! The "Change" and "Reset" buttons appear like magic.
   
   
4. OK, I know I said 3 issues not 4. I'll concede that this one might just be me. Grouping colors together with fonts doesn't make sense to me. I assume that each language controls its own syntax highlighting, so I just don't expect to be setting colors when I'm setting fonts.

How to help

A savvy Java developer (ie. not me) can probably create a wee widget to sit in the IDE toolbar and add a font size dropdown. No font face changes, no color changes, just make the existing font bigger for the text editor (or better yet, the text editor and any console/output/trace buffer windows).

There now. Assuming this saves 2 minutes of a 60 minute session, the widget you’ve just created has increased the productivity of the presenter by 3%. Not bad! U R AWESOME!!!!

Using SWFObject and the AIR install badge for easy deployment

One of the topics I spoke on at 360|Flex was how to add an "Install Now" button to a page, using the AIR install badge from Adobe. This is very easy to do, even though this post is long-ish. Explaining what is happening takes longer than the dozen lines of JavaScript required to get this to work.

I have an example "Install Now" button for DryerFox in the blog sidebar. This button will provide a one-click install experience for your users.

Quick-n-dirty summary for adding an "Install Now" button.

Copy foo.air to your web folder. This is your app's AIR application bundle.

Create a 215 x 100 image of your app, and save it as foo_badge.jpg in your web folder.

Copy swfobject.js to your web folder. Thanks to Geoff Stearns for the fabulous SWFObject.

Copy badge.swf to your web folder.

Add the following HTML snippet to your page:

<script type="text/javascript" src="swfobject.js"></script>

<div id="foo_flashcontent">
Whoa. You need to install <a href="http://www.adobe.com/go/flashplayer">Adobe Flash Player</a>.
</div>

<script type="text/javascript">
var so = new SWFObject("badge.swf", "badge", "217", "180", "6.0.65", "#FFFFFF");
so.addVariable( "appname", "Foo" );
so.addVariable( "appurl",   "foo.air" );
so.addVariable( "imageurl", "foo_badge.jpg" );
so.addVariable( "airversion", "1.0.M4" );
so.addVariable( "buttoncolor", "008811" );
so.addVariable( "messagecolor", "000000" );
so.write("foo_flashcontent");
</script>

Details - Under the hood

The SWFObject script will replace the <div> section labeled "foo_flashcontent" with the badge SWF, and populate its required Flashvars with your apps resources. Note that it is important to include some sort of fallback text in the <div> in case no Flash player is found.

Flashvar name	Description
appname	The name of your app. This name will be displayed by the badge in various messages below the "Install Now" button. Messages like "In order to install FooApp, the AIR runtime will also be installed".
appurl	The URL of your app's AIR bundle. The URL can be relative to the same folder as the page, or can be an absolute URL pointing to some other domain.
imageurl	The URL of the 215 x 100 image (JPG/PNG) to display inside the badge. As with the app URL, this URL can be relative or absolute.
airversion	The version of the AIR runtime required by your app, as specified in Foo-app.xml. For Moxie beta 1, this is "1.0.M4".
buttoncolor	The color of the "Install Now" text in hex RRGGBB format.
messagecolor	The hex RRGGBB color of the message text displayed below the badge.

Clicking the badge will do the following:

Auto-update the Flash player. The user's current Flash player version is examined and the script will update to the latest Flash Player if required. This bootstrap works as far back as Flash player 6.0.65 (released in December 2002), so that gives pretty good coverage. Will a 2002-era computer run a useful AIR app? Hmm. Probably not.

Auto-install the AIR runtime. Verify that the AIR runtime required by your app is installed, and auto-install it when missing. Each AIR app is tied to a specific runtime release, and the install badge knows how to deal with this correctly.

Auto-install your AIR app. This is, of course, what you really wanted to do in the first place.

Security Issues

Just to be clear, all of the above installation operations take place in the context of the active operating system user account. No OS security restrictions are bypassed, so the user will need admin or install privileges to succeed. This is a good thing.

Churn, Churn, Churn

The badge.swf example was added to the Flex SDK as part of the Flex 3 (Moxie) public prerelease, but that version of badge.swf was rather buggy. Adobe quickly released a patch and you will need to use the patch and avoid the one included in the SDK. I'm sure this will be fixed in the next public code drop. For now, avoid the code in INSTALLROOT/sdks/moxie/samples/badge.

Update:
Also make sure your web server is configured to know the mime-type of .air files. (*.air=application/vnd.adobe.apollo-application-installer-package+zip) More detail on the mime type is found in Mike Chamber's post here.

Resources:

Tom Cornilliac's excellent post on the AIR install badge. (It is just missing the SWFObject example)

So here's the downside of having a dozen designers on staff

So I'm in Seattle for the 360 Flex conference, speaking about DryerFox yet again, and the "Your Mom" jokes start flying fast & furious from the entire EffectiveUI team.

Saying "your mom" to an EUI-er is like saying Aloha to a Hawaiian. You can use it as a greeting, as a goodbye, or in place of whitespace or punctuation.

So I'm feeling a little punchy at the end of a day and I spam this silly self-portrait to the entire company.

Suddenly, our president Anthony spams back with "$20 to the best Photoshop of Doug's pic by Friday". Everyone knows that designers are completely shameless when a twenty is waved in front of them so now I've got the equivalent of Something Awful's PS forum descending like vultures on my boyish good looks.

I'm not the judge of this contest, but I'm pretty sure Patrick will win with this entry, which I absolutely love!

Out of respect for you Patrick, I will always say "Your Mother". :-)

var office:Office = new Office( "EffectiveUI" );

I've been offline for longer than I wanted, and now I've got too many blog post ideas and not enough time.

So first things first, I'm happy to announce that I've joined the crazy folks at EffectiveUI, a rich internet app services company, with headquarters in Denver, Colorado. Some of the cooler public projects we've worked on include the San Dimas project for eBay and the Cancer Collage for Discovery Channel.

We opened up an Vancouver office a month ago (me and two other buddies) in the funky Gastown space offered by WorkSpace, home of the best barista in town (thanks Dane!)

The team down in Denver ("down" in longitude, but "up" in elevation) is a very creative and fun bunch, and I'm hoping that we can build an equally impressive team and culture here in Lotus Land.

I'm definitely gonna need to be riding my bike to work more often, since all the excellent restaurants nearby seem to be keeping me extra well fed.