Definición de interfaces de usuario del navegador para el contenido HTML

Adobe AIR 1.0 y posterior

Ampliación de la clase HTMLHost
Ejemplo: Ampliación de la clase HTMLHost
Gestión de cambios en la propiedad window.location
Gestión de llamadas JavaScript a window.moveBy(), window.moveTo(), window.resizeTo(), window.resizeBy()
Gestión de llamadas JavaScript a window.open()
Gestión de llamadas JavaScript a window.close()
Gestión de cambios en la propiedad window.status
Gestión de cambios en la propiedad document.title
Gestión de llamadas JavaScript a window.blur() y window.focus()
Creación de ventanas con contenido HTML de desplazamiento

JavaScript proporciona varias API para controlar la ventana que muestra el contenido HTML. En AIR, estas API se pueden anular implementando una clase HTMLHost personalizada.

Ampliación de la clase HTMLHost

Si, por ejemplo, su aplicación presenta múltiples objetos HTMLLoader en una interfaz con fichas, tal vez desee que los cambios realizados por las páginas HTML cargadas cambien la etiqueta de la ficha, y no el título de la ventana principal. De igual manera, el código podría responder a una llamada window.moveTo() si se reposiciona el objeto HTMLLoader en el contenedor del objeto de visualización principal moviendo la ventana que contiene el objeto HTMLLoader, no haciendo nada o haciendo algo completamente diferente.

La clase HTMLHost de AIR controla las siguientes propiedades y métodos de JavaScript:

window.status
window.document.title
window.location
window.blur()
window.close()
window.focus()
window.moveBy()
window.moveTo()
window.open()
window.resizeBy()
window.resizeTo()

Cuando se crea un objeto HTMLLoader usando new HTMLLoader() , las propiedades o métodos listados de JavaScript no se activan. La clase HTMLHost proporciona una implementación predeterminada de navegador de estas API de JavaScript. Asimismo se puede ampliar la clase HTMLHost para personalizar el comportamiento. Para crear un objeto HTMLHost que admite el comportamiento predeterminado, configure el parámetro defaultBehaviors en true en el constructor HTMLHost:

var defaultHost:HTMLHost = new HTMLHost(true);

Cuando se crea una ventana HTML en AIR con el método createRootWindow() de la clase HTMLLoader, se asigna inmediatamente una instancia HTMLHost que admite comportamientos predeterminados. Es posible cambiar el comportamiento del objeto host asignando una implementación HTMLHost diferente a la propiedad htmlHost de HTMLLoader o asignar null para desactivar las funciones completamente.

Nota: AIR asigna un objeto HTMLHost predeterminado a la ventana inicial creada para una aplicación de AIR basada en HTML y cualquier ventana creada por la implementación predeterminada del método window.open() de JavaScript.

Ejemplo: Ampliación de la clase HTMLHost

En el siguiente ejemplo se muestra cómo personalizar la manera en que un objeto HTMLLoader afecta a la interfaz de usuario, ampliando la clase HTMLHost:

Ejemplo de Flex:

Cree una clase que amplía la clase HTMLHost (una subclase)

Anule los métodos de la nueva clase para gestionar cambios en los parámetros relacionados con la interfaz de usuario. Por ejemplo, la siguiente clase, CustomHost, define los comportamientos para las llamadas a window.open() y cambia a window.document.title . Las llamadas a window.open() abren la página HTML en una nueva ventana, y los cambios en window.document.title (incluyendo la configuración del elemento <title> de una página HTML) definen el título de dicha ventana.

