创建窗体

 

创建窗体

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 instance 

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

         <![CDATA[  

            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 >