Wyświetlanie zawartości HTML w aplikacjach dla urządzeń przenośnych

Adobe AIR 2.5 i nowsze wersje

Obiekty StageWebView
Zawartość
- Identyfikator URI języka JavaScript
Zdarzenia nawigacji
Historia
Aktywność
Przechwytywanie bitmap

Na urządzeniach przenośnych klasa StageWebView wyświetla zawartość HTML przy użyciu elementu sterującego przeglądarki systemowej. Na komputerach stacjonarnych jest stosowany standardowy element sterujący Adobe® AIR® HTMLLoader. Odczytując właściwość StageWebView.isSupported , można sprawdzić, czy ta klasa jest obsługiwana na bieżącym urządzeniu. Obsługa tej klasy nie jest gwarantowana dla wszystkich urządzeń z profilami urządzeń przenośnych.

Klasa StageWebView oferuje we wszystkich profilach tylko ograniczone opcje interakcji między zawartością HTML a pozostałymi elementami aplikacji. Pozwala sterować nawigacją, ale nie pozwala bezpośrednio wymieniać danych ani stosować skryptów wychodzących poza domenę. Umożliwia wczytywanie zawartości z lokalnego lub zdalnego adresu URL lub przekazywanie jej w ciągu kodu HTML.

Firma Adobe poleca

Demonstracja klasy StageWebView w środowisku AIR 2.5 — obsługa protokołu OAuth

Mark Doherty
Mark Doherty, specjalista od produktów firmy Adobe, przedstawia metodę używania klasy StageWebView do logowania w witrynie chronionej przy użyciu protokołu OAuth (takiej jak Twitter).

Firma Adobe poleca		Masz samouczek i chcesz się nim podzielić?

	Maksymalne wykorzystanie możliwości klasy StageWebView Sean Voisen		Widok internetowy HTML w środowisku AIR for Android Jonathan Campos

	Tworzenie prostej przeglądarki internetowej za pomocą klasy StageWebView Rich Tretola		Interfejs UIComponent klasy StageWebView w środowisku AIR dla urządzeń przenośnych Sönke Rohde

	Używanie klasy StageWebView w obiekcie UIComponent na urządzeniach przenośnych Judah Frangipane

Obiekty StageWebView

Klasa StageWebView nie jest obiektem ekranowym. Nie można dodać takiego obiektu do listy wyświetlania. Obiekt taki działa jak widok dołączony bezpośrednio do stołu montażowego. Zawartość obiektu StageWebView jest rysowana przed każdą zawartością z listy wyświetlania (zasłania ją). Nie ma możliwości sterowania kolejnością (głębokością) w przypadku wielu obiektów StageWebView.

Aby wyświetlić obiekt StageWebView, należy przypisać stół montażowy, na którym ma zostać wyświetlony ten obiekt, do właściwości stage tego obiektu StageWebView. Właściwość viewPort pozwala ustawić rozmiar wyświetlanego obiektu.

Współrzędne ustawione we właściwości viewPort powinny należeć do zakresu od –8192 do 8191. Maksymalna wartość szerokości i wysokość stołu montażowego wynosi 8191. Jeżeli wymiary przekroczą wartości maksymalne, zostanie wygenerowany wyjątek.

Poniższy przykładowy kod tworzy obiekt StageWebView, ustawia właściwości stage i viewPort oraz wyświetla ciąg 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 );

Aby ukryć obiekt StageWebView, należy ustawić wartość null dla właściwości stage . Aby całkowicie zniszczyć obiekt, należy wywołać metodę dispose() . Wywołanie metody dispose() jest opcjonalne, jednak pozwala procesowi czyszczenia pamięci szybciej odzyskać pamięć używaną przez obiekt.

Zawartość

Zawartość można wczytywać do obiektu StageWebView przy użyciu dwóch metod: loadURL() i loadString() .