package 
{ 
    import flash.html.*; 
    import flash.display.StageScaleMode; 
    import flash.display.NativeWindow; 
    import flash.display.NativeWindowInitOptions; 
 
    public class CustomHost extends HTMLHost 
    { 
        import flash.html.*; 
        override public function 
            createWindow(windowCreateOptions:HTMLWindowCreateOptions):HTMLLoader 
        { 
            var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
            var bounds:Rectangle = new Rectangle(windowCreateOptions.x, 
                                            windowCreateOptions.y, 
                                            windowCreateOptions.width, 
                                            windowCreateOptions.height); 
            var htmlControl:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, 
                                        windowCreateOptions.scrollBarsVisible, bounds); 
            htmlControl.htmlHost = new HTMLHostImplementation(); 
            if(windowCreateOptions.fullscreen){ 
                htmlControl.stage.displayState = 
                    StageDisplayState.FULL_SCREEN_INTERACTIVE; 
            } 
            return htmlControl; 
        } 
        override public function updateTitle(title:String):void 
        { 
            htmlLoader.stage.nativeWindow.title = title; 
        } 
    } 
}

En el código que contiene el HTMLLoader (no el código de la nueva subclase de HTMLHost), cree un objeto de la nueva clase. Asigne el nuevo objeto a la propiedad htmlHost de HTMLLoader. El siguiente código Flex usa la clase CustomHost definida en el paso anterior:

<?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" 
    applicationComplete="init()"> 
    <mx:Script> 
        <![CDATA[ 
            import flash.html.HTMLLoader; 
            import CustomHost; 
            private function init():void 
            { 
                var html:HTMLLoader = new HTMLLoader(); 
                html.width = container.width; 
                html.height = container.height; 
                var urlReq:URLRequest = new URLRequest("Test.html"); 
                html.htmlHost = new CustomHost(); 
                html.load(urlReq); 
                container.addChild(html); 
            } 
        ]]> 
    </mx:Script> 
    <mx:UIComponent id="container" width="100%" height="100%"/> 
</mx:WindowedApplication>

Para probar el código descrito aquí, incluya un archivo HTML con el siguiente contenido en el directorio de la aplicación:

<html> 
    <head> 
        <title>Test</title> 
    </head> 
    <script> 
        function openWindow() 
        { 
            window.runtime.trace("in"); 
            document.title = "foo" 
            window.open('Test.html'); 
            window.runtime.trace("out"); 
        } 
    </script> 
    <body> 
        <a href="#" onclick="openWindow()">window.open('Test.html')</a> 
    </body> 
</html>

Ejemplo de Flash Professional:

Cree un archivo Flash para AIR. Defina la clase de documento a CustomHostExample y guarde el archivo como CustomHostExample.fla.

Cree un archivo ActionScript llamado CustomHost como que contiene una clase que amplía la clase HTMLHost (una subclase). Esta clase anula ciertos métodos de la nueva clase para gestionar cambios en los parámetros relacionados con la interfaz de usuario. Por ejemplo, la siguiente clase, CustomHost, define los comportamientos para las llamadas a window.open() y cambia a window.document.title . Las llamadas al método window.open() abren la página HTML en una nueva ventana, y los cambios en la propiedad window.document.title (incluyendo la configuración del elemento <title> de una página HTML) definen el título de dicha ventana.

