图 1 中显示的 Window Sampler 应用程序演示有关在 Adobe AIR 中打开新窗口的基础知识。

具体而言, 该应用程序演示 AIR 的以下功能:

• 使用 Flex 框架中的 mx:Window 类创建窗口
• 使用 HTMLLoader 类创建窗口以显示 HTML
• 使用 NativeWindow 类创建窗口
• 设置窗口类型
• 设置窗口镶边
• 打开透明效果
• 设置窗口标题
• 设置窗口的位置和大小
• 设置窗口是否可调整大小、可最小化和可最大化

图 1。Microsoft Windows 中的 Window Sampler 范例应用程序, 两侧是四种不同种类的 AIR 窗口。

注意: 本范例应用程序按原样提供, 用于教学目的。

要求

若要充分利用本篇文章, 您需要以下软件和文件:

Adobe AIR

• 下载

Adobe Flex Builder 3

• 试用
• 购买

范例文件:

• WindowSampler.zip (ZIP, 57K)
• WindowSampler.air (AIR, 678K)

本范例应用程序包括以下文件:

• WindowSampler.mxml: 应用程序主文件 (Flex 的 MXML 格式), 其中包括本文所讨论的代码
• WindowSampler-app.xml: AIR 应用程序描述符文件
• bounce.html: 创建示例 HTML 窗口时用作示例内容的页面
• AIRAliases.js: 由 bounce.html 用于定义常用 AIR API 的 JavaScript 别名
• AIR 图标文件范例

若要测试应用程序, 请编译源代码或安装并运行 AIR 范例文件 (WindowSampler.air)。若要创建窗口, 请根据需要设置属性, 然后单击与要创建的窗口类型相对应的按钮。

必备知识

应具备使用 Flex Builder 构建应用程序的一般经验。有关使用此快速入门指南的详细信息, 请参阅用 Flex 构建快速入门范例应用程序。

了解代码

注意: 对于文件的 MXML 代码所使用的全部 Flex 组件, 本文将不一一介绍。有关详细信息, 请参阅《Flex 3 语言参考》*。

Window Sampler 使用三种技术创建窗口:

• 创建包含 DataChooser 组件的 Flex mx:Window 对象。
• 创建 HTML 根窗口, 并加载 HTML 示例页。
• 创建 NativeWindow 对象, 向舞台添加 Sprite 对象, 并绘制用于填充窗口的矩形网格。

创建 Flex 窗口

Window Sampler 定义函数 createNewFlexWindow(), 用于根据主窗口中控件的设置创建 Flex 窗口。该函数执行以下任务来创建窗口:

1. 调用 mx:Window 构造函数并设置窗口属性:

   var newWindow:Window = new Window();             
   newWindow.maximizable = maximizableOption.selected;
   newWindow.minimizable = minimizableOption.selected;
   newWindow.resizable = resizableOption.selected; 
   newWindow.transparent = transparentOption.selected;
   newWindow.systemChrome = Chrome.selectedItem.optionString;
   newWindow.type = windowType.selectedItem.optionString;
   newWindow.title = titleString.text;
   newWindow.alwaysInFront = alwaysInFrontOption.selected;
   newWindow.showStatusBar = false;
   newWindow.layout = "absolute";

2. 调用窗口的 open() 方法。这将为窗口创建相关的 NativeWindow 和 Stage 对象, 但并不显示该窗口, 因为 openWindowActive 参数为 false。必须在调用 open() 之后才能设置任何引用舞台或原有窗口对象的属性:

   newWindow.open(false);
                
   newWindow.stage.align = stageAlignment.selectedItem.optionString;
   newWindow.stage.scaleMode = ScaleMode.selectedItem.optionString;
   newWindow.nativeWindow.x = Number(xPosition.text); 
   newWindow.nativeWindow.y = Number(yPosition.text);

3. 添加内容。此示例向窗口添加一个 DateChooser 控件, 并使用样式将控件的边停靠至窗口的边:

   var exampleContent:DateChooser = new DateChooser();
   
   exampleContent.setStyle("top",10);
   exampleContent.setStyle("left",10);
   exampleContent.setStyle("bottom",10);
   exampleContent.setStyle("right",10);
   newWindow.addChild(exampleContent);

   激活以显示窗口:

