建立視窗

Adobe AIR 1.0 以及更新的版本

指定視窗初始化屬性
建立初始應用程式視窗
- 使用 ActionScript 建立起始視窗
- 使用 Flex 建立起始視窗
建立 NativeWindow
建立 HTML 視窗
建立 mx:Window
加入內容至視窗
範例：建立原生視窗

AIR 會自動為應用程式建立第一個視窗，但是您可以建立所需的其它任何視窗。若要建立原生視窗，請使用 NativeWindow 建構函式方法。

若要建立 HTML 視窗，請使用 HTMLLoader createRootWindow() 方法，或是從 HTML 文件呼叫 JavaScript window.open() 方法。建立的視窗是 NativeWindow 物件，其顯示清單會包含 HTMLLoader 物件。HTMLLoader 物件會解譯並顯示視窗的 HTML 和 JavaScript 內容。您可以使用 window.nativeWindow 屬性，從 JavaScript 存取基礎 NativeWindow 物件的屬性。(在 AIR 應用程式安全執行程序中執行的程式碼才能存取此屬性)。

當您初始化視窗 (包括初始應用程式視窗) 時，應該考慮建立狀態為不可見的視窗，並載入內容或執行任何圖形更新，然後讓視窗可見。這個順序可以防止使用者看到任何不舒服的視覺變更。您可以在應用程式描述器中指定 <visible>false</visible> 標籤 (或不要使用此標籤，因為 false 是預設值)，指定以不可見狀態建立應用程式的初始視窗。預設會看不到新的 NativeWindow。當您使用 HTMLLoader createRootWindow() 方法建立 HTML 視窗時，可以將 visible 引數設為 false。呼叫 NativeWindow activate() 方法或將 visible 屬性設為 true，讓視窗可見。

指定視窗初始化屬性

原生視窗的初始化屬性在桌面視窗建立之後就無法再變更。這些永遠不變的屬性及其預設值包括：

屬性	預設值
systemChrome	standard
type	normal
transparent	False
owner	null
maximizable	true
minimizable	true
resizable	true

請在應用程式描述器檔案中，為 AIR 所建立的初始視窗設定屬性。AIR 應用程式的主視窗的 type 屬性永遠都是 normal (其它視窗屬性可以在描述器檔案中指定，例如 visible、width 和 height，但這些屬性可以隨時變更)。

請使用 NativeWindowInitOptions 類別，為您應用程式所建立的其它原生和 HTML 視窗設定屬性。當您建立視窗時，必須傳遞 NativeWindowInitOptions 物件，將視窗屬性指定為 NativeWindow 建構函數或 HTMLLoader createRootWindow() 方法。

下列程式碼會為公用程式視窗建立 NativeWindowInitOptions 物件。

var options:NativeWindowInitOptions = new NativeWindowInitOptions(); 
options.systemChrome = NativeWindowSystemChrome.STANDARD; 
options.type = NativeWindowType.UTILITY 
options.transparent = false; 
options.resizable = false; 
options.maximizable = false;

無法支援在 transparent 為 true 或 type 為 lightweight 時，將 systemChrome 設定為 standard。

備註：您無法設定使用 JavaScript window.open() 函數所建立視窗的初始化屬性。但是，您可以透過自行實作 HTMLHost 類別來覆寫這些視窗的建立方式。如需詳細資訊，請參閱處理 window.open() 的 JavaScript 呼叫。

當您使用 Flex mx:Window 類別建立視窗時，請在 window 物件本身上 (在視窗的 MXML 宣告或建立視窗的程式碼中) 指定初始化屬性。直到呼叫 open() 方法之後，才會建立基礎 NativeWindow 物件。一旦開啟視窗之後，這些初始化屬性就無法再變更。

建立初始應用程式視窗

AIR 會根據應用程式描述器中指定的屬性，建立初始應用程式視窗，並載入內容元素中參考的檔案。內容元素必須參考 SWF 或 HTML 檔。

起始視窗可以是您應用程式的主視窗，也可以只用來啟動一個或多個其它視窗。您不一定需要讓它顯示。

使用 ActionScript 建立起始視窗