package 
{ 
    import flash.display.StageScaleMode; 
    import flash.display.NativeWindow; 
    import flash.display.NativeWindowInitOptions; 
    import flash.events.Event; 
    import flash.events.NativeWindowBoundsEvent; 
    import flash.geom.Rectangle; 
    import flash.html.HTMLLoader; 
    import flash.html.HTMLHost; 
    import flash.html.HTMLWindowCreateOptions; 
    import flash.text.TextField; 
 
    public class CustomHost extends HTMLHost 
    { 
        public var statusField:TextField; 
         
        public function CustomHost(defaultBehaviors:Boolean=true) 
        { 
            super(defaultBehaviors); 
        } 
        override public function windowClose():void 
        { 
            htmlLoader.stage.nativeWindow.close(); 
        } 
        override public function createWindow( 
                                windowCreateOptions:HTMLWindowCreateOptions ):HTMLLoader 
        { 
            var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
            var bounds:Rectangle = new Rectangle(windowCreateOptions.x, 
                                            windowCreateOptions.y, 
                                            windowCreateOptions.width, 
                                            windowCreateOptions.height); 
            var htmlControl:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, 
                                        windowCreateOptions.scrollBarsVisible, bounds); 
            htmlControl.htmlHost = new HTMLHostImplementation(); 
            if(windowCreateOptions.fullscreen){ 
                htmlControl.stage.displayState = 
                    StageDisplayState.FULL_SCREEN_INTERACTIVE; 
            } 
            return htmlControl; 
        } 
        override public function updateLocation(locationURL:String):void 
        { 
            trace(locationURL); 
        } 
        override public function set windowRect(value:Rectangle):void 
        { 
            htmlLoader.stage.nativeWindow.bounds = value; 
        } 
        override public function updateStatus(status:String):void 
        { 
            statusField.text = status; 
            trace(status); 
        } 
        override public function updateTitle(title:String):void 
        { 
            htmlLoader.stage.nativeWindow.title = title + "- Example Application"; 
        } 
        override public function windowBlur():void 
        { 
            htmlLoader.alpha = 0.5; 
        } 
        override public function windowFocus():void 
        { 
            htmlLoader.alpha = 1; 
        } 
    } 
}

Cree otro archivo ActionScript denominado CustomHostExample para que contenga la clase de documento para la aplicación. Esta clase crea un objeto HTMLLoader y define la propiedad del host a una instancia de la clase CustomHost definida en el paso anterior:

package 
{ 
    import flash.display.Sprite; 
    import flash.html.HTMLLoader; 
    import flash.net.URLRequest; 
    import flash.text.TextField; 
 
    public class CustomHostExample extends Sprite 
    { 
        function CustomHostExample():void 
        { 
            var html:HTMLLoader = new HTMLLoader(); 
            html.width = 550; 
            html.height = 380; 
            var host:CustomHost = new CustomHost(); 
            html.htmlHost = host; 
             
            var urlReq:URLRequest = new URLRequest("Test.html"); 
            html.load(urlReq); 
             
            addChild(html); 
             
            var statusTxt:TextField = new TextField(); 
            statusTxt.y = 380; 
            statusTxt.height = 20; 
            statusTxt.width = 550; 
            statusTxt.background = true; 
            statusTxt.backgroundColor = 0xEEEEEEEE; 
            addChild(statusTxt); 
             
            host.statusField = statusTxt; 
        } 
    } 
}

Para probar el código descrito aquí, incluya un archivo HTML con el siguiente contenido en el directorio de la aplicación:

<html> 
     <head> 
     <title>Test</title> 
     <script> 
     function openWindow() 
     { 
     document.title = "Test" 
     window.open('Test.html'); 
     } 
     </script> 
     </head> 
     <body bgColor="#EEEEEE"> 
     <a href="#" onclick="window.open('Test.html')">window.open('Test.html')</a> 
     <br/><a href="#" onclick="window.document.location='http://www.adobe.com'"> 
     window.document.location = 'http://www.adobe.com'</a> 
     <br/><a href="#" onclick="window.moveBy(6, 12)">moveBy(6, 12)</a> 
     <br/><a href="#" onclick="window.close()">window.close()</a> 
     <br/><a href="#" onclick="window.blur()">window.blur()</a> 
     <br/><a href="#" onclick="window.focus()">window.focus()</a> 
     <br/><a href="#" onclick="window.status = new Date().toString()">window.status=new Date().toString()</a> 
     </body> 
</html>

Gestión de cambios en la propiedad window.location

Anule el método locationChange() para gestionar cambios de la URL de la página HTML. Se llama al método locationChange() cuando JavaScript en una página cambia el valor de window.location . En el siguiente ejemplo simplemente se carga la URL solicitada:

