|
Adding custom Chrome to your AIR application |
||||||||
Whilst creating my last AIR application I found that the standard 'Chrome' that is provided by the OS just didn't match the application look and feel at all.
After a little searching I found that there are a few key elements in your application that you need to change to remove the standard operating system Chrome, and stop Flex builder from replacing it with its own.
Firstly in your application-app.xml document look for the 'systemChrome' xml value. Setting this to none will disable the operating system Chrome. As we are using the 'WindowedApplication' Flex builder will automatically start using its own Chrome framework, so we need to turn that off too.
2<systemChrome>none</systemChrome>
3
4<!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
5<transparent>true</transparent>
This is done in the WindowedApplication code, set showFlexChrome="false" and that will disable Flex from using its default Chrome.
2<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()" showFlexChrome="false">
Now that we have completely turned it all off, we need to build our own. In this application I am using a canvas with rounded corners that is 15 pixels larger than the application canvas, to give the impression of a border all the way around. Inside that canvas I've added two controls.
2<mx:Label text="X" styleName="controls" toolTip="Close" x="184" y="1" click="onClose()" />
These simply replicate the functionality that the minimise and close buttons give a user on a standard window. The functions they call are:
2 {
3 stage.nativeWindow.minimize();
4 }
5
6 public function onClose():void
7 {
8 stage.nativeWindow.close();
9 }
And with that you fully customise the look and feel of your applications Chrome.
There are no comments for this entry.
[Add Comment] [Subscribe to Comments]