Visualizzazione di contenuto HTML nelle applicazioni per dispositivi mobili

Adobe AIR 2.5 e versioni successive

Oggetti StageWebView
Contenuto
- URI JavaScript
Eventi di navigazione
Cronologia
Attivazione
Acquisizione bitmap

La classe StageWebView visualizza contenuto HTML utilizzando il controllo del browser di sistema su dispositivi mobili, nonché il controllo Adobe® AIR® HTMLLoader standard su computer desktop. Controllate la proprietà StageWebView.isSupported per determinare se la classe è supportata sul dispositivo corrente. Il supporto non è garantito per tutti i dispositivi nel profilo mobile.

In tutti i profili, la classe StageWebView supporta solo interazione limitata tra il contenuto HTML e il resto dell'applicazione. Potete controllare la navigazione, ma lo scambio di script o di dati non è consentito. Potete caricare contenuto da un URL locale o remoto oppure passare una stringa di HTML.

Adobe consiglia

AIR2.5 StageWebView demo – OAuth Support

Mark Doherty
L'esperto Mark Doherty illustra come accedere a un sito protetto con OAuth come Twitter utilizzando la classe StageWebView.

Adobe consiglia		Avete un'esercitazione che desiderate condividere?

	Making the most of StageWebView Sean Voisen		HTML Web View in Air for Android Jonathan Campos

	Create a basic web browser with StageWebView Rich Tretola		AIR Mobile StageWebView UIComponent Sönke Rohde

	Using StageWebView within a UIComponent in Mobile Judah Frangipane

Oggetti StageWebView

L'oggetto StageWebView non è un oggetto di visualizzazione e non può essere aggiunto all'elenco di visualizzazione. Piuttosto, funziona come un riquadro di visualizzazione collegato direttamente allo stage. Il contenuto StageWebView viene disegnato sopra qualsiasi contenuto elenco di visualizzazione. Non è possibile controllare l'ordine di disegno di più oggetti StageWebView.

Per visualizzare un oggetto StageWebView, assegnate lo stage su cui l'oggetto deve apparire alla proprietà stage di StageWebView. Impostate la dimensione del display utilizzando la proprietà viewPort .

Impostate le coordinate x e y della proprietà viewPort tra -8192 e 8191. Il valore massimo di larghezza e altezza stage è 8191. Se le dimensioni superano questi valori massimi, viene generata un'eccezione.

L'esempio seguente mostra come creare un oggetto StageWebView, impostare le proprietà stage e viewPort , nonché visualizzare una stringa di 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 );

Per nascondere un oggetto StageWebView, impostate la sua proprietà stage su null . Per eliminare completamente l'oggetto, chiamate il metodo dispose() . La chiamata di dispose() è opzionale ma consente al garbage collector di reclamare in anticipo la memoria utilizzata dall'oggetto.

Contenuto

Potete caricare contenuto in un oggetto StageWebView utilizzando due metodi: loadURL() e loadString() .

Il metodo loadURL() carica una risorsa in corrispondenza dell'URL specificato. Potete usare qualsiasi schema URI supportato dal controllo del browser Web di sistema, inclusi: data:, file:, http:, https: e javascript:. Gli schemi app: e app-storage: non sono supportati. AIR non convalida la stringa URL.

Il metodo loadString() carica una stringa letterale contenente HTML. La posizione di una pagina caricata con questo metodo è espressa come:

Su Desktop: about:blank
Su iOS: htmlString
Su Android: il formato dati URI della htmlString codificata

Lo schema URI determina le regole di caricamento del contenuto o dei dati incorporati.

Schema URI	Carica risorse locali	Carica risorse remote	XMLHttpRequest locale	XMLHttpRequest remota
data:	No	Sì	No	No
file:	Sì	Sì	Sì	Sì
http:, https:	No	Sì	No	Stesso dominio
about: (metodo loadString())	No	Sì	No	No

Nota: se la proprietà displayState dello stage è impostata su FULL_SCREEN , in Desktop, non potete compilare un campo di visualizzato in StageWebView. Tuttavia, in iOS e Android, potete compilare un campo di testo su StageWebView anche se la proprietà displayState dello stage è FULL_SCREEN .

L'esempio seguente utilizza un oggetto StageWebView per visualizzare il sito Web di 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" ); 
        } 
    } 
}

Su dispositivi Android, dovete specificare l'autorizzazione INTERNET Android affinché l'applicazione carichi correttamente le risorse remote.

In Android 3.0+, un'applicazione deve abilitare l'accelerazione hardware nell'elemento manifestAdditions Android del descrittore dell'applicazione AIR per visualizzare contenuto plug-in in un oggetto StageWebView. Vedere Abilitazione di Flash Player e altri plug-in in un oggetto StageWebView .

