Silverlight 1.1 ile Bir Uygulama
Merhaba, bu yazımda silverlight 1.1 ile sayfada mesaj yazdıran bir uygulama geliştireceğiz.
Silverlight 1.1 silverlight 1.0 dan oldukça farklıdır.
Öncelikle 1.0 versiyonu javascript kod arayüzlerini kullanırken, 1.1 versiyonu, kod katmanında daha önceden kullandığımız c#, vb.net, rubby gibi programlama dillerini kullanabiliyor.
Alt yapısında tabii ki javascript kodları var ancak biz geliştirici olarak onlarla doğrudan muhatap olmuyoruz. Bu yapısıyla, versiyon 1.1 bizim beklediğimiz kolay kullanım özelliklerine sahip, bir sürü javascript koduyla uğraşmıyoruz. Uygulamanın kod katmanını bildiğimiz nesne yönelimli dillerle yazabiliyoruz.
Bir silverlight 1.1 projesi geliştirebilmek için aşağıdaki birimlere ihtiyacımız olacak;
Silverlight V1.1 Alpha
Visual Studio 2008 Beta 2 (.NET Framework 3.5)
Silverlight Tools Alpha for Visual Studio 2008 Beta 2
Expression Blend 2 Preview
Bunların hepsi www.silverliht.net adresinde mevcut. Bu bileşenlerden Silverlight V1.1 ve .NET Framework 3.5 zorunludur. Visual Studio 2008 projeyi derleyecek alt yapıyı sunar, Framework 3.5 ı yükler ve kodlarımızı rahatça geliştirecek ortamı sunar. Kod tamamlama özelliği ile hata olasılığını minimuma indirger.
Expression Blend 2 ise XAML biçimlerinin oluşturulması için editoryal bir ortam sunar. Fakat zorunlu değildir.
Bütün bu bileşenleri yükledikten sonra sıra projemizi oluşturmaya geldi.
Silverlight’ın Temel Bileşenleri
Bir silverlight projesi temel olarak iki bileşenden oluşur. Bir XAML dosyası ve Silverlight.js dosyası.
XAML dosyası kullanıcıya gözüken arabirimi oluşturur. Bir çeşit XML dosyasıdır ve kendine özel ifadeleri bulunur. Şekiller, mesajlar, animasyonlar hep bu dosya sayesinde oluşturulur.
Silverlight.js dosyasıysa silverlight ın temel bileşeni olup, silverlight ın yüklenmesi ve kontrolüyle ilgilidir. Bu dosyanın detayları bizi ilgilendirmeyecek, o sadece silverlight uygulamamızın çalışması için projemizde bulunması gereken bir dosyadır.
Bir mesajımız, çizimimiz veya görüntümüz olduğunda bunu XAML dosyası vasıtasıyla yapacağız.
Silverlight uygulamaları bildiğimiz html (veya htm) web sayfaları üzerinde çalışabilir. Yaptığımız uygulamayı görüntülemek için html sayfaları kullanabiliriz.
Bütün bu anlattıklarımdan sonra Visual Studio 2008 de yeni bir silverlight projesi oluşturulduğunda;
Proje yapısı aşağıdaki gibi olur:
Burada da açıkça gözüktüğü gibi, bir Adet XAML, bir Adet Silverlight.js ve test için bir adet html dosyası oluşturulmuştur.
Dosyalardan html’e bağlı olan bir javascript dosyası vardır ki, bu da html sayfasına silverlight uygulamasını bağlamak/yüklemek için oluşturulur. Aynı şekilde XAML dosyasının da bir c# dan oluşan bir “code behind” dosyası oluşturulur.
Bunun da amacı, olay ve yordamları programatik olarak oluşturmaktır. Tekrar etmek gerekirse XAML ve Silverlight.js dosyaları silverlight uygulamamızın temel dosyalarıdır. Html dosyası da bunların test edildiği ve/veya kullanıldığı alandır.
Uygulamamızı Oluşturalım
Bu haliyle Visual Studio 2008 bize bütün gereken bileşenleri sunuyor. Bizim bütün yapmamız gereken uygulamamızı geliştirmek. Ve bu örnekte biz sayfaya “merhaba dünya” yazdıracağız.
Bunun için XAML dosyamızı açıp
<TextBlock x:Name="Benim_metnim" FontSize="40" FontFamily="Arial"/>
İfadesini yazalım. Bu bir xaml tag’ıdır ve sayfaya mesaj yazdırır. Bu mesaj
<TextBlock x:Name="Benim_metnim" Text="Merhaba Dünya3" FontSize="40" FontFamily="Arial"/>
olduğu gibi doğrudan tag’ın içinden yazdırılabileceği gibi, “code behind” olarak Page.xaml.cs den de yazdırılabilir.
Biz örneğimizde son yöntemi seçeceğiz ve Page.xaml.cs dosyasında şöyle bir kod kullanacağız:
Burada “Benim_metnim” ile isimlendirilen metin tag’ına “merhaba dünya” mesajımız kod taraflı atanıyor. Buradaki kod, projemiz derlendiğinde(çalıştırıldığında) bir dll için de saklanacak.
Bu dll vasıtasıyla sayfada mesajımız yayınlanacak. Peki XAML dosyamız hangi dll’e danışacağını nereden biliyor?
Bu sorunun cevabı yine xaml dosyasının içinde saklıdır. Başlıktaki bildirimlere dikkat ederseniz
x:Class="merhaba.Page;assembly=ClientBin/merhaba.dll"
şeklinde bir ifade bulunur. Sanırım sorumuzun cevabı gayet açık. Merhaba.dll i mesajımızın xaml dosyamızdaki kod kısmını derlenmiş olarak saklar. Diğer bir ifadeyle xaml dosyamıza ”seninle ilgili bir şeyler ClientBin/merhaba.dll dosyasında mevcut, oraya bir bakıver” der.
Sıra geldi uygulamamızı test etmeye. Aslında bu haliyle bir silverlight uygulaması hazırdır. Ancak onun kendini göstermesi gereken bir alana ihtiyaç vardır. O alanda bir web sayfasıdır. Bildiğiniz htm veya html sayfaları. Bu uygulama, web sayfasına “bağlanarak” kendini görünür kılar.
Şimdi bunun nasıl olduğuna bir bakalım. Hâlihazırda bu bağlantıları bizim için Visual Studio 2008 yapmıştır şimdi bu ifadelerin neler olduğuna bakalım.
Öncelikli olarak TestPage.html sayfamıza aynı isimde bir javascript sayfası bağlandığını görürüz.
Bu html sayfamızda createSilverlight(); metodunun çağırdığı ve xaml dosyamızı sayfamıza bağlayan/yükleyen javascript dosyasıdır:
Hangi XAML dosyasının yükleneceği
Şeklinde TestPage.html.js dosyasında bildirilir.
Bunun haricinde bir de silverlight.js isimli bir javascript dosyası daha html sayfamıza bağlanmıştır. Bu dosya makinede silverlight’ın kontrolü ve çalıştırılmasıyla ilgilidir.
Bu iki javascript dosyası html sayfamızın “head” Tagları arasında tanımlanmıştır:
Evet bütün bunları yaptıktan sonra sıra geldi projemizi derlemeye bunun için menüden “build” i tıklamalıyız veya ctrl + F5 ile projeyi çalıştırmalıyız. Sonuçta proje derlendikten sonra html dosyamızı çift tıklayarak çalıştırmamız yeterli:
xaml.cs dosyamızdaki kodların derlenerek çalıştığını, bu dosyadaki mesajı değiştirerek ve projemizi derlemeden sayfayı yeniden yükleyerek anlayabiliriz. Mesajın değişmediğini gözlemleyeceksiniz.