Mobil uygulamalarda HTML içeriğini görüntüleme

Adobe AIR 2.5 ve üstü

StageWebView sınıfı HTML içeriğini mobil aygıtlarda sistem tarayıcısı kontrolünü ve masaüstü bilgisayarlarda standart Adobe® AIR® HTMLLoader kontrolünü kullanarak görüntüler. Sınıfın geçerli aygıtta desteklenip desteklenmediğini belirlemek için StageWebView.isSupported özelliğini kontrol edin. Mobil profilinde tüm aygıtlar için destek garantilenmez.

Tüm profillerde, StageWebView sınıfı HTML içeriği ve uygulamanın geri kalanı arasındaki etkileşimlerin sınırlı bir kısmını destekler. Gezinmeyi kontrol edebilirsiniz ancak çapraz komut dosyasına veya doğrudan veri alış verişine izin verilmez. Yerel veya uzak bir URL'den içerik yükleyebilir ya da bir HTML dizesi sunabilirsiniz.

Adobe'nin önerdikleri

AIR2.5 StageWebView demo – OAuth Support (AIR2.5 StageWebView tanıtımı – OAuth Desteği)

Mark Doherty
Evangelist Mark Doherty, Twitter gibi OAuth korumalı bir sitede StageWebView sınıfı kullanımıyla nasıl oturum açılacağını göstermektedir.

Adobe'nin önerdikleri

Paylaşmak istediğiniz bir eğitim mi var?

Making the most of StageWebView (StageWebView sınıfından en iyi şekilde yararlanma)

Sean Voisen

