Merhabalar değerli BilişimDergi okurları,

Silverlight ile tanıştınız mı? Eğer tanışmadıysanız işte size başlangıç için bir patika...

Bu makalemizde, Visual Studio kullanarak ilk Silverlight projemizi oluşturacağız. Silverlight ile yeni tanışanlar için faydalı olacağını umuyorum. İsterseniz Expression Blend kullanarak da Silverlight projesi oluşturabilirsiniz tabii, tercih size kalmış. Fakat hangi editörü kullanırsanız kullanın, kullanacağınız kodlar aynıdır. Eğer ki tasarımcı iseniz Expression Blend kullanmanızı tavsiye ederim çünkü birçok özelliği pratik olarak kullanabiliyorsunuz. Yok, eğer “Beni işin kod kısmı ilgilendirir” diyorsanız elbette ki, Visual Studio 2010, bu iş için biçilmiş kaftan.

Uygulamaya geçmeden önce, izin verin, Silverlight hakkında kısaca bilgi vereyim.

Silverlight nedir, ne değildir?

Öncelikle şunu aklınızdan çıkarmayın: Silverlight herhangi bir teknolojiye rakip olsun diye çıkmamıştır. Bazılarının söylediği gibi “Flash’a rakip olsun diye” çıkarılmadı bu ceylan avcısı. Saatte 120 km hız yapan bir çitanın, sırtlanlarla işi olur mu? Koskoca  .Net Framework altyapısının neredeyse tamamını, kusursuz bir biçimde entegre kullanabilen bir teknolojiden bahsediyoruz. Bu teknoloji, geleceğin kod standartlarını Web ortamına aktarmayı planlayıp bu uğurda tonlarca sermaye harcanan bir Microsoft harikasıdır. Bu şekilde tanımlamak yanlış olmaz.

Silverlight’ı Flash’tan ayıran en temel özellik “kodlama”da ortaya çıkmaktadır. Bir .Net programcısı, Windows forms uygulaması geliştirirken kullandığı C# veya VB kodlarıyla aynı şekilde Silverlight uygulaması geliştirebilmektedir. Yani Flash’ta olduğu gibi ayrıca bir “ActionScript” dili öğrenmenize gerek yok. Bu da size inanılmaz bir esneklik sağlıyor.

Silverlight’ın gücü burda ortaya çıkıyor işte. Yani .Net kütüphanelerinin gücünü aynen kullanabiliyorsunuz. Eğer ki, C# ve Actionscript’i kıyaslama cesaretiniz varsa, hadi buyurun; Silverlight ile Flash’ı kıyaslayın!

Yanlış anlaşılmasın; Silverlight’ı methetmek değildir amacım. Bu açıklamayı yapma gereği hissettim çünkü işin özünü bilmeyen arkadaşlar “neyi, ne amaçla” kullandığından habersiz olacaktır. Yani gafil avlanacaklardır. Bunu söylememin sebebi ise geçenlerde bir arkadaşın “Ben Flash biliyorum, Silverlight kullanmaya ne gerek var?” demesiydi. Belli ki, bu arkadaş henüz Redmond’da neler döndüğünü bilmiyor!

Kısacası şunu demeye çalışıyorum: Eğer ki, Microsoft bir teknolojiyi üstüne basa basa, seminerlerde bağıra bağıra bize aktarmaya çalışıyorsa bilin ki; bu sıradan bir teknoloji değildir ve basit bir kıyaslamaya tabi tutmak saçmalık olur.

Bu kadar açıklama yapmak yeterli sanırım. Şimdi biraz gaza basalım ve pratik olarak bir Silverlight uygulaması geliştirmenin ne kadar kolay olduğunu görelim.

Öncelikle Visual Studio 2010’u açıyoruz. (Siz Professional veya Ultimate kullanıyor olabilirsiniz, fark etmez; ben bu makaleyi yazarken Visual Web Developer 2010 Express Edition kullandım.)

Ve karşımıza Start Page başlangıç ekranı gelir.

1. bölümde yeni proje oluşturabilir veya var olan bir projeyi açabiliriz.

2. bölümde en son açılan projelerin bir listesi görünür. Böylece en son işlem yaptığınız projeye hızlı bir şekilde ulaşabilirsiniz.

