Silverlight animasyonum FireFox'da çalışmıyor! "100%" genişlik ve yükseklik sorunu.

0 dakikada yazıldı

7299 defa okundu

Düzenle

Daha önceki blog yazılarımdan
birinde
Türkiye'nin ilk kurumsal Silverlight uygulaması olarak DEVELOAD
Yazılım'a ait web sitesini sizlerin
beğeninize sunmuştum. O zamanlar pek önemsemediğimiz için sitenin
FireFox ile uyumlu olup olmaması konusunda bir çalışma yapmamıştık.
Açıkçası hala pek önemsemiyoruz çünkü hem uluslararası çalışmalardan hem
de yurt içi sitelerden aldığımız istatistiklerde hala FireFox'un
yaygınlığı %5'i bulamadı. Neyse biz konumuza dönelim.

O tarihlerden beridir Silverlight'ın kullanımı ile ilgili yerli bir
örnek vermem gerektiğinde www.deveload.com'u
veriyorum. Tabi ki bunu reklam olması amacıyla yapmıyorum :) DEVELOAD
tarafında sitemizi Silverlight ile yenilerken amacımız Silverlight
olmadan önce Flash ile yaptığımız tarz uygulamaların tıpatıp aynılarının
Silverlight ile de başarılı ve kolay bir şekilde yapılabildiğini
göstermekti. Fakat her yaptığım demoda önce Silverlight'ın cross-browser
olduğundan bahsedip sonra da cross-browser olmayan bir örnek göstermek
her tür açıklamama rağmen biraz komik oluyordu :) Malum söz konusu
sitenin FireFox uyumsuz olması tamamen bizim yazdığımız kodlardan
kaynaklanıyordu (öyle sanıyorduk) Silverlight'ın kendisinden değil.

Sözün özü, biraz önce bu konuya el atarak acaba nedir bu kodların
FireFox'da çalışmamasının nedeni diyerek ufak bir çalışmaya giriştim ve
tabi ki sorunu buldum.

Sorun maalesef yazdığımız JavaScript kodları ile alakalı değil :)
Silverlight ile ilgiliymiş :) Site içerisinde genel olarak kullanılan
100% genişlikte ve 100% yükseklikte bir Silverlight animasyonu var. Bu
animasyonun üzerine bir katman (DIV) yerleştirilerek ekstra içerik
gösteriliyor. Silverlight animasyonunun genişliğinin ve yüksekliğinin
100% olması için animasyona aşağıdaki parametreleri vermişiz.

function createSilverlight()

{

  var scene = new DEVELOAD_SV.Page();

  Silverlight.createObjectEx({

    source: "Page.xaml",

    parentElement: document.getElementById("DEVELOAD_Host"),

    id: "DEVELOAD_Host",

    properties: {

      width: "100%",

      height: "100%",

      version: "1.0",

      isWindowless: "True"

    },

    events: {

      onLoad: Silverlight.createDelegate(scene, scene.handleLoad)

    }

  });

}

Maalesef Silverlight animasyonu ile ilgili verilen bu parametrelerdeki
değerler eğer yüzde üzerinden verilmiş ise FireFox'da herhangi bir
görüntü alamıyorsunuz. Internet Explorer içerisinde ise hiçbir sorun
yok. Aslında bu sorun FireFox içerisinde normal HTML elementlerinde de
var ve çözüm olarak sayfadaki HTML ve BODY taglarına da aynı CSS
özelliklerini vermek yeterli oluyor. Fakat Silverlight için bu da
yeterli değil. Çok daha farklı bir çözüm gerekiyor.

DEVELOAD_SV.Page.prototype =

{

  handleLoad: function(control,
userContext, rootElement)

  {

    if (window.innerHeight)

    {         

      $get('DEVELOAD_Host').style.height =
window.innerHeight + "px";

    }

  }

}

Yukarıdaki koddan da anlaşılacağı gibi Silverlight animasyonu yüklenir
yüklenmez bir boyutlandırma işlemi başlatıyoruz. Sorun tamamen
animasyonun boyutunun tanımlanamaması ile alakalı. FireFox içerisinde
animasyon yükleniyor ve Silverlight çalışıyor fakat yüzde olarak verilen
genişlik ve yükseklik değerleri geçersiz olduğu için ekranda gözükmüyor.
Bu nedenle animasyon yüklendiğinde çalıştırılan handleLoad
fonksiyonu içerisinde ilk olarak window.innerHeight diye bir
özelliğin olup olmadığını kontrol ederek FireFox gibi bir tarayıcıda
olup olmadığımızı anladıktan sonra gerekiyorsa Silverlight nesnesini
yakalayarak yüksekliğini pencerenin yüksekliğine eşitliyoruz. Aynı
şekilde genişliğini de düzenleyebilirsiniz. Böylece animasyonunuz ekrana
tamamen yayılacaktır.

Hepinize kolay gelsin ;)