Exibição de conteúdo HTML em aplicativos móveis

Adobe AIR 2.5 e posterior

Objetos StageWebView
Conteúdo
- URI JavaScript
Eventos de navegação
Histórico
Foco
Captura de bitmap

A classe StageWebView exibe conteúdo HTML usando o controle do navegador do sistema em dispositivos móveis e usando o controle Adobe® AIR® HTMLLoader padrão em computadores desktop. Verifique a propriedade StageWebView.isSupported para determinar se a classe conta com suporte no dispositivo atual. O suporte não é garantido para todos os dispositivos no perfil móvel.

Em todos os perfis, a classe StageWebView oferece suporte somente à interação limitada entre o conteúdo HTML e o resto do aplicativo. Você pode controlar a navegação, mas scripts cruzados e a troca direta de dados não são permitidos. Você pode carregar conteúdo de um URL local ou remoto ou passá-lo em uma string de HTML.

Adobe recomenda

Demonstração do AIR2.5 StageWebView – Suporte a OAuth

Mark Doherty
O propagador Mark Doherty demonstra como fazer login em um site protegido por OAuth como o Twitter usando a classe StageWebView.

Adobe recomenda		Você possui um tutorial que gostaria de compartilhar?

	Aproveitando o StageWebView ao máximo Sean Voisen		HTML Web View no Air for Android Jonathan Campos

	Crie um navegador da web básico com o StageWebView Rich Tretola		UIComponent AIR Mobile do StageWebView Sönke Rohde

	Como usar o StageWebView em um UIComponent no Mobile Judah Frangipane

Objetos StageWebView

O objeto StageWebView não é um objeto de exibição e não pode ser adicionado à lista de exibição. Em vez disso, ele funciona como um viewport anexado diretamente ao palco. O conteúdo StageWebView desenha sobre qualquer conteúdo de lista de exibição. Não há nenhum modo de controlar a ordem de desenho de diferentes objetos StageWebView.

Para exibir um objeto StageWebView, atribua o palco em que o objeto se encontra de modo a ser exibido para a propriedade stage do StageWebView. Defina o tamanho da exibição usando a propriedade viewPort .

Defina as coordenadas X e Y da propriedade viewPort entre -8192 e 8191. O valor máximo da altura e da largura do palco é 8191. Se o tamanho exceder os valores máximos, uma exceção será lançada.

O seguinte exemplo cria um objeto StageWebView, define as propriedades stage e viewPort e exibe uma string de HTML:

var webView:StageWebView = new StageWebView(); 
webView.viewPort = new Rectangle( 0, 0, this.stage.stageWidth, this .stage.stageHeight); 
webView.stage = this.stage; 
var htmlString:String = "<!DOCTYPE HTML>" + 
                        "<html><body>" + 
                        "<p>King Philip could order five good steaks.</p>" + 
                        "</body></html>"; 
webView.loadString( htmlString );

Para ocultar um objeto StageWebView, defina sua propriedade stage como null . Para destruir o objeto completamente, chame o método dispose() . Chamar dispose() é opcional, mas ajuda o coletor de lixo a recuperar mais cedo a memória usada pelo objeto.

Conteúdo

Você pode carregar conteúdo em um objeto StageWebView usando dois métodos: loadURL() e loadString() .

O método loadURL() carrega um recurso no URL especificado. Você pode usar qualquer esquema de URI com suporte no controle de navegador da Web do sistema, inclusive: data:, file:, http:, https: e javascript:. Os esquemas app: e app-storage: não são compatíveis. O AIR não valida a string do URL.

O método loadString() carrega uma string literal com conteúdo HTML. O local de uma página carregada com esse método é expresso como:

No desktop: sobre:em branco
No iOS: htmlString
No Android: o formato do URI dos dados do htmlString codificado

O esquema de URI determina as regras de carregamento de conteúdo ou dados incorporados.

Esquema de URI	Recurso local local	Recurso remoto local	XMLHttpRequest local	XMLHttpRequest remoto
dados:	Não	Sim	Não	Não
arquivo:	Sim	Sim	Sim	Sim
http:, https:	Não	Sim	Não	Mesmo domínio
sobre: (método loadString())	Não	Sim	Não	Não

Nota: Se a propriedade displayState do palco for definida como FULL_SCREEN , no desktop, você não poderá digitar em um campo de texto exibido em StageWebView. No entanto, no iOS e no Android, você pode digitar em uma campo de texto em StageWebView, mesmo que o displayState do palco seja FULL_SCREEN .

