HTML içeriği için tarayıcı benzeri kullanıcı arabirimleri tanımlama

Adobe AIR 1.0 ve üstü

JavaScript, HTML içeriğini görüntüleyen pencerenin denetlenmesi için birkaç çeşitli API'ler sağlar. AIR'de, bu API'ler özel bir HTMLHost sınıfı uygulayarak geçersiz kılınabilir.

HTMLHost sınıfının genişletilmesi hakkında

Örneğin, uygulamanız sekmeli arabirimde birden çok HTMLLoader nesnesi sunuyorsa, ana pencere başlığını değil, sekmenin etiketini değiştirmek için yüklenen HTML sayfaları tarafından başlık değişikliklerinin yapılmasını isteyebilirsiniz. Benzer şekilde kodunuz üst görüntüleme nesnesi kabındaki HTMLLoader nesnesini yeniden konumlandırarak, HTMLLoader nesnesini içeren pencereyi taşıyarak, hiçbir şey yapmayarak veya tamamen farklı bir şey yaparak bir window.moveTo() çağrısına yanıt verebilir.

AIR HTMLHost sınıfı, aşağıdaki JavaScript özellikleri ve yöntemlerini denetler:

  • window.status

  • window.document.title

  • window.location

  • window.blur()

  • window.close()

  • window.focus()

  • window.moveBy()

  • window.moveTo()

  • window.open()

  • window.resizeBy()

  • window.resizeTo()

new HTMLLoader() kullanarak bir HTMLLoader nesnesi oluşturduğunuzda, listelenen JavaScript özellikleri ve yöntemleri etkinleştirilmez. HTMLHost sınıfı, bu JavaScript API'lerinin varsayılan, tarayıcı benzeri bir uygulamasını sağlar. Davranışı özelleştirmek için ayrıca HTMLHost sınıfını genişletebilirsiniz. Varsayılan davranışı destekleyen bir HTMLHost nesnesi oluşturmak için HTMLHost yapıcısındaki defaultBehaviors parametresini true olarak ayarlayın:

var defaultHost:HTMLHost = new HTMLHost(true);

AIR'de HTMLLoader sınıfının createRootWindow() yöntemiyle bir HTML penceresi oluşturduğunuzda, varsayılan davranışları destekleyen bir HTMLHost örneği otomatik olarak atanır. HTMLLoader nesnesinin htmlHost özelliğine farklı bir HTMLHost uygulaması atayarak ana bilgisayar nesne davranışını değiştirebilir veya özellikleri tamamen devre dışı bırakmak için null değerini atayabilirsiniz.

Not: AIR, HTML tabanlı bir AIR uygulaması için oluşturulan ilk pencereye ve JavaScript window.open() yönteminin varsayılan uygulamasıyla oluşturulan tüm pencerelere varsayılan bir HTMLHost nesnesi atar.

Örnek: HTMLHost sınıfını genişletme

Aşağıdaki örnek, HTMLHost sınıfının genişletilmesi yoluyla HTMLLoader nesnesinin kullanıcı arabirimini etkileme biçiminin nasıl özelleştirildiğini gösterir:

