AIR中的原生視窗基本概念

Adobe AIR 1.0 以及更新的版本

如需瞭解在 AIR 中使用原生視窗的快速說明與程式碼範例，請參閱 Adobe Developer Connection 中的快速入門文章：

AIR 提供容易使用的跨平台視窗 API，可供使用 Flash®、Flex™ 和 HTML 程式設計技巧，建立原生作業系統視窗。

有了 AIR，在開發應用程式的外觀時，您可具備寬廣的自由發揮空間。您可以讓所建立的視窗可以在外觀上接近標準的桌面應用程式：在 Mac 上執行時與 Apple 的樣式相符、在 Windows 上執行時與 Microsoft 傳統慣例一致，在 Linux 上又能與視窗管理員產生協調。而且，您完全不需要針對平台來插入專用的程式碼便能夠達成此目的。或者，您也可以使用由 Flex 架構所提供的可設定外觀與可擴充顏色來自行建立樣式，無論應用程式是在哪種系統上執行都沒問題。甚至，您還可以使用向量和點陣圖圖案，自行繪製視窗的顏色，並完整支援桌面的透明度與 Alpha 混合效果。看膩了矩形視窗嗎？何不使用圓角視窗呢？

AIR 中的視窗

AIR 支援三種視窗專用的 API：

  • ActionScript 導向的 NativeWindow 類別可提供最低層級的視窗 API。NativeWindows 可用於以 ActionScript 和 Flash Professional 編寫的應用程式中。請考慮擴充 NativeWindow 類別，對應用程式中使用的視窗進行特製。

  • 在 HTML 環境中，您可以使用 JavaScript Window 類別，使用方法與您在瀏覽器類型的網頁應用程式中一樣。對 JavaScript Window 方法進行的呼叫會轉送至基礎的原生視窗物件。

  • Flex 架構的 mx:WindowedApplication 和 mx:Window 類別為 NativeWindow 類別提供了一個 Flex「包裝函式」。當您以 Flex 建立 AIR 應用程式時，WindowedApplication 組件會取代 Application 組件，並且會一直做為 Flex 應用程式中的初始視窗。

ActionScript 視窗

當您使用 NativeWindow 類別建立視窗時，請直接使用 Flash Player 舞台和顯示清單。若要將視覺物件加入 NativeWindow，請將物件加入視窗舞台的顯示清單或舞台上的另一個顯示物件容器。

HTML 視窗

當您建立 HTML 視窗時，會使用 HTML、CSS 和 JavaScript 來顯示內容。若要將視覺物件加入 HTML 視窗，可以將該內容加入 HTML DOM。HTML 視窗是特殊類別的 NativeWindow。AIR 主機會在 HTML 視窗中定義 nativeWindow 屬性，以便存取基礎 NativeWindow 實體。您可以使用這個屬性來存取本節說明的 NativeWindow 屬性、方法和事件。

備註： JavaScript Window 物件也有方法可用來編寫所包含視窗的指令碼，例如 moveTo() 和 close() 。如果有不同方法可供使用時，您可以使用最方便的方法。

Flex 架構視窗

當您使用 Flex 架構建立視窗時，一般會使用 MXML 組件來填滿視窗。若要加入 Flex 組件至視窗，請將組件元素加入視窗 MXML 定義中。您也可以使用 ActionScript，以動態方式加入內容。mx:WindowedApplication 和 mx:Window 組件是設定為 Flex 容器，因此能夠直接接受 Flex 組件，而 NativeWindow 物件則不行。必要時，可以使用 nativeWindow 屬性，透過 WindowedApplication 和 Window 物件，存取 NativeWindow 屬性和方法。

初始應用程式視窗

應用程式的第一個視窗是由 AIR 為您自動建立的。AIR 會使用應用程式描述器檔案的 initialWindow 元素中所指定參數，設定視窗的屬性和內容。

如果根內容是 SWF 檔，AIR 會建立 NativeWindow 實體，載入 SWF 檔，然後將其加入至視窗舞台。如果根內容是 HTML 檔，AIR 會建立 HTML 視窗並載入 HTML。

原生視窗事件流程

