Creating a custom chrome for AIR application

Written for: Flex Builder 3 and AIR 1.1

To create a custom chrome, you will have to first remove the System chrome (default, drawn by the Operating System) and then the Flex chrome (which is rendered by Flex when System chrome is toggled off). 

To remove the system chrome, browse through the application’s descriptor file (ApplicationName-app.xml) for <systemChrome> tag. Add the value of “none” so that it reads like this: 

<systemChrome>none</systemChrome>

If you run the application now, you will see a chrome which is rendered by Flex itself. 

To remove the Flex chrome, goto your application’s root tag. This could  be <mx:Window> or <mx:WindowedApplication> and then set the showFlexChrome property to false.

By doing this, you would have removed chrome all together from your application. It would now look this.

 

The next step is to add your own controls for minimizing, maximizing, restoring, closing and dragging the window. This is can be done by using the framework’s NativeWindow class. The NativeWindow class is used for creating and controlling desktop windows for AIR apps. It contains methods for all the functionality we need for our custom chrome.

To make the window draggable, add a container to your application (In this example, I’m using a red colored canvas). Next, add an eventHandler for handling the mouseDown event of the container. The eventhandler will call the NativeWindow class’s startMove method. By doing this, the user can now move the application on the screen by dragging the red colored canvas.

	<mx:Script>
		<![CDATA[
			private function moveWindow(event:MouseEvent):void {
				this.stage.nativeWindow.startMove();
			}
		]]>
	</mx:Script>

	<mx:Canvas width="200" height="100"
		backgroundColor="#EB4545"
		mouseDown="moveWindow(event)"/>

The window can be minimized, maximized, restored and closed by calling the NativeWindow’s respective function for each task.

	<mx:Script>
		<![CDATA[
			private function minimizeWindow():void {
				this.stage.nativeWindow.minimize();
			}

			private function maximizeWindow():void {
				this.stage.nativeWindow.maximize();
			}

			private function restoreWindow():void {
				this.stage.nativeWindow.restore();
			}

			private function closeWindow():void {
				this.stage.nativeWindow.close();
			}
		]]>
	</mx:Script>
	<mx:Button label="Minimize"
		click="minimizeWindow()"/>
	<mx:Button label="Maximize"
		click="maximizeWindow()"/>
	<mx:Button label="Restore"
		click="restoreWindow()"/>
	<mx:Button label="Close"
		click="closeWindow()"/>

The final code will look like this:

In application descriptor file.

<systemChrome>none</systemChrome>

In MXML.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="vertical"
	showFlexChrome="false">

	<mx:Script>
		<![CDATA[
			private function moveWindow(event:MouseEvent):void {
				this.stage.nativeWindow.startMove();
			}

			private function minimizeWindow():void {
				this.stage.nativeWindow.minimize();
			}

			private function maximizeWindow():void {
				this.stage.nativeWindow.maximize();
			}

			private function restoreWindow():void {
				this.stage.nativeWindow.restore();
			}

			private function closeWindow():void {
				this.stage.nativeWindow.close();
			}
		]]>
	</mx:Script>
	<mx:Canvas width="200" height="100"
		backgroundColor="#EB4545"
		mouseDown="moveWindow(event)"/>
	<mx:Button label="Minimize"
		click="minimizeWindow()"/>
	<mx:Button label="Maximize"
		click="maximizeWindow()"/>
	<mx:Button label="Restore"
		click="restoreWindow()"/>
	<mx:Button label="Close"
		click="closeWindow()"/>

</mx:WindowedApplication>