Creazione di finestre

Le proprietà di inizializzazione di una finestra nativa non possono essere modificate dopo che la finestra desktop è stata creata. Nella tabella seguente sono elencate le proprietà immutabili e i corrispondenti valori predefiniti:

Potete impostare le proprietà della finestra iniziale creata da AIR nel file descrittore dell'applicazione. La finestra principale di un'applicazione AIR è sempre del tipo normale (proprietà della finestra aggiuntive possono essere specificate nel file descrittore, ad esempio visible , width e height , e modificate in qualsiasi momento).

Per impostare le proprietà di altre finestre native e HTML create dall'applicazione potete utilizzare la classe NativeWindowInitOptions. Durante la creazione di una finestra, potete passare un oggetto NativeWindowInitOptions che specifica le proprietà della finestra alla funzione di costruzione NativeWindow o al metodo createRootWindow() della classe HTMLLoader.

Il codice riportato di seguito crea un oggetto NativeWindowInitOptions per una finestra di utilità:

var options:NativeWindowInitOptions = new NativeWindowInitOptions(); 
options.systemChrome = NativeWindowSystemChrome.STANDARD; 
options.type = NativeWindowType.UTILITY 
options.transparent = false; 
options.resizable = false; 
options.maximizable = false; 

L'impostazione di systemChrome su standard quando transparent è impostato su true o type è impostato su lightweight non è supportata.

Durante la creazione di una finestra con la classe mx:Window di Flex, potete specificare le proprietà di inizializzazione nell'oggetto finestra stesso, all'interno della dichiarazione MXML per la finestra o nel codice di creazione della finestra. L'oggetto NativeWindow sottostante non viene creato fino a quando non chiamate il metodo open() . Dopo che la finestra è stata aperta, queste proprietà di inizializzazione non possono essere modificate.

AIR consente di creare la finestra iniziale dell'applicazione in base alle proprietà specificate nel descrittore dell'applicazione e di caricare il file indicato nell'elemento content. L'elemento content deve fare riferimento a un file SWF o HTML.

La finestra iniziale può essere la finestra principale dell'applicazione o servire semplicemente per avviare una o più finestre. Non dovete necessariamente renderla visibile.

Potete creare una classe NativeWindow passando un oggetto NativeWindowInitOptions al costruttore NativeWindow:

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

Per visualizzare la finestra, impostate la proprietà visible su true o chiamate il metodo activate() .

Dopo che la finestra è stata creata, potete inizializzare le sue proprietà e caricare il contenuto nella finestra utilizzando la proprietà stage e le tecniche dell'elenco di visualizzazione di Flash.

In quasi tutti i casi, occorre impostare la proprietà scaleMode dello stage di una nuova finestra nativa su noScale (utilizzate la costante StageScaleMode.NO_SCALE ). Le modalità scala di Flash sono progettate per situazioni in cui l'autore dell'applicazione non conosce in anticipo le proporzioni dello spazio di visualizzazione dell'applicazione. Le modalità scala consentono all'autore di scegliere il compromesso migliore: ritagliare il contenuto, allungarlo o schiacciarlo, oppure riempirlo con spazio vuoto. Poiché AIR fornisce il controllo dello spazio di visualizzazione (la cornice della finestra), potete adattare le dimensioni della finestra al contenuto, o viceversa, senza compromessi.

La modalità scala per le finestre Flex e HTML è impostata automaticamente su noScale .

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

Per creare una finestra HTML, potete chiamare il metodo Window.open() di JavaScript o il metodo createRootWindow() della classe HTMLLoader di AIR.

Il contenuto HTML in una sandbox di sicurezza può usare il metodo Window.open() di JavaScript standard. Se il contenuto viene eseguito al di fuori della sandbox dell'applicazione, il metodo open() può essere chiamato solo in risposta all'interazione utente, ad esempio il clic del mouse o la pressione di un tasto. Quando il metodo open() viene chiamato, viene creata una finestra con chrome di sistema per visualizzare il contenuto a livello dell'URL specificato. Ad esempio:

newWindow = window.open("xmpl.html", "logWindow", "height=600, width=400, top=10, left=10");

Il contenuto della sandbox di sicurezza dell'applicazione ha accesso al più potente metodo di creazione delle finestre, HTMLLoader.createRootWindow() . Grazie a questo metodo, potete specificare tutte le opzioni di creazione per una nuova finestra. Ad esempio, il codice JavaScript riportato di seguito crea una finestra di tipo leggero senza chrome di sistema con una dimensione di 300x400 pixel:

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

Se create una finestra trasparente, il contenuto SWF incorporato nell'HTML caricato nella finestra non viene sempre visualizzato. Dovete impostare il parametro wmode dell'oggetto o tag incorporato utilizzato per fare riferimento al file SWF su opaque o transparent . Il valore predefinito di wmode è window , pertanto, per impostazione predefinita, il contenuto SWF non viene visualizzato in finestre trasparenti. Il contenuto PDF non può essere visualizzato in finestre trasparenti, a prescindere dal valore wmode impostato. (Anche nelle versioni precedenti a AIR 1.5.2, il contenuto SWF non poteva essere visualizzato in finestre trasparenti.)

Le finestre create con il metodo createRootWindow() rimangono indipendenti rispetto alla finestra di apertura. Le proprietà parent e opener dell'oggetto Window JavaScript sono null . La finestra di apertura può accedere all'oggetto Window della nuova finestra utilizzando il riferimento HTMLLoader restituito dalla funzione createRootWindow() . Nel contesto dell'esempio precedente, l'istruzione newHTMLLoader.window fa riferimento all'oggetto Window JavaScript della finestra creata.

Per creare un mx:Window, potete creare un file MXML utilizzando mx:Window come tag principale, oppure chiamare direttamente il costruttore della classe Window.

L'esempio seguente crea e visualizza un mx:Window chiamando il costruttore 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);

La modalità utilizzata per aggiungere contenuto a una finestra AIR dipende dal tipo di finestra. Ad esempio, MXML e HTML consentono di definire il contenuto di base della finestra tramite dichiarazioni. Potete incorporare risorse nei file SWF dell'applicazione oppure caricarle da file dell'applicazione separati. Tutto il contenuto Flex, Flash e HTML può essere creato al volo e aggiunto dinamicamente a una finestra.

Durante il caricamento di contenuto SWF, o contenuto HTML contenente JavaScript, occorre considerare il modello di sicurezza AIR. Tutto il contenuto nella sandbox di sicurezza dell'applicazione, ovvero, contenuto installato con l'applicazione e caricabile con lo schema URL app:, dispone di privilegi per accedere a tutte le API di AIR. L'eventuale contenuto caricato dall'esterno della sandbox non può accedere alle API di AIR. Il contenuto JavaScript esterno alla sandbox dell'applicazione non è in grado di utilizzare le proprietà runtime , nativeWindow o htmlLoader dell'oggetto Window di JavaScript.

Per consentire il cross-scripting protetto, potete usare un bridge sandbox per fornire un'interfaccia limitata tra il contenuto dell'applicazione e quello esterno all'applicazione. Nel contenuto HTML, potete anche mappare pagine dell'applicazione in una sandbox non dell'applicazione per consentire al codice della pagina di eseguire il cross-script di contenuto esterno. Consultate Sicurezza in 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>

L'esempio seguente illustra come creare una finestra nativa:

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