Makale Özeti

Bu makalemizde yavaş yavaş tanımaya başladığımız Silverlight ile sizlerle birlikte temel kavramlarını ve yapılarını kavrayarak edindiğimiz bu bilgiler yardımı ile ilk projemizi geliştireceğiz.

Makale

Microsoft Silverlight



Merhabalar;

Bu makalemizde yavaş yavaş tanımaya başladığımız Silverlight ile sizlerle birlikte temel kavramlarını ve yapılarını kavrayarak edindiğimiz bu bilgiler yardımı ile ilk projemizi geliştireceğiz.

Silverlight ile oluşturacağımız projelerde .net FrameWork 3.5 ile aramıza katılan web sayfalarında üç boyutlu görüntüleme ,yapılan daha dinamik olması Silverlight ile oluşturulmuş olan web sitelerini en azından tasarımı için günümüzde kusursuz bir şekle sokabiliyor.Bu işide uzun yıllardır kullanılan ,gerçekten çok güçlü bir yapı olan JavaScript ile sağlıyor.JavaScript 'in gücü web uygulamarında göz ardı edilemeyecek kadar kuvvetlidir.Silverlight 'ta bu gücü diğer rakiplerine karşı çok büyük bir güç olarak kullanmaktadır.Tabi unutulmaması gereken bir noktada platform bağımsız oluşudur.Bu özelliklerin hepsi Silverlight ile geliştirilen projeleri göze hoş gelen ve performans bakımından çok verimli projeler durumuna getirmektedir.

Daha önceki makalemizde temel olarak Silverlight 'a değinmiş ve hangi editörler yardımı ile geliştirebileceğimize göz atmıştık.Silverlight ile proje geliştirirken Visual Studio (VS.net) ve Expression Studio (ES) birlikte kullanmaya çalışacağız.Neden böyle bir teknik izleme gereksinimi duyduğumuza gelirse.İlk olarak VS.net ile ES arasındaki bariz fiyat farkları.Eğer kendimiz bireysel olarak bir şeyler geliştirmek istiyorsak.Silverlight konusunda VS.net 'e alternatif olabilecek ES kullanılabilir.ES 'yi kullanırken yazmamız gereken kodlar için ise çok kullanışlı ve ücretsiz olan C# Express Edition kullanılabilir.Bu uygulamada tasarımı ve arayüzü artık bizlere çok tanıdık geldiği için VS.net 2008 'i kullanacağız.Daha sonraki örneklerimizde ise ES yapısında bulunan bütün ürünler yardımıyla bu uygulamarı güçlendireceğiz.Unutmamamız gereken bir nokta var ki şu anda piyasada bulunan bütün grafik editörlerinden yalnızca Expression Design bize oluşturduğumuz grafikleri Silverlight projesi için dönüştürülmüş XAML projesi olarak sunuyor.

Elimizde hangi olanaklar olduğuna değinirsek.İlk olarak kullanabileceğimiz editör VisualStudio 2008 Beta2(VS 2008) olarak karşımıza çıkmaktadır.Bize sağladığı yenilikler ile .net2.0, .net3.0 ve .net3.5 desteği ile proje geliştirmemize olanak sağlamaktadır.Bu üçlü FrameWork desteği VS 2008 ile eski ve yeni nesil .net projeleri yapabilme olanağıda tanımaktadır.



Ek olarak VS2008 'in Silverlight projeleri oluştururken sağlayacağı en büyük kolaylık .net FrameWork 3.5 ile gelen JavaScript IntelliSense 'si olacaktır.Çünkü Silverlight ile uğraşırken javascript 'in uyguladığımız projelerin daha güçlü ve etkili olmasını sağlayacaktır.Bu sebeple Silverlight öğrenirken JavaScript veya EcmaScript bilgilerinizi yenilemenizi eğer bilmiyorsanız ise öğrenmenizi tavsiye ediyorum.Çünkü günümüz web teknolojilerinde ve gelecekte oluşturulacak olan web sistemlerinde JavaScript kullanımını ve yerini kuvvetlendirerek devam etmektedir.Ayrıca JavaScript 'i tam anlamıyla kavramanız durumunda web uygulamalarının yanında diğer platformlarda geliştireceğiniz projelerde de herhangi bir sorun yaşamadan mantıklı ve optimize kodlar oluşturabileceksiniz.Bu javaScript 'in bize sağlayacağı en güzel yönlerden biri olacaktır.

Bizim şu anda tercihimiz kafanızı karıştırmaması için Visual Studio 2008 Beta2 olacaktır.Eğer elinizde Visual Studio 2008 Beta2 yoksa verdiğim link yardımı ile bu güzel editöre ulaşabilirsiniz.

