Erstellen von Fenstern

Die Initialisierungseigenschaften eines nativen Fensters können nicht mehr geändert werden, nachdem das Desktopfenster erstellt wurde. Zu diesen unveränderlichen Eigenschaften und ihren Standardwerten gehören:

Legen Sie die Eigenschaften für das erste von AIR erstellte Fenster in der Anwendungsdeskriptordatei fest. Das Hauptfenster einer AIR-Anwendung weist für die type-Eigenschaft immer den Wert normal auf. (In der Anwendungsdeskriptordatei können Sie weitere Fenstereigenschaften, wie etwa visible , width und height angeben, aber diese Eigenschaften können jederzeit geändert werden.)

Mithilfe der NativeWindowInitOptions-Klasse können Sie Eigenschaften für andere native und HTML-Fenster, die mithilfe Ihrer Anwendung erstellt wurden, festlegen. Beim Erstellen eines Fensters müssen Sie ein NativeWindowInitOptions-Objekt, das die Fenstereigenschaften angibt, entweder an die NativeWindow-Konstruktorfunktion oder die createRootWindow() -Methode von „HTMLLoader“ übergeben .

Im folgenden Beispiel wird ein NativeWindowInitOptions-Objekt für ein Dienstprogrammfenster erstellt:

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

Die Einstellung von systemChrome auf standard , wenn transparent den Wert true oder type den Wert lightweight aufweist, wird nicht unterstützt .

Bei dem Erstellen eines Fensters mithilfe der mx:Window-Klasse von Flex müssen Sie die Initialisierungseigenschaften im Fensterobjekt selbst angeben, und zwar entweder in der MXML-Deklaration für das Fenster oder im Code, mit dem das Fenster erstellt wird. Das zugrundeliegende NativeWindow-Objekt wird nicht erstellt, bis Sie die open() -Methode aufrufen. Nachdem ein Fenster geöffnet wurde, können die Initialisierungseigenschaften nicht mehr geändert werden.

AIR erstellt das ursprüngliche Anwendungsfenster anhand der in der Anwendungsdeskriptordatei angegebenen Eigenschaften und lädt die Datei, auf die im content-Element verwiesen wird. Das Inhaltselement muss auf eine SWF- oder HTML-Datei verweisen.

Beim ursprünglichen Fenster kann es sich um das Hauptfenster der Anwendung handeln, oder es kann lediglich dazu dienen, eines oder mehrere andere Fenster zu starten. Es muss nicht unbedingt sichtbar sein.

Um ein „NativeWindow“ zu erstellen, übergeben Sie ein NativeWindowInitOptions-Objekt an den NativeWindow-Konstruktor:

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

Das Fenster wird erst angezeigt, wenn Sie die visible -Eigenschaft auf true einstellen oder die activate() -Methode aufrufen.

Nachdem das Fenster erstellt ist, können Sie seine Eigenschaften initialisieren und mithilfe der stage-Eigenschaft und Anzeigelistentechniken von Flash Inhalt in das Fenster laden.

In fast allen Fällen sollten Sie die stage- scaleMode -Eigenschaft eines neuen nativen Fensters auf noScale einstellen (mithilfe der StageScaleMode.NO_SCALE -Konstanten). Die Flash-Skalierungsmodi wurden für Situationen konzipiert, in denen dem Anwendungsautor im Voraus das Seitenverhältnis des Anzeigebereichs der Anwendung nicht bekannt ist. Die Skalierungsmodi ermöglichen es dem Autor, den am wenigsten nachteiligen Kompromiss zu wählen: den Inhalt beschneiden, dehnen oder quetschen oder mit leerem Raum auffüllen. Da Sie in AIR den Anzeigebereich (den Fensterrahmen) steuern, können Sie, ohne Kompromisse eingehen zu müssen, die Größe des Fensters an den Inhalt oder den Inhalt an das Fenster anpassen.

Bei Flex- und HTML-Fenstern ist der Skaliermodus automatisch auf noScale eingestellt.

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

Sie können ein HTML-Fenster erstellen, indem Sie die Window.open() -Methode von JavaScript oder die createRootWindow() -Methode der AIR-HTMLLoader-Klasse aufrufen.

