打造自己的Flex AIR标题栏

有人问如何用代码禁用Flex AIR程序标题栏的最大化, 最小化按钮, 虽然app.xml文件里面可以控制是否禁用和启用最大化, 最小化按钮, 但是无法动态切换, 因为WindowedApplication.maximizable和WindowedApplication.minimizable是read only的. 下面就介绍一下如何定制自己的AIR程序标题栏, 先看下效果(是不是和原生的很像? 完全可以以假乱真了):

1. 先隐藏原生的标题栏: 编辑xxx-app.xml, 找到systemChrome行, 取消注释, 并设置值为none:

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

2. 构造标题栏: 先用渐变色填充背景, 然后分别添加关闭, 最小化, 最大化按钮以及标题. 幸运的是Flex的WindowedApplication提供了exit, minimize, maximize和restore方法, 关闭, 最小化, 最大化以及还原窗口算是非常简单了:

<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. 给标题添加事件, 以达到拖拽标题时, 移动窗口. 这里走了不少弯路(开始用监听鼠标移动事件, 计算鼠标的移动距离, 以修改nativeWindow的x和y坐标, 发现鼠标移动过程中, 窗口一直在抖动), 最后发现WindowedApplication的nativeWindow有startMove方法, 只要在mouse down事件里面调用此方法, 就可以达到移动窗口的目的:

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

本文完整代码见附件:AirTitleBar