AIR-Html Kontrol sınıfı ve kullanımı

Bazen günümün tamamını Flash ve Actionscript ile geçiren biri olarak, AIR in Html içeriklerini görüntüleyebildiğini ilk duyduğumda hem çok şaşırmış hem de çok iyi bulmuştum. Bir kaç denemeden sonra iyi bir özellik olduğunu cidden kanaat getirdim. Ayrıca ilk denemelerden sonra özelliğin kullanım alanının pekte sınırlı olmadığını fark ettim.

Her neyse HtmlControl sınıfı hem local hem web tabanlı çalışıyor. Flash html sayfaları yüklerken sayfalara bir veri kaynağı olarak kabul ediyor. HtmlControl sınıfı Sprite sınıfının özellikleri miras aldığından dolayı Sprite sınıfına uygulanabilecek her türlü işlem HtmlControl sınıfına da uygulanabilir. Mesela x ve y koordinatları, genişlik ve yükseklikleri (width,height), alpha değeri, hatta Sprite sınıfına uygulanan filtreler bile, Blur, Glow , Shadow gibi.Bunla yetinmiyor tabi ki yüklediğiniz HTML i bir data kaynağı varsayıyor, xml gibi yani.Bu da HTML tüm özelliklerine erişmenizi sağlıyor.Mesela HTMl içindeki herhangi bir nesneye ya da tagı ulşabilirsiniz.Ya da css dosyasını yeniden şekillendirebilirisiniz.

Her neyse şimdi HtmlControl sınıfını nasıl kullanabiliriz ona bir göz atalım. Bu arada başlamadan önce AIR BETA 3 ü indirip bilgisayarınıza kurmanızı tavsiye ederim.


İlk olarak html içeriği nasıl yükleyebileceğimizi öğrenelim.Kullandığınız AIR dökümanın boyutlarını genişlik 800, yükseklik 600 yapın ve aşağıdaki kodu timeline daki ilk frame e yapıştırın.

  1. //html sınıfını import ediyoruz
  2. import flash.html.*;
  3. //yeni bir HTMLLoader tanımlıyoruz
  4. var htmlPage:HTMLLoader = new HTMLLoader();
  5. //URLRequest metodu ile yeni bir url isteginde bulunuyoruz.
  6. var url:URLRequest = new URLRequest("http://www.stayupdatedonweb.com/");
  7. //HTMLLoader metodona hangi url adresini yükleyecegini belirtiyoruz
  8. htmlPage.load(url);
  9. //html objemizi ekrana ekliyoruz.
  10. addChild(htmlPage)
  11. //html objemizin genişlik ve yüksekliğini ayarlıyoruz
  12. htmlPage.width = 800;
  13. htmlPage.height = 600;

Yukarıdaki kodda  bir web sayfasının nasıl AIR tarafından çağırılacağını gördünüz.Sırada ise çağırdığınız herhangi bir web sitesinin css kodlarına nasıl ulaşıp bunu kendi isteğimize göre nasıl değiştireceğimiz yer alıyor.İlk olarak aşağıdaki kodu alıp biraz önceki koda ilave edin.

  1. //html objemize olay dinleyici eklıyoruz
  2. //html sayfası yüklendiğinde onComplete fonksiyonunu çağırıyor
  3. htmlPage.addEventListener(Event.COMPLETE, onComplete);
  4.  
  5. function onComplete(event:Event) {
  6.   //bir style objesi yaratıyoruz ve bu objemizi
  7.  //html obejmizin stiline atıyoruz.
  8.  var style:Object = htmlPage.window.document.styleSheets[0];
  9.  //ilk olarak sitedeki genel font boyutunu 32px çıkarıyoruz
  10.   style.cssRules[0].style.fontSize = "32px";
  11.  //ikinci olarak sitede sag tarafata duram kategori adlarının rengini değiştiriyoruz
  12.   style.cssRules[1].style.color = "#FF9900";
  13. }

Ben css ayarlarını kendi siteme göre yaptım tabiki bunu istediğiniz gibi değiştirebilirsiniz.Şimdi ise sayfadaki herhangi bir elemente nasıl ulaşabiliriz onu göstereceğim.Aslında çok eğlenceli bir kod her neyse aşağıdaki kodu kopyalarayarak ilk kodun devamına yapıştırın.

  1. //html objemize olay dinleyici eklıyoruz
  2. //html sayfası yüklendiğinde onComplete fonksiyonunu çağırıyor
  3. htmlPage.addEventListener(Event.COMPLETE, onComplete);
  4.  
  5. function onComplete(event:Event) {
  6.  //innerHtml metodu ile "content" sınıfının yerine soltaraftaki
  7.  //texti yerleştiriyoruz.
  8.  htmlPage.window.document.getElementById("content").innerHTML = "Opps…Tüm içeriğimiz gitti";
  9. }

Şimdi eğer yukardaki web adresi hala www.stayupdatedonweb.com  ise işe yarayacaktır.Yukarıdaki kod da getElementById yi kullanarak sayfadaki “content” adlı sınıf yapısını “Opps…Tüm içeriğimiz gitti” yazısıyla değiştirdim.Bunu sizde fark etmişsinizdir.Bura da dikkatimi çeken bir şey ise “getElementByTagName” ve benzeri bir kaç metodu kullanamadım.Araştırdığımda ise denediğim kodların bütün browserlar tarafından desteklendiğini öğrendim.Tahminime göre AIR BETA sürümünde olduğu içindir.

Şimdilik bu kadar.Umarım faydalı olmuştur.
Kolay Gelsin
Engin!

3 Responses to “AIR-Html Kontrol sınıfı ve kullanımı”

  1. emre 8 January 2008 at 17:16 #

    ilk olarak yazı için sağol.güzel bir yazı, ama kullanılabilirlik açısında biraz sıkıntılı.Yani bu kadar browser dururken nıye biri kalkıp bunu kullansınkı?

  2. Engin Yöyen 9 January 2008 at 23:57 #

    Aslında haklısın yani bu kadar gelişmiş internet tarayıcıları dururken Flash ta yapılmış bir tarayıcı işe yaramaz.Ama Şu da var ki AIR in amacı bu değil zaten, yani AIR tamamen bir masaüstü yazılımı olma yolunda değil.Tabii bu özelliğin kullanılabileceği güzel alanlarda var, mesela aşağıdaki adreste
    http://labs.searchcoders.com/dashboard/demo/
    bir rss okuyucu yapılmış ve html sınıfını kullanıyor, ve bence güzel bir uygulama.
    Her neyse istersen kontrol et sonra görüşlerini tekrar yazarsın
    Kolay Gelsin

  3. emre 10 January 2008 at 22:40 #

    verdiğin örneğe baktım, farklı ve guzel vbır örnek, sagol


Leave a Reply