Silverlight 'a yavaş yavaş giriyoruz artık.Silverlight 'ın bir web projesi olduğunu ve temel yapısı ile HTML kodlar ile oluşturacağını kavrayabiliyoruz.Yukarıda da değindiğimiz kadarıyla Silverlight JavaScript ile güçlendirilmiş bir web projesidir.JavaScript gücünü kullanmamız için HTML sayfamıza oluşturduğumuz JavaScript 'leri çağırmamız gerekmektedir.Şimdi bunu nasıl yapabilieceğimizi inceleyecelim.Bu yöntemi uygularken tamamen mantığını anlayabilmemiz için hazır olarak oluşturulmuş form 'lar yardımı yerine elimizle oluşturmayı tercih edeceğiz.

Silverlight.js isimli boş bir js dosyası oluşturuyoruz.Bu işlemi yaparken temel HTML bilgimiz dışında ekstra tek bilgi oluşturduğumuz javaScript dosyasının ismini bilmek olacaktır.

<script type="text/javascript" src="Silverlight.js"></script>
Silverlight.js isimli JavaScript dosyasını HTML sayfamızda kullanabilmemiz için ekledik.

Şimdi ise createSilverlight.js isimli boş bir js dosyası oluşturuyoruz.

Bütün programlama sistemlerini oluştururken kesinlikle Türkçe karakter ve Türkçe isim kullanmamanızı öneriyorum.Çünkü Türkçe çalışan bir sistemde oluşturduğunuz bir program ingilizce ya da başka bir dilde ki sistemlerde bir çok sorun ile karşılaşmanıza sebep olabilmektedir.En büyük sorun ise grup çalışmalarınızda sizin oluşturduğunuz bölümünde Türkçe karekterler kullanmanız sebebi ile diğer grup arkadaşınızın projeyi derlerken dahi sorun yaşayabileceğini unutmadan projenizi oluşturmaya dikkat ediniz.

Oluşturmuş olduğumuz createSilverlight.js isimli javaScript 'imizi de HTML 'imize tanıtıyoruz.

<script type="text/javascript" src="createSilverlight.js"></script>
Silverlight.js 'de uyguladığımız işlemin aynısını uyguladık.

JavaScript 'lerimizi oluşturduk ve yaptıklarımızı çalıştırmak istediğimiz HTML sayfamıza tanıttık.Şimdi ise bu oluşturduğumuz kod parçacığına bir göz atalım.Bu arada eklediğim JavaScript dosyalarını <HEAD> tagının altına ekliyoruz.

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr">
<head>
<title>HTML Sayfasi...</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
</head>
<body>
</body>
</html>
JavaScript 'lerimiz eklendikten sonra oluşturduğumuz temel yapı bu şekilde oluşmuştur.

HTML 'imizin üzerinde host elementi yaratıp ilk değerini sıfırlıyoruz.

Oluşturacağımız HTML host elementi ,HTML dosya ile <BODY> arasına ekleyeceğiz.Bu sayede Silverlight 'ın nerede istenebileceğine olanak tanıyacağız.

<!--Silverlight 'ın nerede işlevselliğe girebileceğini belirtiyoruz...-->
<div id="mySilverlightPluginHost">
</div>

Artık yaptığımız uygulamanın işlevselliğide sağlanmış oldu.Kullandığınuz ID ile erişebilmemize olanak tanınabilmektedir.

İlk değer atayabileceğimiz bir yapı oluşturabilmemiz gerekmektedir.Daha önceki adımlarda oluşturduğumuz yapılara bu adımıda ekleyerek daha kuvvetli bir HTML+Script yapısı oluşturmuş olacağız.

script type="text/javascript">


//Daha önceki adımlarda oluşturduğumuz <DIV> elementini geri çağırıp kullanabilmemize olanak tanıyacaktır...
var parentElement =
document.getElementById("mySilverlightPluginHost");

// Bu fonksiyon Silverlight için bir işlev kazandıracak...
createMySilverlightPlugin();

</script>


Yukarıda oluşturduğumuz yalnızca tek bir işlevsellik (plug in) kazandırabilmektedir.Bu işlevselliği arttırabilmek için oluştuduğumuz fonksiyon(function) 'ı kullanabiliriz.

Yaptığımız bu işlemler sonucunda karşımıza nasıl bir HTML dosya oluştuğuna göz atalım.

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr">
<head>
<title>A Sample HTML page</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
</head>
<body>

<!--Silverlight 'ın nerede işlevselliğe girebileceğini belirtiyoruz...-->
<div id="mySilverlightPluginHost">
</div>
<script type="text/javascript">


//Daha önceki adımlarda oluşturduğumuz <DIV> elementini geri çağırıp kullanabilmemize olanak tanıyacaktır...
var parentElement =
document.getElementById("mySilverlightPluginHost");

// Bu fonksiyon Silverlight için bir işlev kazandıracak...
createMySilverlightPlugin();

</script>

</body>
</html>


Yaptığmız uygulamanın biraz daha kuvvetlendiği sizinde dikkatinizi çekmiştir.

