AIR 窗体基础
窗体API 包含下列类：
引用
flash.displayNativeWindow, NativeWindowInitOptions 下面的类中定义了些Window字符常量：NativeWindowDisplayState, NativeWindowResize, NativeWindowSystemChrome
----------------
flash.events
NativeWindowBoundsEvent, NativeWindowDisplayStateEvent, NativeWindowErrorEvent
----------------
flash.system
NativeWindowCapabilities
AIR提供了易用的，跨平台的窗体API，使用Flash, Flex, 和HTML编程技术创建本地操作系统窗体。
用AIR，你可以很自由的创建应用程序的主题样式，创建的窗体看起来和标准桌面程序一样，在不同的操作系统上就有不同的系统窗体风格，或者使用皮肤，扩展窗体主题风格。你甚至可以用矢量图或位图绘制窗体。
AIR支持两种不同类型的APIs用于创建窗体：面向Flash的NativeWindow类和面向HTML的JavaScript Window类。通过Flash stage和显示列表可直接用NativeWindow创建窗体。要添加可视化对象到NativeWindow上，需要添加对象到window's stage的显示列表上。使用HTML，CSS和JavaScript创建窗体来显示内容，如果要添加可视化对象到HTML窗体上，需要用DOM添加对象。
以前的项目中的窗体都是通过AIR项目的描述文件自动创建的，因为已经指定了rootContent 元素属性值。如果根内容是一个SWF文件，则NativeWindow 被创建，SWF 被载入到窗体中。如果根内容为HTML文件，则HTML窗体被创建，HTML页被载入。
Native windows使用基于事件驱动的编程模型。改变任何属性或调用窗体的方法都将影响显示或组件的行为。例如当系统按钮最大化按钮被点击时，下列事件将被触发：
1. 用户点击了最大化按钮。
2. 窗体发出一个displayStateChanging事件。
3. 如果没有注册监听器取消事件，则窗体被最大化。
4. displayStateChange事件通知监听器。
另外，相关联的事件也会被触发：
1. 如果窗体左上角坐标因为最大化而改变则发出move事件。
2. 如果窗体大小因最大化发生变化则发出resize事件。
类似的事件还有minimizing, restoring, closing, moving, resizing window.
本地窗体的样式
窗体的基本外观和样式取决于三个属性：type, systemChrome, 和transparent。Type属性设置窗体的功能。systemChrome属性设置窗体是否遵循操作系统窗体样式。Transparent属性设置是否支持alpha混合。这些属性都是设置在将被创建的窗体的NativeWindowInitOptions 对象上且不能被改变。自动创建的初始窗体是根据描述文件的这些属性值进行设置的，且type属性不能在描述文件中设置，其值都是normal。
这些属性的设置有些是不兼容的，如当transparent 设置为true时或type为lightweight时systemChrome不能设置为standard 。
窗体类型
Type属性决定创建何种类型的窗体，且只有在创建新的NativeWindow.时可设置，AIR支持下列类型的窗体：
Normal
典型的窗体，Normal窗体具有操作系统普通窗体的功能。
Utility
一个面板窗体，Utility窗体是简化的窗体，且不显示在系统任务栏中。
Lightweight
Lightweight窗体也不显示在系统任务栏中，另外它没有系统菜单。它很适合做提示水泡窗体，当type设置为lightweight时，systemChrome 必须设置为"none".
注意：在Beta版本中，模态窗体类型还不支持
Window chrome
Window chrome 是一组操作窗体的控件，作为AIR 程序window chrome有一下几种：
System chrome
System chrome 显示的窗体具有操作系统窗体一样的一组控件和样式。使用system chrome是AIR窗体和普通桌面程序具有一样的样式风格。System chrome是由系统管理的，你的程序不能直接访问这些控件，但可以处理这些控件发出的事件，如果窗体被设置为system chrome ，则transparency 属性必须为false 。
Flex chrome
当使用Flex WindowedApplication 和 Window组件时，窗体样式由Flex framework提供，如果Flex 组件在system chrome下使用，则Flex chrome 不会被显示。
Custom chrome
如果你创建的窗体没有system chrome且不使用Flex mx:WindowedApplication组件，你必须添加自己的控件处理用户和窗体的交互。这里你可以制作透明的，不规则的窗体。
窗体透明
要允许窗体与桌面环境进行alpha混合，需要设置窗体的transparent 属性为true。Transparent属性必须在窗体创建之前设置，且不能改变。该属性在NativeWindowInitOptions对象上。
透明窗体在以下方面很有用：
1. 程序边框为不规则图形
2. 程序必须”淡出“或出现为不可视
当窗体设置为system chrome.时透明不可用。
MXML程序窗体的透明性
如果Flex程序使用CSS 样式设置背景色或颜色，则窗体不会透明。
Application
{
background-image:"";
background-color:"";
}
可视化窗体目录
下面的表格说明不同的属性值影响窗体的视觉效果：
keshishijue.gif ( 24.72KB ) 下载次数: 16
Beta版本的限制
下面的特性在beta版本中还不支持：
1. 窗体API 还不支持 Toolbars|OS X Toolbar 或 OS X Proxy Icon.
2. 系统托盘图标
3. 程序控制应用程序图标
4. 桌面屏幕信息
5. 本地窗体菜单
创建窗体
AIR 主要提供了下列方法用于创建程序窗体：
AIR 自动为每个程序创建第一个窗体。这个窗体根据应用程序描述文件设置进行初始化。如果root上下文已经在描述文件里定义，那么就可以通过Stage.window属性和NativeWindow API来访问window实例的属性和方法。另外，SWF文件的主类必须继承Sprite或Sprite的子类(WindowedApplication和Application组件都是Sprite之类) 如果root上下文是一个HTML文件，这可通过JavaScript Window 对象访问window的属性和方法。
可以创建NativeWindow类实例，通过NativeWindowInitOptions 对象实例作为NativeWindows构造函数的参数进行初始化。可直接通过该对象来访问属性和方法。
可以使用HTML组件的createRootWindow() 方法创建一个窗体用于显示HTML内容。
还可以使用JavaScript Window.open() 方法通过javascript打开一个新窗体。JavaScript创建的窗体只能通过javascript访问其属性和方法，且该窗体只能显示HTML内容。
创建一个新的本地窗体（NativeWindow）
要创建一个新的NativeWindow，可先创建一个NativeWindowInitOptions对象并传递给NativeWindow 构造函数。
代码
var options:NativeWindowInitOptions = new NativeWindowInitOptions();options.systemChrome = NativeWindowSystemChrome.STANDARD;
options.transparent = false;
var newWin:NativeWindow = new NativeWindow(false, options);
NativeWindow构造函数第一个参数指定是否创建时立即显示该窗体，为了避免显示出如设置大小，位置和内容时窗体所处的中间状态，当你完成窗体初始化后，设置NativeWindow.visible 属性为true。第二个参数为NativeWindowInitOptions对象，该对象用于设置窗体的属性，一旦窗体创建后将不能更改。
注意：设置systemChrome="standard" 和transparent="true" 这种组合不支持。
一旦窗体被创建，你可以用stage属性和Flash显示列表初始化一些属性并载入内容到窗体之上。
注意：要确定操作系统窗体的最大化和最小化大小，可通过NativeWindowCapabilities类得到：var maxOSSize:Point = NativeWindowsCapabilites.windowMaxSize;
var minOSSize:Point = NativeWindowsCapabilites.windowMinSize;
往窗体中添加内容
要添加内容到本地窗体上，可通过窗体的stage来添加可视化对象。你可以动态创建可视化对象或者通过flash.display.Loader类载入现成的内容。对于HTML窗体，可通过location属性来改变加载的内容或插入HTML内容到DOM。
当你载入包含JavaScript的SWF或HTML内容时必须要考虑到AIR安全模型。任何安全沙箱中的程序，无论是安装的内容或通过url载入的资源都有能力访问到AIR APIs，任何从沙箱外部载入的内容在访问受安全约束的AIR APIs和跨脚本内容时将受到限制。应用程序安全沙箱外部的JavaScript内容将不能使用JavaScript窗体对象的nativeWindow或htmlControl属性。
要想允许安全跨脚本访问，你可以使用flash.system.Door API创建一个严格受限的通讯网关，它提供有限的接口用于程序内容和非程序内容之间的访问。
载入一个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);
}
}
}
要在HTML窗体中载入可视化的Flash内容，必须显示在HTML内容的最顶层，或在透明的HTML内容之下。且大小和位置计算独立于HTML内容。
要想在基于HTML的程序中载入包含库代码的SWF文件，最简单的办法就是使用script 标签，也可以直接使用flash.display.Loader API 。
载入HTML内容到本地窗体（NativeWindow）上
要载入HTML内容到本地窗体上，必须在窗体的stage上添加一个HTMLControl控件，然后载入HTML内容到HTML控件上。
代码
//newWindow is a NativeWindow instancevar htmlView:HTMLControl = new HTMLControl();
html.width = newWindow.width;
html.height = newWindow.height;
//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页面到HTML窗体上，使用JavaScript方法如window.open 。
要载入HTML页面到Flex 程序上，使用Flex HTML组件。
载入Flash 内容到HTML页面上
在这个Beta版本中，将不支持直接在HTML页面中嵌入Flash内容。页面中的任何Flash对象都将被显示为空白区域，但是使用AIR APIs载入或创建的Flash内容都将作为HTML层的形式存在。
在HTML窗体上层添加Flash内容
因为HTML窗体包含在NativeWindow 实例之内，可以在HTML层的上层或下层中添加Flash可视化对象。
要添加可视化对象到HTML层之上，可通过window.nativeWindow.stage属性的addChild() 方法，addChild()方法将把内容放在任何现成内容之上。
要添加可视化对象到HTML层之下，使用window.nativeWindow.stages属性的addChildAt()方法，传递一个0值作为索引参数，这将导致其他层都向上移动，最后把新加入的对象放在底部。要想让HTML层以下的内容可见，必须设置window.htmlControl对象的paintsDefaultBackground属性为false。
下面的例子演示如何添加一个flash对象，该例子创建了两个图形对象，一个添加在HTML层下面，一个在上面。
代码
<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.htmlControl.paintsDefaultBackground = false;
var bottom = new Bouncer(60,0xff2233);
var top = new Bouncer(30,0x2441ff);
//listen for the enterFrame event
window.htmlControl.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. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
ratione voluptatemsequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,
quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas
nulla pariatur?</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. Et harum quidem
rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam
et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates
repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a
sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut
perferendis doloribus asperiores repellat.</p>
</body>
</html>
示例：用ActionScript创建窗体
下面的例子演示如何创建新窗体：
代码
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" applicationComplete="createNativeWindow();">
<mx:Script>
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(false,options);
newWindow.title = "A title";
newWindow.width = 600;
newWindow.height = 400;
//add a sprite to the window
newWindow.stage.align = StageAlign.TOP_LEFT;
newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
//show the new window
newWindow.visible = true;
}
</mx:Script>
</mx:WindowedApplication>