Metoda loadURL() wczytuje zasób o określonym adresie URL. Można użyć schematu URI obsługiwanego przez element sterujący przeglądarki systemowej, na przykład data:, file:, http:, https: lub javascript:. Schematy app: i app-storage: nie są obsługiwane. Środowisko AIR nie sprawdza poprawności ciąg adresu URL.

Metoda loadString() wczytuje ciąg literału z zawartością HTML. Sposób wyrażania lokalizacji strony wczytywanej tą metodą:

Na komputerach stacjonarnych: about:blank
W systemie iOS: htmlString
W systemie Android: format URI danych zakodowanej wartości htmlString

Schemat URI określa reguły wczytywania zawartości osadzonej lub danych osadzonych.

Schemat URI	Wczytywanie zasobu lokalnego	Wczytywanie zasobu zdalnego	Lokalne żądanie XMLHttpRequest	Zdalne żądanie XMLHttpRequest
data:	Nie	Tak	Nie	Nie
file:	Tak	Tak	Tak	Tak
http:, https:	Nie	Tak	Nie	W tej samej domenie
about: (metoda loadString())	Nie	Tak	Nie	Nie

Uwaga: Jeśli właściwość displayState stołu montażowego jest ustawiona na FULL_SCREEN , to na komputerze stacjonarnym nie można wpisywać tekstu w polu tekstowym wyświetlanym w obiekcie StageWebView. W systemie iOS lub Android można pisać w polu tekstowym obiektu StageWebView nawet wtedy, gdy właściwość displayState stołu montażowego ma wartość FULL_SCREEN .

W poniższym przykładzie użyto obiektu StageWebView do wyświetlenia witryny firmy 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" ); 
        } 
    } 
}

Aby aplikacja mogła pomyślnie wczytywać zasoby zdalne na urządzeniach z systemem Android, należy określić funkcjonujące w tym systemie uprawnienie INTERNET.

W systemie Android 3.0 lub nowszym aplikacja musi włączyć przyspieszanie sprzętowe w elemencie manifestAdditions systemu Android umieszczonym w deskryptorze aplikacji AIR, aby móc wyświetlać zawartość dodatku plug-in w obiekcie StageWebView. Więcej informacji zawiera temat Włączanie programu Flash Player i innych dodatków plug-in w obiekcie StageWebView .

Identyfikator URI języka JavaScript

Korzystając z identyfikatora URI języka JavaScript, można wywołać funkcję zdefiniowaną na stronie HTML wczytanej przez obiekt StageWebView. Funkcja wywołana przy użyciu identyfikatora URI języka JavaScript jest uruchamiana w kontekście wczytanej strony internetowej. W poniższym przykładzie użyto obiektu StageWebView, aby wywołać funkcję 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 ); 
        } 
    } 
}

Zdarzenia nawigacji

Gdy użytkownik klika łącze w zawartości HTML, obiekt StageWebView wyzwala zdarzenie locationChanging . Istnieje możliwość wywołania metody preventDefault() obiektu zdarzenia w celu anulowania nawigacji. Jeśli tak się nie stanie, obiekt StageWebView przejdzie do nowej strony i wywoła zdarzenie locationChange . Po zakończeniu wczytywania strony obiekt StageWebView wyzwala zdarzenie complete .

Zdarzenie locationChanging jest wywoływane przy każdym przekierowaniu HTML. Zdarzenia locationChange i complete są wywoływane we właściwych momentach.

W systemie iOS zdarzenie locationChange jest wyzwalane przed zdarzeniem locationChanging . Wyjątki stanowią metody loadURL( ) i loadString() . Zdarzenie locationChange jest również wywoływane w przypadku zmian związanych z nawigacją w przypadku obiektów iFrame oraz Frame.

Poniższy przykład ilustruje, jak zapobiec zmianie lokalizacji i zamiast tego otworzyć nową stronę w przeglądarce systemowej.

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

Historia

