Dynamic Language Runtime - Silverlight Javascript Binder Mekanizması

January 22, 2010

Merhabalar,

Bu yazımda Dynamic Language Runtime içerisinde bulunan ve Silverlight platformu ile beraber kullanılan Javascript Binder mekanizmasından bahsedeceğim. Bir önceki yazımda da bahsettiğim gibi Dynamic Language Runtime içerisinde birçok farklı binder mekanizmaları bulunmakta. Binderlar, yapılan dinamik çağrımların altlarındaki platformlarda çalışması için gereken bilgiye sahipler ve bu bilgileri kullanarak bu dinamik çağırımları gerçekleştirirler.

Javascript Binder ne iş yapar ?

Javascript Binder kısaca Silverlight tarafında yapılabilecek olan Javascript işlemlerini C# tarafında yapabilmemize olanak sağlar.

Javascript Binder'dan önce ne yapıyorduk ?

DLR olmadan önce Silverlight tarafından javascript tarafında bulunan herhangi bir metodu çağıracağımız zaman çeşitli yardımcı metotlar kullanmaktaydık. Bunun nedeni Javascript'in dinamik bir dil olması ve herşeyin çalışma zamanında gerçekleşmesiydi. Bu nedenle bizler de yardımcı metotlara çalıştıracağımız metodun adını vererek çalışma zamanında bu metotları çağırabiliyorduk. Öncelikle gelin isterseniz geleneksel yöntemlerle çalışan bir Silverlight uygulaması geliştirelim ve daha sonra bu uygulamayı DLR'ı kullanacak şekilde değiştirelim.

Yazacağımız uygulama basit olarak Silverlight tarafından alacağı enlem ve boylam bilgileri ile Bing Maps'i kullanarak bize o enlem ve boylama sahip olan bölgeyi Bing Maps'i kullanarak gösterecek.

Uygulamamıza öncelikle Silverlight tarafındaki arayüzü tasarlayarak başlayalım ve enlem,boylam bilgilerini alacak şekilde arayüzümüzü tasarlayalım.

Arayüzü hazırladıktan sonra yapmamız gereken ise Silverlight tarafından çağıracağımız Javascript kodlarını yazmak. Bunun için öncelikle ilgili javascript kütüphanesini html dosyasından referans olarak alıyoruz.

