创建窗口



AIR 自动创建应用程序的第一个窗口，但您可以创建所需的任何其它窗口。若要创建本机窗口，请使用 NativeWindow 构造函数方法。若要创建 Flex 窗口，请使用 mx:Window 类。若要创建 HTML 窗口，请使用 HTMLLoader createRootWindow() 方法或者从 HTML 文档中调用 JavaScript window.open() 方法。

    指定窗口初始化属性

    在创建桌面窗口后，无法更改窗口的初始化属性。这些不可改变的属性及其默认值包括：

    属性

    默认值

    systemChrome

    standard

    type

    normal

    transparent

    false

    maximizable

    true

    minimizable

    true

    resizable

    true

    在应用程序描述符文件中设置 AIR 所创建的初始窗口的属性。AIR 应用程序主窗口的 type 值始终是 normal。（可以在描述符文件中指定其它窗口属性，例如 visible、width 和 height，但可以随时更改这些属性。）

    使用 Flex mx:Window 类创建窗口时，在 window 对象自身的窗口 MXML 声明中或创建窗口的代码中可指定该窗口的初始化属性。在调用 window.open() 方法后，才创建桌面窗口。打开窗口后，无法更改这些初始化属性。

    使用 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 调用。

    创建初始应用程序窗口

    AIR 根据应用程序描述符中指定的属性来创建初始应用程序窗口并加载内容元素中引用的文件。内容必须为 SWF 文件或 HTML 文件。

    初始窗口可以是应用程序的主窗口，也可以仅用于启动一个或多个其它窗口。该窗口不必一定可见。

    使用 Flex 创建初始窗口

    在用 Flex 框架创建 AIR 应用程序时，使用 mx:WindowedApplication 作为主 MXML 文件的根元素。（可以使用 mx:Application 组件，但它不支持 AIR 中可用的所有窗口功能。）WindowedApplication 组件可用作应用程序的初始入口点。

    在启动应用程序时，AIR 将创建本机窗口、初始化 Flex 框架并将 WindowedApplication 对象添加到窗口舞台。启动序列完成后，WindowedApplication 调度 applicationComplete 事件。使用 WindowedApplication 实例的 nativeWindow 属性访问桌面 window 对象。

    以下示例创建设置了其 x 坐标和 y 坐标的简单 WindowedApplication 组件：

    <?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>

    使用 ActionScript 创建初始窗口

    在使用 Flex 3 SDK 和 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 Main extends Sprite 
    { 
        private var mainWindow:NativeWindow; 
        public function Main(){ 
            this.addEventListener(Event.ADDED_TO_STAGE, initialize); 
        } 
         
        private function initialize(event:Event):void{ 
            mainWindow = this.stage.nativeWindow; 
            //perform initialization... 
            mainWindow.activate(); //show the window 
        } 
    } 
}
    注： 可以为该类提供任何有效的名称。

    创建 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);

    创建 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() 方法后，才显示该窗口。

    创建窗口后，可以使用舞台属性和 Flash 显示列表技术来初始化其属性和将内容加载到该窗口中。

    几乎在所有情况下，都应将新本机窗口的舞台 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。

    使用 createRootWindow() 方法创建的窗口与打开窗口相互独立。JavaScript Window 对象的 parent 和 opener 属性为 null。打开窗口可以使用 createRootWindow() 函数返回的 HTMLLoader 引用来访问新窗口的 Window 对象。在前一个示例的上下文中，语句 newHTMLLoader.window 引用所创建窗口的 JavaScript Window 对象。

    注： 可以从 JavaScript 和 ActionScript 中调用 createRootWindow() 函数。

    向窗口添加内容

    向 AIR 窗口添加内容的方式取决于窗口类型。使用 MXML 和 HTML，您能够以声明方式定义窗口的基本内容。可以在应用程序 SWF 中嵌入资源，也可以从单独的应用程序文件中加载资源。Flex、Flash 和 HTML 内容都可以动态创建和动态添加到窗口。

    在加载包含 JavaScript 的 SWF 内容或 HTML 内容时，必须考虑 AIR 安全模型。应用程序安全沙箱中的任何内容（即与应用程序一起安装且可用 app: URL 方案加载的内容）具有对所有 AIR API 的完全访问权限。从此沙箱外部加载的任何内容均无法访问 AIR API。应用程序沙箱外部的 JavaScript 内容无法使用 JavaScript Window 对象的 runtime、nativeWindow 或 htmlLoader 属性。

    为允许安全的跨脚本访问，可以使用沙箱桥在应用程序内容和非应用程序内容之间提供有限的接口。在 HTML 内容中，还可以将应用程序的页面映射到非应用程序沙箱中以允许该页面上的代码跨脚本访问外部内容。请参阅 AIR 安全性。

    加载 SWF 或图像

    可以使用 flash.display.Loader 类将 Flash 或图像加载到本机窗口的显示列表中： 

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

    可以加载包含库代码的 SWF 文件以在基于 HTML 的应用程序中使用。在 HTML 窗口中加载 SWF 的最简单方式是使用 script 标签，但也可以直接使用 Loader API。

    注： 如果使用 ActionScript 1 或 2 创建的早期 SWF 文件加载到同一窗口中，则它们共享全局状态，例如定义、单一实例和全局变量。如果此类 SWF 文件依赖于未做改动的全局状态才能正确工作，则无法将其多次加载到同一窗口，也无法使用重叠的类定义和变量将其作为另一个 SWF 文件加载到同一窗口。此内容可以加载到单独的窗口中。

    将 HTML 内容加载到 NativeWindow 中

    若要将 HTML 内容加载到 NativeWindow 中，可以将 HTMLLoader 对象添加到窗口舞台并将 HTML 内容加载到 HTMLLoader 中，也可以使用 HTMLLoader.createRootWindow() 方法创建已包含 HTMLLoader 对象的窗口。以下示例在本机窗口舞台上的 300 x 500 像素的显示区域内显示 HTML 内容：

    //newWindow is a NativeWindow instance 
var htmlView:HTMLLoader = new HTMLLoader(); 
html.width = 300; 
html.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）或者缩放了 HTMLLoader 控件，则不会显示 HTML 文件中的 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。此外，该页中设置背景颜色的任何元素都将不是透明的。例如，如果设置页面 body 元素的背景颜色，则该页的所有内容都将不是透明的。

    以下示例说明如何将 Flash 显示对象作为覆盖图或衬垫层添加到 HTML 页。该示例创建两个简单的 shape 对象，在 HTML 内容下方和上方各添加一个 shape 对象。该示例还基于 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(); 
}