3. bölümde ise RSS kayıtları gelir ekrana. Burada isterseniz RSS’yi iptal edebilirsiniz. Bunu yaptığınızda bu bölüme “Enable RSS Feed” isimli bir buton gelir. Bu buton ile tekrar aktif hale getirebilirsiniz.

Şimdi New Project bağlantısına tıklıyoruz ya da menülerden File > New > Project’i seçiyoruz. Karşımıza yeni proje oluşturma penceresi gelir.

Karşımıza gelen ekranda “Host the Silverlight Application in a new Web site” seçeneğinin seçili olmasına dikkat edin. Eğer bu seçenek seçili ise projenize, Silverlight objesinin çalıştırılabileceği bir test Web sitesi eklenir. Böylece Silverlight çalıştırabilmek için gerekli ayarlamaları Visual Studio, sizin yerinize otomatik olarak yapacaktır.

New Web Project name kısmında, oluşturulacak olan Web projesinin ismi yazılır. Hemen altında ise New Web project type kısmı bulunmaktadır. Bu kısımda ise çeşitli ASP.NET proje tipleri bulunur. Aşağıda gördüğünüz gibi biz ASP.NET Web Application Project’i seçiyoruz.

En altta bulunan Silverlight Version kısmında ise bilgisayarımızda kurulu olan Silverlight sürümleri listelenir. Biz, şu anda Silverlight 4 ile çalışıyoruz ama isterseniz önceki sürüm olan 3.0 ile de çalışabilirsiniz.

Enable .NET RIA Services seçeneğini seçerek RIA hizmetlerini aktif hale getirebilirsiniz. Biz, şimdilik RIA servislerini kullanmadığımız için burayı işaretlemiyoruz. OK diyoruz. İlk Silverlight projemiz ekrana gelecektir.

Kısaca değinecek olursam XAML, oluşturduğumuz projeye ait (Windows forms, WPF veya Silverlight projesi olabilir) tasarımın markup dilidir. Yani artık HTML mantığında olduğu gibi görsel tasarımı işaretçi dili ile kodlayabiliyoruz. XAML, ilk başta size biraz gereksiz ve zor gelebilir ama eminim ki XAML’i öğrendikçe daha çok sevecek ve ne kadar faydalı olduğunu daha iyi anlayacaksınız.

XAML hakkında detaylı bilgi vermeyeceğim ama kodlama mantığına kısaca değinmek istiyorum.

XAML yapısına baktığımızda söz dizimi açısından XML yapısı gibi olduğunu görürüz. XML yapısını bilenler XAML öğrenmekte zorlanmayacaklardır. Kodlarımıza baktığımızda ile başladığını görürüz. Silverlight uygulamalarının kök elementi UserControl olarak adlandırılır. Eğer bir WPF uygulaması oluşturursanız bu Windows tarafında , Web tarafında ise kök elementi ile başlayacaktır. Kodlarımızda bir takım tanımlamalar mevcut. Bnular, XAML söz dizimi yapısı için gerekli tanımlamalar. Bir de elementi görüyorsunuz. Bu bir layout kontrolüdür. Bu kontrole ait özellikleri daha sonraki makalelerimizde inceleyeceğiz. Uygulamaya eklediğiniz her kontrol, siz değiştirmediğiniz sürece Grid içierisinde yer alacaktır.

Hemen sol tarafta, Toolboxk, alışık olduğumuz yerinde bizi beklemektedir. Burada Silverlight projesinde kullanabileceğimiz kontroller mevcut.  Sağ tarafta ise Properties penceresi bulunur. Bu pencerede, kontrollere ait özellikleri görsel olarak değiştirebilirsiniz. Önceki sürümlerden farklı olarak, properties penceresi biraz daha görsel özelliklere sahip olarak karşımıza gelmektedir.

Sağ tarafta projemize ait dosyaların bulunduğu Solution Explorer penceresini görebilirsiniz.

