Creación de ventanas



AIR crea automáticamente la primera ventana de la aplicación, pero el usuario puede crear más ventanas adicionales si lo necesita. Para crear una ventana nativa, utilice el método NativeWindow. Para crear una ventana HTML, utilice el método createRootWindow() de HTMLLoader o, desde un documento HTML, llame al método window.open() de JavaScript.

Especificación de propiedades de inicialización de una ventana

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

Propiedad

Valor predeterminado

systemChrome

standard

type

normal

transparent

false

maximizable

true

minimizable

true

resizable

true

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.

Nota: no es posible definir las propiedades de inicialización de una ventana creada con la función window.open() de JavaScript. Sin embargo, sí se puede anular el modo en que se crean estas ventanas implementando su propia clase HTMLHost. Consulte Gestión de llamadas JavaScript a window.open() para obtener más información.

Creación de la ventana inicial de la aplicación

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.

La herramienta de edición de Flash crea automáticamente el archivo SWF y añade la referencia adecuada al descriptor de la aplicación cuando se prueba o se publica un proyecto de AIR. La línea de tiempo principal sirve de punto de entrada para la aplicación.

Cuando se inicia la aplicación, AIR crea una ventana y carga el archivo SWF de la aplicación. Para controlar la ventana de escritorio con ActionScript, utilice la propiedad nativeWindow del objeto Stage para obtener una referencia al objeto NativeWindow. Posteriormente, puede establecer las propiedades de la ventana y empezar a llamar a los métodos.

El siguiente ejemplo activa la ventana principal maximizada (desde el primer fotograma de un archivo FLA de Flash):

import flash.display.NativeWindow; 
 
var mainWindow:NativeWindow = this.stage.nativeWindow; 
mainWindow.maximize(); 
mainWindow.activate();

Creación de una ventana nativa

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.

Nota: para determinar los tamaños máximo y mínimo de ventana admitidos en el sistema operativo actual, utilice las siguientes propiedades estáticas de NativeWindow:
var maxOSSize:Point = NativeWindow.systemMaxSize; 
var minOSSize:Point = NativeWindow.systemMinSize; 

Creación de una ventana HTML

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() sólo 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");
Nota: puede ampliar la clase HTMLHost en ActionScript para personalizar la ventana creada con la función window.open() de JavaScript. Consulte Ampliación de la clase HTMLHost.

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"));
Nota: si el contenido cargado por una nueva ventana se encuentra fuera del entorno limitado de seguridad de la aplicación, el objeto window no tiene las siguientes propiedades de AIR: runtime, nativeWindow o htmlLoader.

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.

Nota: se puede llamar a la función createRootWindow() desde JavaScript y ActionScript.

Cómo añadir contenido a una ventana

La forma en que se añade contenido a las ventanas de AIR depende del tipo de ventana. Puede crear un clip de película y utilizar la línea de tiempo para controlar el estado de la aplicación. Con HTML, puede declarar definiciones del contenido básico de la ventana. Puede incorporar recursos en el archivo SWF de la aplicación o cargarlos desde distintos archivos de aplicación. El contenido de 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.

Carga de un archivo SWF o una imagen

Puede cargar archivos SWF de Flash o imágenes en la lista de visualización de una ventana nativa utilizando la clase flash.display.Loader:

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

Es posible cargar un archivo SWF que contenga código de biblioteca para utilizarlo en una aplicación basada en HTML. El modo más sencillo de cargar un archivo SWF en una ventana HTML es utilizar la etiqueta script, pero también puede utilizarse la API Loader directamente.

Nota: los archivos SWF antiguos creados con ActionScript 1 ó 2 comparten estados globales, como definiciones de clases, objetos singleton y variables globales si están cargados en la misma ventana. Si este tipo de archivo SWF depende de estados globales sin modificar para que funcione correctamente, no podrá cargarse más de una vez en la misma ventana, ni cargarse otro archivo SWF en la misma ventana con las mismas definiciones de clases y variables. Este contenido se puede cargar en ventanas separadas.

Carga de contenido HTML en una ventana NativeWindow

Para cargar contenido HTML en una ventana NativeWindow, puede añadir un objeto HTMLLoader al escenario de la ventana y cargar el contenido HTML en HTMLLoader, o bien crear una ventana que ya contenga un objeto HTMLLoader utilizando el método HTMLLoader.createRootWindow(). El siguiente ejemplo muestra contenido HTML en un área de visualización de 300 x 500 píxeles en el escenario de una ventana nativa:

//newWindow is a NativeWindow instance 
var htmlView:HTMLLoader = new HTMLLoader(); 
html.width = 300; 
html.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) );
Nota: el contenido SWF o PDF de un archivo HTML no se visualiza si la ventana utiliza transparencia (es decir, si la propiedad transparent de la ventana está establecida como true) o si se escala el control HTMLLoader.

Cómo añadir contenido SWF como superposición en una ventana HTML

Dado que las ventanas HTML están contenidas en una instancia de NativeWindow, es posible añadir objetos de visualización de Flash delante y detrás de la capa HTML en la lista de visualización.

Para añadir un objeto de visualización sobre la capa HTML, utilice el método addChild() de la propiedad window.nativeWindow.stage. El método addChild() añade contenido en capas sobre cualquier contenido existente en la ventana.

Para añadir un objeto de visualización debajo de la capa HTML, utilice el método addChildAt() de la propiedad window.nativeWindow.stage, transfiriendo un valor de cero para el parámetro index. Si coloca un objeto en el índice cero, se mueve el contenido existente (incluida la visualización HTML) una capa más arriba y se inserta el nuevo contenido en el capa inferior. Para que el contenido distribuido en capas debajo de la página HTML sea visible, debe establecer la propiedad paintsDefaultBackground del objeto HTMLlLoader como false. Además, todos los elementos de la página que establezcan un color de fondo no serán transparentes. Si, por ejemplo, establece un color de fondo para el elemento "body" de la página, ninguna parte de la página será transparente.

El siguiente ejemplo muestra cómo añadir objetos de visualización de Flash como superposiciones y como capas inferiores en una página HTML. El ejemplo crea dos objetos de formas sencillas, y añade uno debajo de contenido HTML y el otro encima. El ejemplo también actualiza la posición de la forma en función del evento enterFrame.

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

Este ejemplo proporciona una introducción rudimentaria a algunas técnicas avanzadas que utilizan tanto JavaScript como ActionScript en AIR. Si no está familiarizado con el uso de objetos de visualización de ActionScript, consulte la sección de programación de visualización del manual Programación con Adobe ActionScript 3.0 para obtener más información.

Ejemplo: Creación de una ventana nativa

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