创建窗口

Adobe AIR 1.0 和更高版本

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 = new air.NativeWindowInitOptions(); 
options.systemChrome = air.NativeWindowSystemChrome.STANDARD; 
options.type = air.NativeWindowType.UTILITY 
options.transparent = false; 
options.resizable = false; 
options.maximizable = false;

transparent true type lightweight 时, 不支持 systemChrome 设置为 standard

注: 无法为使用 JavaScript window.open() 函数创建的窗口设置初始化属性。但是,您可以通过实现自己的 HTMLHost 类来覆盖这些窗口的创建方式。有关详细信息,请参阅 处理对 window.open() 的 JavaScript 调用

创建初始应用程序窗口

对应用程序的初始窗口使用标准 HTML 页。此页是从应用程序安装目录中加载的并放入应用程序沙箱中。该页用作应用程序的初始入口点。

在应用程序启动时,AIR 将创建窗口、设置 HTML 环境并加载 HTML 页。在分析任何脚本或向 HTML DOM 添加任何元素之前,AIR 将 runtime htmlLoader nativeWindow 属性添加到 JavaScript Window 对象。可以使用这些属性从 JavaScript 中访问运行时类。 nativeWindow 属性使您可以直接访问桌面窗口的属性和方法。

以下示例说明用 HTML 所构建 AIR 应用程序的主页的基本框架:该页等待 JavaScript 窗口 load 事件,然后显示本机窗口。

<html> 
    <head> 
        <script language="javascript" type="text/javascript" src="AIRAliases.js"></script> 
        <script language="javascript"> 
            window.onload=init; 
 
            function init(){ 
                window.nativeWindow.activate(); 
            } 
        </script> 
    </head> 
    <body></body> 
</html>
注: 此示例中引用的 AIRAliases.js 文件是一个脚本文件,它为常用内置 AIR 类定义方便的别名变量。该文件位于 AIR SDK 的 frameworks 目录内。

创建 NativeWindow

若要创建 NativeWindow,请将 NativeWindowInitOptions 对象传递到 NativeWindow 构造函数:

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

在将 visible 属性设置为 true 或调用 activate() 方法后,才显示该窗口。

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

几乎在所有情况下,都应将新本机窗口的舞台 scaleMode 属性设置为 noScale (使用 StageScaleMode.NO_SCALE 常量)。Flash 缩放模式旨在用于应用程序作者事先不知道应用程序显示区高宽比的情况。使用这些缩放模式,作者可以选择最少的内容损失:剪辑内容、拉伸或压缩内容或者用空白空间进行填充。由于您控制 AIR(窗口帧)中的显示区,因此可以在不损失内容的情况下使窗口大小适合内容或者使内容大小适合窗口。

HTML 窗口的缩放模式自动设置为 noScale

注: 若要确定当前操作系统中允许的最大窗口大小和最小窗口大小,请使用以下静态 NativeWindow 属性:
var maxOSSize = air.NativeWindow.systemMaxSize; 
var minOSSize = air.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 内容都可以动态创建和动态添加到窗口。

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

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

将 HTML 内容加载到 NativeWindow 中

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

//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 。此外,该页中设置背景颜色的任何元素都将不是透明的。例如,如果设置页面 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 显示对象,请参阅 《Adobe ActionScript 3.0 开发人员指南》 中的显示编程。

注: 若要访问 JavaScript Window 对象的运行时 nativeWindow 和 htmlLoader 属性,则必须从应用程序目录中加载 HTML 页。这种情况始终适用于基于 HTML 的应用程序中的根页面,但可能不适用于其他内容。此外,加载到框架(即使在应用程序沙箱中)中的文档不接收这些属性,但可以访问父级文档的那些属性。

示例:创建本机窗口

以下示例说明如何创建本机窗口:

function createNativeWindow() { 
    //create the init options 
    var options = new air.NativeWindowInitOptions(); 
    options.transparent = false; 
    options.systemChrome = air.NativeWindowSystemChrome.STANDARD; 
    options.type = air.NativeWindowType.NORMAL; 
     
    //create the window 
    var newWindow = new air.NativeWindow(options); 
    newWindow.title = "A title"; 
    newWindow.width = 600; 
    newWindow.height = 400; 
     
    //activate and show the new window 
    newWindow.activate(); 
}