Root > Documents > Programlama > 4.Gün: İki Silverlight Kontrolü Arasında İletişim
Cyber-Warrior.Org \ Doküman \ Programlama > 4.Gün: İki Silverlight Kontrolü Arasında İletişim
Madde
  Yazar : S!LV3R
  Date : 30.06.2011 10:37:48
 
# 4.Gün: İki Silverlight Kontrolü Arasında İletişim
 

Kendi sayfanizda birden fazla Silverlight unsurunu nasil barindiracaginizi hiç merak ettiniz mi? Peki ya iki Silverlight kontrolünün birbiri ile nasil iletisim saglayacagini merak ettiniz mi? Bu yazimizda her iki sorunun da cevabini bulacaksiniz.

Bu sorulara simdilik kafa yormayin, söyle ortak bir senaryomuz var diyelim: Sayfanizda ortak bir Silverlight gezintisi olsun istiyorsunuz ve kullanici sayfaya her tiklayisinda baska bir yere yönlensin istemiyorsunuz. Bunun yerine sayfada gezintiyi her tikladigimizda degisen ikinci bir Silverlight unsuru istiyoruz.

Tüm her seyi tek bir noktaya toplama islemi genellikle kötü kullanicilarin yaptigi seylerdir-giant Silverlight container-çünkü bunun yüklenmesi bir ömür sürer,kullanicilari hiçbirsey yapmadan oturup beklemeye zorlar.Daha modüler olacak sekilde biz yükleme sürelerini düzenliyoruz ve aslinda bunun yapilisi da çok daha basit.Hadi baslayalim:

1.Kendi Silverlight projenizi olusturun.

Tabi bununla beraber Web projenizi de olusturdugunuzdan iyice emin olun.

2.XAML’i unique yapmak.

Silverlight uygulamamin arkaplan rengini turuncu yapiyorum. Hangi kontrol oldugunu anlamam için bir tane de "1" ekledim. Bir sayfaya 2 Silverlight kontrolü koydugumuz zaman, hangisinin hangisi oldugundan emin olmamiz gerekir.Üstelik bu ekranda 3 tane de buton var. Kullanici bu buttonlara tikladigi zaman, diger SIlverlight kontrollerimizin arkaplan renklerini degistirecegiz. Olay görüntüleyici (event handler)’nin kodlarini daha sonra ekleyecegiz.(Ayrica DOM’u kullanabilmek için System.Windows.Browser kismini da eklemeniz gerekiyor.)

3.Baska bir Silverlight projesi olusturun,

Tüm Silverlight projeleri birbirlerinden bagimsiz olacaktir. Her Silverlight projesi bir tane XAP dosyasi olusturur ve bu da biz iki tane ihtiyacimiz olana kadar ki en iyi çözümümüz.


4.Ikinci XAML dosyamizi gelistirelim.

Bu dosya daha da basit. Biz sadece arkaplan rengini degistiriyoruz ve bir tane de tanimlamalar için "2" ekliyoruz.

5.Bunlari kendi .aspx sayfamiza ekleyelim.

Örnekte sayfamiza 2 tane <asp:Silverlight> tagi ekliyoruz ve 2 özgün .xap dosyasini da isaretliyoruz. HTML kismi böyle olmali:

6.Olay Görüntüleyici(event handler) butonu yaziyoruz.

Gerçekten bir seyler yapmak için bu butonlara ihtiyacimiz var. Su olay görüntüleyici kodlarini yazalim. Asagidaki gibi olacaktir:

7. Olmadigini söyleme...

Javascript’in dünyayi yönettigini kaç kere söylemem gerektigini bilmiyorum. Alin size bir örnek. Silverlight nesnelerimizden bahsederken Javascriptin gücünü kullanmaliyiz. Çünkü o Silverlight DOM’larini kaldirabilir, bu aslinda çok kullanisli ve güçlü bir araçtir.(Ve siz muhalifler,eger kullanici Javascript kullanimini kapadiysa, Silverlight veya Flash gibi zengin UI eklentilerini BÜYÜK olasilikla çalistiramayacaktir.)

Her neyse burada da yazabilecegimiz çok güzel ve basit bir Javascript fonksiyonumuz var. Bir önceki adimimizda Javascript fonksiyonunun ismini "changeColors" olarak vermistik. Üstelik diger kontrollerin de renklerinin degismesi için tiklanacak olan butonun Name degerini de vermistik. Javascript fonksiyonlarimiz artik söyledir:

Burada yaptigimiz sey, Xaml2 kontrolünün içinden ChangeBackgroundColor metodunu çagirmak. Hangi renge dönmesini istiyorsak ona degistiriyoruz.

8.Ikinci Kontrolde son metodu yaziyoruz.

Simdi ikinci XAML dosyamizin arkaplanda çalisan kodlarina (code-behind) su metodu yazmamiz gerekiyor ki isimiz bitsin. Ikinci kontrol için yazdigim son kodlar söyledir:

Burada bir farklilik oldugunu size söylemem gerekiyor. Burada [ScriptableMember] isminde bir decorator var. Javascriptin çalistirilmamasi için uygulamamizda bazi degisiklikler yaptik. Asil olarak, sadece Silverlight uygulamamizi çagiramiyor o kadar. Bunu kod kisminda halletmemiz gerekiyor.

9.App.xaml dosyamizi degistiriyoruz.

Ikinci Silverlight projesinde, app.xaml dosyanizi açin. Application_Startup metodumuzda, su sekilde bir satiriniz olmali.

this.RootVisual = new Page();

Bundan sonra, Scriptable nesnelerin kontrol kaydi için birkaç satir daha ekliyoruz.

Bu kod-satiri, 8.Adimda ekledigimiz dekoratör ile baglamaya yariyor ve bu da artik tüm kontrollerimiz birbirlerini etkileyebiliyorlar.


Haberci Destek Tim adina çevirisi Hanefi tarafindan hazirlanmistir.

   
   
Cyber-Warrior TIM All Legal and illegal Rights Reserved.\CWDoktoray 2001©