Vensters maken

De initialisatie-eigenschappen van een native venster kunnen niet worden gewijzigd nadat het bureaubladvenster is gemaakt. De volgende tabel bevat deze onveranderbare eigenschappen en hun standaardwaarden:

U kunt de eigenschappen voor het beginvenster dat door AIR wordt gemaakt, in het descriptorbestand van de toepassing instellen. Het hoofdvenster van een AIR-toepassing is altijd van het type normal . (Er kunnen ook extra venstereigenschappen worden opgegeven in het descriptorbestand, zoals visible , width en height , maar deze eigenschappen kunnen op elk gewenst moment worden gewijzigd.)

De eigenschappen voor andere native vensters en HTML-vensters die door uw toepassing zijn gemaakt, kunt u instellen met de klasse NativeWindowInitOptions. Wanneer u een venster maakt, moet u een NativeWindowInitOptions-object waarin de venstereigenschappen zijn opgegeven, doorgeven aan de constructorfunctie NativeWindow of de HTMLLoader-methode createRootWindow() .

Met de volgende code maakt u een NativeWindowInitOptions-object voor een utiliteitsvenster:

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

U kunt systemChrome niet instellen op standard wanneer transparent is ingesteld op true of type is ingesteld op lightweight .

Wanneer u een venster maakt met de Flex-klasse mx:Window, geeft u de initialisatie-eigenschappen op in het vensterobject zelf, in de MXML-declaratie van het venster of in de code waarmee het venster wordt gemaakt. Het onderliggende NativeWindow-object wordt pas gemaakt wanneer u de methode open() aanroept. Als een venster eenmaal is geopend, kunnen deze initialisatie-eigenschapen niet meer worden gewijzigd.

AIR maakt het beginvenster van de toepassing op basis van de eigenschappen die zijn opgegeven in de toepassingsdescriptor en laadt het bestand waarnaar wordt verwezen in het element content. Het content-element moet verwijzen naar een SWF- of HTML-bestand.

Het beginvenster kan het hoofdvenster van uw toepassing zijn, maar het kan ook alleen maar worden gebruikt om een of meer andere vensters te starten. U hoeft dit beginvenster niet zichtbaar te maken.

Als u een NativeWindow wilt maken, geeft u een NativeWindowInitOptions-object door aan de NativeWindow-constructor:

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

Het venster wordt pas weergegeven nadat u de eigenschap visible op true hebt ingesteld of de methode activate() hebt aangeroepen.

Als het venster eenmaal is gemaakt, kunt u de eigenschappen van het venster initialiseren en inhoud in het venster laden met de eigenschap Stage en de Flash-technieken voor weergavelijsten.

In vrijwel alle gevallen kunt u de eigenschap scaleMode van het werkgebied van een nieuw native venster het best instellen op noScale (gebruik de constante StageScaleMode.NO_SCALE ). De schaalmodi van Flash zijn ontworpen voor situaties waarin de auteur van de toepassing niet van tevoren weet wat de hoogte-breedteverhouding van het weergavegebied voor de toepassing zal zijn. Met de schaalmodi kan de auteur het minst slechte compromis kiezen: de inhoud bijsnijden, uitrekken of samenduwen, of omgeven met lege ruimte. Omdat u de weergaveruimte in AIR (het vensterframe) zelf kunt bepalen, kunt u het formaat van het venster aanpassen aan de inhoud of de inhoud aanpassen aan het venster zonder compromissen te sluiten.

De schaalmodus voor Flex- en HTML-vensters wordt automatisch ingesteld op noScale .

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

Als u een HTML-venster wilt maken, kunt u de JavaScript-methode Window.open() of de methode createRootWindow() van de AIR-klasse HTMLLoader aanroepen.