Şimdi oluşturduğumuz fonksiyonları biraz daha somutlaştıralım.Daha önceden oluşturmuş olduğumuz createSilverlight.js dosyasının içerisine değerler atayalım.

function createMySilverlightPlugin()
{
Silverlight.createObject(
"myxaml.xaml",
parentElement,
"mySilverlightPlugin",
{
width:'300',

height:'300',

inplaceInstallPrompt:false,


background:'#D6D6D6',
isWindowless:'false',

framerate:'24',
version:'1.0'
},
{
onError:null,

onLoad:null

},
null);
}

Bu script 'in içeriğindeki parametreleri kendimiz şekillendirmekteyiz.Yaptığımız ayarlar ise oluşturduğumuz işlevsel yapı ile web sayfamızın enini ve boyunu ayarlayabilmekteyiz.Silverlight 'ın içeriğine XAML 'imizin değerlerinide ekleyebiliyoruz.

Şimdi ise HTML dosyamızı düzenleyip içeriğini oluşturma zamanımız gelmiştir.

İlk olarak oluşturduğumuz JavaScript dosyasında ki çağırdığımız "myxaml.xaml" oluşturmamız gerekiyor.Oluşturmadığımız taktirde ulaşmak isteyeceği dosyayı bulamayacaktır.

Boş olarak oluşturduğumuz "myxaml.xaml" 'mizin içeriğinide oluşturalım.

XAML 'mizin çalışabilmesi için CANVAS namespace 'inin içeriğinde bulunması gerekmektedir.

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</Canvas>

Eğer elimizle değilde herhangi bir editör yardımı ile oluşturduğumuz zaman bu yapı otomatik olarak oluşturulacaktır.

Yukarıdaki tabloda oluşturulmuş olan xmlns ve xmlns:x 'e değinmemiz gerekirse.Silverlight 'ta XAML projelerine başlarken xmlns: özniteliğini ve xmlns:x özniteliğini(attribute) oluşturmuş oluyoruz.İçeriğindeki değerler ise silverlight 'ın nameSpace 'ini oluşturmaktadır.Yaptığımız projelerin çalışması için çok önemlidir.

CANVAS 'ın altına oluşturmak istediğimiz bütün yapıları ekleyebiliyoruz.Biz ise basit bir örnek olması dolayısıyla bir elips ekliyoruz.

<Ellipse
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />

Elipsimizde oluşmuş oldu.Dikkat etmenizi isteceğim bir nokta var.Daha önceleri Web 'de kullanacağımız projelerde elipse gibi şekilleri oluşturmanın zorluğunu hepimiz yaşamışızdır.Silverlight ve .net framework 3.5 yardımı ile artık bu düşündüğümüzden bile daha kolay olmaktadır.

Artık elimizde bir elipsimizde var.Şimdi oluşturduğumuz yapıları bir araya getirmiş olarak göz atalım.Neler oluşturmuşuz incelemek istedim doğrusu.

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Ellipse
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

Ne kadar az işlem yaptığımıza dikkat etmişsinizdir.Şimdi ise örneğimizi derledğimiz zaman karşımıza nasıl bir sonuç çıkacağına bir bakalım.



Tebrikler!İlk SilverLight projemizi geliştirmiş olduk.Devamının gelmesi dileğiyle.Hepimizi kutluyoruz.

Tam düşündğümüz gibi bir sonuç.Gerçekten super...

Neler yaptığımızı toplamak gerekirse.Silverlight 'ın javaScript ile oldukça başaraılı çözümler verebildiğine değindik.Daha sonra HTML içerisinde javaScript 'i nasıl çağıracağımızı gördük.Bu çağırdığımız javaScript 'lerin içeriğine değerler atayarak temel yapımızı oluşturmul olduk.En sonunda ise çağırdığımız XAML dosyasının içerisinde oluşturmak istediğimiz şekli belirttik.Sonunda ise başarılı bir şekilde istediklerimiz yapılmış oldu.

Doğruyu söylemek gerekirse.Bizim yukarıda yaptığımız bir çok işlemi kullanacak olduğumuz editörler başarılı bir biçimde oluşturabilmektedir.Fakat biz temeli iyice kavrayabilmemiz için.Bu yapıyı tam olarak kavrayabilmemiz gerekmektedir.Çünkü editörler her zaman isteklerimize karşılık veremeyebilirler.Böyle durumlarda bizimde yaptıklarımıza hakim olmamız gerekmektedir.

Umarım yararlı olabilmiştir.

Bir sonraki makalemiz Silverlight 'ta CANVAS 'ın içeriği ve CANVAS 'tan yararlanılarak çizim ve renklendirme işlemleri olacaktır.

Silverlight ile iyi eğlenceler...

Turhal TEMIZER
turhal.temizer@yurticikargo.com
turhal@gmail.com