To Make Your Own Title Bar of Flex AIR

Recently, some people have made some requirements on how to use codes to make unable the max and min buttons on the title bar in Flex AIR program. Though the two buttons can be both enabled or made unable in app.xml files, they cannot be switched dynamically because WindowedApplication.maximizable and WindowedApplication.minimizable are read-only. Next we will introduce how to customize our own title bar of AIR program. Let’s first see the final effects:

1. First hide the original title bar: edit xxx-app.xml, then find the row systemChrome, cancel the explanation, and set the value as none:

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

2. Construct the title bar: first fill the background with gradient color; then add “close”, ”minimize”, ”maximize” and the title bar respectively. Fortunately, the method “exit”,”minimize”,”maximize” and “restore” have been provided in WindowedApplication of Flex, hence the simplicity to close, minimize, maximize and restore the window.

  <s:Group width="100%" height="20">
    <s:Rect id="background" left="0" top="0" right="0" bottom="0">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:entries>
                    <s:GradientEntry color="0xCCCCCC" ratio="0" alpha="1"/>
                    <s:GradientEntry color="0x999999" ratio=".66" alpha="1"/>
                </s:entries>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <s:Image source="close.png" click="exit()" width="20" y="2"/>
    <s:Image source="min.png" click="minimize()" width="20" x="20" y="2"/>
    <s:Image source="max.png" click="handleMax()" width="20" x="40" y="2"/>
    <s:Label id="_titlebar" text="TestAir" left="60" top="0" right="0" bottom="0" textAlign="center" verticalAlign="middle"/>
</s:Group>

3. Add listener to the title so as to move the window when dragging the title. Here we have taken a roundabout course. (The listener is used to listen to the mouse-move events to calculate the distance that the mouse has moved to change x and y position. The window is kept shaking when the mouse is moving.) Since there is a method startMove in nativeWindow of WindowedApplication, the window can be moved as long as this method is called in mouse-down event.

this.addEventListener(Event.ADDED_TO_STAGE, function(e:*):void {
    _titlebar.addEventListener(MouseEvent.MOUSE_DOWN, function (e:MouseEvent):void {
        nativeWindow.startMove();
    });
});