原生視窗會傳送事件，以通知需要知道的組件，將發生或已發生重要變更。許多視窗相關事件是成對傳送。第一個事件會警告即將發生變更。第二個事件會宣佈已發生變更。您可以取消警告事件，但不能取消通知事件。下面依序列出當使用者按一下視窗的最大化按鈕時所發生的事件流程：

  1. NativeWindow 物件傳送 displayStateChanging 事件。

  2. 如果沒有已登錄偵聽程式取消事件，視窗就會最大化。

  3. NativeWindow 物件傳送 displayStateChanging 事件。

    此外，NativeWindow 物件也會傳送視窗大小和位置的相關變更事件。視窗不會傳送這些相關變更的警告事件。相關事件包括：

    1. 如果視窗左上角因最大化作業而移動，就會傳送 move 事件。

    2. 如果視窗大小因為最大化作業而變更，就會傳送 resize 事件。

    NativeWindow 物件會在視窗最小化、還原、關閉、移動和調整大小時，傳送類似的事件序列。

    警告事件只有在透過視窗顏色或其它作業系統控制機制啟動變更時才會傳送。當您呼叫視窗方法來變更視窗大小、位置，或顯示狀態時，視窗只會傳送事件來宣佈變更。想要的話，您可以使用 dispatchEvent() 方法傳送警告事件，以檢查您的警告事件是否已被取消，再處理變更。

    如需視窗 API 類別、方法、內容以及事件的詳細資訊，請參閱 適用於 Adobe Flash Platform 的 ActionScript 3.0 參考 。

控制原生視窗樣式和行為方式的屬性

下列屬性可控制視窗的基本外觀和行為：

  • type

  • systemChrome

  • transparent

  • owner

當您建立視窗時，要在傳遞給視窗建構函式的 NativeWindowInitOptions 物件上設定這些屬性。AIR 會從應用程式描述器讀取初始應用程式視窗的屬性 (但 type 屬性除外，此屬性無法在應用程式描述器中設定，而且永遠設定為 normal )。視窗建立後無法變更這些屬性。

這些屬性中有些設定是彼此互不相容的：如果 transparent 是 true 或 type 是 lightweight ，則 systemChrome 無法設定為 standard 。

視窗類型

AIR 視窗類型是結合原生作業系統的顏色和可見性特質，建立三種功能性視窗類型。請使用定義於 NativeWindowType 類別中的常數，參考程式碼中的類型名稱。AIR 提供下列視窗類型：

類型

說明

一般

典型的視窗。一般視窗會使用完整尺寸樣式的色調，並顯示在 Windows 工作列和 Mac OS X 視窗選單中。

公用程式

工具面板。公用程式視窗會使用精簡版的系統顏色，而且不會顯示在 Windows 工作列和 Mac OS X 視窗選單中。

輕量型

輕量型視窗沒有顏色，而且不會顯示在 Windows 工作列和 Mac OS X 視窗選單中。此外，在 Windows 中，輕量型視窗也沒有「系統」(Alt+空白鍵) 選單。輕量型視窗適合當做通知對話方塊和控制項使用，例如開啟短暫顯示區域的下拉式清單方塊。使用輕量型 type 時，必須將 systemChrome 設定為 none 。

視窗顏色

視窗顏色是一組控制項，可以讓使用者在桌面環境中操控視窗。顏色元素包括標題列、標題列按鈕、邊框，和調整大小移駐夾。

系統顏色

您可以將 systemChrome 屬性設定為 standard 或 none 。選擇 standard 系統顏色可以提供您的視窗一組由使用者的作業系統所建立並訂定樣式的標準控制項。選擇 none 可將您的自訂顏色提供給視窗。請使用定義於 NativeWindowSystemChrome 類別中的常數，參考程式碼中設定的系統顏色設定。

系統顏色是由系統進行管理。您的應用程式無法直接存取控制項本身，但是可以在使用控制項時回應已傳送的事件。當您使用標準的視窗顏色時， transparent 屬性必須設定為 false ，而且 type 屬性必須為 normal 或 utility 。

Flex 顏色

當您使用 Flex WindowedApplication 或 Window 組件時，視窗可以使用系統顏色或由 Flex 架構提供的顏色。若要使用 Flex 顏色，請將用來建立視窗的 systemChrome 屬性設定為 none 。使用 Flex 4 Spark 組件，而不使用 MX 組件時，您必須指定外觀類別，才能使用 Flex 顏色。您可以使用內建外觀或提供自己的外觀。下列範例示範如何使用內建 Spark WindowedApplication 外觀類別來提供視窗顏色： 

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx"> 
<fx:Style> 
@namespace "library://ns.adobe.com/flex/spark"; 
WindowedApplication 
{ 
    skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
} 
</fx:Style> 
</s:WindowedApplication>

如需詳細資訊，請參閱 Using Flex 4: About the AIR window containers: Controlling window chrome

自訂顏色

當您沒有使用系統顏色建立視窗時，就必須加入自訂的顏色控制項來處理使用者與視窗之間的互動作業。您也可以自由地建立透明、非矩形的視窗。

若要使用自訂顏色來搭配 mx:WindowedApplication 或 mx:Window 組件，則必須將 showFlexChrome 樣式設為 false 。否則，Flex 會將自己的顏色加入視窗。

視窗透明度