override public function updateLocation(locationURL:String):void 
{ 
    htmlLoader.load(new URLRequest(locationURL)); 
}

Nota: puede utilizar la propiedad htmlLoader del objeto HTMLHost para hacer referencia al objeto HTMLLoader actual.

Gestión de llamadas JavaScript a window.moveBy(), window.moveTo(), window.resizeTo(), window.resizeBy()

Anule el método set windowRect() para gestionar cambios en los límites del contenido HTML. Se llama al método set windowRect() cuando JavaScript en una página llama a window.moveBy() , window.moveTo() , window.resizeTo() o window.resizeBy() . En el siguiente ejemplo simplemente se actualizan los límites de la ventana de escritorio:

override public function set windowRect(value:Rectangle):void 
{ 
    htmlLoader.stage.nativeWindow.bounds = value; 
}

Gestión de llamadas JavaScript a window.open()

Anule el método createWindow() para gestionar llamadas JavaScript a window.open() . Las implementaciones del método createWindow() son responsables de la creación y devolución de un nuevo objeto HTMLLoader. Normalmente, se muestra HTMLLoader en una nueva ventana, pero no se requiere la creación de una ventana.

En el siguiente ejemplo se muestra cómo implementar la función createWindow() usando HTMLLoader.createRootWindow() para crear la ventana y el objeto HTMLLoader. Asimismo se puede crear un nuevo objeto NativeWindow de forma separada y añadir el HTMLLoader al escenario de la ventana.

override public function createWindow(windowCreateOptions:HTMLWindowCreateOptions):HTMLLoader{ 
    var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
    var bounds:Rectangle = new Rectangle(windowCreateOptions.x, windowCreateOptions.y,  
                                windowCreateOptions.width, windowCreateOptions.height); 
    var htmlControl:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, 
                                    windowCreateOptions.scrollBarsVisible, bounds); 
    htmlControl.htmlHost = new HTMLHostImplementation(); 
    if(windowCreateOptions.fullscreen){ 
        htmlControl.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE; 
    } 
    return htmlControl; 
}

Nota: este ejemplo asigna la implementación HTMLHost personalizada a cualquier ventana nueva creada con window.open() . Asimismo, si se desea se puede usar una implementación diferente o definir la propiedad htmlHost en null para nuevas ventanas.

El objeto transferido como parámetro al método createWindow() es un objeto HTMLWindowCreateOptions . La clase HTMLWindowCreateOptions incluye propiedades que informan sobre los valores definidos en la cadena de parámetro features en la llamada a window.open() :

Propiedad HTMLWindowCreateOptions	Parámetro correspondiente en la cadena de funciones en la llamada JavaScript a window.open()
`fullscreen`	`fullscreen`
`height`	`height`
`locationBarVisible`	`location`
`menuBarVisible`	`menubar`
`resizeable`	`resizable`
`scrollBarsVisible`	`scrollbars`
`statusBarVisible`	`status`
`toolBarVisible`	`toolbar`
`width`	`width`
`x`	`left` o `screenX`
`y`	`top` o `screenY`

La clase HTMLLoader no implementa todas las funciones que se pueden especificar en la cadena de función. La aplicación debe proporcionar barras de desplazamiento, barras de ubicación, barras de menús, barras de estado y barras de herramientas según corresponda.

Los otros argumentos al método window.open() JavaScript los gestiona el sistema. Una implementación createWindow() no debe cargar contenido en el objeto HTMLLoader ni definir el título de la ventana.

Gestión de llamadas JavaScript a window.close()

Anule el método windowClose() para gestionar llamadas JavaScript a window.close() . En el siguiente ejemplo se cierra la ventana de escritorio cuando se llama al método window.close() :

override public function windowClose():void 
{ 
    htmlLoader.stage.nativeWindow.close(); 
}

Las llamadas JavaScript a window.close() no tienen que cerrar la ventana. Podría, por ejemplo, quitar el HTMLLoader de la lista de visualización, dejando la ventana abierta (que puede tener otro contenido), como en el siguiente código:

