Silverlight 2.0 ve JavaScript kardeşliği

0 dakikada yazıldı

7309 defa okundu

Düzenle

Silverlight 2.0 ile beraber istemci tarafında VB.NET veya C#
kullanabileceğimizi artık biliyoruz. Durum böyle olunca söz konusu .NET
dilleri ile Silverlight uygulamasının dışına çıkarak HTML sayfasındaki
klasik HTML elementlerine ulaşmak da büyük kolaylıklar sağlayabilir.
Böylece aslında kısmen şu an için istemci tarafındaki JavaScript'in
hakimiyetini kırmak da mümkün. Tabi bunun tam tersi senaryolarda da
JavaScript tarafından yola çıkarak Silverlight içerisinde .NET
metodlarına ulaşmak isteyebiliriz.

HTML elementlerine ulaşalım

İlk olarak Silverlight tarafında yazdığımız kod ile sayfadaki HTML
elementlerine nasıl ulaşabileceğimize bir göz atalım. Bunun için ilk
olarak Silverlight 2.0 Beta 1 uygulaması içerisinden dışarı çıkarak
Browser içerisinde HTMLPage'in Document nesnesini
yakalamamız gerekiyor.

Private Sub Dugme_MouseLeftButtonDown(ByVal sender As Object,
ByVal e As
System.Windows.Input.MouseButtonEventArgs) Handles Dugme.MouseLeftButtonDown

    Dim MevcutBelge As System.Windows.Browser.HtmlDocument =
System.Windows.Browser.HtmlPage.Document

    MevcutBelge.GetElementById("icerik").SetAttribute("innerHTML", "DENEME METNİ")

End Sub

MevcutBelge değişkenimize sayfadaki mevcut HTMLDocument nesnesini
aktardıktan sonra artık klasik JavaScript metodu gibi GetElementById
metodunu kullanabiliyoruz. Silverlight 2.0 animasyonunun bulunduğu
sayfadaki "icerik" adındaki HTML elementini yakaladıktan sonra basit bir
şekilde innerHTML özelliğine farklı bir metin aktarıyoruz. Bu
şekilde VB veya C# kodu ile sayfalardaki HTML elementlerine ulaşılarak
farklı işlemler rahatlık istemci tarafında yapılabilir.

Peki ya bir JavaScript kodu çalıştırmak istersek?

İstemcideki .NET kodunuz ile sayfalarınızda hali hazırda yer alana
JavaScript kodlarını birbiri ile konuşturabiliyor olmak tabi ki çok
önemli. HTML sayfası içerisinde tanımlanmış olan herhangi bir JavaScript
metodunu doğrudan çalıştırmak için aşağıdaki kodu kullanabilirsiniz.

System.Windows.Browser.HtmlPage.Window.CreateInstance("Uyari")

Yukarıdaki kod içerisinde "Uyari" adındaki JavaScript fonksiyonu
çalıştırılıyor. Eğer bu fonksiyon aşağıdaki gibi tanımlanarak bir
parametre alsaydı daha farklı bir şekilde çalıştırmamız gerekecekti.

function Uyari(mesaj)

{

    alert(mesaj);

}

Yukarıdaki JavaScript fonksiyonunu Silverlight tarafından VB veya C#
ile çalıştırırken göndereceğimiz parametreyi de ek olarak belirtmemiz
gerekecek.

System.Windows.Browser.HtmlPage.Window.CreateInstance("Uyari", New String("23"))

CreateInstance metoduna verdiğimiz ilk parametre çalıştırmak
istediğimiz JavaScript metodunun adı şeklinde düzenlenirken verdiğimiz
diğer parametre ise aslında JavaScript fonksiyonumuza aktarmak
istediğimiz diğer olası tüm parametrelerin bir dizisi.

JavaScript tarafından .NET'e yolculuk...

.NET tarafında hazırladığımız ve Silverlight ile istemci tarafında
çalışan bir metodu JavaScript ile kullanabilmemiz için ilk aşamada
yapmamız gereken bazı ayarlar var. Bunlardan ilki uygulamamız ilk
yüklendiğinde elimizdeki Silverlight sayfasını HTML sayfasına bir
"ScriptableObject" olarak tanımlamamız gerektiği. Bunu yapmak için
uygulamamızın App.xaml dosyasının arkasındaki kodlardan
faydalanacağız.

Private Sub OnStartup(ByVal o As
Object, ByVal e As
EventArgs) Handles Me.Startup

    Dim Sayfam As New
Page()

    System.Windows.Browser.HtmlPage.RegisterScriptableObject("Page", Sayfam)

    Me.RootVisual = Sayfam

End Sub

Gördüğünüz gibi ilk satırda Silverlight uygulamamızda gösterilecek
sayfayı yaratıyoruz ve bir sonraki satırda hemen söz konusu sayfayı
mevcut HTML sayfamıza bir ScriptableObject olarak kaydediyoruz.
Sayfayı Silverlight uygulamamızın ana görsel öğesi haline getirerek
kullanıcıya gösterilmesini de sağmalayı unutmayalım.

Bu ayarı tamamladıktan sonra sıra geldi JavaScript tarafı ile
paylaşacağımız fonksiyonumuzu yazmaya.

<System.Windows.Browser.ScriptableMember()> _

Public Function Kare(ByVal X As
Integer) As Integer

    Return X ^ 2

End Function

Yukarıdaki örnekte basit fonksiyon kendisine parametre olarak verilen
sayının karesini alarak geri döndürüyor. Bu fonksiyonun JavaScript
tarafı ile paylaşılabilmesi için kesinlikle yukarıdaki şekilde
ScriptableMember olarak işaretlenmiş olması gerekiyor. Son olarak
sıra geldi bu metodu kullanabilecek olan JavaScript kodunu yazmaya fakat
onun öncesinde dikkat etmemiz gereken bir nokta. Sayfamızdaki herhangi
bir Silverlight uygulaması içerisindeki bir metodu dışarıdan
kullanabilmek için ilk olarak söz konusu Silverlight uygulamasını
bulmamız gerekiyor. Yani Silverlight uygulamamızın bir isminin olması
şart.

<object
id="SL"
data="data:application/x-silverlight," type="application/x-silverlight-2-b1" width="100%"
height="100%">

  <param
name="source"
value="SilverlightApplication8.xap"/>

  <param
name="onerror"
value="onSilverlightError" />

  <param
name="background"
value="white" />

 

  <a href="http://go.microsoft.com/fwlink/?LinkID=108182" style="text-decoration: none;">

    <img
src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft
Silverlight
" style="border-style:
none
"/>

  </a>

</object>

Yukarıdaki şekliyle sayfaya yerleştirilen bir Silverlight uygulamasına
isim vermek için uygulamaya ait object taglarına bir ID bilgisi atamak
yeterli olacaktır. Artık ID bilgisi üzerinden Silverlight uygulamamız
ulaşarak aşağıdaki gibi JavaScript içerisinden .NET metodumuzu
çalıştırabiliriz.

SL.Content.Page.Kare(2)

Hepinize kolay gelsin.