若要允許使用桌面或其它視窗的視窗 Alpha 混合，請將視窗 transparent 屬性設定為 true 。您必須先設定 transparent 屬性，才能建立視窗，而該屬性建立後無法再變更。

透明視窗沒有預設背景。應用程式所繪製且未包含物件的任何視窗區域是看不見的。如果顯示的物件具有小於一的 Alpha 設定值，則物件之下的任何項目 (包括相同視窗、其它視窗以及桌面中的其它顯示物件) 都會穿透顯示出來。

如果您所要建立的應用程式，其邊框的形狀不規則或「淡化」或看起來是隱形的，那麼透明視窗就很有用。不過，顯示大型 Alpha 混合區域的速度可能會很慢，因此請謹慎使用這種效果。

重要事項： 在 Linux 上，完全透明的像素不會傳遞滑鼠事件。您應該避免建立具有大塊完全透明區域的視窗，因為可能會阻礙使用者對其它視窗或桌面項目的存取。在 Mac OS X 和 Windows 上，完全透明的像素則可傳遞滑鼠事件。

透明度不能用於具有系統顏色的視窗。此外，HTML 中的 SWF 和 PDF 內容可能不會顯示於透明視窗。如需詳細資訊，請參閱 在 HTML 網頁中載入 SWF 或 PDF 內容時必須考量的事項 。

靜態 NativeWindow.supportsTransparency 屬性會報告視窗透明度是否可供使用。透明度不受支援時，應用程式就會與黑色背景混合。在這些情況下，應用程式中任何的透明區域會顯示為不透明的黑色。最好在此屬性的測試結果為 false 的情況下提供補救措施。例如，您可以向使用者顯示警告對話方塊，或顯示不透明的矩形使用者介面。

請注意，Mac 和 Windows 作業系統永遠都支援透明度。Linux 作業系統上的支援需要複合式視窗管理員，但即使當複合式視窗管理員在作用中，也可能因為使用者顯示選項或硬體組態的關係而無法產生透明度。

MXML 應用程式視窗中的透明度

MXML 視窗的背景是預設為不透明的，即使您將視窗建立為 transparent 也是如此 (請注意視窗角落的透明度效果)。若要呈現視窗的透明背景，請在樣式表或應用程式 MXML 檔內所包含的 <mx:Style> 元素中設定背景顏色和 Alpha 值。例如，下列樣式宣告會讓背景呈現稍帶透明的綠色： 

WindowedApplication 
{ 
    background-alpha:".8"; 
    background-color:"0x448234"; 
}

HTML 應用程式視窗中的透明度

根據預設，顯示於 HTML 視窗和 HTMLLoader 物件中的 HTML 內容背景是不透明的，即使包含的視窗是透明的也是如此。若要關閉為 HTML 內容顯示的預設背景，請將 paintsDefaultBackground 屬性設定為 false 。下列範例會建立 HTMLLoader，並關閉預設背景： 

var htmlView:HTMLLoader = new HTMLLoader(); 
htmlView.paintsDefaultBackground = false;

此範例會使用 JavaScript 來關閉 HTML 視窗的預設背景： 

window.htmlLoader.paintsDefaultBackground = false;

如果 HTML 文件中的元素會設定背景顏色，該元素的背景就不是透明的。不支援設定部分透明度 (或不透明度) 值。但是，您可以使用透明 PNG 格式圖形做為頁面或頁面元素的背景，以達到類似的視覺效果。

視窗所有權

一個視窗可以「擁有」一或多個其他視窗。這些被擁有的視窗永遠都會顯示在主視窗前面，會隨主視窗一起縮小和還原，並且會在主視窗關閉時一起關閉。視窗所有權無法轉移至其他視窗或予以移除。一個視窗只能由一個主視窗擁有，但是可以擁有任何數目的其他視窗。

您可以使用視窗擁有權，讓管理工具色盤與對話方塊所使用的視窗使更輕鬆。例如，如果您顯示與文件視窗關聯的「儲存」對話方塊，使文件視窗擁有對話方塊，可讓對話方塊自動保持在文件視窗的前面。

視覺視窗類別目錄

下表說明了在 Mac OS X、Windows 和 Linux 作業系統上不同視窗屬性設定組合的視覺效果：

視窗設定

Mac OS X

Microsoft Windows

Linux *

Type: normal

SystemChrome: standard

Transparent: false

Type: utility

SystemChrome: standard

Transparent: false

Type: 任何值

SystemChrome: none

Transparent: false

Type: 任何值

SystemChrome: none

Transparent: true

mxWindowedApplication 或 mx:Window

Type: 任何值

SystemChrome: none

Transparent: true

* Ubuntu 和 Compiz 視窗管理員

備註： AIR 不支援下列系統顏色元素：Mac OS X 工具列、Mac OS X Proxy 圖示、Windows 標題列圖示，以及替代系統顏色。