HTML Web View in Air for Android (Air for Android'de HTML Web Görünümü)

Jonathan Campos

Create a basic web browser with StageWebView (StageWebView ile temel bir web tarayıcısı oluşturma)

Rich Tretola

AIR Mobile StageWebView UIComponent (AIR Mobil StageWebView UIComponent)

Sönke Rohde

Using StageWebView within a UIComponent in Mobile (Mobildeki UIComponent içinde StageWebView kullanma)

Judah Frangipane

StageWebView nesneleri

Bir StageWebView nesnesi ekran nesnesi değildir ve görüntüleme listesine eklenemez. Bunun yerine, doğrudan sahne alanına bağlı bir görüntü kapısı olarak işlev görür. StageWebView içeriği çizim işlemini görüntüleme listesi içeriğinin üzerinde gerçekleştirir. Birden fazla StageWebView nesnesinin çizim sırasını kontrol etmenin bir yolu yoktur.

Bir StageWebView nesnesini görüntülemek için, nesnenin StageWebView nesnesinin stage özelliğine görüneceği sahne alanını atarsınız. viewPort özelliğini kullanarak ekranın boyutunu ayarlayın.

viewPort özelliğinin x ve y koordinatlarını -8192 ve 8191 arasında ayarlayın. Sahne alanı genişliği ve yüksekliğinin maksimum değeri 8191'dir. Boyut maksimum değerleri aşarsa bir istisna atılır.

Aşağıdaki örnek bir StageWebView nesnesi oluşturur, stage ve viewPort özelliklerini ayarlar ve bir HTML dizesi görüntüler: 

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

Bir StageWebView nesnesini gizlemek için stage özelliğini null olarak ayarlayın. Nesneyi tamamen yok etmek için dispose() yöntemini çağırın. dispose() yöntemini çağırmak isteğe bağlıdır ancak çöp toplayıcısının nesne tarafından kullanılan belleği daha çabuk geri kazanmasına yardımcı olur.

İçerik

İçeriği bir StageWebView nesnesine iki yöntem kullanarak yükleyebilirsiniz: loadURL() ve loadString() .

loadURL() yöntemi belirtilen URL'de bir kaynak yükler. Şunlarda dahil olmak üzere sistem web tarayıcısı kontrolü tarafından desteklenen herhangi bir URI şemasını kullanabilirsiniz: data:, file:, http:, https: ve javascript:. app: ve app-storage: şemaları desteklenmez. AIR URL dizesini doğrulamaz.

loadString() yöntemi HTML içeriğine sahip değişmez bir dize yükler. Bu yöntemle yüklenen bir sayfanın konumu şu şekilde ifade edilir:

  • Masaüstünde: about:blank

  • iOS'ta: htmlString

  • Android'de: kodlanmış htmlString öğesinin veri URI biçimi.

Gömülü içerik veya veri yükleme kurallarını URI şeması belirler.

URI şeması

Yerel kaynağı yükleme

Uzak kaynağı yükleme

Yerel XMLHttpRequest

Uzak XMLHttpRequest

data:

Hayır

Evet

Hayır

Hayır

file:

Evet

Evet

Evet

Evet

http:, https:

Hayır

Evet

Hayır

Aynı etki alanı

about: (loadString() method)

Hayır

Evet

Hayır

Hayır

Not: Sahne alanının displayState özelliği FULL_SCREEN olarak ayarlanırsa Masaüstünde StageWebView öğesinde görüntülenen bir metin alanına yazamazsınız. Ancak, iOS ve Android'de sahne alanının displayState öğesi FULL_SCREEN olsa bile StageWebView öğesinde metin alanına yazabilirsiniz.

Aşağıdaki örnek Adobe'nin web sitesini görüntülemek için bir StageWebView nesnesi kullanır: 

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

Android aygıtlarında, uygulamanın uzak kaynakları başarıyla yüklemesini sağlamak için Android INTERNET iznini belirtmeniz gerekir.

Android 3.0 ve üstünde, bir StageWebView nesnesindeki eklenti içeriğini görüntülemek için uygulamanın, AIR uygulama tanımlayıcısının Android manifestAdditions öğesinde donanım hızlandırmayı etkinleştirmesi gerekir. Bkz. StageWebView nesnesinde Flash Player ve diğer eklentileri etkinleştirme .

JavaScript URI'si

StageWebView nesnesi tarafından yüklenen HTML sayfasında tanımlanan bir işlevi çağırmak için bir JavaScript URI'si kullanabilirsiniz. JavaScript URI'yi kullanarak çağırdığınız işlev yüklü web sayfasının bağlamında çalışır. Aşağıdaki örnek bir JavaScript işlevini çağırmak için StageWebView nesnesi kullanır: 

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

Gezinme olayları

Bir kullanıcı HTML'de bir bağlantıyı tıklattığında, StageWebView nesnesi bir locationChanging olayı gönderir. Gezinmeyi durdurmak için olay nesnesinin preventDefault() yöntemini çağırabilirsiniz. Aksi takdirde, StageWebView nesnesi yeni sayfaya gider ve bir locationChange olayı gönderir. Sayfanın yüklenmesi tamamlandığında, StageWebView bir complete olayı gönderir.

Her HTML yeniden yönlendirmesinde bir locationChanging olayı gönderilir. locationChange ve complete olayları uygun zamanda gönderilir.

iOS'da ilk loadURL( ) veya loadString() yöntemleri dışında bir locationChange olayından önce locationChanging olayı gönderilir. iFrames ve Frames aracılığıyla gezinme değişiklikleri için de bir locationChange olayı gönderilir.

Aşağıdaki örnek bir konum değişikliğini nasıl önleyebileceğinizi ve bunun yerine yeni sayfayı sistem tarayıcısında nasıl açacağınızı gösterir. 

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

Geçmiş

Kullanıcı StageWebView nesnesinde görüntülenen içerikte bağlantıları tıklatırken kontrol geriye doğru ve ileri doğru geçmiş yığınlarını kaydeder. Aşağıdaki örnek iki geçmiş yığını arasında nasıl gezileceğini gösterir. Örnek Geri ve Ara yazılım tuşlarını kullanır. 

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

Odak

Görüntüleme nesnesi olmasa da, StageWebView sınıfı denetime giren ve denetimden çıkan odak geçişlerini yönetmenize izin veren üyeler içerir.

StageWebView nesnesi odak kazandığında bir focusIn olayı gönderir. Bu olayı gerekirse uygulamanızdaki odak öğelerini yönetmek için kullanabilirsiniz.

StageWebView nesnesi odağı bıraktığında bir focusOut olayı gönderir. Bir StageWebView örneği kullanıcı web sayfasındaki ilk veya son kontrolü aygıt izleme topu veya yön okları kullanarak sekme tuşu ile geçtiğinde odağı bırakabilir. Olay nesnesinin direction özelliği odak akışının sayfanın üstünden geçerek arttığını mı yoksa sayfanın altından geçerek azaldığını mı bildirir. Bu bilgileri odağı StageWebView nesnesinin üstünde veya altında uygun görüntüleme nesnesine atamak için kullanın.

iOS'ta odak programlı olarak ayarlanamaz. StageWebView FocusEvent öğesinin yön özelliği none olarak ayarlıyken focusIn ve focusOut olaylarını gönderir. Kullanıcı StageWebView öğesinin içine dokunursa focusIn olayı gönderilir. Kullanıcı StageWebView öğesinin dışına dokunursa focusOut olayı gönderilir.

Aşağıdaki örnek odağın StageWebView nesnesinden Flash görüntülüme nesnelerine nasıl geçtiğini gösterir: 

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 yakalama

Bir StageWebView nesnesi tüm görüntüleme listesi içeriğinin üstünde oluşturulur. Bir StageWebView nesnesinin üstüne içerik ekleyemezsiniz. Örneğin, bir açılır listeyi StageWebView içeriğinin üzerine genişletemezsiniz. Bu sorunu çözmek için StageWebView öğesinin anlık görüntüsünü alın. Ardından, StageWebView öğesini gizleyin ve bunun yerine bitmap anlık görüntüyü ekleyin.

Aşağıdaki örnek drawViewPortToBitmapData yöntemini kullanarak bir StageWebView nesnesinin anlık görüntüsünün nasıl alınacağını gösterir. Sahne alanını null olarak ayarlayarak StageWebView nesnesini gizler. Web sayfası tamamen yüklendikten sonra bitmap'i yakalayan ve görüntüleyen bir işlev çağırır. Çalıştırdığınızda kod iki etiket gösterir: Google ve Facebook. Etiketi tıklatmak karşılık gelen web sayfasını yakalar ve bunu sahne alanında anlık görüntü olarak gösterir. 

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