The Flashchemist

What you need to make a Custom Chrome AIR Application?

Making an AIR application with default or Flex Chrome is very easy. But it has the problem of repetitiveness and the default system chrome changes according to the OS, which is quiet bad on a Linux (I dont like that). When I started making AIR applications I used to just leave it with AIR to make the chrome, but then started moving to a creative custom chrome.

The default chrome gives you application related functionality for free.. I mean..they come with the default chrome, such as close, minimize, max, drag, title bar etc. When you move to custom chrome, we have to code everything… The close, minimize, restore, drag..everything. So here is how you go and make a custom chrome for your AIR application (I make AIR app using Flex, so HTML apps.. I don’t have any clue..)

1. You open your application descriptor XML, and edit.

<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
<systemChrome>none</systemChrome>

<!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
<transparent>true</transparent>

This takes off the custom Chrome and make the main application transparent. Transparency is important for custom chrome application (with release of AIR 1.5 for Linux, even Linux machines can show transparency).

Now if you run the application, you will see a different chrome, and set of close/minimize/restore buttons - which is called the default Flex Chrome, which is better than the default one. For sometime you can live with that, it look different. No extra codes.. all works.

2. You want to take the Flex Chrome off - Do this.  <WindowedApplication showFlexChrome="false"...>

Run..now you dont have anything, no buttons, no title bar.. you cant close, move your window..

You need to put all the buttons in place. The close, restore, minimize buttons. Skin them to make them look better. You need to make a title bar area, and title also. Below are the set of codes you need to make them work:

a. Close button - call nativeApplication.exit() on click of the button.

b. Restore button - nativeWindow.restore()

c. Maximize - nativeWindow.maximize()

d. Minimize - nativeWindow.minimize()

e. Move the window - On an long button/just a canvas, you say - mouseDown="{nativeWindow.startMove()}"

f. You want a maximize on double click of the title bar area? - doubleClickEnabled="true" doubleClick="{nativeWindow.maximize()}"

g. What about resizing your app? - Make a gripper on the right botton corner (any corner you can) and write - mouseDown="{nativeWindow.startResize()}"

the default parameter for nativeWindow.startResize() method is ‘BR’ for Bottom Right. So if you chose your own corners try BL, TR, TL etc.

I think thats it, you got your nice looking custom chrome application. Thats what I do, if any other suggestions let me know…

Happy New Year 2009!

Update:
I just saw an interesting posts in insideRIA blog, which speaks about reading application descriptor file. This is very interesting and useful for a custom chrome application. Why? Because your default chrome reads the application title from the descriptor file and shows, your custom chrome application does not. So use the technique described in this post to make that work.

In order to access the properties within your application descriptor, you need to define the namespace for the XML file. This should match the actual namespace in your application descriptor and AIR runtime/sdk version that you are targeting.

namespace ns = "http://ns.adobe.com/air/application/1.5";
use namespace ns;

The version of AIR runtime you are publishing for is also important. Here I am using 1.5, so the name space is ‘http://ns.adobe.com/air/application/1.5′ and it should be the one which is in the descriptor XML itself.

You can see the code in the blog and get the application name and render it on the title bar, you are set. It will be better to make this as a custom component which is skinnable using a CSS file, and you will get a drag and drop custom chrome, additional settings being changes in the application descriptor XML and WindowedApplication settings (showFlexChrome).

Take a look at this inspiring blog post to see how you can make custom chrome app with an example: http://www.graviti.tv/blog/

Tags: air, flex