當您使用 ActionScript 來建立 AIR 應用程式時，應用程式的主要類別必須擴充 Sprite 類別 (或 Sprite 的子類別)。此類別會做為應用程式的主進入點。

當您的應用程式啟動時，AIR 會建立視窗、建立主類別的實體，然後將實體加入至視窗舞台。若要存取視窗，您可以偵聽 addedToStage 事件，然後使用 Stage 物件的 nativeWindow 屬性，以取得 NativeWindow 物件的參考。

下列範例說明使用 ActionScript 所建立之 AIR 應用程式，其主類別的基本骨架：

package { 
    import flash.display.NativeWindow; 
    import flash.display.Sprite; 
    import flash.events.Event; 
 
    public class MainClass extends Sprite 
    { 
        private var mainWindow:NativeWindow; 
        public function MainClass(){ 
            this.addEventListener(Event.ADDED_TO_STAGE, initialize); 
        } 
         
        private function initialize(event:Event):void{ 
            mainWindow = this.stage.nativeWindow; 
            //perform initialization... 
            mainWindow.activate(); //show the window 
        } 
    } 
}

備註：技術上而言，您「可以」在主要類別的建構函式中存取 nativeWindow 屬性。不過，這是特殊情況，僅適用於初始應用程式視窗。

在 Flash Professional 中建立應用程式時，如果沒有在個別的 ActionScript 檔案中建立您自己的主文件類別，就會自動建立主文件類別。您可以使用舞台的 nativeWindow 屬性，存取初始視窗的 NativeWindow 物件。例如，下列程式碼會啟動主視窗為最大化狀態 (從時間軸)：

import flash.display.NativeWindow; 
 
var mainWindow:NativeWindow = this.stage.nativeWindow; 
mainWindow.maximize(); 
mainWindow.activate();

使用 Flex 建立起始視窗

使用 Flex 架構建立 AIR 應用程式時，請使用 mx:WindowedApplication 做為主 MXML 檔的根元素 (您可以使用 mx:Application 組件，但它並不支援 AIR 中提供的所有功能)。WindowedApplication 組件可做為應用程式的起始進入點。

當您啟動應用程式時，AIR 會建立原生視窗，初始化 Flex 架構，然後將 WindowedApplication 物件加入至視窗舞台。啟動序列完成後，WindowedApplication 會傳送 applicationComplete 事件。請使用 WindowedApplication 實體的 nativeWindow 屬性，存取桌面視窗物件。

下列範例會建立簡單的 WindowedApplication 組件，設定其 x 和 y 座標：

<?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"  
    applicationComplete="placeWindow()"> 
    <mx:Script> 
        <![CDATA[ 
            private function placeWindow():void{ 
                this.nativeWindow.x = 300; 
                this.nativeWindow.y = 300; 
            } 
        ]]> 
    </mx:Script> 
    <mx:Label text="Hello World" horizontalCenter="0" verticalCenter="0"/> 
</mx:WindowedApplication>

建立 NativeWindow

若要建立 NativeWindow，請傳遞 NativeWindowInitOptions 物件給 NativeWindow 建構函式：

var options:NativeWindowInitOptions = new NativeWindowInitOptions(); 
options.systemChrome = NativeWindowSystemChrome.STANDARD; 
options.transparent = false; 
var newWindow:NativeWindow = new NativeWindow(options);

視窗要直到您將 visible 屬性設定為 true，或呼叫 activate() 方法，才會顯示。

建立視窗之後，您可以初始化其屬性，並使用 stage 屬性和 Flash 顯示清單技巧，將內容載入視窗之中。

幾乎在所有案例中，都應該將新原生視窗的 stage scaleMode 屬性設定為 noScale (使用 StageScaleMode.NO_SCALE 常數)。Flash 縮放模式是針對應用程式作者無法得知應用程式顯示空間比例的情形所設計的。縮放模式可以讓作者選擇缺點最少的妥協方案：裁剪內容、延伸或擠壓內容，或使用空白空間填塞。由於您是在 AIR (視窗框架) 中控制顯示空間，因此可以依內容調整視窗大小，或依視窗大小調整內容，而不必妥協。

Flex 和 HTML 視窗的縮放模式會自動設定為 noScale。

