ウィンドウの作成

デスクトップウィンドウの作成後に、ネイティブウィンドウの初期化プロパティを変更することはできません。このような不変のプロパティとそのデフォルト値は次のとおりです。

AIR によって作成される初期ウィンドウのプロパティは、アプリケーション記述ファイルで設定します。AIR アプリケーションのメインウィンドウのタイプは、常に normal です（記述ファイルでは、 visible 、 width 、 height などの他のウィンドウプロパティを指定することができますが、これらのプロパティはいつでも変更できます）。

アプリケーションで作成する他のネイティブウィンドウおよび HTML ウィンドウのプロパティは、NativeWindowInitOptions クラスを使用して設定します。ウィンドウを作成するときは、ウィンドウプロパティを指定する NativeWindowInitOptions オブジェクトを、NativeWindow コンストラクター関数または HTMLLoader createRootWindow() メソッドに渡す必要があります。

次のコードでは、UTILITY ウィンドウの 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 に設定することはできません。

Flex mx:Window クラスでウィンドウを作成するときは、ウィンドウオブジェクト自体で初期化プロパティを指定します。指定は、ウィンドウの MXML 宣言またはウィンドウを作成するコードの中で行います。基になる NativeWindow オブジェクトは、 open() メソッドを呼び出すまで作成されません。ウィンドウが開かれた後に、これらの初期化プロパティを変更することはできません。

AIR は、アプリケーション記述子で指定されているプロパティに基づいて初期アプリケーションウィンドウを作成し、content エレメントで参照されているファイルを読み込みます。content エレメントは、SWF ファイルまたは HTML ファイルを参照する必要があります。

初期ウィンドウは、アプリケーションのメインウィンドウであっても、1 つ以上の他のウィンドウを起動するためだけのものであってもかまいません。表示する必要もありません。

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 に自動的に設定されます。

var maxOSSize:Point = NativeWindow.systemMaxSize; 
var minOSSize:Point = NativeWindow.systemMinSize; 

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

アプリケーションセキュリティサンドボックス内のコンテンツは、ウィンドウ作成用のさらに強力なメソッドである 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"));

透明ウィンドウを作成する場合は、そのウィンドウに読み込まれた HTML に埋め込まれている SWF コンテンツは、常に表示されるとは限りません。SWF ファイルを参照するために使用されるオブジェクトまたは埋め込みタグの 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 オブジェクトを参照します。

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 のコンテンツはいずれも、同時進行で作成し、ウィンドウに動的に追加できます。

SWF コンテンツ、または JavaScript を含む HTML コンテンツを読み込むときは、AIR のセキュリティモデルを考慮する必要があります。アプリケーションセキュリティサンドボックス内のコンテンツ、つまりアプリケーションでインストールされて、app: URL スキームで読み込み可能なコンテンツは、すべての AIR API にアクセスできる完全な権限を持っています。このサンドボックスの外部から読み込まれるコンテンツは、AIR API にアクセスできません。アプリケーションサンドボックスの外部にある JavaScript コンテンツは、JavaScript Window オブジェクトの runtime 、 nativeWindow 、または htmlLoader プロパティを使用できません。

安全なクロススクリプトを可能にするには、サンドボックスブリッジを使用して、アプリケーションコンテンツと非アプリケーションコンテンツの間に制限されたインターフェイスを提供できます。HTML コンテンツでは、アプリケーションのページを非アプリケーションサンドボックスにマップし、そのページのコードが外部コンテンツをクロススクリプトできるようにすることもできます。 AIR のセキュリティ を参照してください。

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

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

次の例では、ネイティブウィンドウの作成方法を示します。

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