|
La clase
StageWebView
muestra contenido HTML utilizando el control de navegador del sistema en los dispositivos móviles y el uso del control estándar HTMLLoader de Adobe® AIR® en los equipos de escritorio. Compruebe la propiedad
StageWebView.isSupported
para determinar si la clase se admite en el dispositivo actual. La compatibilidad no está garantizada en todos los dispositivos en el perfil móvil.
En todos los perfiles, la clase StageWebView solo admite la interacción limitada entre el contenido HTML y el resto de la aplicación. También se puede controlar la navegación, pero no se permite la reutilización de scripts ni el intercambio directo de datos. Es posible cargar contenido desde una URL local o remota o transmitir una cadena de HTML.
Objetos StageWebView
El objeto StageWebView no es un objeto de visualización y no se puede añadir a la lista de visualización. Funciona como ventana gráfica añadida directamente al escenario. El contenido de StageWebView se dibuja sobre la parte superior de cualquier contenido de la lista de visualización. No hay ninguna manera de controlar el orden de dibujo de diferentes objetos StageWebView.
Para mostrar un objeto StageWebView, se asigna el escenario en el que va a aparecer el objeto a la propiedad
stage
de StageWebView. Establezca el tamaño de la visualización utilizando la propiedad
viewPort
.
Establezca las coordenadas x e y de la propiedad
viewPort
entre -8192 y 8191. El valor máximo de la anchura y la altura del escenario es 8191. Si el tamaño sobrepasa los valores máximos, se emitirá una excepción.
En el siguiente ejemplo se crea un objeto StageWebView, se establecen las propiedades
stage
y
viewPort
y se muestra una cadena 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 un objeto StageWebView, establezca su propiedad
stage
en
null
. Para destruir todo el objeto, llame al método
dispose()
. La llamada a
dispose()
es opcional, pero ayuda al recolector de elementos no utilizados a recuperar antes la memoria utilizada por el objeto.
Contenido
Se puede cargar el contenido en un objeto StageWebView utilizando dos métodos:
loadURL()
y
loadString()
.
El método
loadURL()
carga un recurso en la URL especificada. Es posible utilizar cualquier esquema de URI admitido por el control de navegador web del sistema, incluyendo: data:, file:, http:, https: y javascript:. No se admiten los esquemas app: y app-storage:. AIR no valida la cadena URL.
El método
loadString()
carga una cadena literal que incluye contenido HTML. La ubicación de la página cargada con este método se expresa de la siguiente manera:
El esquema de URI determina las reglas para cargar los datos o el contenido incorporado.
|
Esquema de URI
|
Carga de recursos locales
|
Carga de recursos remotos
|
XMLHttpRequest local
|
XMLHttpRequest remota
|
|
data:
|
No
|
Sí
|
No
|
No
|
|
file:
|
Sí
|
Sí
|
Sí
|
Sí
|
|
http:, https:
|
No
|
Sí
|
No
|
Mismo dominio
|
|
about: (loadString() method)
|
No
|
Sí
|
No
|
No
|
Nota:
si la propiedad
displayState
del escenario se establece en
FULL_SCREEN
, en Desktop, no se puede escribir en un campo de texto mostrado en StageWebView. No obstante, en iOS y Android, es posible escribir en un campo de texto en StageWebView aunque la propiedad
displayState
del escenario sea
FULL_SCREEN
.
En el siguiente ejemplo se utiliza un objeto StageWebView para mostrar un sitio web de 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" );
}
}
}
En los dispositivos de Android, se debe especificar el permiso de INTERNET de Android para que la aplicación pueda cargar correctamente los recursos remotos.
En Android 3.0+, una aplicación debe activar la aceleración de hardware en el elemento manifestAdditions de Android del descriptor de la aplicación de AIR para mostrar contenido de plug-in en un objeto StageWebView. Consulte
Activación de Flash Player y otros plug-ins en un objeto StageWebView
.
URI de JavaScript
Se puede utilizar un URI de JavaScript para llamar a una función definida en la página HTML que se cargue mediante un objeto StageWebView. La función que se llama utilizando el URI de JavaScript se ejecuta en el contexto de la página web cargada. En el siguiente ejemplo se utiliza un objeto StageWebView para llamar a una función de 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 navegación
Cuando un usuario hace clic en un vínculo en HTML, el objeto StageWebView distribuye un evento
locationChanging
. Se puede llamar al método
preventDefault()
del objeto de evento para detener la navegación. De lo contrario, el objeto StageWebView se desplaza a la nueva página y distribuye un evento
locationChange
. Una vez finalizada la carga de la página, StageWebView distribuye un evento
complete
.
Un evento
locationChanging
se distribuye en cada redirección HTML. Los eventos
locationChange
y
complete
se distribuyen en el momento adecuado.
En iOS, se distribuye un evento
locationChanging
antes de
locationChange
, excepto en el primer método
loadURL(
) o l
oadString()
. Un evento
locationChange
también se distribuye para los cambios de navegación mediante iFrames y Frames.
En el siguiente ejemplo se muestra cómo se puede evitar un cambio de ubicación y abrir la nueva página en el navegador del 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 ) );
}
}
}
Historial
Conforme un usuario hace clic en los vínculos del contenido mostrado en un objeto StageWebView, el control guarda las pilas de historial de hacia atrás y hacia delante. El siguiente ejemplo muestra cómo desplazarse en las dos pilas del historial. En el ejemplo se utilizan las teclas programadas Back y Search.
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();
}
}
}
}
Selección
Aunque no es un objeto de visualización, la clase StageWebView contiene miembros que permiten administrar las transiciones seleccionadas dentro y fuera del control.
Cuando el objeto StageWebView se selecciona, distribuye un evento
focusIn
. Este evento se utiliza para administrar los elementos seleccionados en la aplicación, si es necesario.
Cuando StageWebView pierde la selección, distribuye un evento
focusOut
. Una instancia de StageWebView puede perder la selección si un usuario “pasa” el primer o el último control de la página web utilizando una bola de seguimiento de dispositivo o las flechas de dirección. La propiedad
direction
del objeto event permite saber si el flujo de selección sube y sobrepasa la parte superior de la página o desciende a la parte inferior. Utilice esta información para asignar la selección al objeto de visualización adecuado en la parte superior o inferior de StageWebView.
En iOS, la selección no se puede establecer mediante programación. StageWebView distribuye eventos
focusIn
y
focusOut
con la propiedad direction de
FocusEvent
establecida en
none
. Si el usuario toca dentro de StageWebView, se distribuye el evento
focusIn
. Si el usuario toca fuera de StageWebView, se distribuye el evento
focusOut
.
El siguiente ejemplo ilustra el modo en que la selección pasa del objeto StageWebView a los objetos de visualización de 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 mapas de bits
Un objeto StageWebView se representa sobre todo el contenido de la lista de visualización. No se puede añadir contenido sobre un objeto StageWebView. Por ejemplo, no se puede expandir un elemento desplegable sobre el contenido StageWebView. Para resolver este problema, capture una instantánea de StageWebView. A continuación, oculte StageWebView y añada la instantánea de mapa de bits.
El siguiente ejemplo muestra cómo capturar la instantánea de un objeto StageWebView utilizando el método
drawViewPortToBitmapData
. Oculta el objeto StageWebView estableciendo el escenario en null. Tras cargar por completo la página web, se llama a una función que captura el mapa de bits y lo muestra. Cuando se ejecuta, el código muestra dos etiquetas: Google y Facebook. Al hacer clic en la etiqueta, se captura la página web correspondiente y se muestra como instantánea en el escenario.
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);
}
}
}
|
|
|