O exemplo a seguir usa um objeto StageWebView para exibir o site da Adobe:

package  { 
    import flash.display.MovieClip; 
    import flash.media.StageWebView; 
    import flash.geom.Rectangle; 
     
    public class StageWebViewExample extends MovieClip{ 
 
        var webView:StageWebView = new StageWebView(); 
         
        public function StageWebViewExample() { 
            webView.stage = this.stage; 
            webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight ); 
            webView.loadURL( "http://www.adobe.com" ); 
        } 
    } 
}

Em dispositivos Android, é preciso especificar a permissão INTERNET do Android para que o aplicativo carregue com sucesso os recursos remotos.

No Android 3.0+, um aplicativo deve habilita a aceleração de hardware no elemento Android manifestAdditions do descritor do aplicativo do AIR para exibir o conteúdo do plug-in num objeto StageWebView. Consulte Como Habilitar o Flash Player e outros plug-ins em um objeto StageWebView .

URI JavaScript

Você pode usar um URI JavaScript para chamar uma função definida na página HTML carregada pelo objeto StageWebView. A função que você chama usando o URI JavaScript URI é executada no contexto da página da Web carregada. O exemplo a seguir usa um objeto StageWebView para chamar uma função JavaScript:

package { 
    import flash.display.*; 
    import flash.geom.Rectangle; 
    import flash.media.StageWebView; 
    public class WebView extends Sprite 
    { 
        public var webView:StageWebView = new StageWebView(); 
        public function WebView() 
        {     
            var htmlString:String = "<!DOCTYPE HTML>" + 
            "<html><script type=text/javascript>" + 
            "function callURI(){" + 
            "alert(\"You clicked me!!\");"+ 
            "}</script><body>" + 
            "<p><a href=javascript:callURI()>Click Me</a></p>" + 
            "</body></html>"; 
            webView.stage = this.stage; 
            webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight ); 
            webView.loadString( htmlString ); 
        } 
    } 
}

Eventos de navegação

Quando o usuário clica em um link no HTML, o objeto StageWebView despacha um evento locationChanging . Você pode chamar o método preventDefault() do objeto de evento para parar a navegação. Caso contrário, o objeto StageWebView navegará para a nova página e despachará um evento locationChange . Quando o carregamento da página é concluído, o StageWebView despacha um evento complete .

Um evento locationChanging é despachado a cada redirecionamento do HTML. Os eventos locationChange e complete são despachados no momento oportuno.

No iOS, um evento locationChanging é despachado antes de um evento locationChange , com exceção dos primeiros métodos loadURL() ou loadString() . Um evento locationChange também é despachado para alterações de navegação por iFrames e Frames.

O exemplo a seguir ilustra como você pode evitar uma alteração local e, em vez disso, abrir abrir a nova página no navegador do sistema.

package  { 
    import flash.display.MovieClip; 
    import flash.media.StageWebView; 
    import flash.events.LocationChangeEvent; 
    import flash.geom.Rectangle; 
    import flash.net.navigateToURL; 
    import flash.net.URLRequest; 
     
    public class StageWebViewNavEvents extends MovieClip{ 
        var webView:StageWebView = new StageWebView(); 
         
        public function StageWebViewNavEvents() { 
            webView.stage = this.stage; 
            webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight ); 
        webView.addEventListener( LocationChangeEvent.LOCATION_CHANGING, onLocationChanging ); 
            webView.loadURL( "http://www.adobe.com" ); 
        } 
        private function onLocationChanging( event:LocationChangeEvent ):void 
        { 
            event.preventDefault(); 
            navigateToURL( new URLRequest( event.location ) ); 
        } 
    } 
}

Histórico

Quando o usuário clica em links no conteúdo exibido em um objeto StageWebView, o controle salva as pilhas de histórico de avanço e de retrocesso. O exemplo a seguir ilustra como navegar pelas duas pilhas de histórico. O exemplo usa as teclas programáveis Voltar e Pesquisar.