4. newWindow.activate();

创建 ActionScript 窗口

Window Sampler 定义函数 createNewWindow(), 用于根据主窗口中控件的设置创建新的原有窗口。该函数执行以下任务来创建窗口:

1. 创建 NativeWindowInitOptions 对象, 并设置其属性。初始选项定义原有窗口的属性, 创建窗口之后即无法更改这些属性。

   var options:NativeWindowInitOptions = new NativeWindowInitOptions();
                
   options.maximizable = maximizableOption.selected;
   options.minimizable = minimizableOption.selected;
   options.resizable = resizableOption.selected; 
   options.transparent = transparentOption.selected;
   options.systemChrome = Chrome.selectedItem.optionString;
   options.type = windowType.selectedItem.optionString;

   注意: 对于使用系统镶边的窗口不支持透明效果。同样, 系统镶边无法用于简单窗口。在 Window Sampler 中将实施这些规则, 途径是在做出设置时验证这些设置。

2. 创建窗口, 同时传入 NativeWindowInitOptions 对象, 并设置在创建窗口之后可以更改的窗口属性:

   var newWindow:NativeWindow = new NativeWindow(options);
    		    
   newWindow.title = titleString.text;
   newWindow.alwaysInFront = alwaysInFrontOption.selected;
   newWindow.x = Number(xPosition.text);
   newWindow.y = Number(yPosition.text);
   newWindow.width = Number(widthValue.text);
   newWindow.height = Number(heightValue.text);
   newWindow.stage.align = stageAlignment.selectedItem.optionString;
   newWindow.stage.scaleMode = ScaleMode.selectedItem.optionString;

   width 和 height 属性设置窗口的外尺寸, 其中包括任何系统镶边的大小。因此, 在将镶边设置为相同宽度和高度的情况下, 无系统镶边的窗口所具有的工作区大于有镶边的窗口。

3. 添加内容。

   创建原有窗口的同时还会创建一个舞台, 代表窗口的工作区 (可绘制区域)。此舞台是显示树的根容器。通过用 addChild() 方法向舞台或其它已经在舞台上的 DisplayObject 添加 DisplayList 对象 (或从 DisplayList 继承的对象), 从而向原有窗口的工作区添加内容。

   范例应用程序的 createNewWindow() 方法中的以下各行根据 MXML 控制设置来设置舞台属性, 并通过创建 Sprite 和调用其图形方法来绘制矩形网格, 从而向窗口中绘制某些示例内容:

   var client:Sprite = new Sprite();
   var rectSize:int = 40;
   var rectSpace:int = 4;
   with(client.graphics){
       lineStyle(1,0,1);
       beginFill(0x234578,.5);
       for(var i:int = 0; i <= Math.floor(newWindow.stage.stageWidth/rectSize); i++){
            for (var j:int = 0; j <= Math.floor(newWindow.stage.stageHeight/rectSize); j++){
                 drawRoundRect(i*rectSize,j*rectSize,
                 rectSize-rectSpace,rectSize-rectSpace,10,10);
            }//j 循环
       }//i 循环
   endFill();
   }
   newWindow.stage.addChild(client);

   注意: 无法将 Flex 组件直接添加至原有窗口。

4. 添加交互性。向无镶边的窗口添加两个事件处理函数, 以便可以移动和关闭窗口:

   if(options.systemChrome == NativeWindowSystemChrome.NONE){
        newWindow.stage.doubleClickEnabled = true;
        newWindow.stage.addEventListener(KeyboardEvent.KEY_DOWN,
        function(e:Event):void{e.target.stage.window.close();});
        newWindow.stage.addEventListener(MouseEvent.MOUSE_DOWN,
        function(e:Event):void{e.target.stage.window.startMove();})
   }

5. 创建窗口、添加内容和附加事件处理函数之后, 最后一步是使窗口可见:

   newWindow.visible = true;

关于舞台属性

舞台的 scaleMode 属性设置在调整窗口大小时舞台如何缩放和剪裁子显示对象。在 AIR 中只应使用 noScale 模式。在此模式中不缩放舞台。舞台的大小直接随窗口的边界一起变化。如果将窗口调小, 则可能会剪裁对象。