Jeśli użytkownik kliknie w zawartości wyświetlanej w obiekcie StageWebView, element sterujący zapisze stosy historii dotyczące poprzednich i następnych operacji. Poniższy przykład ilustruje sposób przechodzenia między tymi dwoma stosami historii. W przykładzie użyto przycisków programowych Wstecz i Szukaj.

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

Aktywność

Obiekt StageWebView nie jest obiektem ekranowym, jednak klasa ta zawiera elementy umożliwiające zarządzanie zmianami aktywności — przejmowaniem i zwalnianiem punktu skupienia — przez element sterujący.

Gdy obiekt StageWebView staje się aktywny, wywołuje zdarzenie focusIn . To zdarzenie umożliwia kontrolowanie elementów funkcjonujących jako punkty skupienia w aplikacji, jeśli jest to konieczne.

Gdy obiekt StageWebView przestaje być aktywny (zwalania punkt skupienia), wywołuje zdarzenie focusOut . Wystąpienie klasy StageWebView może zwolnić punkt skupienia, gdy użytkownik przejdzie poza pierwszy lub ostatni element sterujący na stronie internetowej, korzystając z trackballa lub strzałek urządzenia. Właściwość direction obiektu zdarzenia wskazuje, czy punkt skupienia wyszedł poza stronę w górę, czy w dół. Korzystając z tych informacji, należy uaktywnić odpowiedni obiekt ekranowy powyżej lub poniżej obiektu StageWebView.

W systemie iOS nie można programowo kontrolować aktywności. Obiekt StageWebView wywołuje zdarzenia focusIn i focusOut z właściwością direction obiektu FocusEvent ustawioną na none . Gdy użytkownik dotyka ekranu w obrębie obiektu StageWebView, jest wywoływane zdarzenie focusIn . Gdy użytkownik dotyka ekranu poza obiektem StageWebView, jest wywoływane zdarzenie focusOut .

Poniższy przykład ilustruje przekazywanie punktu skupienia z obiektu StageWebView do obiektów ekranowych programu 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; 
        } 
         
    } 
}

Przechwytywanie bitmap

Obiekt StageWebView jest renderowany przed całą zawartością listy wyświetlania (zasłania ją). Nie można dodać zawartość przed obiektem StageWebView. Nie można na przykład rozwinąć menu przed zawartością obiektu StageWebView. Aby rozwiązać ten problem, należy przechwycić migawkę obiektu StageWebView. Następnie należy ukryć obiekt StageWebView i zamiast niego dodać bitmapę-migawkę.

Poniższy przykład ilustruje sposób przechwytywania migawki obiektu StageWebView przy użyciu metody drawViewPortToBitmapData . Obiekt StageWebView jest ukrywany przez ustawienie wartości null dla właściwości stage. Po zakończeniu wczytywania strony internetowej następuje wywołanie funkcji przechwytującej i wyświetlającej bitmapę. Po uruchomieniu ten kod wyświetli dwie etykiety — Google i Facebook. Kliknięcie etykiety spowoduje przechwycenie odpowiedniej strony internetowej i wyświetlenie jej jako migawki na stole montażowym.

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

Wyświetlanie zawartości HTML w aplikacjach dla urządzeń przenośnych

Firma Adobe poleca

Demonstracja klasy StageWebView w środowisku AIR 2.5 — obsługa protokołu OAuth

Firma Adobe poleca

Masz samouczek i chcesz się nim podzielić?

Maksymalne wykorzystanie możliwości klasy StageWebView

Widok internetowy HTML w środowisku AIR for Android

Tworzenie prostej przeglądarki internetowej za pomocą klasy StageWebView

Interfejs UIComponent klasy StageWebView w środowisku AIR dla urządzeń przenośnych

Używanie klasy StageWebView w obiekcie UIComponent na urządzeniach przenośnych

Obiekty StageWebView

Zawartość

Identyfikator URI języka JavaScript

Zdarzenia nawigacji

Historia

Aktywność

Przechwytywanie bitmap