AIR'de HTML bağlantılı olayları işleme

Adobe AIR 1.0 ve üstü

Olay işleme sistemi, programcıların kullanıcı girişlerine ve sistem olaylarına pratik bir şekilde yanıt vermesini sağlar. Adobe® AIR® olay modeli hem pratik, hem de standartlara uygundur. Belge Nesnesi Modeli (DOM) Düzey 3 Olaylar Tanımlaması'na dayalı olarak, endüstri standartlarında bir olay işleme mimarisi olan olay modeli, programcılara güçlü ve sezgisel bir olay işleme aracı sunar.

HTMLLoader olayları

HTMLLoader nesnesi aşağıdaki Adobe® ActionScript® 3.0 olaylarını gönderir:

Olay

Açıklama

htmlDOMInitialize

HTML belgesi oluşturulduğunda, ancak herhangi bir komut ayrıştırılmadan veya DOM düğümleri sayfaya eklenmeden gönderilir.

complete

HTML sayfasındaki onload olayından hemen sonra, HTML DOM bir yükleme işlemine yanıt olarak yaratıldığında gönderilir.

htmlBoundsChanged

contentWidth ve contentHeight özelliklerinden biri veya her ikisi de değiştiğinde gönderilir.

locationChange

HTMLLoader öğesinin konum özelliği değiştiğinde gönderilir.

locationChanging

Kullanıcı gezinmesi, JavaScript çağrısı veya yeniden yönlendirme nedeniyle HTMLLoader öğesinin konumu değişmeden önce gönderilir. load() , loadString() , reload() , historyGo() , historyForward() veya historyBack() yöntemlerini çağırdığınızda locationChanging olayı gönderilmez.

Gönderilen olay nesnesinin preventDefault() yöntemini çağırmak gezinmeyi iptal eder.

Sistem tarayıcısında bir bağlantı açılırsa HTMLLoader öğesi konumunu değiştirmediği için locationChanging olayı gönderilmez.

scroll

