Tworzenie okien

Właściwości inicjowania alternatywnego okna nie można zmienić po utworzeniu okna pulpitu. Stałe właściwości i ich wartości domyślne:

Właściwości należy ustawić dla początkowego okna utworzonego przez środowisko AIR w pliku deskryptora aplikacji. Główne okno aplikacji AIR jest zawsze typu normal . (Dodatkowe właściwości okna można określić w pliku deskryptora np. visible , width i height , ale te właściwości można zmienić w dowolnym momencie).

Właściwości należy ustawić dla innych rodzimych okien i okien HTML utworzonych przez aplikację za pomocą klasy NativeWindowInitOptions. Po utworzeniu okna należy przekazać obiekt NativeWindowInitOptions, określając właściwości okna w funkcji konstruktora NativeWindow lub metodzie createRootWindow() obiektu HTMLLoader.

Poniższy kod tworzy obiekt NativeWindowInitOptions dla okna typu utility:

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

Ustawienie właściwości systemChrome na wartość standard , gdy właściwość transparent o wartości true lub type o wartości lightweight nie jest obsługiwana .

Podczas tworzenia okna za pomocą klasy mx:Window środowiska Flex należy samodzielnie określić właściwości inicjowania obiektu okna — w deklaracji MXML okna lub w kodzie, który tworzy okno. Bazowy obiekt NativeWindow zostaje utworzony dopiero po wywołaniu metody open() . Po otwarciu okna nie można zmienić właściwości inicjowania.

Środowisko AIR tworzy początkowe okno aplikacji w oparciu o właściwości określone w deskryptorze aplikacji i ładuje plik, do którego istnieje odwołanie w elemencie treści. Element treści musi odwoływać się do pliku SWF lub HTML.

Początkowe okno może być oknem głównym aplikacji lub może służyć po prostu do uruchamiania jednego lub większej ilości innych okien. Nie musi być ono widoczne.

Aby utworzyć obiekt NativeWindow, należy przekazać obiekt NativeWindowInitOptions do konstruktora NativeWindow:

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

Okno nie zostanie wyświetlone, dopóki właściwość visible nie zostanie ustawiona na wartość true lub wywołana zostanie metoda activate() .

Po utworzeniu okna programista może inicjować jego właściwości i ładować treść do okna za pomocą właściwości stage i technik list wyświetlania Flash.

W większości przypadków właściwość scaleMode stołu montażowego nowego okna rodzimego należy ustawić na wartość noScale (w tym celu należy użyć stałej StageScaleMode.NO_SCALE ). Tryby skalowania Flash zostały zaprojektowane do obsługi sytuacji, w których autor aplikacji nie zna z wyprzedzeniem proporcji przestrzeni wyświetlania aplikacji. Tryby skalowania umożliwiają autorowi wybranie najmniej niekorzystnego kompromisu: przycięcie treści, jej rozciągnięcie lub ściśnięcie albo wypełnienie pustą przestrzenią. Ponieważ programista ma możliwość sterowania przestrzenią wyświetlania w środowisku AIR (ramka okna), możliwe jest dopasowanie rozmiaru okna do treści lub treści do okna, unikając w ten sposób kompromisu.

Tryb skalowania dla okien środowiska Flex i okien HTML ustawiany jest automatycznie na wartość noScale .

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

Aby utworzyć okno HTML, można wywołać metodę Window.open() JavaScript lub metodę createRootWindow() klasy HTMLLoader AIR.

Treść HTML w dowolnym obszarze izolowanym zabezpieczeń może korzystać ze standardowej metody Window.open() JavaScript. Jeśli treść działa poza obszarem izolowanym aplikacji, metoda open() może zostać wywołana tylko w odpowiedzi na interakcję użytkownika np. kliknięcie myszą lub naciśnięcie klawisza. Wywołanie metody open() powoduje utworzenie okna z karnacją systemową w celu wyświetlenia treści dla określonego URL. Na przykład:

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

Treść w obszarze izolowanym zabezpieczeń aplikacji ma dostęp do bardziej zaawansowanej metody tworzenia okien — HTMLLoader.createRootWindow() . Za pomocą tej metody możliwe jest określenie wszystkich opcji tworzenia nowego okna. Na przykład: poniższy kod JavaScript tworzy okno typu lightweight bez karnacji systemowej o rozmiarach 300x400 pikseli:

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

W przypadku utworzenia przezroczystego okna treść SWF osadzona na stronie HTML ładowanej do tego okna nie zawsze jest wyświetlana. Konieczne jest ustawienie parametru wmode obiektu lub osadzonego znacznika używanego jako odniesienie do pliku SWF na wartość opaque lub transparent . Wartością domyślną parametru wmode jest window , dlatego domyślnie treść SWF nie jest wyświetlana w oknach przezroczystych. Treści pliku PDF nie można wyświetlić w oknach przezroczystych, niezależnie od ustawionej wartości wmode . (W wersjach środowiska wykonawczego wcześniejszych niż AIR 1.5.2 treść SWF również nie mogła być wyświetlana w oknach przezroczystych.)

Okna utworzone za pomocą metody createRootWindow() pozostają niezależne w stosunku do okna, z którego zostały otwarte. Właściwości parent i opener obiektu Window języka JavaScript mają wartość null . Okno otwierające może uzyskać dostęp do obiektu Window nowego okna za pomocą odwołania HTMLLoader zwróconego przez funkcję createRootWindow() . W kontekście poprzedniego przykładu instrukcja newHTMLLoader.window będzie odwoływała się do obiektu Window języka JavaScript utworzonego okna.

Aby utworzyć instancję mx:Window, należy utworzyć plik MXML z użyciem mx:Window jako głównego znacznika lub bezpośrednio wywołać konstruktor klasy Window.

Poniższy przykład tworzy i wyświetla instancję mx:Window przez wywołanie konstruktora 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);

Sposób dodawania zawartości do okna środowiska AIR jest uzależniony od typu okna. Na przykład języki MXML i HTML umożliwiają deklaratywne definiowanie podstawowej treści okna. Programista może osadzić zasoby w plikach aplikacji SWF lub załadować je z oddzielnych plików aplikacji. Całą zawartość Flex, Flash i HTML można tworzyć na bieżąco i dodawać do okna dynamicznie.

Podczas ładowania treści SWF lub HTML zawierającej kod JavaScript należy wziąć pod uwagę model zabezpieczeń środowiska AIR. Dowolna treść obszaru izolowanego zabezpieczeń aplikacji tj. treść zainstalowana z aplikacją i treść, którą można załadować za pomocą schematu URL app: ma wszystkie uprawnienia, aby uzyskać dostęp do interfejsów API środowiska AIR. Dowolna treść załadowana spoza tego obszaru izolowanego nie uzyska dostępu do interfejsów API środowiska AIR. Treść JavaScript spoza obszaru izolowanego aplikacji nie może używać właściwości runtime , nativeWindow lub htmlLoader obiektu Window języka JavaScript.

Aby umożliwić bezpieczne wywoływanie skryptów, można użyć mostu obszaru izolowanego w celu dostarczenia ograniczonego interfejsu między treścią aplikacji a treścią nieaplikacyjną. W treści HTML możliwe jest również odwzorowanie stron aplikacji na nieaplikacyjny obszar izolowany, aby umożliwić kodowi na stronie odwoływanie się do skryptów zewnętrznej treści. Patrz Zabezpieczenia w środowisku 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>

Poniższy przykład ilustruje, w jaki sposób utworzyć rodzime okno:

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