舞台缩放模式旨在用于浏览器环境中, 在该环境中并非始终可以控制舞台的大小或高宽比。当舞台不符合应用程序的理想大小或高宽比时, 使用这些模式可以选择最好的折衷方案。在 AIR 中始终可以控制舞台, 因此更改窗口的尺寸与缩放窗口中的内容相比, 所得结果更好。

在浏览器中和对于初始 AIR 窗口, 从所加载的 SWF 文件中读取窗口大小与初始缩放系数之间的关系。但是, 创建 NativeWindow 时, AIR 对于窗口大小与缩放系数之间的关系随意选择了 72:1。因此, 如果窗口为 72x72 像素, 则向窗口添加 10x10 的矩形可以绘制正确大小。如果将窗口更改为 144x144, 则会将 10x10 像素的矩形缩放为 20x20 像素。如果坚持使用 scaleMode 而非 noScale, 则可以通过将窗口中任何显示对象的缩放系数都设置为 72 像素与舞台当前宽度和高度之比来进行补偿。当不选择 noScale 作为 scaleMode 时, Window Sampler 使用以下代码重新缩放向 ActionScript 示例窗口的舞台添加的 Sprite 对象:

if(newWindow.stage.scaleMode != StageScaleMode.NO_SCALE){
    client.scaleX = 72/newWindow.stage.stageWidth;
    client.scaleY = 72/newWindow.stage.stageHeight;
}

Flex 和 HTML 窗口自动将舞台的 scaleMode 设置为 noScale。更改 scaleMode 会打乱这些窗口类型中所使用的自动布局机制。

舞台的 align 属性设置在调整窗口大小时舞台原点所停靠的边角。例如, 如果将舞台的 align 属性设置为 bottomRight, 则从右下角将窗口调大时, 舞台原点也随之向窗口右下侧移动。做出此变化之后, 对于左上角对象的位置将必须使用负坐标。第一次打开窗口时, 无论选择什么值作为对齐方式, 舞台原点始终都是窗口的左上角。

创建 HTML 窗口

Window Sampler 定义函数 createNewHTMLWindow(), 用于根据主窗口中控件的设置创建 HTML 窗口。该函数执行以下任务来创建窗口:

1. 创建 NativeWindowInitOptions 对象, 并设置其属性。初始选项定义原有窗口的属性, 创建窗口之后即无法更改这些属性。

   var options:NativeWindowInitOptions = new NativeWindowInitOptions();
                
   options.maximizable = maximizableOption.selected;
   options.minimizable = minimizableOption.selected;
   options.resizable = resizableOption.selected; 
   options.transparent = transparentOption.selected;
   options.systemChrome = Chrome.selectedItem.optionString;
   options.type = windowType.selectedItem.optionString;

   注意: 对于使用系统镶边的窗口不支持透明效果。同样, 系统镶边无法用于简单窗口。在 Window Sampler 中将实施这些规则, 途径是在做出设置时验证这些设置。

2. 创建窗口, 同时传入 NativeWindowInitOptions 对象, 并设置在创建窗口之后可以更改的窗口属性:

   var html:HTMLLoader = HTMLLoader.createRootWindow(false, options, true,
                                                     new Rectangle(Number(xPosition.text),
                                                                   Number(yPosition.text),
                                                                   Number(widthValue.text),
                                                                   Number(heightValue.text)));
       var newWindow:NativeWindow = html.stage.nativeWindow;
       newWindow.alwaysInFront = alwaysInFrontOption.selected;

   HTMLLoader.createRootWindow() 函数创建原有窗口, 向窗口舞台添加 HTMLLoader 对象, 并设置滚动条。

3. 加载窗口内容, 并在页面加载完毕时激活窗口:

   html.load(new URLRequest("app:/html/bounce.html"));
   html.addEventListener(Event.COMPLETE, loadDocument);
   function loadDocument(event:Event):void{
        html.window.document.title = titleString.text;
        //激活新窗口
        newWindow.activate();
        html.removeEventListener(Event.COMPLETE, loadDocument); 
   }

关于作者