Adobe AIR迷你教程 — 使用自定义窗口以及对窗口的移动，缩放，关闭操作

这个教程主要针对对flex有一定基础，准备开始AIR开发的朋友。由于AIR是针对桌面应用程序，所以相对于flex的web应用，自然就多出了对应用程序窗口的控制。而 AIR的一大特点就是允许开发者使用自定义的窗口代替系统窗口从而使开发者对程序UI的设计更加随心所欲，设计出独具个性风格的跨平台的桌面应用程序。

罗嗦的话到次为止，下面正式开始主题，本教程主要实现了以下功能。

1. 屏蔽系统窗口、 flash窗口、窗口底部状态栏。使用自定义窗口。
2. 对自定义窗口的缩放、移动、关闭。

在实现以上操作的过程中，我加入了一些额外的操作来丰富我们的demo，都是很简单，很实用的东西。

3. 移动窗口时实现半透明效果，移动结束时还原。
4. 关闭窗口动画。
5. 窗口背景填充。

1. 屏蔽系统窗口， flash窗口，窗口底部状态栏。使用自定义窗口。

当一个AIR项目创建成功后，你会发现相对与 web项目，你的工程目录下多了一个名为 XXX-app.xml的文件，这是我们项目的配制文件，实现自定义窗口就是靠它。打开它，修改如下代码:

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

去掉对systemChrome的注释，改为

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

这样我们就去掉了系统窗口，转而使用了flash的自带窗口，下面我们把flash窗口也去掉。在你的主mxml文件中设置WindowedApplication 的这些属性

<mx:WindowedApplication showTitleBar=”false” borderThickness=”0″ showStatusBar=”false” showGripper=”false” ….. />

这样就完全去掉了所有的窗口，程序运行后只显现应用程序的内容。大家可以参考帮助手册来了解以上属性的意思。说到这里就引出了下一个问题，屏蔽了所有窗口以后如何对窗口进行基本的，放大，缩放，关闭操作呢。我们看下面。

2. 对自定义窗口的缩放，移动，关闭。

AIR比flex web应用多了一个类叫NativeWindow,我们就是靠这个类对窗口就行操作。在demo中，我用了以下几个方法来移定窗口，他们都在鼠标MouseDown event中被触发。

this.nativeWindow.startResize(“L”);
this.nativeWindow.startResize(“R”);
this.nativeWindow.startResize(“T”);
this.nativeWindow.startResize(“B”);
this.nativeWindow.startResize(“TL”);
this.nativeWindow.startResize(“RB”);

很容易可以看出，L R B T代表 Left, Right, Bottom 和 Top, 所以在调用startResize时设置适当的参数我们就可以轻易的实现对窗口各个方向的缩放。对于窗口的移定，在mouseDown event中使用

this.nativeWindow.startMove();

而对窗口的关闭，则很简单的在按钮click事件调用this.close()。

好了，以上就是对自定义窗口的操作。下面的东西我是用来完善我的demo，使它cool一点。相信大家在自己的应用程序中也会需要类似的东西，一个应用程序除了功能，细节上的处理也是很重要的。

3. 移动窗口时实现半透明效果，移动结束时还原。

要实现这个效果我们需要重新打开我们的XXX-app.xml文件，设置以下内容。

<!– Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. –>
<transparent>true</transparent>

这个可以允许我们让应用程序的背景透明，这个很有用，比方说QQ宠物就是一个背景透明的应用程序，利用背景透明，我们可以开发出很独特的应用程序。接下来要做的就简单了。

在上面移动窗口的mouseDown事件中加入 this.alpha = 0.x; 下面是demo中的代码。我将透明度设为0.6,this. alpha只针对应用程序的背景设置透明，如果你想让更多的东西透明，只需要对相应的控件设置alpha既可。

private function moveMe():void{
this.nativeWindow.startMove();
this.alpha = 0.6;
}

让透明还原我在mouseUp事件中设置alpha =1;

private function mouseUpHandle():void{
this.alpha = 1;
}

这样简单的设置也许就会使你的应用程序看起来不一样，怎么不试试呢：）

4. 关闭窗口动画。

我使用了下面的Iris效果对在窗口关闭时使用。有什么效果呢，大家关闭一下就知道了。 flex中内置了很多效果给我们使用，很多时候我们只需要适当的组合，就能得到意想不到的效果，比如 Move与 WipeDown一起可以实现Mac系统，菜单向下滑出的效果。诸如此类，只要有想像力，我们可以用很简单的代码，实现很有用的功能。 在demo 中，如下设置得到关闭动画

<mx:WindowedApplication closeEffect=”irisIn” ….. />

<mx:Iris id=”irisIn” duration=”500″ showTarget=”false” />

5. 窗口背景填充。

这个功能其实在开发程序的时候用的不多，我是不想让demo看起来太单调所以加了背景，我们知道flex是不能像Html那样轻易的让背景重复显示的，所以我们的用一些特殊方法处理以下，demo中的 setBackground方法用于设置整个背景。这里面涉及到的 Bitmap, BitmapData, Graphics类的具体作用，大家感兴趣的话可以看帮助手册，我的观点是当里用到的时候查帮助也不迟，只要知道有这么些个类可以为你干什么活就好。

private function setBackground():void{

var backgroundImage :Bitmap;
var backgroundBitmapData :BitmapData;

backgroundImage = new bg();
backgroundBitmapData = new BitmapData( backgroundImage.width, backgroundImage.height );
backgroundBitmapData.draw( backgroundImage );

workarea.graphics.beginBitmapFill( backgroundBitmapData, null,true );
workarea.graphics.drawRect(0,0, 2000, 2000);
workarea.graphics.endFill();
}

以上就是demo的全部内容，下面有源文件和Demo给大家下载。 因为AIR是跨平台的应用程序，所以不管在Mac或者Window上开发过程都是一样的。Demo是在 Leopard下开发。

源文件下载
Demo