備註：若要決定在目前作業系統上允許的最大和最小視窗大小，請使用下列靜態 NativeWindow 屬性：

var maxOSSize:Point = NativeWindow.systemMaxSize; 
var minOSSize:Point = NativeWindow.systemMinSize;

建立 HTML 視窗

若要建立 HTML 視窗，您可以呼叫 JavaScript Window.open() 方法，或呼叫 AIR HTMLLoader 類別 createRootWindow() 方法。

任何安全執行程序中的 HTML 內容都可以使用標準的 JavaScript Window.open() 方法。如果內容是在應用程式安全執行程序之外執行，則只能呼叫 open() 方法來回應使用者互動，例如按一下滑鼠或鍵盤。呼叫 open() 時，會建立具有系統顏色的視窗，以便在指定的 URL 顯示內容。例如：

newWindow = window.open("xmpl.html", "logWindow", "height=600, width=400, top=10, left=10");

備註：您可以擴充 ActionScript 中的 HTMLHost 類別，以自訂使用 JavaScript window.open() 函數建立的視窗。請參閱關於擴充 HTMLHost 類別。

應用程式安全執行程序中的內容可以存取功能更強大的視窗建立方法 HTMLLoader.createRootWindow()。透過這個方法，您就可以指定新視窗的所有建立選項。例如，下列 JavaScript 程式碼會建立輕量型視窗，且不使用大小為 300x400 像素的系統顏色。

var options = new air.NativeWindowInitOptions(); 
options.systemChrome = "none"; 
options.type = "lightweight"; 
 
var windowBounds = new air.Rectangle(200,250,300,400); 
newHTMLLoader = air.HTMLLoader.createRootWindow(true, options, true, windowBounds); 
newHTMLLoader.load(new air.URLRequest("xmpl.html"));

備註：如果由新視窗載入的內容位於應用程式安全執行程序之外，window 物件就不會具備以下 AIR 屬性：runtime、nativeWindow 或 htmlLoader。

如果建立透明視窗，則不會永遠顯示內嵌於載入該視窗 HTML 中的 SWF 內容。您必須將用來參考 SWF 檔案之 object 或 embed 標籤的 wmode 參數設定為 opaque 或 transparent。wmode 的預設值為 window，所以依照預設，SWF 內容不會顯示在透明視窗中。無論設定哪一個 wmode 值，PDF 內容都無法顯示在透明視窗中。 (AIR 1.5.2 之前的版本，SWF 內容也無法顯示在透明視窗中。)

使用 createRootWindow() 方法建立的視窗依舊會獨立於開啟視窗之外。JavaScript Window 物件的 parent 和 opener 屬性會是 null。開啟的視窗可以使用由 createRootWindow() 函數所傳回的 HTMLLoader 參考，存取新視窗的 Window 物件。在上一個範例的情況下，陳述式 newHTMLLoader.window 會參考已建立視窗的 JavaScript Window 物件。

備註：從 JavaScript 和 ActionScript 都可以呼叫 createRootWindow() 函數。

建立 mx:Window

若要建立 mx:Window，您可以使用 mx:Window 做為根標籤來建立 MXML 檔，或直接呼叫 Window 類別建構函式。

下列範例會呼叫 Window 建構函式，建立並顯示 mx:Window：

var newWindow:Window = new Window(); 
newWindow.systemChrome = NativeWindowSystemChrome.NONE; 
newWindow.transparent = true; 
newWindow.title = "New Window"; 
newWindow.width = 200; 
newWindow.height = 200; 
newWindow.open(true);

加入內容至視窗

將內容加入至 AIR 視窗的方式取決於視窗的類型。例如，MXML 和 HTML 可以讓您以宣告方式來定義視窗的基本內容。您可以將資源嵌入應用程式 SWF 檔中，也可以從不同的應用程式檔案中載入資源。Flex、Flash 和 HTML 內容全都可以透過此方式建立，並以動態方式加入至視窗中。