Flex örneği:

  1. HTMLHost sınıfını genişleten bir sınıf (alt sınıf) oluşturun.

  2. Kullanıcı arabirimi ilişkili ayarlardaki değişiklikleri işlemek için yeni sınıfın yöntemlerini geçersiz kılın. Örneğin, aşağıdaki CustomHost sınıfı window.open() çağrılarına ilişkin davranışları tanımlar ve window.document.title olarak değişir. window.open() yöntemine yapılan çağrılar, HTML sayfasını yeni bir pencerede açar ve bu pencerenin başlığını window.document.title (HTML sayfasının <title> öğesinin ayarı dahil) olarak ayarlamak üzere değiştirir.

    package 
{ 
    import flash.html.*; 
    import flash.display.StageScaleMode; 
    import flash.display.NativeWindow; 
    import flash.display.NativeWindowInitOptions; 
 
    public class CustomHost extends HTMLHost 
    { 
        import flash.html.*; 
        override public function 
            createWindow(windowCreateOptions:HTMLWindowCreateOptions):HTMLLoader 
        { 
            var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
            var bounds:Rectangle = new Rectangle(windowCreateOptions.x, 
                                            windowCreateOptions.y, 
                                            windowCreateOptions.width, 
                                            windowCreateOptions.height); 
            var htmlControl:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, 
                                        windowCreateOptions.scrollBarsVisible, bounds); 
            htmlControl.htmlHost = new HTMLHostImplementation(); 
            if(windowCreateOptions.fullscreen){ 
                htmlControl.stage.displayState = 
                    StageDisplayState.FULL_SCREEN_INTERACTIVE; 
            } 
            return htmlControl; 
        } 
        override public function updateTitle(title:String):void 
        { 
            htmlLoader.stage.nativeWindow.title = title; 
        } 
    } 
}

  3. HTMLLoader nesnesini içeren kodda (HTMLHost yeni alt sınıfının kodu değil), yeni sınıf nesnesi oluşturun. Yeni nesneyi HTMLLoader nesnesinin htmlHost özelliğine atayın. Aşağıdaki Flex kodu, önceki adımda tanımlanan CustomHost sınıfını kullanır:

    <?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" 
    applicationComplete="init()"> 
    <mx:Script> 
        <![CDATA[ 
            import flash.html.HTMLLoader; 
            import CustomHost; 
            private function init():void 
            { 
                var html:HTMLLoader = new HTMLLoader(); 
                html.width = container.width; 
                html.height = container.height; 
                var urlReq:URLRequest = new URLRequest("Test.html"); 
                html.htmlHost = new CustomHost(); 
                html.load(urlReq); 
                container.addChild(html); 
            } 
        ]]> 
    </mx:Script> 
    <mx:UIComponent id="container" width="100%" height="100%"/> 
</mx:WindowedApplication>

Burada açıklanan kodu test etmek için, aşağıdaki içeriğe sahip bir HTML dosyasını uygulama dizinine dahil edin:

<html> 
    <head> 
        <title>Test</title> 
    </head> 
    <script> 
        function openWindow() 
        { 
            window.runtime.trace("in"); 
            document.title = "foo" 
            window.open('Test.html'); 
            window.runtime.trace("out"); 
        } 
    </script> 
    <body> 
        <a href="#" onclick="openWindow()">window.open('Test.html')</a> 
    </body> 
</html>