override public function windowClose():void 
{ 
    htmlLoader.parent.removeChild(htmlLoader); 
}

Gestión de cambios en la propiedad window.status

Anule el método updateStatus() para gestionar los cambios de JavaScript al valor de window.status . En el siguiente ejemplo se rastrea el valor de estado:

override public function updateStatus(status:String):void 
{ 
    trace(status); 
}

El estado requerido se pasa como una cadena al método updateStatus() .

El objeto HTMLLoader no proporciona una barra de estado.

Gestión de cambios en la propiedad document.title

Anule el método updateTitle() para gestionar los cambios de JavaScript al valor de window.document.title . En el siguiente ejemplo se cambia el título de la ventana y se anexa la cadena, "Sample," al título:

override public function updateTitle(title:String):void 
{ 
    htmlLoader.stage.nativeWindow.title = title + " - Sample"; 
}

Cuando se define document.title en una página HTML, el título solicitado se pasa como una cadena al método updateTitle() .

Los cambios en document.title no tienen que cambiar el título de la ventana que contiene el objeto HTMLLoader. Podría, por ejemplo, cambiar otro elemento de la interfaz como un campo de texto.

Gestión de llamadas JavaScript a window.blur() y window.focus()

Anule los métodos windowBlur() y windowFocus() para gestionar las llamadas JavaScript a window.blur() y window.focus() , como se muestra en el siguiente ejemplo:

override public function windowBlur():void 
{ 
    htmlLoader.alpha = 0.5; 
} 
override public function windowFocus():void 
{ 
    htmlLoader.alpha = 1.0; 
    NativeApplication.nativeApplication.activate(htmlLoader.stage.nativeWindow); 
}

Nota: AIR no proporciona una API para desactivar una ventana o aplicación.

Creación de ventanas con contenido HTML de desplazamiento

La clase HTMLLoader incluye un método estático, HTMLLoader.createRootWindow() , que le permite abrir una nueva ventana(representada por un objeto NativeWindow) que contiene un objeto HTMLLoader y definir algunos parámetros de la interfaz de usuario para esa ventana. El método tiene cuatro parámetros, que permiten definir la interfaz de usuario:

Parámetro	Descripción
`visible`	Un valor Boolean que especifica si la ventana está inicialmente visible ( `true` ) o no ( `false` ).
`windowInitOptions`	Un objeto NativeWindowInitOptions . La clase NativeWindowInitOptions define las opciones de inicialización de un objeto NativeWindow, incluyendo: si se puede minimizar, maximizar o cambiar el tamaño de la ventana, si la ventana tiene fondo cromático del sistema o fondo cromático personalizado, si la ventana es transparente o no (para las ventanas que no usan fondo cromático) y el tipo de ventana.
`scrollBarsVisible`	Si hay barras de desplazamiento ( `true` ) o no ( `false` ).
`bounds`	Un objeto Rectangle que define la posición y el tamaño de la nueva ventana.

Por ejemplo, el siguiente código usa el método HTMLLoader.createRootWindow() para crear una ventana con contenido HTMLLoader que usa barras de desplazamiento.

var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
var bounds:Rectangle = new Rectangle(10, 10, 600, 400); 
var html2:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, true, bounds); 
var urlReq2:URLRequest = new URLRequest("http://www.example.com"); 
html2.load(urlReq2); 
html2.stage.nativeWindow.activate();

Nota: las ventanas creadas llamando a createRootWindow() directamente en JavaScript permanecen independientes de la ventana HTML abierta. Las propiedades de la ventana JavaScript opener y parent , por ejemplo, son null . Sin embargo, se llama a createRootWindow() indirectamente anulando el método createWindow() de HTMLHost para llamar a createRootWindow() , entonces las propiedades opener y parent sí hacen referencia a la ventana HTML abierta.