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.