Flash Professional örneği:

  1. AIR için bir Flash dosyası oluşturun. Bu dosyanın document sınıfını CustomHostExample olarak ayarlayın ve daha sonra dosyayı CustomHostExample.fla olarak kaydedin.

  2. HTMLHost sınıfını (alt sınıf) genişleten bir sınıf içeren CustomHost.as adlı bir ActionScript dosyası oluşturun. Bu sınıf, kullanıcı arabirimi ilişkili ayarlardaki değişiklikleri işlemek için yeni sınıfın yöntemlerini geçersiz kılar. Örneğin, aşağıdaki CustomHost sınıfı window.open() çağrılarına ilişkin davranışları tanımlar ve window.document.title olarak değişir. window.open() yöntemine yapılan çağrılar HTML sayfasını yeni bir pencerede açar ve bu pencerenin başlık window.document.title özelliğini (HTML sayfasının <title> öğesi dahil) olarak ayarlamak üzere değiştirir.

    package 
{ 
    import flash.display.StageScaleMode; 
    import flash.display.NativeWindow; 
    import flash.display.NativeWindowInitOptions; 
    import flash.events.Event; 
    import flash.events.NativeWindowBoundsEvent; 
    import flash.geom.Rectangle; 
    import flash.html.HTMLLoader; 
    import flash.html.HTMLHost; 
    import flash.html.HTMLWindowCreateOptions; 
    import flash.text.TextField; 
 
    public class CustomHost extends HTMLHost 
    { 
        public var statusField:TextField; 
         
        public function CustomHost(defaultBehaviors:Boolean=true) 
        { 
            super(defaultBehaviors); 
        } 
        override public function windowClose():void 
        { 
            htmlLoader.stage.nativeWindow.close(); 
        } 
        override public function createWindow( 
                                windowCreateOptions:HTMLWindowCreateOptions ):HTMLLoader 
        { 
            var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
            var bounds:Rectangle = new Rectangle(windowCreateOptions.x, 
                                            windowCreateOptions.y, 
                                            windowCreateOptions.width, 
                                            windowCreateOptions.height); 
            var htmlControl:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, 
                                        windowCreateOptions.scrollBarsVisible, bounds); 
            htmlControl.htmlHost = new HTMLHostImplementation(); 
            if(windowCreateOptions.fullscreen){ 
                htmlControl.stage.displayState = 
                    StageDisplayState.FULL_SCREEN_INTERACTIVE; 
            } 
            return htmlControl; 
        } 
        override public function updateLocation(locationURL:String):void 
        { 
            trace(locationURL); 
        } 
        override public function set windowRect(value:Rectangle):void 
        { 
            htmlLoader.stage.nativeWindow.bounds = value; 
        } 
        override public function updateStatus(status:String):void 
        { 
            statusField.text = status; 
            trace(status); 
        } 
        override public function updateTitle(title:String):void 
        { 
            htmlLoader.stage.nativeWindow.title = title + "- Example Application"; 
        } 
        override public function windowBlur():void 
        { 
            htmlLoader.alpha = 0.5; 
        } 
        override public function windowFocus():void 
        { 
            htmlLoader.alpha = 1; 
        } 
    } 
}

  3. Uygulamaya ilişkin document sınıfını içerecek CustomHostExample.as adlı başka bir ActionScript dosyası oluşturun. Bu sınıf HTMLLoader nesnesini oluşturur ve bu nesnenin host özelliğini önceki adımda tanımlanan CustomHost sınıfı örneğine ayarlar:

    package 
{ 
    import flash.display.Sprite; 
    import flash.html.HTMLLoader; 
    import flash.net.URLRequest; 
    import flash.text.TextField; 
 
    public class CustomHostExample extends Sprite 
    { 
        function CustomHostExample():void 
        { 
            var html:HTMLLoader = new HTMLLoader(); 
            html.width = 550; 
            html.height = 380; 
            var host:CustomHost = new CustomHost(); 
            html.htmlHost = host; 
             
            var urlReq:URLRequest = new URLRequest("Test.html"); 
            html.load(urlReq); 
             
            addChild(html); 
             
            var statusTxt:TextField = new TextField(); 
            statusTxt.y = 380; 
            statusTxt.height = 20; 
            statusTxt.width = 550; 
            statusTxt.background = true; 
            statusTxt.backgroundColor = 0xEEEEEEEE; 
            addChild(statusTxt); 
             
            host.statusField = statusTxt; 
        } 
    } 
}

    Burada açıklanan kodu test etmek için, aşağıdaki içeriğe sahip bir HTML dosyasını uygulama dizinine dahil edin:

    <html> 
     <head> 
     <title>Test</title> 
     <script> 
     function openWindow() 
     { 
     document.title = "Test" 
     window.open('Test.html'); 
     } 
     </script> 
     </head> 
     <body bgColor="#EEEEEE"> 
     <a href="#" onclick="window.open('Test.html')">window.open('Test.html')</a> 
     <br/><a href="#" onclick="window.document.location='http://www.adobe.com'"> 
     window.document.location = 'http://www.adobe.com'</a> 
     <br/><a href="#" onclick="window.moveBy(6, 12)">moveBy(6, 12)</a> 
     <br/><a href="#" onclick="window.close()">window.close()</a> 
     <br/><a href="#" onclick="window.blur()">window.blur()</a> 
     <br/><a href="#" onclick="window.focus()">window.focus()</a> 
     <br/><a href="#" onclick="window.status = new Date().toString()">window.status=new Date().toString()</a> 
     </body> 
</html>

Window.location özelliğindeki değişiklikleri işleme

HTML sayfasının URL'sindeki değişiklikleri işlemek için locationChange() yöntemini geçersiz kılın. Bir sayfadaki JavaScript window.location değerini değiştirdiğinde locationChange() yöntemi çağrılır. Aşağıdaki örnek istenen URL'yi yükler:

override public function updateLocation(locationURL:String):void 
{ 
    htmlLoader.load(new URLRequest(locationURL)); 
}
Not: Geçerli HTMLLoader nesnesine başvurmak için HTMLHost nesnesinin htmlLoader özelliğini kullanabilirsiniz.

