Kevin Hoyt

I got an email earlier this week that pointed to David Cann’s iPhone interface done in JavaScript. I hadn’t seen it before, and I don’t know how long it has been around, but I thought it was pretty slick. Inspired by the possibilities, I decided to take the lead on moving into an AIR application. We always say that HTML applications are first-class citizens on AIR, but I’ve never really tried it with anyone else’s code but my own. Here was the chance to eat our own dog food, and see just how far we’ve come. How are we doing? Read on!

I should preface the remainder of this article with some notes. First off, a big thanks to David for making the source of his work freely available. He even included the Photoshop source file for the phone interface, which came in very handy. The second note I’d like to make is that I had no familiarity whatsoever with the Yahoo! UI widgets prior to this project, which is what David used for the interface. While I do consider myself a programmer, I also have limited experience with PHP, which is what David used for the server proxy. Out of the gate, I was already at a disadvantage.

Given my lack of knowledge of YUI and PHP, I thought I’d try a first pass by trying to implement the interface from scratch using jQuery. I chose jQuery because I’m more familiar with it, but it quickly became very apparent that the types of animations David was using were beyond my abilities. While I had the source, and could cheat to my hearts content, I also found that David has gotten pretty sophisticated with his CSS; an area in which I consider my skills to be less than ideal for this task. Out of the gate, due to my skills, this little exercise wasn’t going particularly smooth.

Taking some time to learn from my mistakes, I stepped away from the project, spent some time licking my wounds and thinking about what the JavaScript was likely doing internally.

The screens of the application are PHP pages. When you visit the web site, the first PHP runs against the Digg API, parses the XML, and turns it into HTML, which is included in the page before it is returned to the browser. Since AIR doesn’t have the same restrictive security sandbox of the browser, I figured I could replace the PHP include with a client-based XMLHttpRequest directly against Digg. A few lines of code later, I had spliced out the first block of PHP and put in a little Ajax. Now I had pure HTML/CSS/JS that I could easily run as an AIR application.

I used Aptana during this exercise, which has great AIR project tools. I few clicks later, and the first screen of David’s application was running on the desktop!

The Digg topic areas are what’s included by the PHP file at the start. When you click a topic however, a request is made to another PHP script that again gets the Digg XML and creates HTML out of it. The request against that PHP script is done using the YUI functionality. Being that the response is HTML, the stories screen is populated by using innerText. Again, since AIR doesn’t have the same restrictive sandbox as the browser, I figured I could factor this out too. I dropped in another XMLHttpRequest, and before long I had topics and stories running on the desktop!

When a story is clicked, that story’s URL is loaded into the IFRAME that is the screen of the iPhone interface. No code changes there. The back button works by tracking the “state” of the screen and recording the last URL visited. I thought for a moment that I might have problems with the differences between local and remote URI references, but this too worked without any additional code. Well, that’s it! Functionally the application was done, now it was time to add some desktop UI flair.

David’s example source includes the entire HTML page that contains not only the incredibly slick user interface, but also links to download the source or Digg his work. I just wanted the phone to represent the entire window on the desktop. I opened David’s Photoshop file, cropped as close to the phone as possible, and saved as PNG to preserve transparency where needed (edges). I went back to the main file (now HTML, not PHP) and pulled out all the extra markup, so that I was left with just the phone and screen. I then changed the AIR application manifest to have a chrome-less, transparent window.

Again using Aptana’s AIR utilities, I quickly packaged up the application, installed it, and tested it once more. I then sent it on to a few colleagues for review. When the positive feedback came in, I emailed David to let him know what I had done. The result of my experiment turned out to be incredibly successful despite a bumpy start. I removed server proxy calls for data, and replaced them with good old XMLHttpRequest. I stripped out the extra HTML, and made the window transparent. I packaged the application, and distributed it. Done!

Even though I’m not particularly familiar with PHP, that didn’t matter, because I am very familiar with JavaScript. I think that’s a testament to part of the value that AIR provides developers. Using not only the same code, but also the same standards-based web application skills, I was able to quickly create a desktop application. The entire project took me about four hours (non-consecutive).

Now comes the fun part of thinking about how to continue extending the UI to the desktop! I’ve already hooked dragging and dropping the window around the screen (move) using the native handlers. I don’t know where the iPhone’s off button is though, so you’ll have to close the application manually. Maybe you want to continue this work? Have some ideas? Maybe you just want to get up close and friendly with an HTML-based AIR application? I’ve made the source code and AIR file (requires AIR Beta) available for your enjoyment.

Again, a special thanks to David for having been visionary to build this wonderful application in the first place, and the for sharing the code and images!

This entry was posted on Friday, June 15th, 2007 at 11:04 am and is filed under AIR, Ajax, HTML, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.