Creación de ventanas

Las propiedades de inicialización de una ventana nativa no se pueden modificar una vez creada la ventana de escritorio. Estas propiedades invariables y sus valores predeterminados son:

Establezca las propiedades de la ventana inicial creada por AIR en el archivo descriptor de la aplicación. La ventana principal de una aplicación de AIR siempre es de tipo normal . (Se pueden especificar propiedades adicionales de la ventana en el archivo descriptor, por ejemplo, visible , width y height ; estas propiedades se pueden modificar en cualquier momento.)

Puede establecer las propiedades de otras ventanas nativas y HTML creadas por la aplicación mediante la clase NativeWindowInitOptions. Cuando se crea una ventana, se debe transferir un objeto NativeWindowInitOptions especificando las propiedades de la ventana en la función constructora NativeWindow o en el método createRootWindow() de HTMLLoader.

El siguiente código crea un objeto NativeWindowInitOptions para una ventana de utilidades:

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

No está permitido establecer systemChrome como standard si transparent es true o type es lightweight .

Cuando se crea una ventana con la clase mx:Window de Flex, se especifican las propiedades de inicialización en el propio objeto window, bien en la declaración MXML de la ventana o en el código que la crea. El objeto subyacente NativeWindow no se crea hasta que se llama al método open() . Una vez abierta la ventana, estas propiedades de inicialización ya no se pueden modificar.

AIR crea la ventana inicial de la aplicación a partir de las propiedades especificadas en el descriptor de la aplicación y carga el archivo al que se hace referencia en el elemento del contenido. El elemento de contenido debe hacer referencia a un archivo SWF o HTML.

La ventana inicial puede ser la ventana principal de la aplicación o simplemente una o varias ventanas adicionales que se abren. No tienen por qué ser visibles.

Para crear una ventana NativeWindow, transfiera un objeto NativeWindowInitOptions al constructor NativeWindow:

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

La ventana no se muestra hasta que se establece la propiedad visible como true o se llama al método activate() .

Una vez creada la ventana, puede inicializar sus propiedades y cargar contenido utilizando la propiedad de escenario y técnicas de lista de visualización de Flash.

En casi todos los casos, debe establecer la propiedad scaleMode del escenario de una nueva ventana nativa como noScale (utilice la constante StageScaleMode.NO_SCALE ). Los modos de escala de Flash están diseñados para situaciones en las que el autor de la aplicación desconoce la relación de aspecto del espacio de visualización de la aplicación. Los modos de escala permiten al autor escoger la opción menos arriesgada: recortar el contenido, estrecharlo o apretarlo, o incluso llenarlo con un espacio vacío. Como el desarrollador controla el espacio de visualización en AIR (el marco de la ventana), es posible cambiar el tamaño de la ventana para que se ajuste al contenido, o cambiar el tamaño sin aplicar ningún ajuste.

El modo de escala de ventanas de Flex y HTML se establece como noScale automáticamente.

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

Para crear una ventana HTML, puede llamar al método Window.open() de JavaScript, o llamar al método createRootWindow() de la clase HTMLLoader de AIR.

El contenido HTML de cualquier entorno limitado de seguridad puede utilizar el método Window.open() estándar de JavaScript. Si el contenido se ejecuta fuera del entorno limitado de la aplicación, se puede llamar al método open() solo como respuesta a la interacción del usuario, por ejemplo, cuando hace clic con el ratón o cuando pulsa una tecla. Cuando se llama a open() , se crea una ventana con fondo cromático del sistema para visualizar el contenido en la dirección URL especificada. Por ejemplo:

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

El contenido del entorno limitado de seguridad de la aplicación tiene acceso al método más potente para la creación de ventanas: HTMLLoader.createRootWindow() . Con este método, es posible especificar todas las opciones de creación de una ventana nueva. El siguiente código JavaScript, por ejemplo, crea una ventana ligera sin fondo cromático del sistema de 300x400 píxeles de tamaño:

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

Si crea una ventana transparente, el contenido SWF incorporado en el HTML cargado en la ventana no siempre se visualizará. Debe establecer el parámetro wmode del objeto o etiqueta incorporada para que haga referencia al archivo SWF de opaque o transparent . El valor predeterminado de wmode es window , por lo que el contenido SWF no se visualiza en ventanas transparentes. Un PDF no puede visualizarse en ventanas transparentes, independientemente del valor de wmode . (Antes de AIR 1.5.2, el contenido SWF tampoco se podía visualizar en ventanas transparentes.)

Las ventanas creadas con el método createRootWindow() son independientes de la ventana que se abre. Las propiedades parent y opener del objeto Window de JavaScript son null . La ventana que se abre puede acceder al objeto Window de la nueva ventana utilizando la referencia a HTMLLoader devuelta por la función createRootWindow() . En el contexto del ejemplo anterior, la sentencia newHTMLLoader.window haría referencia al objeto Window de JavaScript de la ventana creada.

Para crear una ventana mx:Window, puede crear un archivo MXML utilizando mx:Window como etiqueta raíz, o bien llamar directamente al constructor de la clase Window.

El siguiente ejemplo crea y muestra una ventana mx:Window llamando al constructor 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 forma en que se añade contenido a las ventanas de AIR depende del tipo de ventana. Por ejemplo, las ventanas MXML y HTML permiten declarar definiciones del contenido básico de la ventana. Puede incorporar recursos en los archivos SWF de la aplicación o puede cargarlos desde archivos de la aplicación independientes. El contenido de Flex, Flash y HTML se puede crear sobre la marcha y añadirlo dinámicamente a una ventana.

Cuando se carga contenido SWF o HTML que contiene JavaScript, se debe tener en cuenta el modelo de seguridad de AIR. Cualquier contenido del entorno limitado de seguridad de la aplicación, es decir, el contenido instalado y cargado con el esquema de URL app: de la aplicación, tiene privilegios completos para acceder a todas las API de AIR. Cualquier contenido cargado desde fuera de este entorno limitado no podrá acceder a las API de AIR. El contenido de JavaScript situado alojado fuera del entorno limitado de la aplicación no puede utilizar las propiedades runtime , nativeWindow o htmlLoader del objeto Window de JavaScript.

Para que el uso de scripts sea seguro, puede utilizar el puente de entorno limitado para facilitar una interfaz limitada entre el contenido de la aplicación y el que no lo es. En contenido HTML, también puede asignar imágenes de la aplicación al entorno limitado ajeno a a la aplicación para que el código de dicha página pueda utilizar el contenido externo de los scripts. Consulte Seguridad en 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>

El siguiente ejemplo muestra cómo crear una ventana 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(); 
}