Silverlight 1.0 Font Embedding

XiLoNeN · 26-05-2008, 15:18

Biraz önce mail ile süper bir soru aldım

Soru şöyle: "Silverlight içerisinde font dahil edip istemci tarafında kullanma şansımız var mı?" EVEEEET

Var. Silverlight uygulamanızdaki herhangi bir TextBlock'un setFontSource metodunu kullanarak sadece Silverlight animasyonunun çalıştığı istemci makinedeki fontları değil harici font kaynaklarını kullanmasını da sağlayabilirsiniz. Peki bunu nasıl yapacağız?
İlk olarak kullanacağımız fontu tabi ki sunucumuza yerleştirmemiz gerekiyor. Sonrasında Silverlight uygulamamız istemcide yüklendiği anda fontu da yüklemeye başlamamız lazım. Bunun için bir Silverlight downloader nesnesi yaratarak kullanacağız. Aşağıdaki gibi bir kod işimizi görecektir.

HTML-Kodu:

if (!window.Font_SV)
   window.Font_SV = {};
  
 Font_SV.Page = function() 
 {
 }
  
 Font_SV.Page.prototype =
 {
   handleLoad: function(control, userContext, rootElement) 
   {
     var yukleyici = document.getElementById('SilverlightControl').createObject("downloader");
     yukleyici.addEventListener("Completed",  Tamamlandi);
     yukleyici.open("GET", "Dungeon.TTF");
     yukleyici.send();
   }
 }

Gelin satır satır yukarıdaki kodu inceleyelim. İlk satırda adını yukleyici olarak verdiğim bir JavaScript değişkenine download nesnesi yaratıyorum. Bunun için sayfamdaki Silverlight uygulamamın ID bilgisini document.getElementById metoduna vererek Silverlight uygulamamı yakaladıktan sonra uygulamama ait createObject metodunu kullanıyorum. Söz konusu metodu obje tipi olarak downloader değerini vermem yeterli oluyor. Artık elimizde bir downloader nesnesi bulunduğuna göre gelelim bu nesnenin ayarlarına.
İkinci satırda hemen downloader nesnesine sunucudan veriyi istemciye asenkron olarak yükleme işini bitirdiğinde çalıştırılmak üzere Tamamlandi adinda bir JavaScript fonksiyonu aktarıyorum. Bu fonksiyonu biraz yazacağız.
Üçüncü satırda downloader nesnesini aynı bir XMLHttpRequest nesnesi gibi sunucudan veri isteme metodunu ve isteyeceği dosyayı ayarlıyorum. GET metodu şimdilik uygun. Dosya adı olarak da benim örneğimde Dungeon.TTF font dosyamın adı. Bu noktada özellikle belirtmem gereken bir nokta var. Yine aynı XMLHttpRequest nesnelerinde de olduğu gibi downloader nesnesi de ancak URL üzerinden dosya çekebiliyor. Yani bu kodları makinenizde çalıştırırken de IIS veya ASP.NET Development Server üzerinden çalıştırmanız gerekecek.
Son olarak dördüncü satırda artık tüm ayarlarım tamamlandığı için veri alım işlemini başlatmak üzere talebimi yukleyici'nin send metodu ile sunucuya gönderiyorum.
Peki veri geldiğinde neler yapacağız? Gelin şimdi de aşağıdaki kodu inceleyelim.

HTML-Kodu:

function Tamamlandi(sender, eventArgs)
 {
     sender.findName("Metin").setFontSource(sender);
     sender.findName("Metin").fontFamily = "TrSah Dungeon";
     sender.findName("Metin").text = "Bu artık çok özel bir fontla yazılmış bir metin!!!";
 }

Tamamlandi adındaki fonksiyonum çalıştırıldığında hemen Silverlight uygulamamdaki Metin ID'li TextBlock nesnemi yakalıyorum. Sonrasında TextBlock nesnesine ait setFontSource metoduna parametre olarak diren sender parametresini veriyorum. Yine aynı karşılaştırmayı yaparak sizlere XMLHttpRequest nesnelerini hatırlatmak isteyorum. XMLHttpRequest nesneleri ile AJAX uygulamalarında da sunucudan asenkron isteklerde bulunduğumuzda isteğimiz tamamlandığında çalıştırılan fonksiyonumuza gelen ilk parametre aslında sunucudan gelen verinin ta kendisi oluyordu. Burada da durum aynı. Bizim Tamamlandi fonksiyonumuzun sender parametresi downloader tarafından gönderilen ve sunucudan gelen font dosyamızın verisi.
Gelen veriyi TextBlock nesnemizin font kaynaklarına ekledikten sonra sıra geldi söz konusu fontu TextBlock için gösterim aşamasında seçmeye. Bunun için TextBlock'a ait fontFamily özelliğini yüklediğimiz fontun adı ile değiştiriyoruz. Son olarak da TextBlock içerisinde metni içerisinde Türkçe karakterler de olan bir metin ile değiştiriyorum. En ufak bir sorun yok

Biraz daha kullanıcı dostu bir yükleme süreci için isterseniz siz uygulamalarınızda yükleme işlemini başlatmadan önce ekranda "Yükleniyor" gibi bir uyarı mesajı da gösterebilirsiniz.
Örnek uygulamayı aşağıdaki adreste inceleyebilirsiniz. Kaynak kodlarını özellikle bir paket olarak koymuyorum. İsteyenler sayfanın kaynak kodlarına girerek zaten alabilirler

Sizler için de biraz Silverlight egzersizi olmuş olur.
[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]
Kolay gelsin.

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

Silverlight 1.0 Font Embedding

Silverlight, Expression, LinQ, Ajax, JavaScript