Exibição de conteúdo HTML em aplicativos móveisAdobe AIR AIR 2.5 e posterior 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. Objetos StageWebViewO 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údoVocê 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:
O esquema de URI determina as regras de carregamento de conteúdo ou dados incorporados.
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 da Web: 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. URI JavaScriptVocê 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çãoQuando 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 for 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óricoQuando 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();
}
}
}
}
FocoEmbora 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 bitmapUm 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âneio de StageWebView. Em seguida, oculte o StageWebView e adicione o instantâneio 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 totalmetne 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 correpondente 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);
}
}
}
|
|
