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>
		<!&#91;CDATA&#91;
			private function moveWindow(event:MouseEvent):void {
				this.stage.nativeWindow.startMove();
			}
		&#93;&#93;>
	</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>
		<!&#91;CDATA&#91;
			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();
			}
		&#93;&#93;>
	</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>
		<!&#91;CDATA&#91;
			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();
			}
		&#93;&#93;>
	</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>

Advertisements
Tagged , , ,

12 thoughts on “Creating a custom chrome for AIR application

  1. Chris Black says:

    Great post. This is exactly what I was looking for!

  2. PoP_Gniezno says:

    Thanks a lot for this simple, but very valuable tutorial 🙂
    Gratz from Poland 🙂

  3. Karan Palan says:

    Chris, PoP_Gniezno,

    Thanks for your kind words.
    Gratz from Bombay!

  4. Mike Maykovich says:

    Thanks!
    Very helpfull!
    Gratz from Ukraine!

  5. bjorn says:

    Thanks! worked like a charm 🙂

  6. Ami Sanghavi says:

    Thanks for such a simple explanation.

  7. Jash Sayani says:

    Hi,

    Great tutorial ! Simple and very helpful !

    However, there is an issue with Flex SDK 3.4 and I needed to speak to you. It would be great if you could mail me your cell no. I am from Mumbai too.

    Thanks.

  8. Dan Malgas says:

    i’m having a bit of a problem with this though. i’ve seen several different examples of disabling the systemChrome but for some reason it doesn’t work for me.

    systemChrome gets ‘none’ value, transparency gets ‘true’ (both in the descriptor) and the WindowedApplication tag gets showFlexChrome=”false”.

    is that all the values that should be adjusted or am i missing something?

    thanks
    dan

  9. great work!!!!!!!!!!!!1

  10. Thanks for this great tutorial. I made it work in a few minutes!

    Just one question, if I want to let the users resize the window, how can I do that?
    Any ideas? Anyone?

    Thanks

  11. Found it!

    When a window uses system chrome, the chrome provides drag controls for resizing the window and moving around the desktop. If a window does not use system chrome you must add your own controls to allow the user to resize and move the window.

    To allow a user to resize a window interactively, use the NativeWindow startResize() method. When this method is called from a mouseDown event, the resizing operation is driven by the mouse and completes when the operating system receives a mouseUp event. When calling startResize(), you pass in an argument that specifies the edge or corner from which to resize the window.

  12. […] * Customizing the look and feel of a window (Adobe) * Creating a custom chrome for AIR application (pretty old, but still good) […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s