Definição de interfaces do usuário como navegadores para conteúdo HTML

Adobe AIR 1.0 e posterior

Sobre estender a classe HTMLHost
Exemplo: Extensão da classe HTMLHost
Tratamento de alterações na propriedade window.location
Tratamento de chamadas de JavaScript de window.moveBy(), window.moveTo(), window.resizeTo() e window.resizeBy()
Tratamento de chamadas JavaScript de window.open()
Tratamento de chamadas JavaScript de window.close()
Tratamento de alterações da propriedade windows.status
Tratamento de alterações da propriedade window.document.title
Tratamento de chamadas JavaScript de window.blur() e window.focus()
Criação de janelas com conteúdo HTML de rolagem

O JavaScript oferece diversas APIs para controlar a janela que exibe o conteúdo HTML. No AIR, essas APIs podem ser sobrescritas com a implementação de uma classe personalizada HTMLHost .

Sobre estender a classe HTMLHost

Se, por exemplo, o aplicativo apresentar vários objetos HTMLLoader em uma interface com abas, talvez você deseje que as alterações feitas pelas páginas HTML carregadas alterem o rótulo da aba e não o título da janela principal. Da mesma forma, o código pode responder a uma chamada window.moveTo() reposicionando o objeto HTMLLoader no respectivo contêiner do objeto de exibição pai, movendo a janela que contém o objeto HTMLLoader, não fazendo exatamente nada ou fazendo alguma outra coisa por completo.

A classe HTMLHost do AIR controla as seguintes propriedades e métodos JavaScript:

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

Quando você cria um objeto HTMLLoader usando new HTMLLoader() , as propriedades ou métodos JavaScript listados não são ativados. A classe HTMLHost oferece uma implementação padrão como navegador dessas APIs JavaScript. Você também pode estender a classe HTMLHost para personalizar o comportamento. Para criar um objeto HTMLHost que ofereça suporte ao comportamento padrão, defina o parâmetro defaultBehaviors como true no construtor HTMLHost:

var defaultHost:HTMLHost = new HTMLHost(true);

Quando você cria uma janela HTML no AIR com o método createRootWindow() da classe HTMLLoader, uma ocorrência HTMLHost com suporte aos comportamentos padrão é atribuída automaticamente. Você pode alterar o comportamento do objeto host atribuindo uma implementação HTMLHost diferente à propriedade htmlHost do HTMLLoader ou, pode atribuir null para desativar os recursos completamente.

Nota: O AIR atribui um objeto HTMLHost padrão à janela inicial criada para o aplicativo do AIR baseado em HTML e qualquer janela criada pela implementação padrão do método window.open() de JavaScript.

Exemplo: Extensão da classe HTMLHost

O exemplo a seguir mostra como personalizar a maneira como o objeto HTMLLoader afeta a interface do usuário, estendendo a classe HTMLHost:

Exemplo do Flex:

Crie uma classe que estenda a classe HTMLHost (uma subclasse).

Substitua os métodos da nova classe para tratar alterações nas configurações relacionadas à interface do usuário. Por exemplo, a classe a seguir, CustomHost, define comportamentos de chamadas para window.open() e altera para window.document.title . As chamadas para window.open() abrem a página HTML em uma nova janela e alterações em window.document.title (incluindo a configuração do elemento <title> da página HTML) definem o título dessa janela.

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

No código que contém o HTMLLoader (não no código da nova subclasse de HTMLHost), crie um objeto da nova classe. Atribua o novo objeto à propriedade htmlHost do HTMLLoader. O seguinte código Flex usa a classe CustomHost definida na etapa 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 testar o código descrito aqui, inclua um arquivo HTML com o seguinte conteúdo no diretório do aplicativo:

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

Exemplo do Flash Professional:

Crie um arquivo Flash para o AIR. Defina a classe do documento como CustomHostExample e, em seguida, salve o arquivo como CustomHostExample.fla.

Crie um arquivo ActionScript chamado CustomHost.as contendo uma classe que estenda a classe HTMLHost (uma subclasse). Essa classe substitui certos métodos da nova classe para tratar alterações nas configurações relacionadas à interface do usuário. Por exemplo, a classe a seguir, CustomHost, define comportamentos de chamadas para window.open() e altera para window.document.title . As chamadas para o método window.open() abrem a página HTML em uma nova janela e alterações na propriedade window.document.title (incluindo a configuração do elemento <title> da página HTML) definem o título dessa janela.

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

Crie outro arquivo ActionScript chamado CustomHostExample.as para conter a classe de documento do aplicativo. Essa classe cria um objeto HTMLLoader e define a respectiva propriedade host como uma ocorrência da classe CustomHost definida na etapa 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 testar o código descrito aqui, inclua um arquivo HTML com o seguinte conteúdo no diretório do aplicativo:

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

Tratamento de alterações na propriedade window.location

Substitua o método locationChange() para tratar alterações da URL da página HTML. O método locationChange() é chamado quando o JavaScript em uma página altera o valor de window.location . O exemplo a seguir simplesmente carrega a URL solicitada:

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

Nota: Você pode usar a propriedade htmlLoader do objeto HTMLHost para fazer referência ao objeto HTMLLoader atual.

Tratamento de chamadas de JavaScript de window.moveBy(), window.moveTo(), window.resizeTo() e window.resizeBy()