window.moveBy(), window.moveTo(), window.resizeTo(), window.resizeBy() için JavaScript çağrılarını işleme

HTML içeriğinin sınırlarındaki değişiklikleri işlemek için set windowRect() yöntemini geçersiz kılın. Bir sayfadaki JavaScript window.moveBy(), window.moveTo(), window.resizeTo() veya window.resizeBy() çağırdığında, set windowRect() yöntemi çağrılır. Aşağıdaki örnek, masaüstü penceresinin sınırlarını günceller:

override public function set windowRect(value:Rectangle):void 
{ 
    htmlLoader.stage.nativeWindow.bounds = value; 
}

window.open() için JavaScript çağrılarını işleme

window.open() için JavaScript çağrılarını işlemek üzere createWindow() yöntemini geçersiz kılın. createWindow() yöntemi uygulamaları, yeni bir HTMLLoader nesnesi oluşturmak ve döndürmekle sorumludur. HTMLLoader nesnesini genellikle yeni bir pencerede görüntülersiniz, ancak pencere oluşturma zorunlu değildir.

Aşağıdaki örnek, window ve HTMLLoader nesnesi oluşturmak için HTMLLoader.createRootWindow() kullanan createWindow() işlevinin nasıl uygulanacağını gösterir. Buna ek olarak, bir NativeWindow nesnesini ayrıca oluşturabilir ve HTMLLoader nesnesini pencere sahnesine ekleyebilirsiniz.

override public function createWindow(windowCreateOptions:HTMLWindowCreateOptions):HTMLLoader{ 
    var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
    var bounds:Rectangle = new Rectangle(windowCreateOptions.x, windowCreateOptions.y,  
                                windowCreateOptions.width, windowCreateOptions.height); 
    var htmlControl:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, 
                                    windowCreateOptions.scrollBarsVisible, bounds); 
    htmlControl.htmlHost = new HTMLHostImplementation(); 
    if(windowCreateOptions.fullscreen){ 
        htmlControl.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE; 
    } 
    return htmlControl; 
}
Not: Bu örnek, window.open() ile oluşturulan tüm yeni pencerelere özel HTMLHost uygulamasını atar. Ayrıca farklı bir uygulama kullanabilir veya istediğinizde yeni pencereler için htmlHost özelliğini null değerine ayarlayabilirsiniz.

createWindow() yöntemine parametre olarak iletilen nesne bir HTMLWindowCreateOptions nesnesidir. HTMLWindowCreateOptions sınıfı, window.open() çağrısındaki features parametre dizesinde değerleri bildiren özellikleri içerir:

HTMLWindowCreateOptions özelliği

window.open() JavaScript çağrısındaki features dizesinde karşılık gelen ayar

fullscreen

fullscreen

height

height

locationBarVisible

location

menuBarVisible

menubar

resizeable

resizable

scrollBarsVisible

scrollbars

statusBarVisible

status

toolBarVisible

toolbar

width

width

x

left veya screenX

y

top veya screenY

HTMLLoader sınıfı, özellik dizesinde belirtilebilecek tüm özellikleri uygulamaz. Uygulamanız gerektiğinde kaydırma çubukları, konum çubukları, menü çubukları, durum çubukları ve araç çubukları sağlamalıdır.

JavaScript window.open() yöntemine ilişkin diğer argümanlar sistem tarafından işlenir. createWindow() uygulaması, HTMLLoader nesnesine içerik yükleyemez veya pencere başlığını ayarlayamaz.

window.close() için JavaScript çağrılarını işleme

Window.close() yöntemine JavaScript çağrılarını işlemek için windowClose() yöntemini geçersiz kılın. Aşağıdaki örnek, window.close() yöntemi çağrıldığında masaüstü penceresini kapatır:

override public function windowClose():void 
{ 
    htmlLoader.stage.nativeWindow.close(); 
}

window.close() için JavaScript çağrılarının varolan pencereyi kapatması gerekmez. Örneğin, aşağıdaki örnekte olduğu gibi pencereyi (başka bir içeriğe sahip olabilir) açık bırakarak görüntü listesinden HTMLLoader nesnesini kaldırabilirsiniz:

