Visa HTML-innehåll i mobilprogram

Adobe AIR 2.5 och senare

StageWebView-objekt
Innehåll
- JavaScript-URI
Navigeringshändelser
Historik
Fokus
Ta bitmappsbilder

Klassen StageWebView visar HTML-innehåll med hjälp av systemets webbläsarkontroll på mobilenheter och med hjälp av standardkontrollen HTMLLoader i Adobe® AIR® på stationära datorer. Kontrollera egenskapen StageWebView.isSupported för att avgöra om klassen stöds på den aktuella enheten. Det är inte säkert att alla enheter stöds i mobilprofilen.

Oavsett profil har klassen StageWebView bara stöd för begränsad interaktion mellan HTML-innehållet och resten av programmet. Du kan styra navigeringen, men varken korsskriptning eller direktutbyte av data tillåts. Du kan läsa in innehållet från en lokal URL eller en fjärr-URL eller skicka en HTML-sträng.

Adobe rekommenderar

AIR2.5 StageWebView demo – OAuth Support

Mark Doherty
Mark Doherty visar hur du loggar in på en OAuth-skyddad webbplats som Twitter med klassen StageWebView.

Adobe rekommenderar		Har du någon självstudiekurs som du vill dela med dig av?

	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

StageWebView-objekt

Ett StageWebView-objekt är inget visningsobjekt och kan inte läggas till i visningslistan. Det styr i stället en visningsruta som är kopplad direkt till scenen. StageWebView-innehåll ritas ovanpå allt annat innehåll i visningslistan. Det går inte att styra ritningsordningen för flera StageWebView-objekt.

Om du vill visa ett StageWebView-objekt tilldelar du den scen, på vilken objektet ska visas, till stage -egenskapen för StageWebView. Ange storleken på visningen med hjälp av viewPort -egenskapen.

Ange x- och y-koordinaterna för viewPort -egenskapen mellan -8 192 och 8 191. Det största tillåtna värdet på scenens bredd och höjd är 8 191. Om storleken överskrider maxvärdena genereras ett undantagsfel.

I följande exempel skapas ett StageWebView-objekt, egenskaperna stage och viewPort anges och en HTML-sträng visas:

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

Om du vill dölja ett StageWebView-objekt anger du dess stage -egenskap som null . Om du vill kasta bort objektet helt anropar du metoden dispose() . Du måste inte anropa dispose() , men det bidrar till att skräpinsamlaren kan återta det minnesutrymme som användes av objektet fortare.

Innehåll

Du kan läsa in innehåll till ett StageWebView-objekt med två metoder: loadURL() och loadString() .

Metoden loadURL() läser in en resurs vid den angivna URL:en. Du kan använda alla URI-scheman som stöds av systemets webbläsarkontroll, bland annat data:, file:, http:, https: och javascript:. Schemana app: och app-storage: stöds inte. AIR validerar inte URL-strängen.

Metoden loadString() läser in en litteral sträng med HTML-innehåll. Platsen för en sida som läses in med den här metoden uttrycks som:

På skrivbordet: about:blank
I iOS: htmlString
I Android: URI-dataformat för den kodade htmlString

URI-schemat avgör vilka regler som används för att läsa in inbäddat innehåll eller inbäddade data.

URI-schema	Inläsning av lokal resurs	Inläsning av fjärresurs	Lokal XMLHttpRequest	Fjärr-XMLHttpRequest
data:	Nej	Ja	Nej	Nej
file:	Ja	Ja	Ja	Ja
http:, https:	Nej	Ja	Nej	Samma domän
about: (loadString()-metod)	Nej	Ja	Nej	Nej

Obs! Om scenens displayState -egenskap är inställd på FULL_SCREEN kan du, på skrivbordet, inte skriva i ett textfält som visas i StageWebView. I iOS och Android kan du däremot skriva i ett textfält på StageWebView, även om scenens displayState är FULL_SCREEN .

I följande exempel används ett StageWebView-objekt för att visa Adobes webbplats:

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

På Android-enheter måste du ange INTERNET-behörighet för att programmet ska lyckas läsa in fjärresurser.