URI JavaScript

Potete usare un URI JavaScript per chiamare una funzione definita nella pagina HTML che viene caricata da un oggetto StageWebView. La funzione chiamata utilizzando l'URI JavaScript viene eseguita nel contesto della pagina Web caricata. L'esempio seguente utilizza un oggetto StageWebView per chiamare una funzione 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 ); 
        } 
    } 
}

Eventi di navigazione

Quando un utente fa clic su un collegamento nell'HTML, l'oggetto StageWebView invia un evento locationChanging . Potete chiamare il metodo preventDefault() dell'oggetto evento interrompere la navigazione. In caso contrario, l'oggetto StageWebView passa alla nuova pagina e invia un evento locationChange . Al termine del caricamento della pagina, StageWebView invia un evento complete .

Un evento locationChanging viene inviato per ogni reindirizzamento HTML. Gli eventi locationChange e complete vengono inviati al momento appropriato.

Su iOS, un evento locationChanging viene inviato prima di un evento locationChange , tranne che per i primi metodi loadURL( ) o l oadString() . Un evento locationChange viene anche inviato per modifiche di navigazione tramite iFrames e Frames.

L'esempio seguente mostra come impedire una modifica di posizione e come aprire invece la nuova pagina nel browser di 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 ) ); 
        } 
    } 
}

Cronologia

Quando un utente seleziona i collegamenti nel contenuto visualizzato in un oggetto StageWebView, il controllo salva gli history stack backward e forward. L'esempio seguente illustra come navigare tra i due history stack utilizzando i tasti virtuali Indietro e Cerca.

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

Attivazione

Anche se non è un oggetto di visualizzazione, la classe StageWebView contiene membri che consentono di gestire le transizioni di attivazione all'interno e all'esterno del controllo.

Quando l'oggetto StageWebView viene attivato, invia un evento focusIn . Utilizzate questo evento per gestire gli elementi di attivazione nell'applicazione, se necessario.

Quando l'oggetto StageWebView rilascia lo stato di attivazione, invia un evento focusOut . Un'istanza StageWebView rilascia lo stato di attivazione quando un utente si sposta con il tasto TAB oltre il primo o l'ultimo controllo sulla pagina Web utilizzando un trackball dispositivo o le frecce direzionali. La proprietà direction dell'oggetto evento consente di sapere se il flusso di attivazione oltrepassando la parte superiore o inferiore della pagina. Utilizzare queste informazioni per assegnare lo stato di attivazione all'oggetto di visualizzazione appropriato sopra o sotto StageWebView.

Su iOS, lo stato di attivazione non può essere impostato a livello di programmazione. StageWebView invia eventi focusIn e focusOut con la proprietà di direzione FocusEvent impostata su none . Se l'utente fa clic all'interno di StageWebView, viene inviato l'evento focusIn . Se l'utente fa clic all'esterno di StageWebView, viene inviato l'evento focusOut .

L'esempio seguente illustra come lo stato di attivazione passa dall'oggetto StageWebView agli oggetti di visualizzazione 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; 
        } 
         
    } 
}

Acquisizione bitmap

Il rendering di un oggetto StageWebView viene eseguito sopra tutto il contenuto dell'elenco di visualizzazione. Non potete aggiungere contenuto sopra un oggetto StageWebView. Ad esempio, non potete espandere un menu a discesa sopra il contenuto StageWebView. Per risolvere questo problema, acquisite uno snapshot di StageWebView. Quindi, nascondete StageWebView e aggiungete invece lo snapshot bitmap.

L'esempio seguente mostra come acquisire lo snapshot di un oggetto StageWebView utilizzando il metodo drawViewPortToBitmapData . L'oggetto StageWebView viene nascosto impostando lo stage su null. Al termine del caricamento della pagina Web, viene chiamata una funzione che acquisisce e visualizza la bitmap. Durante l'esecuzione, il codice visualizza due etichette, Google e Facebook. Facendo clic sull'etichetta si acquisisce la pagina Web corrispondente che viene visualizzata come uno snapshot sullo stage.

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

Visualizzazione di contenuto HTML nelle applicazioni per dispositivi mobili

Adobe consiglia

AIR2.5 StageWebView demo – OAuth Support

Adobe consiglia

Avete un'esercitazione che desiderate condividere?

Making the most of StageWebView

HTML Web View in Air for Android

Create a basic web browser with StageWebView

AIR Mobile StageWebView UIComponent

Using StageWebView within a UIComponent in Mobile

Oggetti StageWebView

Contenuto

URI JavaScript

Eventi di navigazione

Cronologia

Attivazione

Acquisizione bitmap