override public function windowClose():void 
{ 
    htmlLoader.parent.removeChild(htmlLoader); 
}

window.status özelliğindeki değişiklikleri işleme

window.status değerindeki JavaScript değişikliklerini işlemek için updateStatus() yöntemini geçersiz kılın. Aşağıdaki örnek durum değerini izler:

override public function updateStatus(status:String):void 
{ 
    trace(status); 
}

İstenen durum dize olarak updateStatus() yöntemine iletilir.

HTMLLoader nesnesi durum çubuğu sağlamaz.

window.document.title özelliğindeki değişiklikleri işleme

window.document.title değerindeki JavaScript değişikliklerini işlemek için updateTitle() yöntemini geçersiz kılın. Aşağıdaki örnek, pencere başlığını değiştirir ve başlığa "Örnek," dizesini ekler:

override public function updateTitle(title:String):void 
{ 
    htmlLoader.stage.nativeWindow.title = title + " - Sample"; 
}

HTML sayfasında document.title ayarlandığında, istenen başlık dize olarak updateTitle() yöntemine iletilir.

document.title öğesindeki değişiklikler, HTMLLoader nesnesini içeren pencerenin başlığını değiştirmek zorunda değildir. Örneğin metin alanı gibi başka bir arabirim öğesini değiştirebilirsiniz.

window.blur() ve window.focus() için JavaScript çağrılarını işleme

Aşağıdaki örnekte gösterildiği gibi window.blur() ve window.focus() için JavaScript çağrılarını işlemek için windowBlur() ve windowFocus() yöntemlerini geçersiz kılın:

override public function windowBlur():void 
{ 
    htmlLoader.alpha = 0.5; 
} 
override public function windowFocus():void 
{ 
    htmlLoader.alpha = 1.0; 
    NativeApplication.nativeApplication.activate(htmlLoader.stage.nativeWindow); 
}
Not: AIR, bir pencerenin veya bir uygulamanın devre dışı bırakılması için API sağlamaz.

HTML içeriğini kaydırarak pencereler oluşturma

HTMLLoader sınıfı, bir HTMLLoader nesnesi içeren ve bu pencere için bazı kullanıcı arabirimi ayarları tanımlayan yeni bir pencere (bir NativeWindow nesnesi tarafından temsil edilen) açmanızı sağlayan, HTMLLoader.createRootWindow() adında statik bir yöntem içerir. Bu yöntem, kullanıcı arabirimini tanımlamanızı sağlayan dört parametre içerir:

Parametre

Açıklama

visible

Pencerenin başlangıçta görünür olup olmadığını belirten bir Boolean değeri (true veya false).

windowInitOptions

NativeWindowInitOptions nesnesi. NativeWindowInitOptions sınıfı, NativeWindow nesnesi için aşağıdaki başlatma seçeneklerini tanımlar: pencerenin küçültülebilir, büyütülebilir veya yeniden boyutlandırılabilir olup olmadığı, pencerenin sistem kromu veya özel krom içerdiği, pencerenin şeffaf olup olmadığı (sistem kromu kullanmayan pencereler için) ve pencerenin türü.

scrollBarsVisible

Kaydırma çubuklarının olup olmadığı (true veya false).

bounds

Yeni pencerenin konumunu ve boyutunu tanımlayan bir Rectangle nesnesi.

Örneğin aşağıdaki kod, dikey kaydırma çubukları kullanan HTMLLoader içeriğine sahip bir pencere oluşturmak için HTMLLoader.createRootWindow() yöntemini kullanır.

var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
var bounds:Rectangle = new Rectangle(10, 10, 600, 400); 
var html2:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, true, bounds); 
var urlReq2:URLRequest = new URLRequest("http://www.example.com"); 
html2.load(urlReq2); 
html2.stage.nativeWindow.activate();
Not: Doğrudan JavaScript içinde createRootWindow() çağrılarak oluşturulan pencereler açılan HTML penceresinden bağımsız kalır. Örneğin, JavaScript Window opener ve parent özellikleri null değerindedir. Ancak, createRootWindow() yöntemini dolaylı olarak createRootWindow() çağıran createWindow() yöntemini geçersiz kılarak çağırırsanız, opener ve parent açılan HTML penceresine başvurur.