I Android 3.0+ måste maskinvaruaccelerationen aktiveras med ett program i Android-elementet manifestAdditions i AIR:s programbeskrivning för att plugin-innehåll i ett StageWebView-objekt ska visas. Se Aktivera Flash Player och andra plugin-program i ett StageWebView-objekt .

JavaScript-URI

Du kan använda en JavaScript-URI för att anropa en funktion som definierats på den HTML-sida som läses in av ett StageWebView-objekt. Den funktion som anropas med JavaScript-URI:n körs i den inlästa webbsidans sammanhang. I följande exempel används ett StageWebView-objekt för att anropa en JavaScript-funktion:

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

Navigeringshändelser

När en användare klickar på en länk i HTML-koden skickar StageWebView-objektet en locationChanging -händelse. Du kan anropa metoden preventDefault() för händelseobjektet om du vill stoppa navigeringen. Annars navigerar StageWebView-objektet till den nya sidan och skickar en locationChange -händelse. När sidan har lästs in skickar StageWebView-objektet en complete -händelse.

En locationChanging -händelse skickas för varje HTML-omdirigering. Händelserna locationChange och complete skickas vid lämplig tidpunkt.

I iOS skickas en locationChanging -händelse före en locationChange -händelse, utom för den första loadURL() - eller loadString() -metoden. En locationChange -händelse skickas även för navigeringsändringar via iframes och bildrutor.

Följande exempel visar hur du kan förhindra en platsförändring och öppna den nya sidan i systemets webbläsare i stället.

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

Historik

När användaren klickar på länkar i det innehåll som visas i StageWebView-objektet sparas framåt- och bakåthistoriken. Följande exempel visar hur du navigerar genom de båda historikstackarna. I exemplet används valknapparna för Bakåt och Framåt.

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

Fokus

Även om StageWebView-klassen inte är något visningsobjekt innehåller den medlemmar som du kan använda för att hantera fokusövergångar till och från kontrollen.

När StageWebView-objektet får fokus skickar det en focusIn -händelse. Du använder den här händelsen för att hantera fokuselement i programmet, om det behövs.

När StageWebView-objektet tappar fokus skickar det en focusOut -händelse. En StageWebView-instans kan släppa fokus när en användare ”tabbar förbi” den första eller sista kontrollen på webbsidan med en styrkula eller med riktningspilar. Med egenskapen direction för händelseobjektet kan du få veta om fokusflödet går uppåt förbi sidans överkant eller nedåt förbi dess nederkant. Använd den här informationen för att ge rätt visningsobjekt fokus ovanför eller under StageWebView.

I iOS kan du inte ange fokus i programmet. StageWebView skickar focusIn - och focusOut -händelser med direction-egenskapen för FocusEvent inställd på none . Om användaren vidrör något inom StageWebView skickas focusIn -händelsen. Om användaren vidrör något utanför StageWebView skickas focusOut -händelsen.

Följande exempel visar hur fokus skiftar från StageWebView-objektet till Flash-visningsobjekten:

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

Ta bitmappsbilder

Ett StageWebView-objekt återges ovanpå allt annat innehåll i visningslistan. Du kan inte lägga till innehåll ovanpå ett StageWebView-objekt. Du kan till exempel inte utöka en listruta så att den sträcker sig över StageWebView-innehållet. Det här problemet kan du åtgärda genom att ta en ögonblicksbild av StageWebView. Sedan döljer du StageWebView och lägger till ögonblicksbilden i stället.

Följande exempel visar hur du tar en ögonblicksbild av ett StageWebView-objekt med metoden drawViewPortToBitmapData . StageWebView-objektet döljs genom att scenen ställs in på null. När webbsidan har lästs in helt anropas en funktion som tar en ögonblicksbild av bitmappen och visar den. När koden körs visas två etiketter, Google och Facebook. När användaren klickar på en etikett hämtas motsvarande webbsida och visas som en ögonblicksbild på scenen.

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

Visa HTML-innehåll i mobilprogram

Adobe rekommenderar

AIR2.5 StageWebView demo – OAuth Support

Adobe rekommenderar

Har du någon självstudiekurs som du vill dela med dig av?

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

StageWebView-objekt

Innehåll

JavaScript-URI

Navigeringshändelser

Historik

Fokus

Ta bitmappsbilder