Substitua o método set windowRect() para tratar alterações nos limites do conteúdo HTML. O método set windowRect() é chamado quando o JavaScript em uma página chama window.moveBy() , window.moveTo() , window.resizeTo() ou window.resizeBy() . O exemplo a seguir simplesmente atualiza os limites da janela da área de trabalho:

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

Tratamento de chamadas JavaScript de window.open()

Substitui o método createWindow() para tratar chamadas JavaScript de window.open() . As implementações do método createWindow() são responsáveis pela criação e retorno de um novo objeto HTMLLoader. Normalmente você exibe o HTMLLoader em uma nova janela, mas não é necessário criar uma nova janela.

O exemplo a seguir ilustra como implementar a função createWindow() usando HTMLLoader.createRootWindow() para criar a janela e o objeto HTMLLoader. Você também pode criar o objeto NativeWindow separadamente e adicionar o HTMLLoader ao palco da janela.

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: Esse exemplo atribui a implementação HTMLHost personalizada a qualquer janela nova criada com window.open() . Você também pode usar uma implementação diferente ou definir a propriedade htmlHost como null em novas janelas, se desejar.

O objeto passado como parâmetro para o método createWindow() é um objeto HTMLWindowCreateOptions . A classe HTMLWindowCreateOptions inclui propriedades que informam os valores definidos na sequência de parâmetro features na chamada de window.open() :

propriedade HTMLWindowCreateOptions	Configuração correspondente na string de recursos na chamada JavaScript para window.open()
`fullscreen`	`fullscreen`
`height`	`height`
`locationBarVisible`	`location`
`menuBarVisible`	`menubar`
`resizeable`	`resizable`
`scrollBarsVisible`	`scrollbars`
`statusBarVisible`	`status`
`toolBarVisible`	`toolbar`
`width`	`width`
`x`	`left` ou `screenX`
`y`	`top` ou `screenY`

A classe HTMLLoader não implementa todos os recursos que podem ser especificados na string de recursos. O aplicativo deve fornecer barras de rolagem, barras de localização, barras de menu, barras de status e barras de ferramentas, quando apropriado.

Os outros argumentos para o método window.open() de JavaScript são tratados pelo sistema. A implementação createWindow() não deve carregar conteúdo no objeto HTMLLoader nem definir o título da janela.

Tratamento de chamadas JavaScript de window.close()

Substitui o método windowClose() para tratar chamadas JavaScript do método window.close() . O exemplo a seguir fecha a janela da área de trabalho quando o método window.close() é chamado:

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

As chamadas JavaScript de window.close() não têm que fechar as janelas que as contêm. Você pode, por exemplo, remover o HTMLLoader da lista de exibição, deixando a janela (que pode ter outro conteúdo) aberta, conforme o código a seguir:

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

Tratamento de alterações da propriedade windows.status

Substitua o método updateStatus() para tratar alterações JavaScript no valor de window.status . O exemplo a seguir rastreia o valor do status:

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

O status solicitado é passado como string para o método updateStatus() .

O objeto HTMLLoader não oferece uma barra de status.

Tratamento de alterações da propriedade window.document.title

Substitua o método updateTitle() para tratar alterações JavaScript no valor de window.document.title . O exemplo a seguir altera o título da janela e acrescenta a sequência, "Sample", ao título:

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

Quando document.title estiver definido em uma página HTML, o título solicitado será passado como string para o método updateTitle() .

As alterações em document.title não devem alterar o título da janela que contém o objeto HTMLLoader. Você pode, por exemplo, alterar outro elemento de interface, como campo de texto.

Tratamento de chamadas JavaScript de window.blur() e window.focus()

Substitua os métodos windowBlur() e windowFocus() para tratar chamadas JavaScript de window.blur() e window.focus() , conforme mostrado o exemplo a seguir:

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: O AIR não fornece nenhuma API para desativar janela nem aplicativo.

Criação de janelas com conteúdo HTML de rolagem

A classe HTMLLoader inclui um método estático, HTMLLoader.createRootWindow() , que permite abrir uma nova janela (representada por um objeto NativeWindow) que contém um objeto HTMLLoader e define algumas configurações da interface do usuário para essa janela. O método tem quatro parâmetros que permitem definir a interface do usuário:

Parâmetro	Descrição
`visible`	Um valor booliano que especifica se a janela ficará inicialmente visível ( `true` ) ou não ( `false` ).
`windowInitOptions`	Um objeto NativeWindowInitOptions . A classe NativeWindowInitOptions define as opções de inicialização do objeto NativeWindow, incluindo o seguinte: se a janela é minimizável, maximizável ou redimensionável, se a janela tem cromo do sistema ou cromo personalizado, se a janela é transparente ou não (para janelas que não usam o cromo do sistema) e o tipo de janela.
`scrollBarsVisible`	Se há barras de rolagem ( `true` ) ou não ( `false` ).
`bounds`	Um objeto Rectangle definindo a posição e as dimensões da nova janela.

Por exemplo, o código a seguir usa o método HTMLLoader.createRootWindow() para criar uma janela com conteúdo HTMLLoader que usa barras de rolagem:

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: Janelas criadas chamando createRootWindow() diretamente em JavaScript permanecem independentes da janela HTML aberta. As propriedades opener e parent da janela JavaScript, por exemplo, são null . No entanto, se você chamar createRootWindow() indiretamente substituindo o método createWindow() do HTMLHost para chamar createRootWindow() , opener e parent farão referência à janela HTML aberta.