package  { 
    import flash.display.MovieClip; 
    import flash.media.StageWebView; 
    import flash.geom.Rectangle; 
    import flash.events.KeyboardEvent; 
    import flash.ui.Keyboard; 
     
    public class StageWebViewExample extends MovieClip{ 
 
        var webView:StageWebView = new StageWebView(); 
         
        public function StageWebViewExample() 
        { 
            webView.stage = this.stage; 
            webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight ); 
            webView.loadURL( "http://www.adobe.com" ); 
             
            stage.addEventListener( KeyboardEvent.KEY_DOWN, onKey ); 
        } 
         
        private function onKey( event:KeyboardEvent ):void 
        { 
            if( event.keyCode == Keyboard.BACK && webView.isHistoryBackEnabled ) 
            { 
                trace("back"); 
                webView.historyBack(); 
                event.preventDefault(); 
            } 
            if( event.keyCode == Keyboard.SEARCH && webView.isHistoryForwardEnabled ) 
            { 
                trace("forward"); 
                webView.historyForward(); 
            } 
        } 
    } 
}

Foco

Embora não seja um objeto de exibição, a classe StageWebView contém membros que permitem gerenciar as transições do foco para um controle ou para fora dele.

Quando o objeto StageWebView recebe o foco, despacha um evento focusIn . Use esse evento para gerenciar os elementos de foco no aplicativo, se necessário.

Quando o StageWebView abre mão do foco, despacha um evento focusOut . Uma ocorrência de StageWebView pode abrir mão do foco quando o usuário usa a tabulação passando pelo primeiro ou pelo último controle na página da Web usando o trackball ou as setas de direção de um dispositivo. A propriedade direction do objeto de evento permite saber se o fluxo do foco está subindo acima do topo da página ou descendo além da parte inferior da página. Use estas informações para atribuir o foco ao objeto de exibição apropriado acima ou abaixo de StageWebView.

No iOS, o foco não pode ser definido programaticamente. O StageWebView despacha eventos focusIn e focusOut com a propriedade direction de FocusEvent definida como none . Se o usuário tocar dentro do StageWebView, o evento focusIn é despachado. Se o usuário tocar fora do StageWebView, o evento focusOut é despachado.

O exemplo a seguir ilustra como o foco passa do objeto StageWebView para objetos de exibição do Flash:

package  { 
    import flash.display.MovieClip; 
    import flash.media.StageWebView; 
    import flash.geom.Rectangle; 
    import flash.events.KeyboardEvent; 
    import flash.ui.Keyboard; 
    import flash.text.TextField; 
    import flash.text.TextFieldType; 
    import flash.events.FocusEvent; 
    import flash.display.FocusDirection; 
    import flash.events.LocationChangeEvent; 
     
    public class StageWebViewFocusEvents extends MovieClip{ 
        var webView:StageWebView = new StageWebView(); 
        var topControl:TextField = new TextField(); 
        var bottomControl:TextField = new TextField(); 
         
        public function StageWebViewFocusEvents() 
        { 
            trace("Starting"); 
            topControl.type = TextFieldType.INPUT; 
            addChild( topControl ); 
            topControl.height = 60; 
            topControl.width = stage.stageWidth; 
            topControl.background = true; 
            topControl.text = "One control on top."; 
            topControl.addEventListener( FocusEvent.FOCUS_IN, flashFocusIn ); 
            topControl.addEventListener( FocusEvent.FOCUS_OUT, flashFocusOut ); 
             
            webView.stage = this.stage; 
            webView.viewPort = new Rectangle( 0, 60, stage.stageWidth, stage.stageHeight 
- 120 ); 
            webView.addEventListener( FocusEvent.FOCUS_IN, webFocusIn ); 
            webView.addEventListener(FocusEvent.FOCUS_OUT, webFocusOut ); 
            webView.addEventListener(LocationChangeEvent.LOCATION_CHANGING, 
                                     function( event:LocationChangeEvent ):void 
                                     { 
                                         event.preventDefault(); 
                                     } ); 
            webView.loadString("<form action='#'><input/><input/><input/></form>"); 
            webView.assignFocus(); 
             
            bottomControl.type = TextFieldType.INPUT; 
            addChild( bottomControl ); 
            bottomControl.y = stage.stageHeight - 60; 
            bottomControl.height = 60; 
            bottomControl.width = stage.stageWidth; 
            bottomControl.background = true; 
            bottomControl.text = "One control on the bottom.";             
            bottomControl.addEventListener( FocusEvent.FOCUS_IN, flashFocusIn ); 
            bottomControl.addEventListener( FocusEvent.FOCUS_OUT, flashFocusOut );        } 
         
        private function webFocusIn( event:FocusEvent ):void 
        { 
            trace("Web focus in"); 
        } 
         
        private function webFocusOut( event:FocusEvent ):void 
        { 
            trace("Web focus out: " + event.direction); 
            if( event.direction == FocusDirection.TOP ) 
            { 
                stage.focus = topControl; 
            } 
            else 
            { 
                stage.focus = bottomControl; 
            } 
        } 
 
        private function flashFocusIn( event:FocusEvent ):void 
        { 
            trace("Flash focus in"); 
            var textfield:TextField = event.target as TextField; 
            textfield.backgroundColor = 0xff5566; 
        } 
         
        private function flashFocusOut( event:FocusEvent ):void 
        { 
            trace("Flash focus out"); 
            var textfield:TextField = event.target as TextField; 
            textfield.backgroundColor = 0xffffff; 
        } 
         
    } 
}

