HTML-inhoud weergeven in mobiele toepassingen

Adobe AIR 2.5 of hoger

De klasse StageWebView geeft HTLM-inhoud weer met behulp van het systeembrowserbesturingselement op mobiele apparaten en met gebruik van het standaard Adobe® AIR® HTMLLoader-besturingselement op pc's. Controleer de eigenschap StageWebView.isSupported om te bepalen of de klasse wordt ondersteund op het huidige apparaat. Ondersteuning wordt niet gegarandeerd voor alle apparaten in het mobiele profiel.

In alle profielen ondersteunt de klasse StageWebView slechts beperkte interactie tussen de HTML-inhoud en de rest van de toepassing. U kunt navigatie besturen, maar cross-scripting of rechtstreekse gegevensuitwisseling is niet toegestaan. U kunt inhoud laden van een lokale of externe URL of doorgeven in een HTML-reeks.

Aangeraden door Adobe

AIR2.5 StageWebView-demo – OAuth-ondersteuning

Mark Doherty
Mark Doherty, expert op dit gebied, laat zien hoe u zich met de klasse StageWebView kunt aanmelden bij een door OAuth beveiligde site, zoals Twitter.

StageWebView-objecten

Een StageWebView-object is geen weergaveobject en kan niet worden toegevoegd aan de weergavelijst. In plaats daarvan werkt het als een viewport die rechtstreeks aan het werkgebied is gekoppeld. StageWebView-inhoud wordt vóór de inhoud van de weergavelijst getekend. De tekenvolgorde van de verschillende StageWebView-objecten kan niet worden ingesteld.

Als u een StageWebView-object wilt weergeven, wijst u het werkgebied waarop het object moet worden weergegeven toe aan de stage-eigenschap van het StageWebView-object. Stel de grootte van de weergave in met de viewPort-eigenschap.

Stel de x- en y-coördinaten van de viewPort-eigenschap in op tussen -8192 en 8191. De maximale waarde van de breedte en hoogte van het werkgebied is 8191. Als de grootte de maximale waarden overschrijdt, wordt er een uitzondering gegenereerd.

In het volgende voorbeeld wordt een StageWebView-object gemaakt, worden de stage- en viewPort-eigenschappen ingesteld en wordt een HTML-reeks weergegeven:

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

Als u een StageWebView-object wilt verbergen, stelt u de stage-eigenschap in op null. Als u het object helemaal wilt vernietigen, roept u de methode dispose() aan. Het aanroepen van dispose() is optioneel, maar het object wordt dan opgeschoond, zodat het geheugen sneller wordt vrijgegeven.

Inhoud

U kunt met twee methoden inhoud laden in een StageWebView-object: loadURL() en loadString().

De loadURL()-methode laadt een bron bij de opgegeven URL. U kunt een willekeurig URI-schema gebruiken dat wordt ondersteund door het systeemwebbrowserbesturingselement, zoals: data:, file:, http:, https: en javascript:. De schema's app: en app- storage: worden niet ondersteund. AIR valideert de URL-tekenreeks niet.

De loadString()-methode laadt een letterlijke tekenreeks met HTML-inhoud. De locatie van een pagina die met deze methode wordt geladen, wordt uitgedrukt als:
  • Op bureaublad: about:blank

  • Op iOS: htmlString

  • Op Android: de gegevens-URI-indeling van de gecodeerde htmlString

Het URI-schema bepaalt de regels voor het laden van ingesloten inhoud of gegevens.

URI-schema

Lokale bron laden

Externe bron laden

Lokaal XMLHttpRequest

Extern XMLHttpRequest

data:

Nee

Ja

Nee

Nee

file:

Ja

Ja

Ja

Ja

http:, https:

Nee

Ja

Nee

Hetzelfde domein

about: (loadString()-methode)

Nee

Ja

Nee

Nee

Opmerking: Als de displayState-eigenschap van het werkgebied is ingesteld op FULL_SCREEN in Desktop, kan niet in een tekstveld worden getypt dat wordt weergegeven in de StageWebView. In iOS en Android kunt echter in een tekstveld in StageWebView typen, zelfs als de displayState van het werkgebied FULL_SCREEN is.

Het volgende voorbeeld gebruikt een StageWebView-object om de Adobe-website weer te geven:

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

Op Android-apparaten dient u de Android INTERNET-machtiging op te geven. Anders kan de toepassing geen externe bronnen laden.