當您載入 SWF 內容，或載入包含 JavaScript 的 HTML 內容時，必須將 AIR 安全性模型納入考量。應用程式安全執行程序中的任何內容 (也就是，與您的應用程式一起安裝的且可使用 app: URL 配置載入的內容) 都具備可存取所有 AIR API 的完整權限。從這個安全執行程序之外載入的任何內容都不能存取 AIR API。在應用程式安全執行程序之外的 JavaScript 內容不能夠使用 JavaScript Window 物件的 runtime、nativeWindow 或 htmlLoader 屬性。

若要允許安全的跨指令碼處理，您可以使用安全執行程序橋接，在應用程式內容與非應用程式內容之間提供有限的介面。在 HTML 內容中，您也可以將應用程式的頁面對應至非應用程式安全執行程序中，以允許頁面上的程式碼對外部內容進行跨指令碼處理。請參閱：AIR 安全性。

載入 SWF 檔或影像

您可以使用 flash.display.Loader 類別，將 Flash SWF 檔或影像載入原生視窗的顯示清單之中：

package { 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.net.URLRequest; 
    import flash.display.Loader; 
 
    public class LoadedSWF extends Sprite 
    { 
        public function LoadedSWF(){ 
            var loader:Loader = new Loader(); 
            loader.load(new URLRequest("visual.swf"));                    
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadFlash); 
        } 
 
        private function loadFlash(event:Event):void{ 
            addChild(event.target.loader);  
        } 
    } 
}

備註：使用 ActionScript 1 或 2 建立的舊版 SWF 檔案可共享全域狀態，例如類別定義、Singleton，如果這些檔案載入相同視窗，也會共享全域變數。如果這種 SWF 檔案要依賴未修改的全域狀態才能正確運作，它就不能重複載入相同視窗，也不能使用重疊的類別定義和變數，以另一個 SWF 檔的身分載入相同的視窗。此內容可以載入不同的視窗。

將 HTML 內容載入 NativeWindow

若要將 HTML 內容載入 NativeWindow，您可以將 HTMLLoader 物件加入視窗舞台，然後將 HTML 內容載入 HTMLLoader，或使用 HTMLLoader.createRootWindow() 方法建立已包含 HTMLLoader 物件的視窗。下列範例會將 HTML 內容顯示在原生視窗的舞台上，300 x 500 像素的顯示區域之中：

//newWindow is a NativeWindow instance 
var htmlView:HTMLLoader = new HTMLLoader(); 
htmlView.width = 300; 
htmlView.height = 500; 
 
//set the stage so display objects are added to the top-left and not scaled 
newWindow.stage.align = "TL"; 
newWindow.stage.scaleMode = "noScale"; 
newWindow.stage.addChild( htmlView ); 
 
//urlString is the URL of the HTML page to load 
htmlView.load( new URLRequest(urlString) );

若要將 HTML 頁面載入 Flex 應用程式，您可以使用 Flex HTML 組件。

如果視窗使用透明度 (即視窗的 transparent 屬性為 true)，不會顯示 HTML 檔案中的 SWF 內容，除非用來參考 SWF 檔案之 object 或 embed 標籤的 wmode 參數設定為 opaque 或 transparent。因為 wmode 預設值為 window，依照預設，SWF 內容不會顯示在透明視窗中。無論使用哪一個 wmode 值，PDF 內容都不會顯示在透明視窗中。

同時，如果縮放、旋轉 HTMLLoader 控制項，或 HTMLLoader alpha 屬性設為 1.0 以外的值，SWF 和 PDF 內容都不會顯示。

加入 SWF 內容做為 HTML 視窗上的重疊部分

由於 HTML 視窗包含於 NativeWindow 實體之中，因此您可以將 Flash 顯示物件加入至顯示清單中的 HTML 圖層上方和下方。

若要將顯示物件加入至 HTML 圖層上方，請使用 window.nativeWindow.stage 屬性的 addChild() 方法。addChild() 方法會將內容加入視窗中任何現有內容的上方圖層中。

若要將顯示物件加入至 HTML 圖層下方，請使用 window.nativeWindow.stage 屬性的 addChildAt() 方法，傳入零值以供 index 參數使用。將物件放在零索引上，會將現有內容 (包括 HTML 顯示) 移至上一層，並將新的內容安插在底部。若要顯示位於 HTML 頁面下方圖層的內容，必須將 HTMLlLoader 物件的 paintsDefaultBackground 屬性設定為 false。此外，設定背景顏色的任何頁面元素都不會是透明的。例如，如果您為頁面主體元素設定背景顏色，則頁面上任何部分都不會是透明的。