Voor HTML-inhoud in een willekeurige beveiligingssandbox kan de standaard JavaScript-methode Window.open() worden gebruikt. Als de inhoud buiten de toepassingssandbox wordt uitgevoerd, kan de methode open() alleen worden aangeroepen als reactie op een handeling van de gebruiker, zoals het klikken met de muis of het indrukken van een toets. Wanneer open() wordt aangeroepen, wordt er een venster met het systeemchroom gemaakt waarin de inhoud van de opgegeven URL wordt weergegeven. Bijvoorbeeld:

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

Inhoud in de beveiligingssandbox van de toepassing heeft toegang tot de methode HTMLLoader.createRootWindow() , die meer mogelijkheden biedt bij het maken van vensters. Met deze methode kunt u alle opties voor het maken van een nieuw venster zelf opgeven. Met de volgende JavaScript-code maakt u bijvoorbeeld een lichtgewichtvenster zonder systeemchroom, dat 300 x 400 pixels groot is:

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

Als u een transparant venster maakt, wordt de SWF-inhoud die is ingesloten in de HTML-bestanden opgeslagen en die in dat venster wordt geladen, niet altijd weergegeven. U dient de parameter wmode van het object of de insluitmarkering waarmee u naar het SWF-bestand verwijst, instellen op opaque of transparent . De standaardwaarde van wmode is window en daarom wordt SWF-inhoud standaard niet weergegeven in transparante vensters. PDF-inhoud kan niet worden weergegeven in transparante vensters, ongeacht de waarde die voor wmode wordt ingesteld. (Vóór AIR 1.5.2 kon SWF-inhoud ook niet worden weergegeven in transparante vensters.)

Vensters die zijn gemaakt met de methode createRootWindow() , blijven onafhankelijk van het openingsvenster. De eigenschappen parent en opener van het JavaScript-object Window zijn ingesteld op null . Het openingsvenster heeft toegang tot het Window-object van het nieuwe venster met behulp van de HTMLLoader-verwijzing, die is geretourneerd door de functie createRootWindow() . In de context van het vorige voorbeeld wordt met de instructie newHTMLLoader.window verwezen naar het JavaScript-object Window van het gemaakte venster.

Als u een mx:Window wilt maken, kunt u een MXML-bestand met mx:Window als hoofdtag maken, of u kunt de klasseconstructor Window rechtstreeks aanroepen.

Het volgende voorbeeld maakt en toont een mx:Window door de constructor Window aan te roepen:

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

Hoe u inhoud toevoegt aan een AIR-venster hangt af van het type venster. In MXML en HTML bijvoorbeeld kunt u de basisinhoud van het venster declaratief definiëren. U kunt resources insluiten in de SWF-bestanden van de toepassing of u kunt deze laden uit afzonderlijke toepassingsbestanden. Flex-, Flash- en HTML-inhoud kan op elk gewenst moment worden gemaakt en dynamisch aan een venster worden toegevoegd.

Wanneer u SWF-inhoud laadt, of HTML-inhoud die JavaScript bevat, moet u rekening houden met het beveiligingsmodel van AIR. Alle inhoud in de beveiligingssandbox van de toepassing, dat wil zeggen de inhoud die met uw toepassing is geïnstalleerd en kan worden geladen met het schema app: URL, heeft alle benodigde rechten om toegang te krijgen tot alle API's van AIR. Inhoud die van buiten deze sandbox wordt geladen, heeft geen toegang tot de API's van AIR. JavaScript-inhoud buiten de toepassingssandbox kan de eigenschappen runtime , nativeWindow en htmlLoader van het JavaScript-object Window niet gebruiken.

Voor veilige cross-scripting kunt u een sandboxbridge gebruiken om een beperkte interface te bieden tussen toepassingsinhoud en niet-toepassingsinhoud. In HTML-inhoud kunt u ook pagina's van uw toepassing aan een niet-toepassingssandbox toewijzen om de code op die pagina's de mogelijkheid van cross-scripting met externe inhoud te bieden. Zie Beveiliging 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>

In het volgende voorbeeld ziet u hoe u een native venster kunt maken:

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