Silverlight 1.0 Font Embedding

0 dakikada yazıldı

5444 defa okundu

Düzenle

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.

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.

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.

http://daron.yondem.com/samples/font_embed/

Kolay gelsin.