In Android 3.0+ moet een toepassing de hardwareversnelling inschakelen in het Android manifestAdditions-element van het beschrijvingsbestand van de AIR-toepassing om de inhoud van de insteekmodule weer te geven in een StageWebView-object. Zie Flash Player en andere insteekmodules inschakelen in een StageWebView-object.

JavaScript-URI

U kunt een JavaScript-URI gebruiken om een functie aan te roepen die is gedefinieerd in de HTML-pagina die wordt geladen door een StageWebView-object. De functie die u aanroept met de JavaScript-URI wordt uitgevoerd in de context van de geladen webpagina. In het volgende voorbeeld wordt een JavaScript-functie aangeroepen door een StageWebView-object:

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

Navigatiegebeurtenissen

Wanneer een gebruiker op een koppeling in de HTML klikt, verzendt het StageWebView-object een locationChanging-gebeurtenis. Als u de navigatie wilt stoppen, kunt u de methode preventDefault() van het gebeurtenisobject aanroepen. Anders navigeert het StageWebView-object naar de nieuwe pagina en wordt een locationChange-gebeurtenis verzonden. Wanneer de pagina is geladen, verzendt de StageWebView een complete-gebeurtenis.

Een locationChanging-gebeurtenis wordt verzonden voor elke HTML-omleiding. De locationChange- en complete-gebeurtenissen worden op het juiste moment verzonden.

Op iOS wordt een locationChanging-gebeurtenis vóór een locationChange-gebeurtenis verzonden, behalve voor de eerste loadURL()- of loadString()-methoden. Er wordt ook een locationChange-gebeurtenis verzonden voor navigatiewijzigingen via iFrames en Frames.

Het volgende voorbeeld geeft aan hoe u een locatiewijziging kunt voorkomen en in plaats daarvan een nieuwe pagina kunt openen in de systeembrowser.

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

Historie

Als een gebruiker op de inhoud klikt die in een StageWebView-object wordt weergegeven, slaat het besturingselement de voor- en achterwaartse historiestapels op. Het volgende voorbeeld toont hoe u door de twee historiestapels kunt navigeren. Het voorbeeld maakt gebruik van de functietoetsen Terug en Zoeken.

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

Focus

Ook al is het geen weergaveobject, de klasse StageWebView bevat leden die u in staat stellen de focusovergangen van en naar het besturingselement te beheren.

Wanneer het StageWebView-object de focus krijgt, verzendt het een focusIn-gebeurtenis. Indien nodig, kunt u deze gebeurtenis gebruiken om de focuselementen in uw toepassing te beheren.

Wanneer de StageWebView de focus opgeeft, verzendt het een focusOut-gebeurtenis. Een StageWebView-instantie kan de focus opgeven wanneer een gebruiker voorbij het eerste of laatste besturingselement op de webpagina navigeert met een trackball of de richtingspijlen. De direction-eigenschap van het gebeurtenisobject laat u weten of de focusstroom de boven- of de onderzijde van de pagina passeert. Gebruik deze informatie om de focus toe te wijzen aan het desbetreffende weergaveobject boven of onder de StageWebView.

Op iOS kan de focus niet via de programmeertaal worden ingesteld. StageWebView verzendt focusIn- en focusOut-gebeurtenissen waarbij de direction-eigenschap van FocusEvent is ingesteld op none. Als de gebruiker het gebied binnen de StageWebView aanraakt, wordt de gebeurtenis focusIn verzonden. Als de gebruiker het gebied buiten de StageWebView aanraakt, wordt de gebeurtenis focusOut verzonden.

Het volgende voorbeeld toont hoe de focus wordt doorgegeven van het StageWebView-object naar Flash-weergaveobjecten:

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

Bitmap vastleggen

Een StageWebView-object wordt vóór alle weergavelijstinhoud gerenderd. U kunt geen inhoud toevoegen vóór een StageWebView-object. U kunt een keuzelijst bijvoorbeeld niet uitvouwen vóór de StageWebView-inhoud. U kunt dit probleem oplossen door een opname van de StageWebView vast te leggen. Daarna verbergt u de StageWebView en voegt u in plaats daarvan de bitmapopname toe.

Het volgende voorbeeld toont hoe u de opname van een StageWebView-object vastlegt met gebruik van de drawViewPortToBitmapData-methode. Het StageWebView-object wordt verborgen door het werkgebied in te stellen op null. Nadat de webpagina volledig is geladen, wordt een functie aangeroepen die de bitmap vastlegt en weergeeft. Tijdens de uitvoering geeft de code twee labels weer: Google en Facebook. Klik op het label om de corresponderende webpagina vast te leggen en in het werkgebied weer te geven als een opname.

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