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

XiLoNeN · 26-05-2008, 15:15

Daha önceki blog yazılarımdan [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] Türkiye'nin ilk kurumsal Silverlight uygulaması olarak DEVELOAD Yazılım'a ait [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] 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 [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] 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.

HTML-Kodu:

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.

HTML-Kodu:

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

Kaynak: [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]