Daha sonra ise haritayı bize gösterecek olan CreateMap isimli javascript metodumuzu yazıyoruz. Harita idsi map olan div elementinin içerisine yüklenecek. Bunun için Silverlight object taglerinin hemen altına bu div elementini ekliyoruz. (Bing Maps ile ilgili daha detaylı bilgi edinmek isterseniz MSP arkadaşım Mehmet Aydın Bahadır'ın blogunu ziyaret edebilirsiniz.)

<script type="text/javascript">

  var map = null;

  function CreateMap(latitude,longtitude) { // Enlem ve boylam bilgileri alınır.

           var latlong = new VELatLong(latitude, longtitude);

           map = new VEMap("map"); // map id si olan div içerisinde harita yaratılır

           map.LoadMap(latlong, 5, 'h', false);  // Harita yüklenir         

}

</script>

Javascript metodunu yazdıktan sonra gerçekleştireceğimiz son adım ise butona tıklandığı zaman Silverlight kodundan javascript metodunu çağırmak. Bunu gerçekleştirmek için System.Windows.Browser.HtmlPage nesnesinin Window isimli üyesi üzerinden Invoke metodunu çağıracağız. Invoke metodu içerisine öncelikle çağıracağımız javascript metodunun adını daha sonra javascript metoduna gönderilecek olan parametreleri vereceğiz. Tüm kod ise aşağıdaki gibi olacak.

HtmlWindow window = HtmlPage.Window;

private void btnUpdate_Click(object sender, RoutedEventArgs e)

{

       window.Invoke("CreateMap", textBox1.Text, textBox2.Text);

}

Uygulamayı çalıştırdığımızda en başta ekranda tasarlarken verdiğimiz değerlere yakın bir değer verirsek Türkiye haritasını görebiliriz.

Bu noktaya kadar uygulamayı şuana kadar kullandığımız yöntem olan yardımcı metot yöntemini kullanarak gerçekleştirdik. Şimdi ise gelelim Dynamic Language Runtime ile beraber kullanımına. Gereken değişiklikleri yapmadan önce Javascript Binder'ın çalışması için Microsoft.CSharp kütüphanesini projemize referans etmemiz gerekmekte. Normalde Microsoft.CSharp dll'ini Silverlight projesine referans olarak ekleyemiyoruz. Bunun için C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Client klasöründe bulunan Microsoft.CSharp Silverlight dll'ini projemize referans olarak ekliyoruz. Artık yapmamız gereken sadece dinamik programlama.

Öncelikle yukarıda statik bir şekilde olarak tanımladığımız HtmlWindow nesnesini bu sefer dinamik olarak tanımlayoruz. Daha sonra ise sanki C# tarafından bir kod çağırıyormuşuz gibi metot ismini kullanarak çağırımı gerçekleştireceğiz. Değişmiş kodumuz ise şu şekilde olacak.

dynamic window = HtmlPage.Window;

private void btnUpdate_Click(object sender, RoutedEventArgs e)

{

       window.CreateMap(textBox1.Text, textBox2.Text);

}

Uygulamayı çalıştırdığımızda ise yine aynı şekilde Türkiye haritasını görüyoruz. Peki bu değişikliklerden sonra uygulamanın işleyişi nasıl değişti ? Öncelikle artık HtmlWindow nesnesi dinamik olarak tanımlandı. Yani artık nesnenin tipi ve sahip olduğu tüm metotlar çalışma zamanında belirlenecek ve çalışma zamanına kadar type-checking yapılmayacak. İşte bu nedenden dolayı artık window nesnesi üzerinden doğrudan yazdığımız javascript metodunu çağırabiliyoruz. Çünkü çağırım dinamik olarak yapılıyor.

Şimdi isterseniz işi biraz daha abartalım ve javascript tarafına yazdığımız metodu tamamen kesip C# tarafına yapıştıralım ve birde bu şekilde çağırım yapmaya çalışalım. Tabi öncelikle yazdığımız metodu javascript metodu yerine C# metodu haline getireceğiz. Bunun için öncelikle var olarak tanımladığımız değişkenleri bu sefer dynamic olarak tanımlayacağız ve böylece javascript tarafındaki işlevselliği C# tarafında da yakalayacağız. Son olarak ise new ile yarattığımız nesne aslında bir javascript nesnesi bu nedenle aynı syntaxı kullanarak C# tarafında javascript nesnesi yaratamıyoruz. Bunun için ise dinamik window nesnesini kullanıyoruz ve window.CreateInstance("Tip adı",Parametreler) şeklinde nesneyi yaratıyoruz. (Fark ettiğiniz gibi aslında burada bir dinamik çağrım yok. Bunun için yeni bir syntax üzerinde çalışılmakta. Final sürüm ile beraber Javascript nesneleri yaratmak için özel bir syntax eklenecek. ) Daha sonra ise bu sefer C# tarafında bulunan CreateMap metodunu çağırıyoruz.

dynamic window = HtmlPage.Window; private void btnUpdate_Click(object sender, RoutedEventArgs e) { CreateMap(textBox1.Text, textBox2.Text); } dynamic map = null; void CreateMap(dynamic latitude, dynamic longtitude) { // Enlem ve boylam bilgileri alınır. dynamic latlong = window.CreateInstance("VELatLong",latitude, longtitude); map = window.CreateInstance("VEMap","map"); // map id si olan div içerisinde harita yaratılır map.LoadMap(latlong, 5, 'h', false); // Harita yüklenir }

Gördüğünüz gibi tüm kodları artık C# ile yazdık ve tamamen dinamik bir şekilde kodlar işletildi. Son olarak C# tarafından Html içerisinde bulunan elementlere erişeceğiz. Hepimizin javascript tarafında kullandığı getElementById metodu artık C# tarafında da geçerli. Bunun için HtmlDocument nesnesini dinamik olarak tanımlamamız yeterli. Mesela HTML sayfamıza idsi message olan bir div elementi ekleyelim ve bu element içerisine harita yüklendikten sonra C# tarafından bir mesaj yazalım.

void CreateMap(dynamic latitude, dynamic longtitude)

{ // Enlem ve boylam bilgileri alınır.

   dynamic latlong = window.CreateInstance("VELatLong",latitude, longtitude);

   map = window.CreateInstance("VEMap","map"); // map id si olan div içerisinde harita yaratılır

   map.LoadMap(latlong, 5, 'h', false);  // Harita yüklenir

   dynamic document = HtmlPage.Document;

   dynamic messagedivision = document.getElementById("message");

   messagedivision.innerText = "A message comes from C#";

}

Bu makalemizde Dynamic Language Runtime içerisinde bulunan Javascript Binder mekanizmasını inceledik. Özellikle Javascript - Silverlight etkileşiminde Javascript Binder mekanizması yeni bir yaklaşım getirmekte. Ayrıca performans bakımından da herhangi bir handikap olmadan. Hatta caching mekanizması ile klasik yaklaşımdan daha da hızlı işletim elde edebilmekteyiz. Bununla ilgili sayısal bilgileri bir sonraki yazımda paylaşıyor olacağım.

Görüşmek Üzere