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();