HTML motoru kaydırma konumunu her değiştirdiğinde gönderilir. Scroll olaylarının nedeni sayfadaki çapa linklerinde ( # linkleri) gezinme veya window.scrollTo() yöntemine yapılan çağrılar olabilir. Bir metin girişine veya metin alanına metin girmek de scroll olayına neden olabilir.

uncaughtScriptException

HTMLLoader öğesinde bir JavaScript istisnası oluştuğunda ve istisna JavaScript kodunda yakalanmadığında gönderilir.

Bir ActionScript işlevini JavaScript olayı için de kaydedebilirsiniz ( onClick gibi). Ayrıntılar için bkz. DOM olaylarını ActionScript ile işleme .

DOM olaylarını ActionScript ile işleme

ActionScript işlevlerini JavaScript olaylarına yanıt vermesi için kaydedebilirsiniz. Örneğin aşağıdaki HTML içeriğini düşünün: 

<html> 
<body> 
    <a href="#" id="testLink">Click me.</a> 
</html>

Bir ActionScript işlevini sayfadaki herhangi bir olay için işleyici olarak kaydedebilirsiniz. Örneğin aşağıdaki kod clickHandler() işlevini, HTML sayfasındaki testLink öğesinin onclick olayının dinleyicisi olarak ekler: 

var html:HTMLLoader = new HTMLLoader( ); 
var urlReq:URLRequest = new URLRequest("test.html"); 
html.load(urlReq); 
html.addEventListener(Event.COMPLETE, completeHandler); 
 
function completeHandler(event:Event):void { 
    html.window.document.getElementById("testLink").onclick = clickHandler; 
} 
 
function clickHandler( event:Object ):void { 
    trace("Event of type: " + event.type ); 
}

Gönderilen olay nesnesi flash.events.Event türünde veya Event alt sınıflarından değildir. Olay işleyicisi işlev argümanı için bir tür bildirmek için Object sınıfını kullanın.

Bu olaylar için kayıt yaparken addEventListener() yöntemini de kullanabilirsiniz. Örneğin önceki örnekteki completeHandler() yöntemini aşağıdaki kodla değiştirebilirsiniz: 

function completeHandler(event:Event):void { 
    var testLink:Object = html.window.document.getElementById("testLink"); 
    testLink.addEventListener("click", clickHandler); 
}

Bir dinleyici belirli bir DOM öğesine başvurduğunda, olay dinleyicilerini eklemeden önce HTMLLoader üst öğesinin complete olayını göndermesini beklemek yerinde bir uygulama olur. HTML sayfaları genellikle birden çok dosya yükler ve tüm dosyalar yüklenip ayrıştırılana kadar HTML DOM tamamen oluşturulmaz. Tüm öğeler oluşturulduğunda, HTMLLoader complete olayını gönderir.

Yakalanmayan JavaScript istisnalarına yanıt verme

Aşağıdaki HTML'ye bakın: 

<html> 
<head> 
    <script> 
        function throwError() { 
            var x = 400 * melbaToast; 
        } 
    </script> 
</head> 
<body> 
    <a href="#" onclick="throwError()">Click me.</a> 
</html>

melbaToast adlı bilinmeyen değişkene başvuran throwError() JavaScript işlevini içerir: 

var x = 400 * melbaToast;

JavaScript işlemi, JavaScript kodunda try / catch yapısıyla yakalanmayan geçersiz bir işlemle karşılaştığında, sayfayı içeren HTMLLoader nesnesi bir HTMLUncaughtScriptExceptionEvent olayı gönderir. Aşağıdaki kodda olduğu gibi, bu olay için bir işleyici kaydedebilirsiniz: 

var html:HTMLLoader = new HTMLLoader(); 
var urlReq:URLRequest = new URLRequest("test.html"); 
html.load(urlReq); 
html.width = container.width; 
html.height = container.height; 
container.addChild(html); 
html.addEventListener(HTMLUncaughtScriptExceptionEvent.UNCAUGHT_SCRIPT_EXCEPTION, 
                           htmlErrorHandler); 
function htmlErrorHandler(event:HTMLUncaughtJavaScriptExceptionEvent):void  
{ 
    event.preventDefault(); 
    trace("exceptionValue:", event.exceptionValue) 
    for (var i:int = 0; i < event.stackTrace.length; i++) 
    { 
        trace("sourceURL:", event.stackTrace[i].sourceURL); 
        trace("line:", event.stackTrace[i].line); 
        trace("function:", event.stackTrace[i].functionName); 
    } 
}

JavaScript'in içinde, window.htmlLoader özelliğini kullanarak aynı olayı işleyebilirsiniz: 

<html> 
<head> 
<script language="javascript" type="text/javascript" src="AIRAliases.js"></script> 
 
    <script> 
        function throwError() { 
            var x = 400 * melbaToast; 
        } 
         
        function htmlErrorHandler(event) { 
            event.preventDefault(); 
            var message = "exceptionValue:" + event.exceptionValue + "\n"; 
            for (var i = 0; i < event.stackTrace.length; i++){ 
                message += "sourceURL:" + event.stackTrace[i].sourceURL +"\n"; 
                message += "line:" + event.stackTrace[i].line +"\n"; 
                message += "function:" + event.stackTrace[i].functionName + "\n"; 
            } 
            alert(message); 
        } 
         
        window.htmlLoader.addEventListener("uncaughtScriptException", htmlErrorHandler); 
    </script> 
</head> 
<body> 
    <a href="#" onclick="throwError()">Click me.</a> 
</html>

htmlErrorHandler() olay işleyicisi, olayın varsayılan davranışını (JavaScript hata mesajını AIR izleme çıktısına göndermeyi) iptal eder ve kendi çıktı mesajını oluşturur. HTMLUncaughtScriptExceptionEvent nesnesinin exceptionValue öğesinin değerini çıkarır. stackTrace dizisindeki her bir nesnenin özelliklerini çıkarır: 

exceptionValue: ReferenceError: Can't find variable: melbaToast 
sourceURL: app:/test.html 
line: 5 
function: throwError 
sourceURL: app:/test.html 
line: 10 
function: onclick

Çalışma zamanı olaylarını JavaScript'le işleme

runtime sınıfları, addEventListener() yöntemiyle olay işleyicileri eklemeyi destekler. Bir olay için işleyici işlevi eklemek üzere, olay türünü ve işleme işlevini sağlayarak olayı gönderen nesnenin addEventListener() yöntemini çağırın. Örneğin kullanıcı başlık çubuğunda pencereyi kapatma düğmesini tıkladığında gönderilen closing olayını dinlemek için, aşağıdaki ifadeyi kullanın: 

window.nativeWindow.addEventListener(air.NativeWindow.CLOSING, handleWindowClosing);

Olay işleyici işlevi yaratma

Aşağıdaki kod, ana pencerenin konumu hakkında bilgi görüntüleyen basit bir HTML dosyası oluşturur. moveHandler() adlı bir işleyici işlevi, ana pencerenin move olayını dinler (NativeWindowBoundsEvent sınıfı tarafından tanımlanan). 

<html> 
    <script src="AIRAliases.js" /> 
    <script> 
        function init() { 
            writeValues(); 
            window.nativeWindow.addEventListener(air.NativeWindowBoundsEvent.MOVE, 
                                                     moveHandler); 
        } 
        function writeValues() { 
            document.getElementById("xText").value = window.nativeWindow.x; 
            document.getElementById("yText").value = window.nativeWindow.y; 
        } 
        function moveHandler(event) { 
            air.trace(event.type); // move 
            writeValues(); 
        } 
    </script> 
    <body onload="init()" /> 
        <table> 
            <tr> 
                <td>Window X:</td> 
                <td><textarea id="xText"></textarea></td> 
            </tr> 
            <tr> 
                <td>Window Y:</td> 
                <td><textarea id="yText"></textarea></td> 
            </tr> 
        </table> 
    </body> 
</html>

Bir kullanıcı pencereyi taşıdığında, metin alanı öğeleri pencerenin güncellenen X ve Y konumlarını görüntüler.

Olay nesnesinin bir argüman olarak moveHandler() yöntemine iletildiğine dikkat edin. Olay parametresi işleyici işlevinizin olay nesnesini incelemesini sağlar. Bu örnekte olay nesnesinin type özelliğini, olayın bir move olayı olduğunu bildirmek için kullanırsınız.

Olay dinleyicilerini kaldırma

Artık ihtiyacınız olmayan bir olay dinleyicisini kaldırmak için removeEventListener() yöntemini kullanabilirsiniz. Artık kullanılmayacak olan olay dinleyicilerinin tümünü kaldırmak yararlı olacaktır. Gerekli parametreler eventName ve listener parametrelerini içerir, bunlar addEventListener() yöntemi için gereken parametrelerle aynıdır.

Gezinilen HTML sayfalarındaki olay dinleyicilerini kaldırma

HTML içeriği gezindiğinde veya içeriğe sahip pencere kapatıldığı için HTML içeriği atıldığında, boşaltılan sayfadaki nesnelere başvuran olay dinleyicileri otomatik olarak kaldırılmaz. Bir nesne, işleyiciye önceden boşaltılmış bir olay gönderdiğinde, şu hata mesajını görürsünüz: “Uygulama, artık yüklü olmayan bir HTML sayfasındaki JavaScript nesnesine başvurma girişiminde bulundu.” (The application attempted to reference a JavaScript object in an HTML page that is no longer loaded.)

Bu hatayı önlemek için, atılmadan önce HTML sayfasındaki JavaScript olay dinleyicilerini kaldırın. Sayfa gezinmesi durumunda (HTMLLoader nesnesinin içinde), window nesnesinin unload olayı sırasında olay dinleyicisini kaldırın.

Örneğin aşağıdaki JavaScript kodu, uncaughtScriptException olayı için bir olay dinleyicisini kaldırır: 

window.onunload = cleanup; 
window.htmlLoader.addEventListener('uncaughtScriptException', uncaughtScriptException); 
function cleanup() 
{ 
    window.htmlLoader.removeEventListener('uncaughtScriptException', 
                            uncaughtScriptExceptionHandler); 
}

HTML içeriğine sahip pencereler kapatılırken hata oluşmasını önlemek için, NativeWindow nesnesinin ( window.nativeWindow ) closing olayına yanıt olarak bir temizleme işlevi çağırın. Örneğin aşağıdaki JavaScript kodu, uncaughtScriptException olayı için bir olay dinleyicisini kaldırır: 

window.nativeWindow.addEventListener(air.Event.CLOSING, cleanup); 
function cleanup() 
{ 
    window.htmlLoader.removeEventListener('uncaughtScriptException', 
                            uncaughtScriptExceptionHandler); 
}

Ayrıca, bir olay dinleyicisini çalıştığı anda kaldırarak bu hatanın oluşmasını önleyebilirsiniz (olayın yalnızca bir defa işlenmesi gerekiyorsa). Örneğin aşağıdaki JavaScript kodu, HTMLLoader nesnesinin createRootWindow() yöntemini çağırarak bir html penceresi oluşturur ve complete olayı için bir olay dinleyicisi ekler. complete olay işleyicisi çağrıldığında, removeEventListener() işlevini kullanarak kendi olay dinleyicisini kaldırır: 

var html = runtime.flash.html.HTMLLoader.createRootWindow(true); 
html.addEventListener('complete', htmlCompleteListener); 
function htmlCompleteListener() 
{ 
    html.removeEventListener(complete, arguments.callee) 
    // handler code.. 
} 
html.load(new runtime.flash.net.URLRequest("second.html"));

Gerekmeyen olay dinleyicilerini kaldırmak da sistem çöp toplayıcısının bu dinleyicilerle ilişkilendirilen tüm belleği geri istemesini sağlar.

Mevcut olay dinleyicilerini kontrol etme

hasEventListener() yöntemi sayesinde bir nesnede olay dinleyicisi olup olmadığını kontrol edebilirsiniz.