Silverlight ile yeni tanışanların ne düşündüğünü tahmin edebiliyorum. (: Çünkü farklı bir yapı ile karşı karşıyasınız. Öncelikle, alışık olduğumuzun aksine 2 proje tipi var karşımızda:

1.SilverlightApplication

2.SilverlightApplication.Web 

Daha önce Flash veya Java Aplet kullananlar bu yapıya yabancı değiller. Elimizde bir object nesnesi bulunur ve bu object’in gömülü olduğu bir Web projesi bulunur. İşte, Silverlight da aynı mantıkla çalışmaktadır. Uygulamamız ayrı bir object olarak ele alınır ve uygulamamızın gömülü olduğu Web projesi ayrı ele alınır. Visual Studio ile yeni proje oluştururken hatırlarsanız, aşağıdaki ekranda görülen seçeneği seçmiştik. Bu sayede, Visual Studio bize Silverlight objemizin gömüleceği bir Web projesini de otomatik oluşturmuştu.

Eğer yukardaki başlangıç penceresinde “Host the Silverlight Application in a new Web site” seçeneğini seçmeseydik, aşağıdaki gibi bir solution explorer penceresi gelecekti ekrana. Bu pencerede sadece Silverlight uygulamamıza ait dosyalar görünecekti. Herhangi bir Web sayfası oluşturulmayacaktı.

Şimdi, sanırım aradaki farkı daha iyi anladınız.

Silverlight Projemize Ait Dosyalar

Az önce de bahsettiğimiz gibi, Silverlight uygulamamıza ait dosyalar ve Web sayfasına ait dosyalar aynı pencerede gelmişti.

• App.xaml: Bu dosya, Silverlight uygulamamıza ait birtakım global özelliklerin tutulduğu dosya olacaktır. Tasarım görüntüsü yoktur.

• App.xaml.cs: Bu dosya, App.xaml dosyasına ait C# kodlarının tutulduğu dosyadır. Dosyaya baktığınızda kendi içinde Application_Startup() ve Application_Exit() metotlarına sahip olduğunu görürsünüz. Bu metotlar ile uygulama başladığında ve kapatıldığında birtakım işlemler yapabilirsiniz. Örneğin; uygulama başladığında “Merhaba” uygulama kapatıldığında “Hoşçakalın” mesajları vermek istiyorsanız bu metotlara kod yazmanız yeterli olacaktır.

• MainPage.xaml: Bizim asıl Silverlight sayfamız. Tasarımı bu sayfa üzerinde yapacağız.

• MainPage.xaml.cs: Sayfamıza ait kodların bulunduğu C# dosyası.

Not: Eğer projedeki herhangi bir pencereyi göremiyorsanız View menüsünden Other Windows alt menüsüyle erişebilirsiniz.

Merhaba Silverlight Uygulaması

Pencereler hakkında şimdilik bu kadar bilgi sizin için yeterli olacaktır. İlerde yeri geldiğince Visual Studio tasarım araçları ile ilgili ipuçları vereceğim.

Şimdi ilk uygulamamızı gerçekleştirelim.

Öncelikle, Grid üzerine bir buton kontrolü ekleyelim ve Properties penceresinde, General tabı altında, Content özelliğini TIKLA olarak değiştirelim.

Not: Yeni versiyonda artık kontrollerin Text özellikleri Content olarak değiştirildi. Yalnız gibi metin tabanlı kontroller yine Text özelliği kullanmaktadır.

Şimdi butonumuza ait Click olayını tetiklemek için, butonu çift tıklayın ya da Events sekmesinde Click olayını seçin.

Karşımıza MainPage.xaml.cs dosyası gelecektir. Button_click() eventi içine aşağıdaki kodu yazalım.

Uygulamamızı çalıştıralım. Bunun için farklı yollar mevcut

Uygulamayı çalıştırıp butona bastığımızda, ekrana “Merhaba Silverlight” mesajı gelecektir.

Şimdi, uygulamamızı biraz daha geliştirelim. Sayfamıza bir adet TextBox bir adet ListBox ekleyin.

Amacımız; Textbox içindeki veriyi kontrol edip eğer boş değilse ListBox’a eklemek.

Aşağıdaki formu tasarlayın ve butonumuzun Click olayını aşağıdaki gibi düzenleyin.

Evet, kodumuz güzel bir şekilde çalışıyor. (:

Şimdilik bu kadar. Umarım yeni başlayanlar için faydalı olmuştur.

Bir sonraki makalede görüşmek dileğiyle.

Silverlight ile kalın.