See you at 360|Flex in August

Apparently there is a bit of interest in pointless app development. I'll be presenting DryerFox at the upcoming 360|Flex conference in Seattle.

And while presenting is a nice boost for my ego, what I really hope to accomplish is:

1. Stimulate discussion for the creative use of the WebKit HTML control.


2. Encourage other Flex or Apollo n00bs to give it a try. I wasn't a Flex or Java developer before I started DryerFox, and I had it up and running in a few days. I think that speaks volumes for the short learning curve.


3. Consume some good espresso and good micro-brew (but not at the same time).

I hope to see you there. Drop me a note if you plan on attending.

Technorati Tags: 360|Flex, Apollo, DryerFox, Flex, Browser Hack, WebKit

I'd like to thank the members of the academy ...

http://mashable.com/2007/05/07/apollo-apps/

There is DryerFox sitting at #6! w000000000000000000000000t! I rule!!!!!!!!!!!!!!!!!!

Nothing warms my heart more than the comments of “useless, but I like it!” or “There’s no sense in explaining it; suffice to say that it’s absolutely useless, but we just had to mention it.”

Hooray for pointless endeavors!

DryerFox even beat out Scout from Adobe Labs! (#9 on the list, and an excellent web developer tool in its own right. I used Scout to help me hack-out DryerFox).

It looks like my blog is getting quite a viewer spike from all of this. More than half of its traffic ever is from the last 6 hrs.

[Update 2007/04/09] Wow. I've had nearly 3000 unique visits over the past 2 days. Way more than the 150 visits from the previous 2 months!

Cheers,
Doug

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.

Inside DryerFox - Part 2: Web 2.0 is all about transparency

Transparent System Chrome

Yeah, that sounds like something that Scotty might complain about to captain Kirk. "We've run out of transparent system chrome, captain!"

I wanted to make DryerFox run without a normal window frame and live as a dryer/browser mashup floating on the desktop. It just seemed funnier that way.

In Apollo-speak, the outer window that contains the app is called the chrome. The chrome window behaviour is OS dependent, but it usually includes the window title, plus buttons for closing, moving, and minimizing the app.

An Apollo application has a choice of either using the OS chrome (default behaviour), or disabling the system chrome completely. If you disable the system chrome, your app will need to handle window movement, sizing, and closing in some other way.

Thankfully, the Apollo samples include the WeatherStation app as an example of how to do this.

Hidden Gotchas

If you skim the documentation, it seems like all you need to do is tweak the -app.xml file to remove the system chrome, but it is a little more subtle than that.

Here are the steps I used:

1. Create a new Apollo project in the Flex Builder IDE. Let's assume the app is called "NoChrome".
2. Edit the NoChrome-app.xml file generated by the IDE. Change the systemChrome and transparent attributes of the node. should be changed to ="none" transparent="true" ...>.
3. Run the app. Hey! It still has chrome! WTF? (why the frown *cough*)
4. I was stuck at the previous step for about 30 minutes until I read the comments in the -app.xml file and remembered that Mike Chambers had said "now pay attention to this" in one of his ApolloCamp sessions..
5. Change the type of the root application component from to (from which ApolloApplication derives). Then you're good to go.
6. I also duplicated the Application sytle sheet from the WeatherStation app, but I'm not 100% sure if this is required.
   

Application {
/* make app window transparent */
background-color:"";
background-image:"";
padding: 0px;
}

Perhaps later releases of the Flex Builder Apollo extensions will provide an easier way of switching between systemChrome and noChrome modes. For an alpha release, it's still a pretty kick-ass offering.

Inside DryerFox - Part 1: Creating the media assets

Artwork
Just in case my DryerFox post didn't make it apparent, I'm not a graphic artist. But I can hack away with Adobe Fireworks with the best of them, so that's what I did. I googled for the biggest image I could find of a front loading dryer, and I found the image on the left.

Here's what I did to get the one on the right:

I spent a bunch of time learning & fiddling with Fireworks. At least 50% of this project time was due to my lack of design skillz.

1. The black background was easy to turn transparent.
2. I then split the image into 4 layers: the control panel, the lid, the frame, and the drum.
3. I stretched the lid and frame to make the dryer more squarish.
4. I repositioned the unstretched control panel appropriately.
5. I made the drum as large as possible, even making the rim thinner, to maximize the portion of the browser window that will show inside the drum.
6. I got rid of the squarish reflection on the glass bubble. I used the "magic wand" selector in Fireworks to find all the similar connected pixels, and then I just lowered the brightness.
   
7. Then I realized that the image was actually a top-load washer, not a dryer. Agh! Darn you inaccurate search engine metadata! But my result looked pretty, so on I went ...
   

Sound Effects
OK, now I that I had graphics, I needed some decent sound FX. Here I have a bit more of a background, having spent 6 years designing digital audio equipment. Normally, I'd hop on over to Sound Dogs (think iStockPhoto, but for sounds), since they have such a huge library.


But one of the main inspirations for this project is the nagging sound of my own dryer, which is right next to my home office. So I just brought my MacBook Pro into the laundry room and recorded it directly using the built-in mic.

I needed to disable the "Use ambient noise reduction" setting, since ambient noise was exactly what I was after.

I cranked up the input volume and recorded a 40 second run of good heavy load of towels, complete with the wonderful clunk of the relays kicking in when the dryer shut off.

Alrighty, I had all my media assets, so then it was off to Flex Builder to create the app, covered in the next post.

DryerFox - It's like Firefox, but inside a dryer!

Long-time listener, first-time coder! Here's my first Apollo app ...

I was lucky enough to attend the original ApolloCamp event in March, and I've been spending the last while learning the Flex & Apollo environments.

One of the cooler things about the Apollo framework is the addition of an HTML control based on the WebKit engine. This is the HTML engine used for Apple's Safari browsers, and others too, including the Nokia S60 mobile platform.


Since the Apollo mx:HTML component is rendered as part of the Flash display list, this allows any Flash effects to be applied to an active web page. Blurs, tweens, rotations, it all works.

Presenting ... DryerFox!
I knew I wanted to do something fun with HTML, but the question was: do what? Inspriration hit las Thursday, and I decided to create DryerFox - A rotating browser window wrapped by a dryer image.

You can type any URL into the app, and the page will be loaded and rendered. As the page is loading, the dryer's drum turns, and therefore so does the page. You can also manually rotate the drum using push buttons. The page remains fully interactive, no matter what the rotation. You can read your webmail, surf the net, or whatever. There is even a button to reset the drum rotation back to normal, so that you don't strain your neck.

Installing the demo

1. Install the Apollo runtime framework on your Mac or PC, if you haven't already done so. It is an alpha release, but still pretty solid.
2. Download the DryerFox demo .AIR file. (.AIR is the extension for Apollo apps, but it is just a ZIP file)
   
3. Double-click the downloaded .AIR file, and the Apollo runtime will lead you through the rest of the installation process.

The source for the hack is available here, in case you want to hack it further yourself. You'll need the Flex development environment to do that.

I'll describe the making of DryerFox in a future post, but I wanted to get this out there for feedback.