下列範例說明如何將 Flash 顯示物件加入做為 HTML 頁面的上層重疊或下層重疊。此範例會建立兩個形狀簡單的物件，並在 HTML 內容的上方和下方各加入一個物件。此範例也會根據 enterFrame 事件，更新形狀位置。

<html> 
<head> 
<title>Bouncers</title> 
<script src="AIRAliases.js" type="text/javascript"></script> 
<script language="JavaScript" type="text/javascript"> 
air.Shape = window.runtime.flash.display.Shape; 
 
function Bouncer(radius, color){ 
    this.radius = radius; 
    this.color = color; 
 
    //velocity  
    this.vX = -1.3; 
    this.vY = -1; 
 
    //Create a Shape object and draw a circle with its graphics property 
    this.shape = new air.Shape();     
    this.shape.graphics.lineStyle(1,0); 
    this.shape.graphics.beginFill(this.color,.9); 
    this.shape.graphics.drawCircle(0,0,this.radius); 
    this.shape.graphics.endFill(); 
     
    //Set the starting position 
    this.shape.x = 100; 
    this.shape.y = 100; 
 
 
    //Moves the sprite by adding (vX,vY) to the current position 
    this.update = function(){ 
        this.shape.x += this.vX; 
        this.shape.y += this.vY; 
         
        //Keep the sprite within the window 
        if( this.shape.x - this.radius < 0){  
            this.vX = -this.vX; 
        } 
        if( this.shape.y - this.radius < 0){ 
            this.vY = -this.vY; 
        } 
        if( this.shape.x  + this.radius > window.nativeWindow.stage.stageWidth){ 
            this.vX = -this.vX; 
        } 
        if( this.shape.y  + this.radius > window.nativeWindow.stage.stageHeight){ 
            this.vY = -this.vY; 
        } 
         
    }; 
} 
 
function init(){ 
    //turn off the default HTML background 
    window.htmlLoader.paintsDefaultBackground = false; 
    var bottom = new Bouncer(60,0xff2233); 
    var top = new Bouncer(30,0x2441ff); 
 
    //listen for the enterFrame event 
    window.htmlLoader.addEventListener("enterFrame",function(evt){ 
        bottom.update(); 
        top.update(); 
    }); 
     
    //add the bouncing shapes to the window stage 
    window.nativeWindow.stage.addChildAt(bottom.shape,0); 
    window.nativeWindow.stage.addChild(top.shape); 
} 
</script> 
<body onload="init();"> 
<h1>de Finibus Bonorum et Malorum</h1> 
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis 
et quasi architecto beatae vitae dicta sunt explicabo.</p> 
<p style="background-color:#FFFF00; color:#660000;">This paragraph has a background color.</p> 
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis 
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias 
excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui 
officia deserunt mollitia animi, id est laborum et dolorum fuga.</p> 
</body> 
</html>

此範例提供一些進階技巧的基本簡介，這些技巧可在 AIR 中廣泛地應用於 JavaScript 與 ActionScript 上。如果您不熟悉使用 ActionScript 顯示物件，請參閱《ActionScript 3.0 開發人員指南》中的顯示程式設計。

範例：建立原生視窗

下列範例說明如何建立原生視窗：

public function createNativeWindow():void { 
    //create the init options 
    var options:NativeWindowInitOptions = new NativeWindowInitOptions(); 
    options.transparent = false; 
    options.systemChrome = NativeWindowSystemChrome.STANDARD; 
    options.type = NativeWindowType.NORMAL; 
     
    //create the window 
    var newWindow:NativeWindow = new NativeWindow(options); 
    newWindow.title = "A title"; 
    newWindow.width = 600; 
    newWindow.height = 400; 
     
    newWindow.stage.align = StageAlign.TOP_LEFT; 
    newWindow.stage.scaleMode = StageScaleMode.NO_SCALE; 
 
    //activate and show the new window 
    newWindow.activate(); 
}