Mit HTML-Inhalt in einer Sicherheits-Sandbox können Sie die standardmäßige Window.open() -Methode von JavaScript verwenden. Wenn der Inhalt außerhalb von Anwendungs-Sandboxen ausgeführt wird, kann die open() -Methode nur auf eine Interaktion des Benutzers, wie etwa einen Mausklick oder einen Tastenanschlag, hin aufgerufen werden. Beim Aufrufen von open() wird ein Fenster mit System-Fensterdesign erstellt, indem der Inhalt der angegebenen URL angezeigt wird. Zum Beispiel:

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

Der Inhalt in der Sicherheits-Sandbox der Anwendung kann auf eine leistungsstärkere Methode zur Erstellung von Fenstern, und zwar HTMLLoader.createRootWindow() , zugreifen. Mithilfe dieser Methode können Sie alle Erstellungsoptionen für ein neues Fenster festlegen. Im folgenden Beispiel wird mit dem JavaScript-Code ein lightweight-Fenster ohne System-Fensterdesign mit einer Größe von 300 x 400 Pixel erstellt:

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

Wenn Sie ein transparentes Fenster erstellen, wird SWF-Inhalt, der in dem in diesem Fenster geladenen HTML-Code eingebettet ist, nicht immer angezeigt. Sie müssen den wmode -Parameter des object- oder embed-Tags, das zum Verweisen auf die SWF-Datei verwendet wird, auf opaque oder transparent einstellen. Da wmode standardmäßig auf window eingestellt ist, wird SWF-Inhalt standardmäßig nicht in transparenten Fenstern angezeigt. PDF-Inhalt kann unabhängig vom Wert für wmode nicht in transparenten Fenstern angezeigt werden. (Vor AIR 1.5.2 konnte auch SWF-Inhalt nicht in transparenten Fenstern angezeigt werden.)

Fenster, die mithilfe der createRootWindow() -Methode erstellt wurden, bleiben unabhängig vom öffnenden Fenster. Die parent - und opener -Eigenschaften des Window-Objekts von JavaScript lauten null . Das öffnende Fenster kann auf das Window-Objekt des neuen Fensters mithilfe der HTMLLoader-Referenz zugreifen, die von der createRootWindow() -Funktion zurückgegeben wurde. Im Kontext des vorausgegangenen Beispiels würde die newHTMLLoader.window -Anweisung auf das JavaScript-Window-Objekt des erstellten Fensters verweisen.

Um ein „mx:Window“ zu erstellen, erstellen Sie eine MXML-Datei, wobei „mx:Window“ als Haupt-Tag dient, oder Sie rufen den Window-Klassenkonstruktor direkt auf.

Im folgenden Beispiel wird ein „mx:Window“ durch Aufrufen des Window-Konstruktors erstellt und angezeigt:

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

Wie Sie einem AIR-Fenster Inhalt hinzufügen, hängt vom Fenstertyp ab. Mit MXML und HTML können Sie zum Beispiel den grundlegenden Inhalt des Fensters mit Aussagen definieren. Sie können Ressourcen in den SWF-Dateien der Anwendung einbetten oder Sie können sie aus separaten Anwendungsdateien laden. Flex-, Flash- und HTML-Inhalte können spontan erstellt und einem Fenster dynamisch hinzugefügt werden.

Wenn Sie SWF-Inhalt oder HTML-Inhalt, der JavaScript enthält, laden, müssen Sie das AIR-Sicherheitsmodell berücksichtigen. Sämtlicher Inhalt in der Sicherheits-Sandbox der Anwendung, d. h. Inhalt, der zusammen mir Ihrer Anwendung installiert wird und mit dem app:-URL-Schema geladen werden kann, verfügt über vollständige Zugriffsberechtigung für alle AIR-APIs. Inhalt, der von außerhalb dieser Sandbox geladen wird, kann nicht auf AIR-APIs zugreifen. JavaScript-Inhalt, der sich außerhalb der Anwendungs-Sandbox befindet, kann nicht auf die runtime -, nativeWindow - oder htmlLoader -Eigenschaften des Window-Objekts von JavaScript zugreifen.

Um sicheres Cross-Scripting zu ermöglichen, können Sie mithilfe einer Sandbox Bridge eine begrenzte Schnittstelle zwischen Anwendungsinhalt und anwendungsfremdem Inhalt bereitstellen. Bei HTML-Inhalt können Sie Seiten Ihrer Anwendung einer anwendungsfremden Sandbox zuordnen, um dem Code dieser Seite das Cross-Scripting mit externem Inhalt zu ermöglichen. Siehe AIR-Sicherheit .

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>

Im folgenden Beispiel wird verdeutlicht, wie Sie ein natives Fenster erstellen:

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