Tuesday, April 17, 2007

Inside DryerFox - Part 3: Using WebKit

The DryerFox hack was accomplished by a few basic ActionScript3 stunts.

Get Thee Behind Me, HTML!

When the application starts, it creates an HTML component beneath the image of the drum window, and slightly smaller than the window, so that event when rotated at 45 degrees, no parts of the HTML control "peek out" from behind the graphics.
// Match the size & location of the drum image
html.x = dryerDrumImage.x + 10;
html.y = dryerDrumImage.y - 10;
html.width = dryerDrumImage.width - 20;
html.height = dryerDrumImage.height - 20;

// Now add the html control to the beginning of the display list
application.addChildAt( html, 0 );

Allow mouse events to flow through

Since the dryer frame and the drum window are in front of the HTML control, we need to allow mouse events to flow through to the HTML control. This is done by setting the mouseEnabled and mouseFocusEnabled properties of the mx:Image components to false.

Browser events

Now that the HTML control can respond to mouse and keyboard events, the control can now load web pages and respond to user input. Just to make things fun, I wired up some event handlers to start the drum rotation and sound FX when a page starts loading, plus another handler to stop the drum and sound when the page is fully rendered.

WebKit limitations

The Apollo HTML control is based on the open source WebKit engine. This is the HTML engine used for Apple's Safari browsers, and others too, including the Nokia S60 mobile platform. So yeah, maybe I should have called the app SurfinSafari, but I thought DryerFox was more catchy.

The WebKit control is capable of handling most HTML and JavaScript, but I've found a few things it won't do.
  • The mouse cursor doesn't change from an arrow to a hand when you mouse over a hyperlink, nor do the links change color to indicate they can be clicked. Some pages contain JavaScript snippets to perform similar animations (like changing the background color), and those appear to work. Even if the HTML control dispatched some sort of event like ON_LINK_ENTER and ON_LINK_EXIT, then an app could add a bit more affordance that most people expect from a browser.
  • There is no control over a right-click menu for the control, again something that most browsers offer.
  • Ironically, the WebKit control does not run Flash apps. If a web page attempts to load a .SWF, the page thinks that Flash is not installed. Maybe this is a security sandbox issue, but it doesn't seem to work.
  • There are no events raised for page-load timeouts or server-not-found.
Maybe these issues will be fixed by the time the Apollo runtime gets out of beta.