Captura de bitmap

Um objeto StageWebView é renderizado acima de todo o conteúdo da lista de exibição. Não é possível adicionar um conteúdo acima do objeto StageWebView. Por exemplo, não é possível expandir uma lista suspensa sobre o conteúdo de StageWebView. Para solucionar esse problema, faça a captura de um instantâneo de StageWebView. Em seguida, oculte o StageWebView e adicione o instantâneo em bitmap em seu lugar.

O exemplo a seguir ilustra como capturar o instantâneo de um objeto StageWebView usandop o método drawViewPortToBitmapData . Ele oculta o objeto StageWebView definido o palco como null. Depois que a página da Web estiver totalmente carregada, chame uma função que captura o bitmap e o exibe. Quando executado, o código exibe dois rótulos, Google e Facebook. Clicar no rótulo captura a página da Web correspondente e a exibe como um instantâneo no palco.

package 
{ 
    import flash.display.Bitmap; 
    import flash.display.BitmapData; 
    import flash.display.Sprite; 
    import flash.events.*; 
    import flash.geom.Rectangle; 
    import flash.media.StageWebView; 
    import flash.net.*; 
    import flash.text.TextField; 
    public class stagewebview extends Sprite 
    { 
        public var webView:StageWebView=new StageWebView(); 
        public var textGoogle:TextField=new TextField(); 
        public var textFacebook:TextField=new TextField(); 
        public function stagewebview() 
        { 
            textGoogle.htmlText="<b>Google</b>"; 
            textGoogle.x=300; 
            textGoogle.y=-80;         
            addChild(textGoogle); 
            textFacebook.htmlText="<b>Facebook</b>"; 
            textFacebook.x=0; 
            textFacebook.y=-80; 
            addChild(textFacebook); 
            textGoogle.addEventListener(MouseEvent.CLICK,goGoogle); 
            textFacebook.addEventListener(MouseEvent.CLICK,goFaceBook); 
            webView.stage = this.stage; 
            webView.viewPort = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight); 
        } 
    public function goGoogle(e:Event):void 
        { 
            webView.loadURL("http://www.google.com"); 
            webView.stage = null; 
            webView.addEventListener(Event.COMPLETE,handleLoad); 
        } 
     
    public function goFaceBook(e:Event):void 
        { 
            webView.loadURL("http://www.facebook.com"); 
            webView.stage = null; 
            webView.addEventListener(Event.COMPLETE,handleLoad); 
        } 
    public function handleLoad(e:Event):void 
        { 
            var bitmapData:BitmapData = new BitmapData(webView.viewPort.width, webView.viewPort.height); 
            webView.drawViewPortToBitmapData(bitmapData); 
            var webViewBitmap:Bitmap=new Bitmap(bitmapData); 
            addChild(webViewBitmap); 
        } 
    } 
}

Exibição de conteúdo HTML em aplicativos móveis

Adobe recomenda

Demonstração do AIR2.5 StageWebView – Suporte a OAuth

Adobe recomenda

Você possui um tutorial que gostaria de compartilhar?

Aproveitando o StageWebView ao máximo

HTML Web View no Air for Android

Crie um navegador da web básico com o StageWebView

UIComponent AIR Mobile do StageWebView

Como usar o StageWebView em um UIComponent no Mobile

Objetos StageWebView

Conteúdo

URI JavaScript

Eventos de navegação

Histórico

Foco

Captura de bitmap