mystic nomad

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.

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.

	<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>