Her sene 1 Nisan MVP'liğimin bittiği gün :) Şaka gibi değil mi? :) Biliyorsunuz MVP ünvanı her seferinde senelik olan Microsoft tarafından verilen bir ünvan bu nedenle bir bitiş tarihi var ve bu nedenle de her sene yenilenmesi gerekiyor :) Eh benimki bugün yenilendi. 2010 yılında da "Silverlight MVP"si olarak var olmaya devam edeceğim. Bu gaz ile önümüzdeki dönemde blogda ekstra hareketlilik göreceğinizden de emin olabilirsiniz :)

Hepinize bu dönemde gösterdiğiniz destek için ayrıca çok teşekkürler. Bilgiyi paylaşmak ancak paylaşabileceğiniz insanlar oldukça zevkli ve güzel. 2010'da da daha yapacak çok işimiz var ;) ve güzel sürprizlerim var ;)

Görüşmek üzere.

İki gündür Kahramanmaraş'tayım :) Evet dondurması ve acısı ile ünlü Kahramanmaraş'tan bahsediyorum. Tabi maalesef acı miktarı konusunda hala benim istediğim acı biberi bulamadık o ayrı :) Pul biberlerini avuç avuç tadarkenki halimi komik bulanlar bile oldu. Her neyse, konumuza geri dönelim. İki gündür Kahramanmaraş'tayım çünkü Sütçü İmam Üniversitesi desteği ile Kahramanmaraş Ticaret Meslek Lisesi öncülüğünde düzenlenen bir seminer serisine konuşmacı oldum. Şehre gittiğimde epey şaşırdığımı itiraf etmeliyim :) Neden olduğunu sanırım aşağıdaki fotoğraf açıklıyordur.

Bu şaşkınlık sonrasında sahneye çıktığım ilk günde Kahramanmaraş Ticaret Meslek Lisesi'ndeydim. Öğrencilerden gelen sorular ayrı ayrı şaşkınlık seansları yaşamama neden oldu. İlk soruyu çok net hatırlıyorum :) "Visual Studio 2010 ile bir web projesi yarattığımızda Web.Config neden boş geliyor?" şeklindeki soru bir an afallamama neden oldu. Karşımda Visual Studio 2010'u denemiş, web sitesi yaratıp Web.Configi bilerek içindeki değişikliği yakalamış bir lise öğrencisi var dikkatinizi çekiyorum! Kesinlikle "Efsanevi hareketler bunlar". Bu öğrencileri yetiştiren ve organizasyona süper faydası olan "kahramanlarıma", sevgili hocalarımız Çetin Çevik, Yalçın Ateş, Serdar Temiz'e buradan binlerce teşekkür gönderiyorum!

Kahramanmaraş Ticaret Meslek Lisesi

İlk günümüzün ilk yarısını Meslek Lisesi'ndeki öğrencilerimizle geçirdik. Sonrasında ben biraz daha derinlere dalarak hocalarımıza da bir anlatımda bulundum. Öğrencilerimiz üzülmesin darılmasın ama onlar geçici :) hocalarımız kalıcı. Bu gibi aktivitelere hocalarımızın katılımı benim için ÇOK değerli çünkü bilginin daha geniş kitlelere dağılmasını sağlayacak kişiler hocalarımız. İkinci gün Sütçü İmam Üniversitesi'nde geçtik. Sevgili Yrd. Doç. Dr. Mehmet Tekerek hocamıza ve üniversite yönetimindeki tüm dostlara desteklerinden dolayı ayrıca çok teşekkürler. Her iki gün de benim için çok zevkli ve verimli geçti.

Tekrar aktiviteye katılan herkese milyonlarca teşekkürler! Görüşmek üzere! ;)

DVD veya CD arayüzleri hala bilgisayar dünyasında ciddi bir yere sahip. İçeriğin paylaşımı adında internet ciddi bir yol almış olsa da hala CD ve DVD medyalarını kullanarak içeriğin dağıtımı bazı senaryolarda çok daha işlevsel olabiliyor. Bu gibi durumlarda doğal olarak bir arayüz ile söz konusu içeriği bir CD veya DVD içerisinde sunmak gerekiyor. Peki bu arayüzü geliştirmek için hangi teknolojileri kullanabiliriz?

Gelin beraberce sıralayalım;

HTML - Pufff!
Flash - ActionScript? Pufff!
WPF - .NET Framework yükletmek? Puff!
Silverlight - Oley! İşte bu!

Şaka bir yana :) aslında bir CD veya DVD arayüzü geliştirirken ihtiyacımız olan şey hem arayüz içerisinde her tür data işlemini yapabilimek hem de güzel bir arayüz tasarlayabilmektir. Varsayalım bir ürün kataloğu yapıyorsunuz, büyük ihtimal ile söz konusu ürünler arasında arayüzde arama da yapılabilmelidir. İşte ufak da olsa bir programlama noktası karşımızda. Olabildiğince rahat programlamak ve bildiğimiz bir dili kullanmak önemli. HTML ile JavaScript veya Flash ile ActionScript bir .NET developer için çok da ferah bir gelecek vaadetmeyecektir. Ayrıca HTML ile zaten güzel bir arayüz, zengin bir kullanıcı deneyimi sağlamak da pek mümkün değil.

Alternatiflerden bir diğeri WPF olabilir ve aslında çok da güzel olur. Fakat bu sefer de .NET Framework gereksinimi ile karşı karşıya kalıyoruz. Eh hadi DVD'nin içine koyalım ama insanların bir DVD arayüzünü görebilmek için .NET Framework kurup (en az 5dk) makinelerine restart atacaklarından emin misiniz?

Tüm bu senaryonda en güzeli Silverlight! Hem bildiğimiz VB, C# hem Expression Blend ile süper kullanıcı deneyimi hem de 4MB Runtime ve 5 saniye yükleme süresi. Hem MAC desteği de var! Eh gönül daha ne ister?

Tamam da şimdi tarayıcıda açtırmak da pek hoş olmuyor!

Kesinlikle! Bir CD veya DVD arayüzünün tarayıcı içerisinde açılması benim en uyuz olduğum noktalardan birisidir özünde. Neden mi? Çünkü ister istemez bir web sitesi hissiyatı yaratıyorsunuz ve en azından bende "çok uğraşılmamış" efekti oluşturuyor. Yani "adamlar web sitesi yapıp koymuş DVD'ye!" gibi abuk bir yorumun gelmesi olasılığı ciddi yüksek. O nedenle tarayıcıdan kurtulmamız gerek.

HTML Application = HTA!

HTA'larla ilk tanışdığımda "İşte bu" demiştim :) Sanırım SQL 2000'in yükleme CD'sinin arayüzünde görmüştüm. Arayüz ilgimi çekmişti çünkü bir tarayıcı gibi içinde HTML olduğunu hissetmiş fakat ortada bir tarayıcı görmemenin de şaşkınlığını yaşamıştım. Sonra biraz CD'yi karıştırınca HTA'larla tanıştım. HTA aslında HTML vs bir scripting dili ile yazılabilir uygulamalar şeklinde tanımlanabilir. Bu uygulamalar "Microsoft HTML Applicatio Host" adında özel bir uygulama tarafından Windows içerisinde host edilir. Arka planda Internet Explorer kullanılır fakat kullanıcılar bunu görmez. HTA uzantılı bir dosya rahatlıkla Notepad ile açılabilen birer HTML dosyasıdır aslında.

[HTA]

<HTML>

  <head>

  <link href="img/styles.css" type="text/css" rel="stylesheet" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <TITLE>

      Internet Explorer 8 -DVD

    </TITLE>

 

    <HTA:APPLICATION

     APPLICATIONNAME="IE8DVD" 

     MAXIMIZEBUTTON="no"

     MINIMIZEBUTTON="no"

     SINGLEINSTANCE="yes"

     ICON="setup.ico"

     SCROLL="no" />

  </HEAD>

 

<body style="margin:0px;">

 

    <script for="window" event="onload">

   window.resizeTo(820,640);

   window.moveTo((screen.width - 820) / 2, (screen.height - 640) / 2);

</script>

</body>

</html>

Yukarıda gördüğünüz kod basit bir HTA dosyasının içeriği. Aslında içerisinde pek birşey yok. İlk anlamamız gereken şey aslında bir HTML ile çalışıyor olduğumuz. Tabi biz arayüzü oluşturmak için HTML değil Silverlight kullanacağız. Önemli olan ilk şey tabi ki dokümanın TITLE kısmını ayarlamak çünkü bu uygulamanızın açılan penceresinin başlığı olacak. Aşağıda gördükleriniz ise uygulama parametreleri.

[HTA]

    <HTA:APPLICATION

     APPLICATIONNAME="IE8DVD" 

     MAXIMIZEBUTTON="no"

     MINIMIZEBUTTON="no"

     SINGLEINSTANCE="yes"

     ICON="setup.ico"

     SCROLL="no" />

Uygulamanın açılacağı pencerede pencereyi büyütme, küçültme vs gibi düğmeleri isteyip istemediğinizi belirtebilir hatta uygulamanın tek oturumunun olmasını da yukarıdaki parametreler ile sağlayabilirsiniz. Uygulama ikonunu da ayarladıktan sonra önemli noktalardan biri Scroll özelliği NO şeklinde set etmek. Malum biz bu HTML içerisinde arayüz olarak Silverlight koyacağımız için zaten gerekli scroll işlemlerini de SL içerisinde halledebiliriz.

[HTA]

    <script for="window" event="onload">

   window.resizeTo(820,640);

   window.moveTo((screen.width - 820) / 2, (screen.height - 640) / 2);

</script>

Yukarda basit bir JavaScript kodu görüyorsunuz. Bu kod uygulamanızın penceresinin boyutunu ayarlayacağı gibi pencerenin de ekranın tam ortasında gözükmesini sağlayacaktır. HTA'lar içerisinde hem JavaScript hem VBScript kullanabilirsiniz. Her script ait olduğu nesneye for özelliği ve ait olduğu nesnenin hangi event'ını dinleyeceğine de event parametresi ile bağlanır.

Bu noktadan sonra tabi ki sizin ilk olarak Silverlight uygulamanızı hazırlamanız gerek. Arayüz olarak kullanılacak Silverlight uygulaması hazırlandıktan sonra bu HTA içerisine uygun şekilde yerleştirilebilmesi çok önemli.

[HTA]

<HTML>

  <head>

  <link href="img/styles.css" type="text/css" rel="stylesheet" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <TITLE>

      Internet Explorer 8 -DVD

    </TITLE>

 

    <HTA:APPLICATION

     APPLICATIONNAME="IE8DVD" 

     MAXIMIZEBUTTON="no"

     MINIMIZEBUTTON="no"

     SINGLEINSTANCE="yes"

     ICON="setup.ico"

     SCROLL="no" />

  </HEAD>

 

<body style="margin:0px;">

    <div id="silverlightControlHost">

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

            <param name="source" value="ClientBin/Interface.xap"/>

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

            <param name="minRuntimeVersion" value="2.0.31005.0" />

            <param name="autoUpgrade" value="true" />

            <img style="cursor:pointer;" ID="SLInstall" border="0" src="images/install.jpg" />

        </object>

    </div>

 

    <script for="window" event="onload">

   window.resizeTo(820,640);

   window.moveTo((screen.width - 820) / 2, (screen.height - 640) / 2);

</script>

     <SCRIPT FOR="SLInstall" EVENT="onclick" LANGUAGE="VBScript">

      Dim objShell

      Dim lngReturn

 

      on error resume next

 

      set objShell = CreateObject( "WScript.Shell" )

 

        lngReturn = objShell.Run ("Silverlight.2.0.exe", 4, 1)

 

      set objShell = Nothing

      document.execCommand("Refresh")

 

    </SCRIPT>

</body>

</html>

İşte esas noktaya geldik. Yukarı gördüğünüz OBJET tagları klasik bir SL uygulamasının bir HTML sayfaya yerleştirildiği taglardan farklı değil. Bir tek minik fark var o da OBJECT tagları içindeki HTML kodu! Hatırlarsanız tarayıcılar eğer OBJECT taglarını render edemezse içlerindeki HTML'i gösteriyorlardı. Bu gibi bir durumda Silverlight hedef makinede yüklü değilse bu demektir de tarayıcı OBJECT taglarını render edemeyecek bir OBJECT içerisindeki HTML'i kullanıcıya gösterecek.

[HTML]

      <img style="cursor:pointer;" ID="SLInstall" border="0" src="images/install.jpg" />

Yukarıdaki şekilde güzel bir resim Silverlight yüklü değilken gösterilecek resim olarak seçilebilir. Tabi bu resmin tasarımında kullanıcıya uygun mesajı bir metin olarak göstermeniz şart. Diğer yandan bu resim nesnesinin fare ile üzerine geldindiğinde el işareti gösterilmesi için uygun CSS'in kullanılması da gerekiyor. Son olarak bu IMG'ye bir de ID veriyoruz çünkü bu resme tıklandığında Silverlight Runtime yüklemesini başlatmalıyız!

[VBScript]

     <SCRIPT FOR="SLInstall" EVENT="onclick" LANGUAGE="VBScript">

      Dim objShell

      Dim lngReturn

 

      on error resume next

 

      set objShell = CreateObject( "WScript.Shell" )

 

        lngReturn = objShell.Run ("Silverlight.2.0.exe", 4, 1)

 

      set objShell = Nothing

      document.execCommand("Refresh")

 

    </SCRIPT>

Yukarıda bir VBScript kodu görüyorsunuz. Silverlight Runtime yüklemesine ait EXE dosyasının HTA ile aynı klasöre koyduktan sonra uygun zamanda yüklemeyi başlatmak şart. Bunun için bir Shell nesnesi yaratarak yüklemeyi başlatabiliyoruz. Yükleme bitince de sayfaya Refresh atıyoruz böylece kullanıcı yüklemeyi yaptıktan sonra ekranı kapatıp açmadan hemen arayüzü görebiliyor. Bu scriptin FOR ve EVENT özelliklerine bakarsanız bizim bir önceki adımda yarattığımız IMG nesnesinin onclick durumunda çalışacağını görebilirsiniz.

Diskten birşey çalıştırmak istersek?

Biliyorsunuz Silverlight'ın çalıştığı makinedeki diske erişimi yok. Bunun nedeni Silverlight'ın çalıştığı yer olan tarayıcı içerisindeki alandan yani bir web sitesinden de hedef makinedeki diske ulaşamıyor olmamız. HTA'lar bu konuda biraz farklılar. HTA'larda rahatlıkla diske erişebilirsiniz. Aslında bir önceki örnekte biz bu işi zaten yapmadık mı? HTA içerisinden gidip Silverlight Runtime'ı yüklemek demek harici bir EXE'yi çalıştırmak demek değil mi? Aynen öyle. Peki biz bunu Silverlight içerisinden nasıl yapabiliriz?

Silverlight içerisinde çıkıp VBScript'e ulaşıp, parametre göndererek VBScript ile de diske erişebiliriz.

[VBScript]

     <SCRIPT LANGUAGE="VBScript">

             sub Getir(byval address)

      Dim objShell

      Dim lngReturn

 

      on error resume next

 

      set objShell = CreateObject( "WScript.Shell" )

 

        lngReturn = objShell.Run (address, 4, 1)

 

      set objShell = Nothing

            end sub

    </SCRIPT>

Yukarıda gördüğünüz VBScript metodu tek bir parametre alarak Shell nesnesi yaratıp parametreden gelen adresi diskte çalıştırmaya çalışıyor. Bu durumda biz bu metodu Silverlight tarafından çağırıp uygun parametreyi verebilirsek işlem tamamlanmış demektir.

[VB]

    Private Sub btnSource_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnSource.Click

        System.Windows.Browser.HtmlPage.Window.Invoke("Getir", New String("samples/Hedehodo.exe"))

    End Sub

İşte bu kadar basit. Silverlight'tan DOM'a çıkarak Getir adındaki metodumuzu çalıştırıp bir de String parametre gönderiyoruz. Söz konusu String parametre aslında çalıştırmak istediğimiz uygulamanın HTA dosyasının bulunduğu yere göre relative Uri'sini içeriyor. Böylece bu parametre VBScript'e aktarılacak, oradan da Shell üzerinden çalıştırılabilecek.

Süper değil mi?

Şimdi yapabileceklerinizi bir düşünün :) Silverlight uygulaması içerisinde yapabildiğiniz herşey bir anda bir DVD arayüzüne dönüştürülebiliyor. SaveFileDialog, OpenFileDialog, Socket bağlantılar!, Desktop moduna geçip makineye anında yükleme yapabilmek! ve daha bir çok Silverlight özelliğini bir anda kullanabilir hale geliyorsunuz! Bu gerçekten muhteşem!

Geçen yıl bugünlerde sizlerle ASP.NET alanında MVP olmamın müjdesini paylaşmıştım. Bu süreçte şöyle kabaca baktığımda son bir yılda 300'ü aşkın blogpost, 100'ü aşkın teknik makale ile bildiklerimi paylaşmaya çalışırken seminerler ile de hesabıma göre 15.000 kişiye ulaşmışım. İtiraf etmek gerekirse "önümüzde yılda daha fazlasını yapacağım" gibi bir iddiada bulunamam :) ama aynı tempo devam edecek diyebilirim.

Silverlight MVP'si oldum!

Bu yazıyı yazmamın esas nedeni sanırım belli oldu :) 2009 yılında da MVP ödülüne layık görüldüm. Bu sefer ödülü aldığım alan Silverlight oldu. Biraz şanslı bir olarak dünyadaki ilk Silverlight MVP'lerindenim çünkü bu uzmanlık alanı daha yeni açıldı :) Ortadoğu-Afrika bölgesinde ise en azından bu dönemde aldığım duyumlara göre tek Silverlight MVP'si olmuşum. Bu durum özellikle bölgede Türkiye'nin önderliği adına, kendi kendime mutlu olduğum bir detay oldu diyebilirim.

Hepinize bu süreçte gösterdiğiniz destek için çok teşekkür ediyorum.

Yeni yılda hayatınızı kolaylaştırma yolunda iddialıyım :) Bu sefer de benim işimi çok kolaylaştıran bir aracı sizlerle paylaşacağım.

Visual Studio içerisinde F5'e bastığımızda System Tray'de beliren "ASP.NET Development Server"'ı hatırlarsınız. Aslında adı "Cassini" olan bu server işimizi epeyce kolaylaştırır ve bizim her sererinde IIS'te sitemizi veya uygulamamızı ayarlamamızı gerektirmeden uygulamanın sanal bir sunucu ortamında test edilmesini sağlar.

Peki hiç herhangi bir projenizi doğrudan çalıştırıp görmek istediğinizde mecburen Visual Studio ile açıp F5'e bastığınız oldu mu? :) Veya mecburen IIS'te web site ayarlamak zorunda kaldınız mı? sadece sitenizi çalıştırabilmek için? İşte bu işkence aslında sürekli yaşadığımız bir süreç ve çok kolay bir çözümü var. Biz de Visual Studio gibi gidip Cassini'yi kullanabiliriz.

Aslında Cassini bizim bilgisayarlarımızda WebDev.WebServer.exe olarak yüklü bulunuyor. Tabi ki EXE'yi doğrudan alıp taşıyamazsınız, çok sayıda bağlantılı DLL vs de söz konusu. Ama biz bu EXE'ye doğru parametreleri gönderirsek aynı Visual Studio'nun kullandığı gibi herhangi bir klasördeki dosyaları web sunucudaymış gibi çalıştırabiliyor. Bu EXE'nin nasıl kullanıldığını merak edenleri veya birazdan sizlerle tanıştıracağım uygulamanın nasıl yazıldığını merak edenleri İngilizce blogumdaki bir yazıya davet edebilirim :)

Sağ tıkla sunucudaaymış gibi çalıştır!

Gelelim sadede... Infragistics'te çalışan J. Ambrose Little tüm bunları yaparak uygulamayı da bir SETUP paketi şeklinde hazırlamış ve bununla da kalmamış ve bu sistemi işletim sisteminin context menü'süne bağlamış. Yani özetle; herhangi bir klasöre sağ tıklayıp "ASP.NET 2.0 Web Server Here" dediğizde Cassini açılıyor ve söz konusu klasör içerisindeki uygulama server üzerinden çalıştırılıyormuş gibi karşınıza çıkıyor. Aynı Visual Studio'da F5'e basmış gibi :)

Uygulamayı aşağıdaki linkten bilgisayarınıza indirip yükleyebilirsiniz.

Cassini Web Server Launcher - 02012009_1.msi (355 KB)

ASP.NET 2.0 dediğine bakmayın 3.5 SP1 ile herhangi bir sorunu yok.

Hepinize kolay gelsin...

Microsoft'un dünya çapındaki Imagine Cup yarışmasının bu seneki ayağının finali Mısır'da yapılacak. Tabi onun öncesinde Türkiye ayağı ile yarışmacıların Türkiye birinciliğini almaları gerekiyor :)

Imagine Cup 2009 için bu yıl öğrenciler; dünyanın en zorlu sorunlarına, teknoloji ile çözüm bulabilecekleri bir dünya düşlemeye davet ediliyor. Bazılarımız teknolojiyi dünyanın her yerindeki insanlara eğitim şansı kazandırmak için kullanacaktır, ya da sağlık alanında yepyeni ufuklar açmak için. Bazılarımız ise cinsiyetler arası fırsat eşitsizliğini çözmek isteyecektir. Imagine Cup 2009 teması için örnek gösterilen Birleşmiş Milletler Milenyum Hedeflerinin açıklandığı, geçtiğimiz yılların deneyimlerinin aktarıldığı ve teknik oturumların bulunduğu Imagine Cup 2009 Lansmanı 20 Aralık Cumartesi günü Microsoft Istanbul ofisinde gerçekleştirilecek.

Aktiteye katılmak için buradan kayıt olmanız gerekiyor.

Sabah saat 10.00'da başlayacak etkinliğin planına buradan ulaşabilirsiniz. En son teknik oturum benim ;) Konumuz: Expression Studio.

Mart ayında sizleri Silverlight T-Shirt'üm ve sonrasında da Tish-O ile tanıştırmıştım. Böylece sizler de isterseniz SilverMan T-Shirt'ünden sipariş verebilecektiniz :) Eh birileri siparişleri vermiş :) FaceBook'taki Fan Club'ımın da kurucuları olan Ahmet Enes Dabanlıoğlu ve Fatih Gençaslan heyecanları ile gerçekten beni etkilediler. Arkadaşlar bu heyecanı satır satır kodlara dökmeniz dileği ile ;)

The Silver Team :)

Taaaa 12 Ocak 2008 tarihinde :) CETURK organizasyonunda Microsoft binasında bir seminer günü düzenlemiştik ve o günde ben de Silverlight 1.0 ve WPF anlatmıştım. Aktivitenin videoları sonunda :) CETURK sitesinde yayınlandı. Videolara aşağıdaki adresten ulaşabilirsiniz;

http://www.ceturk.com/Dersizle.asp?id=482

Hepinize kolay gelsin.

Bugün İzmir'de hosting sağlayıcılar ile bir bir eğitimimiz oldu. Benim için çok güzel bir fırsattı :) çünkü zaten hali hazırda Türkiye'deki hosting sağlayıcılar ile ilgili dertliyim. Şirket tarafında müşterilerimize sunduğumuz içerik yönetim sistemlerini müşterilerimiz hosting sağlayıcılardan aldıkları alanlara koyduklarına bir çok sorun ile karşılaşıyoruz. Bu sorunların detaylarına inerek eğitim boyunca ASP.NET hosting yaparken nelere dikkat edilmesi gerektiğine değindim.

Microsoft Hosting Çözümleri Eğitimi, İzmir

Seminerlerde özellikle bana "ASP.NET 3.5 destekli hosting nasıl buluruz?" gibi sorular geliyor. Bu soruları ve arayışı doğrudan hosting firmalarındaki yetkililere iletme şansım oldu. İlginç bir şekilde sunucularında .NET Framework 3.5 kurulu olduğunu fakat sitelerinde hala 2.0 yazdığını söylediler :) Tabi en kısa zamanda bu hatayı düzeltecekler. Hatta birkaç gün içerisinde SP1 yüklü hostinglerimiz bile olacak Türkiye'de.

Bir diğer konu da tabi ki Silverlight'dı :) Silverlight'ın IIS tarafındaki Mime Type ayarlarından ve detaylarından bahsettik.

Eğitimde kullandığım sunumu aşağıdan indirebilirsiniz.

Hosting Çözümleri Eğitimi Sunumu - 21082008_1.pptx (206,66 KB)

Bundan yaklaşık bir hafta kadar önce Adobe sponsorluğundaki RiaTalks etkinliğinde Silverlight anlatmıştım. Sizleri hem aktivite öncesi hem de sonrası blogdan bilgilendirmiştim. İşte o aktivitede yine ufak bir video çalışmamız oldu. Video konusundaki yardımlarından dolayı Murat Duman'a teşekkür ediyorum. İyi seyirler...

Bundan yaklaşık 6 ay önceydi sanırım GGK organizasyonunda bir Silverlight seminerimiz olmuştu. Bu seminerin video kaydı alınıp internete konmuş olsa da ben blogdan paylaşmayı unutmuşum :) Sağ olsun sevgili Recep Selli durumu hatırlamamı sağladı. Silverlight 1.0 gibi artık eski diyebileceğim bir konu olsa da buyurun arkadaşlar 3 saatlik Silverlight 1.0 semineri karşınızda.

Bugün riatalks.com aktivitesindeydim. RIA (Rich Internet Application) konusu çerçevesinde gerçekleştirilen aktivite serisinde benim de ufak bir Silverlight konuşmam oldu. Çok fazla teknik içeriği olmayan zevkli bir aktiviteydi. Hatta yarın da aktivite devam ediyor olacak.

RIATALKS aktivitesinden bir kare...

Özellikle RIA konusunda bir vizyon edinmek isteyenler Bahçeşehir Üniversitesi'nde düzenlenen aktiviteye katılmalarını tavsiye ederim.

Silverlight uygulamaları içerisinden "Clipboard"a ulaşmak istediğinizde maalesef hazır bir altyapı ile en azından şimdilik Silverlight 2.0 Beta 2 içerisinde karşılaşmıyoruz. Aynı şekilde Silverlight 1.0 içerisinde de bu sorun için bir çözüm yok. Fakat özellikle Silverlight 1.0 tarafında zaten JavaScript'in ana programlama yapısı olduğunu düşünürsek "Acaba tarayıcı içerisinde JavaScript ile bir çözüm oluşturabilir miyiz?" sorusu akla geliyor. Bu sorunun cevabı en azından Internet Explorer için "Evet". FireFox varsayılan ayarları ile bu gibi işlemlere JavaScript tarafında olanak tanımıyor.

Silverlight 1.0 ile Clipboard kullanımı

Yeni bir Silverlight 1.0 projesi yaratarak içerisine bir TextBlock ve Rectangle yerleştirelim. Yapacağım işlem TextBlock içerisinde yazılı metni Rectangle'a basıldığında ClipBoard'a taşımak olacak.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="640" Height="480"

  Background="White"

  x:Name="Page">

  <TextBlock Width="274.242" Height="43.939" Canvas.Left="31.818" Canvas.Top="27.273" Text="Kopyalanacak Metin" TextWrapping="Wrap" x:Name="Etiket"/>

  <Rectangle MouseLeftButtonDown="Kopyala" Width="122.727" Height="43.939" Fill="#FFFF0000" Stroke="#FF000000" Canvas.Left="31.818" Canvas.Top="92.425" RadiusY="16.167" RadiusX="16.167" x:Name="Dugme"/>

</Canvas>

Yukarıdaki kod uygulamamızın görsel arayüzünü oluşturuyor. "Dugme" adındaki Rectangle nesnemizin MouseLeftButtonDown durumunda çalıştırılacak olan kodu birazdan yazacağız.

function Kopyala(sender)

{

    window.clipboardData.setData("text", sender.findName("Etiket").Text); 

}

Kodumuz içerisinde kullandığımız clipboardData sınıfı ile ilgili detaylara MSDN üzerinden ulaşabilirsiniz. setData metodu toplamda iki parametre alıyor; bunlardan ilki ClipBoard'a kopyalanacak olan verinin tipi, ikincisi ise kopyalanacak olan içeriğin ta kendisi. Aynı şekilde isterseniz ClipBoard'dan veri almak için getData metodunu da kullanabilirsiniz.

function Getir(sender)

{

    sender.findName("Etiket").Text = window.clipboardData.getData("text");   

}

getData metodu sadece ClipBoard'dan alacağı verinin tipini parametre olarak alarak geriye doğrudan elde ettiği veriyi döndürüyor.

Peki ya Silverlight 2.0 tarafında neler yapacağız?

Aslında çok farklı bir işlem yapmayacağız. Silverlight 2.0 Beta 2 tarafında da şimdilik JavaScript'in nimetlerinden faydalanmak zorundayız. O nedenle istemci tarafındaki VB veya C# kodumuz ile sayfanın JavaScript tarafındaki özelliklerine ulaşıp yine JavaScript tarafındaki metodlarını çalıştıracağız.

İlk olarak Silverlight 2.0 Beta 2 uygulamamızın arayüzünü aşağıdaki şekilde düzenleyelim.

<UserControl x:Class="SilverlightApplication14.Page"

   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

        <TextBox Height="40" HorizontalAlignment="Left" Margin="16,8,0,0" VerticalAlignment="Top" Width="120" Text="Herhangi bir Metin" TextWrapping="Wrap" x:Name="txtMetinKutusu"/>

        <Button Height="24" HorizontalAlignment="Left" Margin="16,72,0,0" VerticalAlignment="Top" Width="88" Content="Kopyala" x:Name="btnKopyala"/>

        <Button Height="24" HorizontalAlignment="Left" Margin="16,112,0,0" VerticalAlignment="Top" Width="88" Content="Yapıştır" x:Name="btnYapistir"/>

    </Grid>

</UserControl>

Bir TextBox ve iki Button'dan oluşan uygulamamızın ilk olarak kopyalama işlemini yapacak olan kodunu yazalım.

[VB]

    Private Sub btnKopyala_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnKopyala.Click

        Dim Clipboard As Browser.ScriptObject = Browser.HtmlPage.Window.GetProperty("clipboardData")

        Clipboard.Invoke("setData", "text", txtMetinKutusu.Text)

    End Sub

[C#]

        void btnKopyala_Click(object sender, RoutedEventArgs e)

        {

            System.Windows.Browser.ScriptObject Clipboard = (System.Windows.Browser.ScriptObject)System.Windows.Browser.HtmlPage.Window.GetProperty("clipboardData");

            Clipboard.Invoke("setData", "text", txtMetinKutusu.Text).ToString();

        }

Kodumuz içerisinde ilk olarak tarayıcının clipboardData sınıfını yakalamamız gerekiyor. Bunun için içerisinde olduğumuz tarayıcının (Browser) yine mevcut HTML sayfasının (HtmlPage) ait olduğu pencereyi (Window) yakalayıp onun üzerinden GetProperty ile clipboardData'yı alarak ScriptObject tipinde yarattığımız Clipboard değişkenimize aktarıyoruz. Sonrasında doğrudan değişkenimiz üzerinden Invoke diyerek aynı Reflection yapar gibi setData metodunu çalıştırıyoruz. Normal şartlarda JavaScript tarafına vereceğimiz parametreleri de yine Invoke metoduna aktarıyoruz. Böylece kopyalama işlemini tamamlamış olduk. Aynı şekilde ClipBoard'dan veri almayı da hemen getData ile yapabiliriz.

[VB]

    Private Sub btnYapistir_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnYapistir.Click

        Dim Clipboard As Browser.ScriptObject = Browser.HtmlPage.Window.GetProperty("clipboardData")

        txtMetinKutusu.Text = Clipboard.Invoke("getData", "text")

    End Sub

[C#]

        void btnYapistir_Click(object sender, RoutedEventArgs e)

        {

            System.Windows.Browser.ScriptObject Clipboard = (System.Windows.Browser.ScriptObject)System.Windows.Browser.HtmlPage.Window.GetProperty("clipboardData");

            txtMetinKutusu.Text = Clipboard.Invoke("getData", "text").ToString();

        }

Clipboard'dan veri alırken de aynı şekilde clipboardData nesnemizi yakaladıktan sonra bu sefer getData metodunu çalıştırıyoruz ve geriye dönen değeri de örneğimizde TextBox içerisine yazdırıyoruz.

C# kullananların haricen aşağıdaki şekilde uygulama başlangıcında Event-Handlar bağlantılarını yapmaları gerekecektir. VB kodlarındaki Handles keyword'ü ile bu işlem satır içinde yapılabildiği için ek olarak yazmak gerekmiyor.

[C#]

        public Page()

        {

            InitializeComponent();

            btnKopyala.Click += new RoutedEventHandler(btnKopyala_Click);

            btnYapistir.Click += new RoutedEventHandler(btnYapistir_Click);

        }

Böylece hem Silverlight 1.0 hem 2.0 içerisinde Clipboard'dan veri alarak veri aktarımı yapabildik. Tabi tüm bu işlemlerin sadece Internet Explorer içerisine olması üzücü. Diğer tarayıcılar için de geçerli olacak şekilde umarız ileride Silverlight Runtime içerisine standart işlevsellikler eklenir.

Hepinize kolay gelsin.

Son yazgelistir.com Editör toplantımızda aldığımız kararlardan biri de yazgelistir.com ana sayfasında gözüken "Son Makaleler" kısmını biraz daha kullanışlı hale getirmekti. Bu çerçevede söz konusu bölüm için bir Silverlight uygulaması hazırlamaya karar verdik. Uygulamanın tasarımını sevgili Erbuğ Kaya yaptı. Animasyonlar ve programlama bana ait :) Süreç boyunca sunucu altyapısı ve RSS'lerin ASP.NET ile üretimi konusunda desteği için ek olarak sevgili Tamer Öz ve Işıl Orhanel'e de buradan teşekkürlerimi iletiyorum.

Bakalım beğenecek misiniz? www.yazgelistir.com

Ticari bir uygulama olmadığı için tabi ki sizlerle sitedeki projenin kaynak kodlarını da paylaşacağım. Son haline baktığımızda herhangi bir RSS'i JavaScript ve AJAX ile okuyarak Silverlight ile animasyonlar eşliğinde gösterebilen bir Silverlight uygulamasından bahsediyoruz. Yükleme süresince "Yükleniyor" animasyonunu da unutmadım :)

yazgelistir.com ana sayfadaki Silverlight kaynak kodları - 21062008_1.rar (19,51 KB)

Hepinize kolay gelsin....

FireFox 3 yarına downloada sunuluyor. Kişisel olarak FireFox kullanmamın iki nedeni var; birincisi güzel eklentileri var, ikincisi sırayla açılmasını istediğim 20 üzerinde site varsa ve bunları tablarda açıp bir 3 dakika sonra makineme gelip tek tek inceleyeceksem :) FireFox kullanıyorum. Bunların haricinde pek FireFox açtığımı söylemem. Benim için yazılımların açılma süreleri çok önemlidir, IE şu an benim makinemde en hızlı açılan tarayıcı. (Makinemde Safari, FireFox yüklü)

Her neyse, FireFox 3 ile beraber Silverlight 1.0 uygulamaları maalesef açılmıyor. Aslında olay bu kadarla kalmıyor, örneğin benim kullanmakta olduğum neredeyse tüm eklentiler de FireFox 3 ile çalışmıyor. Bu arada güzel bir haber aldım, Silverlight 2.0 Beta 2 FireFox 3 uyumluymuş. Aslında uyumluluktan öte projelerde değişken tek şey Silverlight.js dosyası.

Eski uygulamaları nasıl upgrade ederiz?

Çok basit, Silverlight 2.0 Beta 2 SDK ile beraber gelen Silverlight.js dosyasını Silverlight 1.0 projelerinizde de kullanabilirsiniz. Böylece sorun çözülmüş olacaktır. Unutmayın projenizi Silverlight 2.0'a geçirmiyorsunuz sadece Silverlight.js dosyasını değiştiriyorsunuz.

Hepinize kolay gelsin.

Yaklaşık 2 saat kadar önce last.fm üyesi oldum :) Siteyi çok duymuştum ama ilgilenecek fırsat olmamıştı. Gerçekten çok başarılı bir altyapısı var. Siteye üye olduktan sonra bilgisayarınıza ufak bir program yüklüyorsunuz ve ister Windows Media Player ile ister Winamp ile çaldığınız tüm şarkılar otomatik olarak sitede yerini alıyor. Tabi bu veri yığınından yola çıkarak site bir sürü ek işlevsellik sunuyor. Sizinle aynı şarkıları dinleyenlerden tutun en çok dinlediğiniz şarkıların listelerini otomatik olarak arkadaşlarınızla paylaşmaya kadar bir sürü seçenek mevcut.

Tabi siteye üye olunca hemen dinlediğim şarkıları blog okuyucularım ile de paylaşmaya karar verdim ve daha önce sizlerle kaynak kodunu paylaştığım Twitter Silverlight Widget'a el atarak Last.Fm uyumlu hale getirdim. Yeni uygulamayı hazırlarkenki en büyük sorun Last.Fm'in Cross-Domain'e açık bir JSON verisi sağlamaması olsu. Bu nedenle ASP.NET ile sunucu taraflı proxy hazırlamam gerekti. Proxy Last.FM üzerinden XML veriyi alarak Silverlight tarafına JSON formatında aktarıyor. Local proxy kullanıldığı için Widget'ın veriyi yüklemesi normale kıyasla daha uzun sürüyor, o nedenle bir de "Loading" animasyonu ekledim.

Artık dinlediğim şarkıları blogun yan barından izleyebilirsiniz :) Tabi daha da önemlisi hazırladığım bu uygulamayı kaynak kodları ile aşağıdaki linkten indirebilirsiniz ;)

Last.FM Silverlight Widget Kaynak Kodları - 13062008_1.rar (9,29 KB)

Hepinize iyi eğlenceler ;)

Bugün Edirne M.P. Anadolu Ticaret Meslek ve  Ticaret Meslek Lisesi'nin organizasyonunu üstlendiği Edirne'deki meslek liseleri'nin yer aldığı bir seminer serisindeydim. Semineri Trakya Birlik Genel Müdürlüğü Konferans Salonu'nda yaptık. Salon şu ana kadar gördüğüm en ilginç ve güzel salonlardan biriydi. Balkonuyla beraber iki katlı seminer salonunda alt kattaki ve üst kattaki dinleyiciler için ayrı projeksiyon sistemlerinin bulunması dinleyici için çok ergonomik bir ortam sağlıyor.

Edirne'ye gidip Selimiye Cami fotoğrafı çekmemek olmaz :)

Sabah 09.00 gibi seminerlere başladığımız için bir gün önceden Edirne'ye gitmek durumunda kaldım. Dün akşam 20.00 gibi Edirne'deydim, Meriç kenarında bir yemek yeme şansına sahip olmak muhteşemdi. Aslında otobüsle iki buçuk saat gibi kısa bir sürede gidilebilen Edirne'yi (kendi adıma konuşayım) sanki biraz farkında değiliz veya unutmuşuz gibime geldi. Rahatlıkla günübirlik gidip gezilebilecek bir şehir.

Selimiye Kubbesi İç Motifler

09.00'da başladıktan sonra öğleden sonra 18.00'a kadar WPF, Silverlight ,AJAX ve LINQ konularına değindik. Bu benim ikinci Meslek Lisesi deneyimim oldu. Lise çağındaki gençlere hitap edebilmek adına daha çok çalışmam gerektiğini açıkça itiraf edebilirim :) Yine de aldığım tepkilere göre faydalı bir gün geçirdik, parıldayan genç gözler gördüm.

Edirne, MP (Anadolu) Ticaret Meslek Lisesi, WPF, Silverlight, AJAX, LINQ Seminerleri

Aktivite boyunca Edirne TV :) de oradaydı. Hatta sitelerinde de aktiviteyi haber yyapmışlar. Özellikle sitedeki fotoğrafta biraz çok agresif çıkmışım :) Zaten herkes sahnede rahat durmadığım için fotoğraf çekememekten şikayetçi :)

Organizasyondaki emeklerinden dolayı sevgili Serdar Daloğlu'na , Aziz Bayıroğlu ve Oğuzcan Şahin'e burada bin bir teşekkür ediyorum. Beni muhteşem bir şekilde ağırlamanın yanı sıra organizasyondaki her tür detayı çok başarılı bir şekilde yürüttüler.

Haziran'ın bu ilk gününde yazı karşılarken size yeni bir sürprizim var :)

T-Shirt ve kravatın ardında bir sürü mail aldım. T-Shirt'ü Tish-O'ya paslayarak üretim sorununu halletmiş olduk. Fakat kravat konusunda herhangi bir çözüm maalesef söz konusu değil. Diğer yandan aslında çok daha kolay üretebileceğimiz bir şey var :) Özellikle önümüzde yazın da geldiğini düşünürsek bir Silverlight şapkası süper olur diye düşündüm.

Silverlight Şapka :) ve tatil sevdası!

Tasarım anlamında çok bir emek yok ortada :) Rahatlıkla sizin de yapabileceğiniz bir uygulama. Silverlight logosunu aşağıdaki linkten indiriyorsunuz ve doğrudan en yakın "dijital baskı merkezi"ne doğru ufak bir yolculuk yapıyorsunuz. Neredeyse hepsi şapka üzerine baskı alabiliyor. Şapkanın yıkanma durumu da t-shirt'e kıyasla daha nadir olduğu için herhangi bir baskının pek sorunu olmayacaktır.

Silverlight Logo - 01062008_2.jpg (99,43 KB)

İlk şapkalıya hediye var :)

Hadi bakalım ilk önce kimi göreceğim etrafta bu şapka ile :) Bu şapkayı takmış olarak gördüğüm ilk arkadaşı buradan sizlere de fotoğrafı ile duyurmanın yanı sıra söz konusu arkadaş benden bir de güzel hediye alacak :) Sürpriz!

İyi şanslar...

Bugün ufak bir maceraya atılarak sanal makineye bir Ubuntu kopyası yükledim :) Yanlış okumadınız bir Linux kopyasından bahsediyorum. Aslında bu ilk değil, bundan önce belki yüzlerde defa Linux kurulumları yaptım veya inceledim. Ama bu sefer amacım biraz farklıydı.

Silverlight'ın Linux üzerinde çalışacak olan sürümünün adının Moonlight olduğundan daha önce bahsetmiştim. Söz konusu proje Novell sponsorluğunda ilerliyor ve bugünlerde hiç de yadsınamayacak bir seviyeye geldi. Artık Moonlight ile Silverlight 1.0 projeleri rahatlıkla Linux üzerinde çalıştırılabilir. Ufak bir sorun var :) maalesef daha video ve audio desteği yok. Yani aslında Silverlight 1.0'ın en kuvvetli olduğu nokta eksik. Umarım zamanla video ve audio desteği de Linux platformuna taşınacaktır. Diğer yandan Silverlight 2.0 desteği de Mono-Project sayesinde hızlıca karşımıza çıkıyor olacak. Mono-Project sayesinde zaten uzun süredir .NET uygulamaları Linux üzerinde bazı eksiklerle olsa da çalıştırılabiliyordu. Bu altyapının Silverlight tarafına taşınması zor olmayacaktır.

Ben Linux için olan Silverlight Plug-In'i ancak FireFox 3 üzerine kurabildim. Fakat malum FireFox 3 daha Beta aşamasında olduğu için ekstra sorunlar da çıkabiliyor.

İlk adımda yüklemeyi bilgisayarımıza indirelim.

Moonlight'ın http://www.go-mono.com/moonlight/ adresinden bilgisayarınıza uygun yüklemesini seçtikten sonra karşınıza yukarıdaki gibi FireFox içerisinde bir uyarı mesajı geliyor. Onaylayarak ilerliyoruz ve yükleme paketi bilgisayarımıza iniyor.

Yüklemeyi başlatalım.

İnternette yükleme paketi bilgisayara indikten sonra pakete güvendiğimizi de Linux'e belirtirsek bir sonraki adımda hemen yükleme gerçekleşecektir.

Linux üzerinde Silverlight iş başında.

Yükleme tamamlandığında artık Silverlight ile hazırlanmış web sitelerini rahatlıkla Linux üzerinde de kullanabiliyoruz. Umarım Novell'in istemci tarafında Linux'ten desteğini çekmiş olması Moonlight'ın geleceğini etkilemez.

Super SilverMan T-Shirt tasarımımdan sonra tekstil sektörüne gireceğime dair dedikoduların yanı sıra :) ciddi tavsiyeler bile aldım. T-Shirt gerçekten çok başarılı bir ürün oldu :) diğer yandan maalesef her ortamda T-Shirt ile gezmek mümkün olmuyor. "Gömlek bastıralım?" gibi bir fikrin biraz daha ötesine giderek "kravat" konseptini uygun gördüm. Tasarım çalışmalarını da tamamladıktan sonra uygun bir şekilde kravat üretimine geçtik :) (Dalga geçmiyorum).

Dünyada Tek : Silverlight Kravat

Kravatı bugüne kadar birkaç aktivitede kullandım ve deneme sürüşleri sonrasında herhangi bir bug'ı olmadığını söyleyebilirim. :) Tasarım yine bana ait ;) Maalesef şimdilik toplu üretim gibi bir şansımız yok, dehşet pahalıya mal oluyor (tamamen dikiş). Diğer yandan tüm dünyada sadece bende böyle bir kravatın bulunuyor olması de ayrı bir duygu :)

Peki ben bu yazıyı neden yazdım? :) "Düşmanlar çatlasın" diye değil tabi ki :P Silverlight heyecanımı blog okuyucularımla paylaşmaktı amacım. Umarım gün gelir Silverlight aktivitelerinde T-Shirt'ler, kravatlar kepçeyle dağıtılır :)

"Daha çok Silverlight'lı günler dileği ile..."

Özellikle beni microbloğum twitter.com üzerinden takip edenlerin farkında olacağı üzere hafta sonunu Ankara'da geçirdim. Cumartesi gece yarısı yola çıkarak sabahına Ankara'ya vardım ve sabah 10.00 gibi EMO (Elektrik Mühendisleri Odası) Ankara şubesinde eğitim serimize başladık. WPF, AJAX, Silverlight ve LINQ konularına değindiğimiz eğitimi Pazar akşamı 18.00'da bitirdik.

EMO Eğitim Serisi başlangıcından bir kare...

Eğitime katılan arkadaşlara özellikle Silverlight örneğindeki kodları blogumdan paylaşacağım konusunda söz vermiştim. Aşağıdan gerekli dosyaları bilgisayarınıza indirebilirsiniz.

Örnek Kodlar - 25052008_2.rar (8,57 KB)

Eğitime katılan ve kocaman bir hafta sonu boyunca yeni teknolojiye olan ilgilerini ve konsantrasyonlarını en yüksek seviyede tutan tüm arkadaşlara çok teşekkür ediyorum (Özellikle ikinci gün sınıfa pasta alan kamera fobili arkadaşımıza ek teşekkürler :))

INETA ve EMO işbirliğinizde düzenlediğimiz bu eğitime katkısından dolayı ODTÜ Bilgisayar Mühendisliği Araştırma Görevlisi Serdar Çiftçi'ye, eğitimlere laboratuar ortamı sağlamakla beraber gösterdikleri sıcak misafirperverlik için de tüm EMO ekibine teşekkürler.

Özellikle "developer" tabanlı olanlar için hazırlanan bir uygulamanın görsel arayüzünü süslemek hem bir "çin işkencesi" oluyor hem de ortaya zaten güzel bir ürün de çıkmıyor. Bu gibi durumlarda eğer projelerinizde bir tasarımcı ile çalışma şansınız da yoksa en azından internetteki hazır renk şemalarından faydalanabilir, birbiri ile uyumlu renkler üreten web sitelerinden faydalanabilirsiniz.

Veya daha da pratik bir yol var, bir yerlerde beğendiğiniz renkleri "ödünç" alabilirsiniz :) Peki nerden? Hemen önünüzde Windows Vista duruyor, tasarımı da hiç fena sayılmaz :)

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="640" Height="375.082"

  Background="White"

  x:Name="Page">

  <Rectangle Width="572.131" Height="78.885" Canvas.Left="31.148" Canvas.Top="8" Stroke="#FF000000">

    <Rectangle.Fill>

      <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">

        <LinearGradientBrush.GradientStops>

          <GradientStop Color="#FF000000" Offset="0"/>

          <GradientStop Color="#FF9AC6CF" Offset="0.0494537"/>

          <GradientStop Color="#FF54A1AA" Offset="0.0714264"/>

          <GradientStop Color="#FF146478" Offset="0.5"/>

          <GradientStop Color="#FF408C9A" Offset="0.505493"/>

          <GradientStop Color="#FF87B6C0" Offset="0.928574"/>

          <GradientStop Color="#FFBCCDD7" Offset="0.950546"/>

          <GradientStop Color="#FFAEBFCA" Offset="0.983521"/>

          <GradientStop Color="#FFAEBFCA" Offset="1"/>

        </LinearGradientBrush.GradientStops>

      </LinearGradientBrush>

    </Rectangle.Fill>

  </Rectangle>

  <Rectangle Width="572.131" Height="78.885" Canvas.Left="31.148" Canvas.Top="99.784" Stroke="#FF000000">

    <Rectangle.Fill>

      <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">

        <LinearGradientBrush.GradientStops>

          <GradientStop Color="#FF000104" Offset="0"/>

          <GradientStop Color="#FF02070B" Offset="0.494507"/>

          <GradientStop Color="#FF33373D" Offset="0.494507"/>

          <GradientStop Color="#FF757A7C" Offset="0.917587"/>

          <GradientStop Color="#FFA0A1A3" Offset="0.956039"/>

          <GradientStop Color="#FF48494A" Offset="1"/>

        </LinearGradientBrush.GradientStops>

      </LinearGradientBrush>

    </Rectangle.Fill>

  </Rectangle>

  <Rectangle Width="572.131" Height="78.885" Canvas.Left="31.148" Canvas.Top="189.929" Stroke="#FF000000">

    <Rectangle.Fill>

      <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">

        <LinearGradientBrush.GradientStops>

          <GradientStop Color="#FFD4D4D4" Offset="0"/>

          <GradientStop Color="#FFF0F2F4" Offset="0.0659332"/>

          <GradientStop Color="#FFF6F5F8" Offset="0.598907"/>

          <GradientStop Color="#FFFFFFFF" Offset="0.609894"/>

          <GradientStop Color="#FFFFFFFF" Offset="0.978027"/>

          <GradientStop Color="#FFC7C7C7" Offset="0.994507"/>

          <GradientStop Color="#FFC7C7C7" Offset="1"/>

        </LinearGradientBrush.GradientStops>

      </LinearGradientBrush>

    </Rectangle.Fill>

  </Rectangle>

  <Rectangle Width="572.131" Height="78.885" Canvas.Left="31.148" Canvas.Top="281.713" Stroke="#FF000000">

    <Rectangle.Fill>

      <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">

        <LinearGradientBrush.GradientStops>

          <GradientStop Color="#FFDFE4F4" Offset="0"/>

          <GradientStop Color="#FFB8BCC2" Offset="0.0439606"/>

          <GradientStop Color="#FFE0E6F4" Offset="0.0769196"/>

          <GradientStop Color="#FFD4DBE8" Offset="0.648346"/>

          <GradientStop Color="#FFE8ECF4" Offset="0.714279"/>

          <GradientStop Color="#FFFFFFFF" Offset="1"/>

        </LinearGradientBrush.GradientStops>

      </LinearGradientBrush>

    </Rectangle.Fill>

  </Rectangle>

</Canvas>

İşte size Vista'daki gradientların Silverlight veya WPF ile kullanılabilecek XAML kodları. Yukarıdaki örnek Silverlight 1.0 uygulamasında dört farklı gradientı gösterebilmek için dört adet dikdörtgen kullandım.

Vista Gradientları

Hepinize kolay gelsin.

İstemci taraflı programlama sistemleri AJAX ile karşımıza çıkmıştı, Silverlight ile beraber ise artık istemci taraflı programlama neredeyse "hayatımız" oluyor. Bu durumda karşılaştığımız en büyük sorun "Cross-Domain-Request" sınırlaması. Güvenlik nedenleriyle bir alan adından bir başka alan adına bağlanarak veri talebinde bulunamıyoruz. Eğer karşıdaki alan adının ihtiva ettiği siteye admin erişiminiz varsa tabi ki farklı teknikler kullanarak bu sorunu çözebilirsiniz. Bu konuda Silverlight 2.0 ile beraber clientaccesspolicy.xml dosyası geliyor.

Peki ya karşı siteye admin erişimimiz yoksa?

İşte o zaman kendi sitemizde sunucu taraflı bir proxy kullanmamız şart. ASP.NET ile sunucu tarafından istediğimiz siteye bağlanarak istediğimiz dosyası alabiliriz. Bu durumda bir ASPX sayfası yapsak bizim yerimize gidip kendisine hedef gösterdiğimiz adresten gerekli dosyayı alıp istemci tarafına, yani bize iletse hoş olmaz mı?

        Dim Talep As New Net.WebClient

        Dim GelenVeri As Byte() = Talep.DownloadData(Request.QueryString("Dosya"))

        Response.ContentType = Talep.ResponseHeaders("Content-type").ToString

        Response.OutputStream.Write(GelenVeri, 0, GelenVeri.GetLength(0))

        Response.OutputStream.Close()

        Response.End()

Yukarıdaki kod içerisinde doğrudan bir WebClient yaratarak farklı bir adresten veri indirme işlemi yapıyoruz. Kod içerisindeki en önemli nokta indirmek istediğimiz hedef veri ile istemciye göndereceğimiz verinin ContentType değerlerinin aynı olması gerektiği. Bunun için Response.ContentType'ı WebClient üzerinden aldığımız Content-Type header bilgisi ile eşleştiriyoruz. Böylece proxy'miz gerektiğinde video veya resim dosyalarını da rahatlıkla indirerek bize ulaştırabilir.

Performans?

Yukarıdaki örneğimiz çok basit bir yapıya sahip. Dosyayı sunucuya indirerek doğrudan istemciye gönderiyor. Yüksek sayıda istek oluşan projelerde veya büyük dosyalar indirecek olan uygulamalarında farklı performans senaryoları uygulamak gerekecektir. Aslında baktığımızda bu yapının herhangi bir Proxy programlamaktan pek farkı yok. Aklıma ilk aşamada gelen dikkat edilmesi gereken noktalar şöyle oldu;

• Büyük dosya indirirken istemcinin hala bağlı olup olmadığını Response.IsClientConnected ile kontrol etmek gerekir.
• Büyük dosya indirme işlemlerinde bufferlamak ve kısım kısım indirerek istemciye göndermek daha mantıklı olabilir. Özellikle video dosyalarında.
• Kesinlikle bu dosyaya request yollayanın headerını kontrol etmek lazım. Kötü niyetli biri bu proxy'yi sadece sunucunun bant genişliğini harcamak için kullanabilir veya gereksiz yere sunucuyu yorabilir.

Hepinize kolay gelsin.

Uzun süredir "Yahu nedir ki bu twitter??" şeklinde düşünerek takip ediyordum olan biteni. Bugün biraz zaman bulunca twitter.com üzerinden kendime yeni bir hesap açmaya karar verdim. Hesabımı açmamla beraber cep telefonuma twitter hesabımı güncelleyebileceğim uygulamaları da yüklemem bir an bile sürmedi :) Peki neden?

Genelde seminerlerde ve farklı etkinliklerde karşılaştığım sorunlardan biri de o etkinlikten insanların anında haberdar olamıyor olması. Hatta bazen "Biz de oradaydık o gün! Tüh görüşemedik" veya "Bilsek gelirdik, yakındaydık aslında" gibi yorumlar hep oluyor. İşte twitter bunun çözümü. Maksimum 140 karakterlik mesajlar ile twitter hesabınıza o an ne yaptığınızı yazıyorsunuz, böylece arkadaşlarınız sizi takip edebiliyor. Facebook'tan alışkın olduğumuz "Status"ün epeyce gelişmiş hali diyebiliriz. Hemen twitter.com adresinden kendinize bir hesap edinebilirsiniz. Sonrasında da takip etmek istediğiniz kişilerin site üzerinden seçerek hesabınıza ekleyebiliyorsunuz.

Eğer sisteme cep telefonunuzu da tanıtırsanız, özel olarak seçmiş olduğunuz kişilerin twitter hesaplarında bir değişiklik olduğunda size de bir sms geliyor. Hatta doğrudan sms ile kendi hesabınızı da değiştirebiliyorsunuz. Ben şahsen GPRS üzerinden çalışan harici bir uygulamayı şimdilik tercih ediyorum.

Anlayacağınız artık beni daha yakından takip etmek isteyenler bunu twitter ile yapabilecekler :) http://twitter.com/daronyondem adresinden beni kendi profilinize ekleyebilirsiniz. Sadece seminer ve aktiviteleri değil "Taksim Bambideyim" şeklinde mesajları da yazmayı düşünüyorum :) belki beraber birer ıslak hamburger yeriz :)

twitter Silverlight uygulaması yollarında...

Twitter'daki son 5 postun blogumda da gözükmesi için twitter'ın kendi sitesindeki araçlara baktığımda HTML ve Flash içerikli uygulamalar gördüm. Özellikle HTML ve JavaScript ile yapılana bakınca aslında istemciye JSON formatında veri gönderdiğini görerek biraz güldüm. Çünkü bu veri kaynağı ile kolaylıkla bir Silverlight uygulaması yapılabilirdi. Ve yaptım :) Hemen sitenin yan tarafında çalışır halini görebilirsiniz. Tabi ki uygulamanın açık kaynak kodlarını da sizlerle paylaşıyorum.

Kolay gelsin ;)

twitter.com Silverlight uygulaması - 16052008_1.rar (6,69 KB)

Bugün Konya, Selçuk Üniversitesin'deydim. Sabah 10.00'da başlayarak 19.00'a kadar WPF, AJAX, Silverlight ve LINQ konularını inceleyen bir seminer ile güzel bir gün geçirdik. Umarım "yol yorgunluğum" aktiviteye çok yansımamıştır. Bir gün öncesinde bildiğiniz üzere Çanakkale 18 Mart Üniversitesin'deydim ve akşam 23.00'da Çanakkale'den mecburen otobüs ile İstanbul'a döndüm. O saatte uçak vs yok. Sabaha karşı 05.00'de İstanbul'daydım ve 07.00 uçağı ile Konya'ya uçtum :) Durum böyle olunca hem uykusuzluk (buna alışkınım aslında) hem de sadece uçakta verilen abuk sandwich nedeniyle açlık (işte buna dayanamam!) nedeniyle performansımdan şüphe etmediğimi söylesem yalan olur.

Konya, Selçuk Üniversitesi

Aktivitede katkılarından dolayı sevgili MSP, Okan Öztürkmenoğlu'na çok teşekkür ediyorum. Bereketine hayran kaldığım etli ekmek desteği ile tüm günü ayakta geçirebilmeme büyük katkıları oldu :)

Tekrar görüşmek üzere ;)

Bugün Çanakkale 18 Mart Üniversitesi'ndeydim. WPF ve Silverlight konulu toplam 6 saatlik bir seminerin sonunda ilk defa bir üniversitenin öğrencilerinden bu kadar çok iltifat duydum :) Hepiniz çok sağ olun arkadaşlar. Benim için de çok zevkli bir gündü, böyle ilgili bir kitleyle birşeyler paylaşabiliyor olmak gerçekten muhteşem. Özellikle bir arkadaşın "Uzaktan küçük gözüküyorsunuz hocam" yorumunu sanırım hayatım boyunca unutmayacağım :)

Çanakkale 18 Mart Üniversitesi, WPF ve Silverlight Semineri

Organizasyonla ilgili özellikle sevgili Erçin Yontar'a çok teşekkür ediyorum. Çanakkale zaten bana yabancı olmayan bir şehir :) yine de sevgili Erçin iskeleden alıp iskeleye kadar yolculadı beni :) Herşey için çok çok teşekkürler arkadaşlar, tekrar görüşmek dileği ile ;)

Bugün INETA ve BilgeAdam işbirliğinde "Silverlight" eğitiminin ikinci gününü zevkli bir şekilde sonlandırdık. Eğitim yanlışlıkla ".NET altyapılı" diye duyurulunca tüm katılımcıların "Silverlight 2.0" bekleyerek geldiklerin için eğitimin bu ikinci gününde Silverlight ile Veri İşlemleri kısmını Silverlight 2.0 ile yaptık. Sanırım bundan sonra yine katılımcıların istekleri çerçevesinde sürekli Silverlight 2.0 ile beraber devam ediyor olacağız. Bu kapsamda aslında Türkiye'deki ilk Silverlight 2.0 eğitimini yapıyoruz :)

INETA ve BilgeAdam işbirliğinde Silverlight 2.0 Eğitimi

Tabi konu Silverlight 2.0 olunca ve arkada .NET olunca her zamanki gibi "biz (VB) ve siz (C#)"li sohbetler yapar olduk. Özellikle Silverlight 2.0 ile istemci tarafında XML ile uğraşırken VB'nin XLINQ ile inline XML kolaylıklarının yadsınamayacak olduğunu sanırım kanıtladım :)

Gün boyunca yaptığımız örneklere ait kaynak kodlarını aşağıdaki adresten indirebilirsiniz. Sonuncusu çalışmıyor :) zamanımız yetmedi bitirmeye.

Eğitim Uygulamaları Proje Kodları - 04052008_2.rar (2,6 MB)

Katılan herkese çok teşekkürler.

Silverlight çılgınlığı aldı başını gidiyor :) Spike Xavier ve Dan Wahlin tarafından hazırlanmış Silverlight şarkısını aşağıdaki adresten bilgisayarınıza indirebilirsiniz.

http://www.xmlforasp.net/CodeBank/Download/Blog/Music/Silverlight.mp3

Şarkının sözleri şu şekilde;

feed this need for quality
vector based delivery
we write it in xaml, we roll like a caml
we love it like baml
3D dioramma

lightweight subset of the CLR
down the wire with fluidity
you won't believe it, if you can conceive it
your users retrieve it
and their minds receive it.

it's Silverlight
it's strong and tight
they got it right
try it tonight

take the web to a brand new height

:) Bizde de var mı böyle yetenekli gençler? ;)

Dün İstanbul Aydın Üniversitesi'nde "Yazılım Dünyasına Yeni Teknoljiler:WPF ve Silverlight" konulu mini bir seminer verdim. Bu tarz mini seminerler maalesef ayrıldığımız içimde bir burukluk bırakıyor. İstediğim herşeyi anlatamamış olmak gerçekten çok üzücü. Yine de seminer sonunda çoğu dinleyiciden çok olumlu tepkiler aldım.

İstanbul Aydın Üniversitesi, Silverlight ve WPF

Katılan arkadaşlara ve özellikle organizasyondaki emeği için sevgili Halit Kara'ya çok teşekkür ediyorum. Umarım yakında daha uzun süreli bir aktivite ile tekrar görüşürüz.

Dün Şanlıurfa Harran Üniversitesi'nde Silverlight seminerindeydim. Gerçekten muhteşem iki gün geçirdim Şanlıurfa'da. Sanırım hayatımda bu kadar sıcak kanlı insanlar görmemişimdir. Gerçekten herkes bir "turist" olarak bana çok yardımcı oldu. İlginç bir hava var şehirde, herkes mutlu, stressiz bir yaşam hakim gibi. Belki de sadece bana öyle yansıdı :)

Bu sefer fırsat bularak yarım gün kadar Urfa'yı gezme şansım da oldu. BalıklıGöl'den tutun Konak'lara kadar epey gezdim. Şansıma hava da çok güzeldi, serin bir esinti ve güneş ışığı eşliğinde Urfa'lıların deyimine göre en iyi vaktini yakalamışım şehrin. Dönüşte İSOT ve Nar Ekşisi almayı da tabi ki unutmadım :)

Silverlight Semineri, Harran Üniversitesi, Şanlıurfa

Harran Üniversitesi'ndeki gençler gerçekten çok ilgiliydi Silverlight konusunda. Özellikle seminer sonunda PHP ile Silverlight kullanma konusunda hevesi gözünden okunan arkadaşlar vardı :) Silverlight örnekleri içerisinde gösterdiğim ASP.NET AJAX özellikleri de çoğunun ilgisini çekti. Sanırım mini bir MS rüzgarı estirdim :) Her zamanki gibi tabi ki zaman yine yetmedi herşeyi anlatmaya.

Buradan özellikle sevgili Bilgisayar Bölümü Bölüm Başkanı Yrd. Doç. Dr. Nurettin Beşli'ye ve Bilişim Kulübü Başkanı Celal Savur kardeşime çok teşekkür etmek istiyorum. Muhteşem bir organizasyondu.

Seminerde yaptığımız örneği ve sunumumu aşağıdan indirebilirsiniz.

Seminer Örnek Kodları ve Sunum - 18042008_1.rar (1,71 MB)

NETRON ve INETA işbirliğinde yaptığımız 3 günlük Silverlight eğitimini bu sefer de BilgeAdam ve INETA işbirliği ile tekrar ediyoruz. Özellikle "tekrar" kelimesini kullanıyorum ki aynı arkadaşlar gelmesinler :) Yanlış anlamayın "başımın üstünde" yeriniz var ama gerek yok :) Aynı konular, sıkılırsınız.

Peki bu eğitime seçilecek şanslı kişilerden biri olmak için ne yapmamız gerekiyor? www.yazilimuzmani.com adresine giderek "Seminerler" kısmında söz konusu aktiviteye kayıt olmalısınız. Haber vermedi demeyin :)

Hepinize iyi şanslar ;)

Bugün Ankara, Gazi Üniversitesi'nde 4 saatlik bir Silverlight seminerim vardı. Seminerin başından sonuna kadar salonda kalarak beni 4 saat boyunca dinlemek gerçekten Silverlight'a olan ilginin ciddi bir kanıtıdır sanırım. Buradan tüm katılımcılara, Bilgoloji grubuna ve sevgili Veysel Uğur KIZMAZ'a organizasyondaki emekleri için çok teşekkür ediyorum.

Silverlight Semineri, Gazi Üniversitesi, Ankara

Seminer boyunca yaptığımız örneği ve kullandığım sunumu aşağıdaki adresten indirebilirsiniz.

Örnek Uygulamalar ve Sunum - 15042008_1.rar (2,98 MB)

Öğrencilerimle gurur duyuyorum :) "Öğrencilerim" dedikçe kendimi biraz yaşlandırdığımın farkındayım ama gerçekten çok gurur verici bir tablo söz konusu. Karşınızda yepyeni bir Silverlight 1.0 oyunu daha! Bu sefer oyunumuz Windows ile beraber gelen alıştığımız "Mayın Tarlası". Sevgili Melih Kemal Tekin tarafından hazırlanan oyunu aşağıdaki adresten oynayabilirsiniz.

http://www.softencrypt.com/mines/

Ben olsam oyunun kaynak kodlarını da incelerdim :)

Teşekkürler Melih...

SharePoint Server artık sadece bir şirket içi iletişim ve paylaşım alanı olmanın ötesinde internete açık web sitelerinin altyapısında da rahatlıkla kullanılıyor. Her iki ihtimalde de SharePoint üzerinde Silverlight kullanımı farklı olanaklar tanıyabilir. Örneğin şirket için canlı video yayını dağıtımlarınızı SharePoint ve Media Services ile Silverlight aracılığı ile kullanıcılara yansıtabilir veya şirket içi eğitim videolarınızı Silverlight ile SharePoint üzerine yerleştirebilirsiniz. Tabi ki SharePoint'in web servislerine bağalanarak AJAX aracılığı SharePoint'in dahili verisine bağlanarak çok daha farklı senaryolar da gerçeleştirilebilir.

Peki SharePoint içerisinde Silverlight'ı nasıl kullanacağız?

SharePoint içerisinde Silverlight kullanımı ile ilgili yayınlanmış olan bir paket var. Bu paketi sunucuya yüklemenizle beraber artık SharePoint üzerinde size özel bir WebPart'ınız oluyor. Bu WebPart'ı herhangi bir WebPartZone'a ekleyerek istediğiniz Silverlight uygulamasının söz konusu alanda çalışmasını sağlayabiliyorsunuz. Özetle, aslında WebPart'ımız Silverlight uygulamalarımız için bir HostElement görevi görüyor.

Software & Services BluePrints çerçevesinde yayınlanan paketin adı Silverlight BluePrint for SharePoint şeklinde. Aşağıdaki adresten söz konusu paketleri ve örnekleri indirerek sunucunuza kurabilirsiniz.

http://www.ssblueprints.net/sharepoint/

Maalesef bu adresteki çoğu örnek Silverlight 2.0 ile hazırlanmış durumda. "Maalesef" dememin nedeni daha Silverlight 2.0'ın Beta 1 sürecinde olması ve kesinlikle kullanımdaki sunucularınıza SL 2.0 ile ilgili yüklemeleri yapmamanız gerektiği. Bu durumda hızlı bir şekilde yukarıdaki adresteki ilk örnek olan "Hello Silverlight Web Part"ını yükleyerek işe başlayabiliriz. Bu yükleme paketi içerisinde SilverlightPart'ın yüklemesi de bulunuyor. SharePoint'e Silverlight uygulaması yüklemek için kullanacağımız esas WebPart da zaten bu. WebPart şu anda SL 2.0 da desteklediği için bazı durumlarda SL2.0 yüklemeleri de yapmamız şart.

"Setup_SilverlightPart.zip" adındaki dosyanın içerisinde yüklemeyi tamamlamanız yeterli olacaktır. Diğer yüklemeler sadece örnek uygulamalar içeriyor. İşimiz bitti zannediyorsanız aldanıyorsunuz. Daha yapmamız gereken birçok iş var. Gelin sunucuda yapılması gerekenleri bir liste haline getirelim.

• Silverlight BluePrint sitesinden ilk örneği indir ve içerisindeki Setup_SilverlightPart.zip dosyasında yüklemeleri yap.
• Silverlight Plug-In'i sunucuya yüklemeniz gerekiyor. (Sorun yaşarsanız SL 2.0 Plug-In'i de yüklemek durumunda kalabilirsiniz)
• Silverlight 2 Beta 1 SDK'nın sistemde yüklü olması gerekiyor.
• "C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries\Server" adresinden System.Web.Silverlight.dll dosyasını "C:\windows\assembly" adresine kopyalayın.
• SharePoint web sitenizin altındaki /ClientBin/ klasöründe doğru Silvelight.js dosyasının bulunduğundan emin olun. Eğer yoksa "C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Tools" adresinden söz konusu dosyayı kopyalayın.
• IIS üzerinde XAML ve kullanacaksanız SL 2.0 için XAP Mime Type ayarlarını yapmanız gerekecek. Ayarlar şu şekilde olmalı.
  Extension: .xaml / MIME Type: application/xaml+xml
  Extension: .xap / MIME Type: application/x-silverlight-2-b1 (Sadece SL 2.0 Beta 1 için özeldir)
• Son olarak IIS'e ufak bir reset ile işlemi tamamlayabiliriz.

SilverlightPart'ın kullanımı üzerine...

SharePoint sunucumuza yüklediğimiz SilverlightPart özelliğini aktif hale getirmek için ilk olarak "Site Actions / Site Settings / Modify All Settings" menüsünden yola çıkarak "Site Collection Features" kısmına gitmemiz gerekiyor. Burada yüklemiş olduğunuz SilverlightPart'ı göreceksiniz, hemen yanında "Activate" düğmesi ile özelliği aktif hale getirebilirsiniz.

SilverlightPart özelliğini aktif hale getirdik.

Artık herhangi bir sayfada WebPart olarak SilverlightPart'ımızı ekleyebiliriz. Sayfalarımızda "Add a WebPart" dedikten sonra karşımıza gelen listeden SilverlightPart'ımızı seçebiliyoruz. Ekleme işlemini tamamladıktan sonra sıre geliyor ayarlara. WebPart'a ait "Tool Pane"'i açtığınızda karşınıza bazı seçenekler gelecek. Bu seçeneklerden ilki SharePoint sitenize koyacağınız Silvleright uygulamasının hangi sürüm için hazırlanmış olduğu. Eğer 2.0 için hazırlanmış ise sizden bir XAP dosyası seçmeniz istenecek. Eğer SL 1.0 için hazırlanmış bir uygulamayı sitenize yerleştireceksiniz bu sefer de XAML dosyasını seçmeniz gerekecektir. SL 1.0 uygulamanızın arkaplanında bir programlama yapıldıysa ayrıca "Include JavaScript" işaretini de işaretleyerek uygun JavaScript dosyasını seçmeniz şart. Bahsettiğimiz bu JavaScript dosyası Expression Blend 2 ile yaratılmış bir projedeki Page.xaml.js dosyasına denk geliyor. Yani hiçbir şekilde Silverlight.js veya default.html.js içerisinde yapılan işlemlerin yapılmasına veya söz konusu dosyalardaki kodların bu tarafa taşınmasına gerek yok çünkü SL uygulamasının yaratılması ve sayfaya yerleştirilmesi işini SilverlightPart yapacak, yani gerekli JavaScript kodlarını kendisi yaratacak.

SilverlightPart ayarları.

Tüm ayarlarımızı tamamladığımıza göre artık "OK" düğmesine basarak sayfamızda Silverlight uygulamamızı rahatlıkla çalıştırabiliriz. Peki bu seçtiğimiz XAML, XAP ve JavaScript dosyaları nerede? SharePoint web sitenizin içerisindeki ClientBin klasörü içerisinde koyduğunuz tüm dosyalar SilverlightPart içerisinde seçilebilir hale gelecektir.

Hepinize kolay gelsin.

Bugün Swiss Hotel'de düzenlenen Microsoft SharePoint Konferans serisinin İstanbul ayağında Silverlight BluePrint ile SharePoint entegrasyonu konusunu işledik. 50 dakika gibi kısa bir sürede hem Silverlight'ın sektördeki yerine hem SharePoint ile beraber kullanılmasına değindim.

Microsoft SharePoint Konferansı, İstanbul

Normalde SharePoint ile ilgili yazılar yazmıyorum ama özellikle dünki aktiviteye katılan arkadaşlara not olması amacıyla SharePoint ile Silverlight entegrasyonundan bahsettiğim bir makaleyi yarın bloguma ekleyeceğim. Yarın da sizi bloguma beklerim ;)

Son iki gündür KKTC'de Uluslararsı Kıbrıs Üniversitesi'ndeydim. İlk gün güzel bir WPF semineri yaptık, ikinci gün de Silverlight ile yolumuza devam ettik. Önce WPF sonra Silverlight yapmanın büyük avantajları var. Malum WPF Silverlight'in babası kıvamında o nedenle Silverlight tarafına geçildiğinde çoğu şeyi anlatmaya gerek kalmadan veya hızlı bir şekilde geçerek webin detaylarına girebildik. Silverlight ile beraber mini bir AJAX uygulamamız da oldu. Üzerinden yıllar geçmesine rağmen ve WPF veya Silverlight ile karşılaştırıldığında ciddi eski bir konu diyebileceğimiz AJAX hakkında hala ciddi bir bilgi eksikliğimizin olması beni ciddi şekilde şaşırtıyor. Özellikle ASP.NET ile beraber gelen AJAX'ın sektördeki konumlandırılması gerçekten çok yanlış. Bu hem üniversitelerde hem de en büyük şirketleri de aynı :( Neyse, konuya dönelim :)

Uluslararsı Kıbrıs Üniversitesi, KKTC

İki gün boyunca Uluslararsı Kıbrıs Üniversitesi'nden genç kardeşlerim beni çok iyi bir şekilde ağırladılar. Bu kadar sıkça Kıbrıs'a gitmeme rağmen ilk defa bir gece kaçarak Girne'yi görme şansım oldu. Benim aklıma Bozcaada sahillerini getirdi. Gerçekten güzeldi.

Umarım seminerler herkes için faydalı olmuştur. Buradan özellikle sevgili CompSciSociety Başkanı Burç Kaan ŞEN'e ogranizasyondaki başarısı ve yardımları için çok teşekkür ediyorum. Ayrıca soyadını maalesef hatırlayamadığım :) fotoğrafları çeken Yasin'e de çok teşekkürler.  Gerçek bir fotoğrafcılık aşığı.

Bugün NETRON ve INETA işbirliğinde düzenlediğim üç günlük Silverlight eğitiminin son gününde "Silverlight ile Video Uygulamaları"nı işleyerek eğitim serimizi sonlandırdık. Daha öncesinde zaten Silverlight ile animasyon ve veri işlemlerini detaylı olarak incelediğimiz için hızlı bir şekilde video özelliklerini de hallederek gerçek bir projeye geçiş yaptık. Sınıfımızda hem programcılar hem tasarımcılar olduğu için sınıfı ikiye ayırdık. Hedefimiz bir video yayın sitesi yapmaktı. Sitenin yönetim panelini ASP.NET 3.5 ile XLINQ kullanarak programcılarımız hazırladı, Silverlight uygulamasının tasarımını ve animasyonları da tasarımcılarımız Expression Design ve Blend ile düzenledi. En sonunda her iki sistemi de birleştirerek bir güne sığacak şekilde güzel bir ürün çıkardık.

Silverlight ile video uygulamaları gün sonu.

Projeye ait kaynak kodlarını aşağıdaki linkten bilgisayarınıza indirebilirsiniz. Projenin özelliklerine kabaca bakacak olursak aşağıdaki konuları kapsadığını söyleyebiliriz;

• AJAX ile Silverlight veri bağlantısı
• Dinamik Silverlight içeriği yaratılması
• Video oynatımı
• Tam ekran Silverlight uygulama yönetimi
• Video dosyalarının önbellekleme kontrolü
• Animasyon kullanımı
• XLINQ ve C#

Proje Kaynak Kodu - 05042008_2.rar (44,51 KB)

Projenin çalışır halini aşağıdaki adresten inceleyebilirsiniz.

http://daron.yondem.com/samples/sl10video_ineta/

Eğitime başından sonuna katılan herkese çok teşekkürler. Tekrar görüşmek üzere ;)

Bugün Yeditepe Üniversitesi'ndeydim. Uygulamalı mini bir Silverlight eğitimi planlarken bilgisayarların azizliğine uğradık. Bunun üzerine biz de uygulamasız olarak Silverlight, AJAX ve WPF konularına ışık hızıyla göz attık. Özellikle katılımcıların "eğitim" konseptine uygun kalabalıkta olması aslında normalde giremeyeceğimiz detaylara girebilmemizi sağladı.

Yeditepe Üniversitesi, Silverlight

Buradan organizasyonda emeği geçen tüm Bilgisayar Kulübü'ne ve özellikle sevgili MSP, Ümit Büyükabalı'ya çok teşekkür ediyorum.

INETA ve NETRON işbirliği ile yürüttüğümüz 3 günlük Silverlight eğitimi serisinin son gününü Cumartesi NETRON Altunizade şubesinde gerçekleştireceğiz. Daha önceki katılımcıların yarın telefon ile aranacak, ayrıca bu son güne gelemeyenlerine yerine ve salonu büyüttüğümüz için alabileceğimiz yeni katılımcılar için de tekrardan yeni talihliler seçileceği için benim tavsiyem eğer Silverlight ile Video uygulamalarıyla ilgileniyorsanız hemen aşağıda formu doldurarak kayıt olmanızdır. Talihliler yarın öğleden sonra telefon ile NETRON tarafından aranacak.

PCnet'in Nisan sayısındaki yazılarımı her ay olduğu gibi yine buradan sizlere duyurmak istiyorum :) Derginin OKUL bölümünde AJAX, ASP.NET 3.5, Expression Blend ve Silverlight ile ilgili yazılarım yer alıyor.

AJAX : ASP.NET AJAX İstemci Özellikleri
Expression Blend : WPF ile zengin doküman uygulamaları
Silverlight: Silverlight ve video dünyası
ASP.NET 3.5 : Bir sitenin ekran görüntüsünü ASP.NET ile nasıl alırsınız?

Hepinize sevgiler.

Bugün ODTÜ Bilgisayar Mühendisliği Bölümü'nde uzun soluklu bir Silverlight ve AJAX semineri düzenledik. Seminer boyunca gerçekten çok güzel sorular geldi. Katılımcıların yarısı her zamanki gibi ilk bir saatte salonu terk etti ve esas programcılar ile biz bize kaldık :) Zaten o noktadan sonra kalan ilgili dinleyiciler ile sanırım seminer 10 saat bile sürse sorun olmazdı.

ODTÜ, Silverlight ve AJAX Semineri

Buradan özellikle ODTÜ'den sevgili Arş. Gör. Serdar Çiftçi'ye aktiviteye katkılarından dolayı teşekkür ediyorum. Seminer sonrasında beni yalnız bırakmayan MSP'lerimiz Ali Rıza Babaoğlan, Murat Duman ve sevgili Tayfun Akçay'a da ayrıca teşekkür ediyorum. Güzel ve eğlenceli bir akşam geçirdim sayelerinde :)

Silverlight 2.0 yazılarıma başladığım günlerde aklıma olmasına rağmen atladığım bir yazıyı bugün sizlerle paylaşıyorum. Seminer ve eğitimlerde karşılaştığım kadarıyla hem Silverlight'ın sürümleri arasında hem de Silverlight ile geliştirme yapılacak araçların sürümleri arasında ciddi bir kafa karışıklığı söz konusu. Gelin elde neler var, ve ne yapmak için ne kullanmamız gerekiyor bir göz atalım.

Expression Blend : Blend'in ilk sürümünde WPF uygulamaları geliştirebilirsiniz fakat Silverlight uygulaması geliştiremezsiniz. Bunun nedeni aslında çok basit. Blend ilk çıktığında ortada Silverlight diye birşey yoktu. O nedenle ürün içerisinde de böyle bir destek yok. Özetle Expression Blend'in ilk sürümünün SL dünyasında yeri yok.

Expression Blend 2 : Blend'in bir sonraki sürümü olan Blend 2'nin Nisan ayı içerisinde satışa sunulması yani "release" olması bekleniyor. Bu sürüm içerisinde tabi ki Silverlight 1.0 desteği var. Şu an Blend 2'nin Beta'sını indirerek bilgisayarınızda çalıştırabilir ve SL 1.0 uygulamaları geliştirebilirsiniz. Adı sonradan SL 2.0 olarak değiştirilen SL 1.1 uygulamaları da yine Blend 2 içerisinde geliştirilebiliyordu fakat bu sistem değişti. Artık SL 1.1 kalmadığına göre zaten bu kullanımın da doğru olduğunu söyleyemez. Daha önceleri SL 1.1 kullananlara tavsiyem sistemlerindeki SL 1.1 ile ilgili herşeyi kaldırmaları.

Expression Blend 2.5 : Silverlight 2.0 uygulamaları geliştirmek istiyorsanız Expression Blend 2.5 ile yola çıkmanız gerekiyor. Unutmayalım ki SL 2.0 daha Beta 1 aşamasında bu nedenle Blend 2.5 de Preview sürümü ile karşımıza çıkıyor.

Microsoft Silverlight 1.0 Software Development Kit : Silverlight 1.0 ile ilgili uygulama geliştiriyorsanız sisteminize bu paketi yükleyerek hem yardım dosyalarından hem de Visual Studio'ya entegre olan SL Proje şablonundan faydalanabilirsiniz.

Microsoft Silverlight Tools Beta 1 for Visual Studio 2008 : Adından pek anlaşılmasa da aslında bu paket SL 2.0 için hazırlanmış durumda. VS içerisinde SL 2.0 proje şablonlarını ve gerekli Intellisense desteğini yüklüyor. Paket içerisinde aslında ayrıca da indirilebilen SL 2.0 BETA SDK da bulunuyor.

Benim her zamanki tavsiyem SL 2.0 ile ilgili yüklemeleri SL 1.0 uygulaması geliştirdiğiniz makinelere yapmamanız yönünde. Mümkünse bir sanal makine kullanarak SL 2.0 uygulama çalışmalarınızı söz konusu makine üzerinde devam ettirin.

Hepinize kolay gelsin.

TBD ve INETA işbirliğinde yaptığımız "4 Konu, 4 Gün" eğitimlerinin ikinci gününde bugün Silverlight'a değindik. Yine çok zevkli bir gün geçirdim. Günün sonunda Silverlight uygulamaları, animasyonları yapabiliyor, hatta bunları sunucu tarafındaki veriye de bağlayabiliyorduk. Tabi bir önceki günde AJAX'ı işlemiş olmamız işimizi epey kolaylaştırdı. Dersin sonunda elde ettiğimiz örneğin kodlarını aşağıdan indirebilirsiniz.

Örnek Uygulama Kaynak Kodu - 30022008_1.rar (8,17 KB)

Günün sonunda yine 17.30 civarı fire vermeye başladık. Aslında bu durum yapacağımız çekilişe kalanların şansını arttırdı :) Ne çekilişimi mi? Kendi yazdığımız bir program aracılığı ile (hiç sormayın) yaptığımız çekişle bir kişiye Vista Ultimate, SQL 2008 CTP, Visual Studio 2008 Trial ve Server 2008 Trial orijinal DVD'leri ile beraber bir de "Heroes Happen Here" kitap hediye ettim. Özetle çok zevkli bir gündü haftaya Pazar tekrar görüşmek üzere.

"4 Konu, 4 Gün" Silverlight Günü

Blogumdaki bazı yazıları yazgelistir.com üzerinden de sizlerle paylaştığımı biliyorsunuz. Özellikle Silverlight bölümü editorü olduktan sonra biraz daha sıkı çalışarak toplam 12 makalemin yayınlanmasını sağladım. Makalelere oylarınızı bekliyorum ;)

Silverlight içerisinde dinamik animasyonların yaratılması
Silverlight uygulamalarında Roller kullanımı
Slide.Show kurulumu ve kullanımı
Dinamik Silverlight nesneleri yaratmanın yolu : createFromXaml
Silverlight nesnelerini fare ile ekranda döndürün!
Silverlight ile bir EKG animasyonu
Silverlight animasyonlarında fare imlecini değiştirmek.
Animasyonla bir Silverlight düğmesi nasıl yaratılır?
Silverlight projelerinde Silverlight.JS dosyası
Silverlight Projelerini Ana Hatları
Silverlight Uygulamalarında Brush Yapıları
Silverlight ile MediaElement Kullanımı

Son iki gündür Isparta, Süleyman Demirel Üniversitesi'ndeydim. İki gün boyunca Silverlight, WPF, ASP.NET 3.5 AJAX ve LINQ konularına değindik. SDÜ zaten daha önce de öğrencilerinden bana gelen soru mailleri ile beni şaşırtan bir üniversite olmuştu. Bu ziyaretimde de epey şaşkın anlar yaşadım. Peki neye şaşırdım? SDÜ'de şu an Silverlight ve WPF konularında bitirme projeleri hazırlayan kardeşlerimiz var. Daha çoğu üniversitede bu konuların birer mistik ütopya olarak dolaştığını düşünürsek SDÜ öğrencileri ciddi şanslı. Seminerler boyunca gelen sorular ortalamanın çok üstünde bir seviyeye sahipti.

Süleyman Demirel Üniversitesi, Isparta

Buradan özellikle SDÜ'den sevgili Eğitim Görevlisi dostum Mehmet Albayrak'a ilgisi, misafirperverliği ve organizasyondaki katkısı için çok teşekkür ediyorum. Ayrıca tabi ki güler yüzleri ve teknoloji aşkları ile beni hem şaşırtan hem de sevindiren katılımcılara, SDÜ öğrencilerine de çok teşekürler. Kısa zamanda yakaladığım ufak bir manzara fotoğrafı ile buradan Ispartaya tekrar selamlar.

Eğirdir Gölü Tepesi, Isparta

Dün INETA ve NETRON sponsorluğundaki Silverlight eğitimimizin ikinci gününü "Silverlight ile Veri Uygulamaları" konusu ile tamamladık. Eğitim çok zevkli geçti. Öğlen yemeği için topluca Capitole'e gittik :) Çıkışta öğrencilerimden Oğuzcan Şahin benimle bir röportaj yaptı :) Sanırım yakında bir şekilde yayınlayacaktır, buradan da size haber veririm röportaj yayına girdiğinde. Terletici sorular vardı.

Silverlight Eğitimi 2. Gün

Eğitim günün sonunda yaptığımız Silverlight uygulamasının kaynak kodlarını aşağıdan indirebilirsiniz. Katılımcı arkadaşların her birine tek tek ilgileri ve yoğu konsantransyonları için teşekkür ediyorum.

Örnek Kaynak Kodu - 23032008_1.zip (11 KB)

Ücretsiz eğitim konseptinde düzenlediğimiz INETA ve NETRON sponsorluğundaki Silverlight 1.0 eğitimine gelen ve gelmeye devam eden büyük ilgi daha önce de tahmin ettiğim bir durumdu. Bu konuda maalesef "talihli" olamayıp seçilemeyen arkadaşlar haklı olarak sitemkar mailler gönderiyorlar. Emin olun bu tarz aktivitelere devam edeceğiz, mekan sponsorları aramaya devam ediyorum.

Bundan yaklaşık bir ay kadar öncesinde sevgili Burcu Kutlu ile temellerini attığımız bir diğer etkinliği bugün sizlere duyurmak istiyorum. Bu sefer de INETA ve TBD Genç işbirliği ile birer tam günlük dört farklı konuda bilgisayar başında eğitimler açıyoruz. "Bir günlük eğitim mi olur?" derseniz aslında haklısınız ama en azından kendi adıma düşündüğümde 3 saatlik seminerlerimden sonraki adım diyebilirim. Diğer Silverlight eğitimini 3 gün olarak tasarlamıştık. Umarım yakında bu gibi ücretsiz eğitimlerin sayısını arttıracağız. Bu seferlik dört konu, dört gün ;)

23 Mart - ASP.NET 3.5 AJAX
30 Mart - Silverlight
6 Nisan - Expression Blend ve WPF
13 Nisan - ASP.NET 3.5 ve LINQ

Eğitim saatleri her gün 10.00-18.00 arasında, eğitim yeri TBD İstanbul (Ali Ruhi Sok. No:2, K.3, Hasanpaşa/ Kadıköy).

Kayıt için bu adresi kullanabilirsiniz; http://www.tbdgenc.org/index.php?page=activityjoin&lang=tr&id=29

Buradan özellikle tekrar sevgili Burcu Kutlu'ya aktivitenin organizasyonundaki yoğun emekleri için çok teşekkür ediyorum.

Seminerlerde, videolarda ve geçen gün lansmanda üzerimdeki Silverlight T-Shirt'ü büyük beğeni kazandı :) O kadar ki bir an tekstil sektörüne girsem mi diye düşünmedim değil. Maalesef beğenilerini bana "Ben de istiyorum o T-Shirt'ten" şeklinde ileten arkadaşların hepsine birer T-Shirt hediye etmem mümkün olmayacak :) Onun yerine daha güzel birşey yaptım (en azından benim için daha güzel :)) ve kendi T-Shirt'ümün baskısını da yaptırmış olduğum Tish-O ile iletişime geçerek aynı tasarımın siteye yerleştirilmesini ve böylece herkesin sipariş verebilmesini sağladım :)

Orijinal Tasarımlar

Tish-O'nun arayüzünü kendi sitesine girdiğinizde zaten rahatlıkla keşfedebilirsiniz. Farklı bedenlerde ve stillerde T-Shirt siparişi verebiliyor, tasarımınızı kendiniz yapabiliyorsunuz. Baskı kalitesi şaşırtıcı derecede iyi, benim T-Shirt yaklaşık 6, 7 defa yıkanmasına rağmen en ufak bir baskı sorunu yok.

Siteden Silverlight T-Shirt sipariş verebilmek için yapmanız gerekenleri bir iki adımda göstermek istiyorum.

Tish-O sitesinde adım 1.

Herhangi bir T-Shirt tasarımı yaparken T-Shirt'ün ön ve arka yüzüne hazır Silverlight tasarımlarını yerleştirerek sipariş verebilirsiniz.

Tish-O sitesinde adım 1.

Görselleri ekledikten sonra sitedeki arayüzde basılacak boyutu da ayarlayabiliyorsunuz. Artık hepinizi bir sonraki seminerde Silverlight T-Shirt'leri ile bekliyorum. Kahramanlar aramızda ;)

Silverlight uygulamalarında kullandığımız XAML dosyalarının bazı durumlarda IIS tarafından istemciye gönderilmediğinden daha önceki yazılarımda bahsetmiştim. Bazen bu durum özellikle sunucu admini (hosting sağlayıcı) tarafından ek ücret talebi yapabilmek adına kasıtlı olarak yapılabildiği gibi bazen de gerçekten ortada bir sorun olabiliyor. Peki nasıl düzelteceğiz?

MIME Type tanımı nasıl yapılır?

Silverlight XAML dosyalarının IIS tarafından istemciye sunulabilmesi için aşağıdaki şekilde gerekli MIME type'ların tanımlanması gerecektir.

Dosya uzantısı: .xaml
MIME type: application/xaml+xml

Dosya uzantısı: .xap
MIME type: application/x-silverlight-app

XAML'ı biliyorduk da XAP da nesi? :) XAP şu an Silverlight 2.0 Beta 1 ile beraber kullanılan bir dosya uzantısı. Eğer olur ya bir fantezi çerçevesinde Silverlight 2.0 Beta 1 ile sanal makinenizde geliştirdiğiniz bir uygulamayı sunucuya koymak isterseniz şu an için XAP dosyaları için de gerekli MIME Type'ları tanımlamanız gerekecektir. İleride Silverlight 2.0'ın yayına çıkacak orijinal sürümlerinde bu uzantının kullanılmaya devam edeceği tabi ki garanti değil. Bahsettiğimiz teknoloji daha beta aşamasında.

Gelelim bu tanımlama işini nasıl yapacağımıza. Sunucuda IIS Manager'ı açtıktan sonra MIME Type ayarı yapmak istediğiniz siteyi seçerek sağ tuş tıklayarak gelen menüden "Properties" komutunu veriyoruz. Karşımıza gelen pencereden "HTTP Header" sekmesine geçerek en alttaki "MIME Types" düğmesine tıklıyoruz.

IIS Manager içerisinde MIME Types seçeneğini bulduk.

"MIME Types" bölümüne girdikten sonra hemen "New" düğmesine tıklayarak yeni bir "MIME Type" eklemek üzere bir önceki paragraftaki ayarları buraya aynen yazıyoruz ve gördüğümüz tüm "OK" düğmelerine basarak IIS Manager arayüzüne geri dönüyoruz.

Yeni bir MIME Type ekliyoruz.

Artık gerekli uzantılar tanımlandığı için herhangi bir sorun yaşamayacağız.

Hepinize kolay gelsin.

Sizlerle blogumdan paylaştığım makalelerin çoğunu yazgelistir.com üzerinden de okuyucularla paylaşıyorum. Bunun nedeni daha önce birkaç kez yazmıştım; malum herkes benim blogumu takip etmeyebilir. Yazılarımın daha geniş bir kitleye ulaşması için farklı sitelerde aynı yazılarımın yayınlanmasını faydalı görüyorum.

Bugün güzel bir gelişme oldu ve yazgelistir.com'da Silverlight bölümü açıldı. Bu güzel haberle beraber ben de söz konusu bölümün editörü oldum. Buradan tüm YazGeliştir ekibine ve özellikle Işıl Orhanel'e ilgisi ve çalışması için teşekkür ediyorum. Artık bir YazGelistir yazarı olarak Silverlight makalelerimi yazdıktan sonra bir YazGelistir editörü olarak da kendi makalelerimi onaylayabileceğim :) Hoş bir duygu. ;)

Bugün INETA ve NETRON sponsorluğunda Silverlight Workshop serimizin ilkini gerçekleştirdik. Sabah 10.00'da başlayarak gerekli yüklemelerimizi de yaptıktan sonra 18.00'e kadar sanırım sadece bir teneffüs ve öğle yemeği molası ile yoğun bir maraton yaptık. Gerçekten büyük zevk aldım, eğlendim :) Güzel bir pazar günü oldu.

Silverlight Workshop Gün 1

Workshop'un sonraki günleri için katılımcılar tekrar telefon ile aranarak onaylanacak. Şu anki katılımcılardan sonraki günlere katılamayanların yerine diğer başvuranlardan talihliler seçilecek. O nedenle başvuru yapmaya isteyenler devam edebilir.

İlk günde yaptığımız birkaç minik örneğin kodlarını aşağıda sizlerle paylaşıyorum. Son olarak buradan tekrar sevgili dostum Ercan Altuğ Yılmaz'a ve NETRON ekibine teşekkür ediyorum.

Örnek çalışmalara ait kaynak kodlar - 09032008_1.rar (15,12 KB)

Hatırlarsanız sizlere Microsoft Student2Business programı kapsamında Microsoft İstanbul ofislerinde yaptığımız eğitimden bahsetmiştim. Hatta sonrasında bir de söz konusu eğitimle ilgili bir video paylaşmıştım. İşte o eğitimdeki öğrencilerimden Özgür Arman sözünü tuttu ve süper bir iş yaptı. Özgür özellikle oyun programlamaya olan ilgisi ve konuya uzmanlık derecesinde hakimiyetini (benim sohbetlerimdeki izlenimimle sabittir) Silverlight dünyasına taşıdı.

http://www.ozgurarman.we.bs/SoloTest_4_0/index.html

Yukarıdaki adresten Özgür'ün hazırladığı Silverlight oyununu inceleyebilirsiniz. Hepimizin çocukken epey oynadığı, taşları birbirinin üzerinden atlatarak yediğimiz :D ve kalan taş sayısına göre genelde "aptal" çıktığımız :) oyunu Özgür Silverlight ile sıfırdan geliştirdi. Oyunu görsel anlamda incelerken bir yazılımcının elinden çıktığını aklınızda bulundurmakta fayda var. :)

Türkiye'de Silverlight 1.0 ile yapılmış ilk oyun!

Dikkat: Ekran görüntüsünden de görebileceğiniz üzere Silverlight'ın Cross-Browser olmasından faydalanarak oyunumuzu Safari'de de rahatlıkla çalıştırabiliyoruz.

Teşekkürler Özgür ;)

PCnet'in Mart sayısındaki yazılarımı her ay olduğu gibi yine buradan sizlere duyurmak istiyorum :) Derginin OKUL bölümünde AJAX, ASP.NET 3.5, Expression Blend ve Silverlight ile ilgili yazılarım yer alıyor.

AJAX : İnce ayar AJAX.
Expression Blend : WPF tasarımında görsel kaynaklar
Silverlight: Silverlight projelerinin bileşenleri
ASP.NET 3.5 : ASP.NET 3.5 Veri Kontrolleri

Hepinize sevgiler.

Uzun süredir planladığım WorkShop'lardan ilk seriyi sizlere duyuruyorum. Seminerlerden farklı olarak WorkShop'larda herkes bilgisayar başında olacak. Toplam 24 saat olarak düşündüğüm bu eğitim serisini INETA ve NETRON sponsorluğunda gerçekleştiriyoruz. Katılım tamamen ücretsiz! Üç ayrı gün olarak planladığımız eğitimin tarihleri, konuları, katılım formu aşağıdaki şekilde;

Buradan özellikle sevgili dostum E. Altuğ Yılmaz'a Netron'da sınıf ayarlanabilmesi için yardımlarından dolayı teşekkür ediyorum.

Silverlight Workshop serisi afişleri

Unutmadan, bu daha önce sizlere duyurduğum Netron'daki MS Web Designer eğitiminin tanıtımı amacıyla yapılan bir şey değil. Zaten yukarıdaki tarihlerde Nisan ayına kadar yaydığımı da görebilirsiniz. Bu benim müsait günlerime ait plandan kaynaklanıyor. Yukarıdaki programda adam akıllı eğitim yapacağız. Aslında bahsettiğim ücretli eğitimin sadece Silverlight kısmına rakip bile görülebilir, tek farkı buradaki 24 saate karşılık o eğitimde 60 saat ve ek 20 saat de projeye ayrıca ayırabiliyor olmamız. Eh 80 saatlik işi burada 24 saatte yapabiliriz dersem o da bariz yalan olur tabi :)

Tarihler uygun değil diyenlere yakında umarım farklı sürprizler de yapabileceğim ;)

Silverlight uygulamalarında bazı durumlarda animasyonları dinamik olarak yaratmak gerekebilir. Bu durum genelde söz konusu animasyonla ilgili bazı değerlerin önceden bilinmemesinden kaynaklanır. Örneğin dinamik olarak yarattığınız bir Silverlight nesnesine bağlı bir animasyon hazırlamak isteyebilirsiniz, fakat hedef nesnenin özellikleri belli olmadığı için animasyonu da yaratmanız mümkün olmayacaktır veya animasyonla ilgili bazı değerleri AJAX ile sunucu tarafından alıyor olabilirsiniz. Bu gibi durumlarda dinamik animasyon yaratabiliyor olmak hayati öneme sahip.

Silverlight içerisinde dinamik nesneler yaratırken createFromXaml adında bir metod kullanıyoruz, aynı şekilde dinamil animasyonlar (Storyboard) yaratırken de yine createFromXaml metodunu kullanıyor olacağız. createFromXaml metodu yapısı gereği tek bir parametre alıyor, söz konusu parametre yaratılacak olan nesnenin veya animasyonun XAML kodu. Animasyon tarafına tam olarak geçmeden önce gelin aşağıdaki şekilde bir Silverlight projesi yaratalım.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="300" Height="300"

  Background="White"

  x:Name="Page"

  MouseLeftButtonDown="Tiklandi"

  >

  <Ellipse Width="45" Height="45" Fill="#FFFF0000" Canvas.Left="22" Canvas.Top="27" x:Name="Top" RenderTransformOrigin="0.5,0.5">

    <Ellipse.RenderTransform>

      <TransformGroup>

        <ScaleTransform ScaleX="1" ScaleY="1"/>

        <SkewTransform AngleX="0" AngleY="0"/>

        <RotateTransform Angle="0"/>

        <TranslateTransform X="0" Y="0"/>

      </TransformGroup>

    </Ellipse.RenderTransform>

  </Ellipse>

</Canvas>

Yukarıdaki Silverlight uygulamamız içerisinde adını Top koyduğumuz bir Ellipse nesnesi yer alıyor. Ayrıca Silverlight uygulamamızın ana öğesi olan root Canvas'ın da MouseLeftButtonDown durumuna bir event handler bağlamış durumdayız. Birazdan Tiklandi adındaki JavaScript fonksiyonumuzu yazmaya başlayacağız.

Uygulamamızda amacımız Silverlight içerisinde kullanıcı her nereye tıklarsa tıklasın topun hoş bir animasyon ile o noktaya gitmesini sağlamak. Bunun için tabi ki her animasyon (StoryBoard) nesneleri yaratmamız gerekecek fakat bu animasyonların özellikleri şu anda belli değil çünkü kullanıcının sahnede nereye tıklayacağını bilmiyoruz. O nedenle animasyonları dinamik olarak tıklama anında yaratarak çalıştırmamız gerekecek. Yaratacağımız animasyonların şablonu aşağıdaki gibi olmalı.

    <Storyboard x:Name="Storyboard1">

      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Top" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">

        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="185"/>

      </DoubleAnimationUsingKeyFrames>

      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Top" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="200"/>

      </DoubleAnimationUsingKeyFrames>

    </Storyboard>

Yukarıdaki kod içerisinde Top nesnemizin sahnedeki yerini değiştiriyoruz. Bu animasyonu hızlı bir şekilde Blend ile yaratarak örnek XAML kodunu kopyaladık. Animasyon içerisinde özellikle koyu yazılan yerlerdeki Value değerlerine dikkat etmekte fayda var. Bu değerlerin Top'un gideceği hedef X ve Y koordinatları. Şimdi geçip yavaş yavaş Tiklandi JavaScript fonksiyonumuzu yazmaya başlayalım.

function Tiklandi(sender, args)

{

    var TiklananYer = args.getPosition(null);

    var AnimXAML = '<Storyboard xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Storyboard' + TiklananYer.X.toString() + TiklananYer.Y.toString() + '"><DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Top" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"><SplineDoubleKeyFrame KeyTime="00:00:01" Value="' + (TiklananYer.X - sender.findName("Top").width) + '"/></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Top" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"><SplineDoubleKeyFrame KeyTime="00:00:01" Value="' + (TiklananYer.Y - sender.findName("Top").height) + '"/></DoubleAnimationUsingKeyFrames></Storyboard>';

    var Anim = sender.getHost().content.createFromXaml(AnimXAML);

    sender.resources.Add(Anim);

    Anim.Begin();

}

Yukarıdaki fonksiyon istediğimiz işlemi tamamlamamız için yeterli. Gelin bu fonksiyon içerisinde neler yaptığımıza bir bakalım. Birinci satırda hemen TiklananYer adındaki bir değişkene fare ile tıklanan noktanın koordinatlarını kaydediyoruz. Bunun için Tiklandi fonksiyonumuza gelen ikinci parametre olan args üzerinden getPosition metodunu kullanıyoruz. Bir sonraki adımda sıra geldi yaratacağımız animasyonun XAML kodunu hazırlamaya.

AnimXAML adında bir değişkene Blend içerisinde hazırladığımız XAML metnini aktarıyoruz. Fakat bunu yaparken metin içerisindeki bazı şeyleri de JavaScript ile atamamız gerekiyor. Örneğin hem X hem de Y yönünde gidilmesi hedeflenen noktanın koordinatlarını TiklananYer değişkenimizden alarak XAML içerisine yerleştiriyoruz. Top nesnemizin tam olarak tıklanan noktayı ortalayabilmesi için fareden gelen koordinatların topun yüksekliğini veya genişliğini çıkartmayı da unutmamamız gerek. XAML kodu içerisinde değiştirdiğimiz bir diğer özellik de StoryBoard nesnesinin adı. Her tıklama işleminde yeni bir StoryBoard yaratıp Silverlight animasyonumuza ekleyeceğimiz için farklı isimler vermemiz gerekecek. Aynı isimde birden çok StoryBoard ekleyemeyiz. Bunun için biz örneğimizde X ve Y koordinatlarını metin olarak StoryBoard adının sonuna ekledik. Kullanıcının aynı noktaya tıklamayacağını ümit ediyoruz :) İsterseniz siz söz konusu animasyonun var olup olmadığını kontrol ederek daha sağlıklı bir işleyiş de sağlayabilirsiniz. Animasyon varsa yaratmadan doğrudan çalıştırabilirsiniz.

createFromXaml metodu ile hazırlamış olduğumuz XAML kodundan StoryBoard nesnemizi yarattırarak Anim adında bir değişkene aktarıyoruz. Artık sıra geldi bu animasyonu Silverlight sayfamızın kaynaklarına (resource) eklemek. O işlemi de tamamladıktan sonra artık animasyonumuzu çalıştırabiliriz.

Uygulamayı çalıştırdığınızda Silverlight içerisinde nereye tıklarsanız tıklayın topun son tıklanan yere doğru hareket ettiğini göreceksiniz. Eğer top tıkladığınız noktaya ulaşmadan başka bir yere tıklarsanız yönünü değiştirerek oraya doğru geldiğini de görebilirsiniz. Bunun nedeni böyle bir durumda iki farklı animasyonun yaratılarak çalıştırılıyor olması. Son biten animasyon son başlatılan olacağı için top en sonunda kendisini son tıklanan noktada bulacaktır.

Hepinize kolay gelsin.

Silverlight uygulamalarında kullanıcı ile Silverlight nesneleri arasında bir iletişim sağlayabilmek için fare tıklamalarını kullanmak gerçekten çok kolay. Bu deneyimi bir üst adıma yükselterek sitemizin ziyaretçilerine Silverlight uygulamalarında fareleriniz roller'larını kullanma şansı da tanıyabiliriz. Aslında kullanacağımız teknik Silverlight 1.0'ın yapısı gereği istemci tarafında JavaScript ile söz konusu durumları yakalayarak bunu Silverlight nesnelerine yansıtmak olacak.

İlk olarak gelin Expression Blend 2 ile yeni bir Silverlight projesi yaratalım ve tasarım kısmına bir Image nesnesi yerleştirelim. Hedefimiz site ziyaretçisinin faresinin roller'ı ile bu resmi büyütüp küçültebilmesi, bir anlamda Zoom yapabilmesi. Hazılardığımız XAML kodu aşağıdaki şekilde olmalı.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="640" Height="480"

  Background="White"

  x:Name="Page"

  >

  <Image Width="352" Height="229" Canvas.Left="8" Canvas.Top="8"

        Source="Autumn Leaves.jpg" RenderTransformOrigin="0,0">

    <Image.RenderTransform>

      <TransformGroup>

        <ScaleTransform x:Name="Boyutlandir" ScaleX="1" ScaleY="1"/>

        <SkewTransform AngleX="0" AngleY="0"/>

        <RotateTransform Angle="0"/>

        <TranslateTransform X="0" Y="0"/>

      </TransformGroup>

    </Image.RenderTransform>

  </Image>

</Canvas>

Yukarıdaki XAML kodu içerisinde özellikle dikkat etmemiz gereken nokta Image içerisindeki ScaleTransform tagının programatik olarak ulaşılabilir bir adının olmasının şart olması. Biz örneğimizde söz konusu taga Boyutlandir adını verdik. Böylece bu nesneye ulaşarak ScaleX ve ScaleY değerlerini programatik olarak değiştirerek resme zoom yapılmış gibi bir ortamsağlayabileceğiz.

Bundan sonra tüm yapacaklarımızı projemizin Page.xaml.js dosyası içerisinde yapacağız. İlk olarak bizim için otomatik olarak tanımlanmış olan handleLoad fonksiyonu içerisine sayfa ilk açıldığında ve Silverlight animasyonu yaratıldığında çalıştırılmak üzere aşağıdaki kodları yazıyoruz.

    if (window.addEventListener)

        window.addEventListener('DOMMouseScroll', ScrollOldu, false);

        document.onmousewheel = ScrollOldu;

        window.onmousewheel = document.onmousewheel;

Yukarıdaki kodlarda aslında aynı işlemi birden çok farklı yöntem ile birçok kes yapıyoruz. Bunun nedeni kodumuzun hem FireFox hem Safari hem de Internet Explorer'da çalışmasını sağlayabilmek. Yaptığımız şeyi kabaca tanımlamak gerekirse aslında tarayıcının MouseScroll durumunu kendi tanımladığımız ScrollOldu adında bir JavaScript fonksiyonun yönlendiriyoruz. Bir anlamda kendi "event handler" yapımızı tanımlıyoruz.

Bir sonraki adımda artık yavaş yavaş ScrollOldu fonksiyonunu yazmamız gerekiyor. Fakat bunun öncesinde birkaç ufak bilgiyi paylaşmak istiyorum. ScrollOldu durumu birazdan göreceğimiz, kendisiyle beraber gelen parametresinde scroll işleminin değerini getirir. Bu değer farklı tarayıcılarda farklı şekillerde yakalanır. O nedenle biz de bir çok kontrol yapıyor olacağız. Bahsettiğimiz değer aslında artı veya eksi bir Integer değeridir ve ne kadar scroll edilmesi gerektiğini tanımlar. Biz örneğimizde sadece bu değerin + veya - olup olmadığını kontrol edeceğiz, scroll miktarı ile zoom'u doğrudan eşleştirmeyeceğiz. Böylece farklı bilgisayarlarda scroll hızı farklı ayarlanmış ise bu durum uygulamaya yansımayacak.

    var ScrollMiktari = 0;

    if (!event)

        event = window.event;

    if (event.wheelDelta)

    {

        ScrollMiktari = event.wheelDelta;

        if (window.opera)

            ScrollMiktari = -ScrollMiktari;

    }

    else if (event.detail)

        ScrollMiktari = -event.detail;

Yukarıdaki kodumuz ScrollOldu fonksiyonumuzun baş kısmı. ScrollOldu fonksiyonumuza gelen event adındaki parametrenin tarayıcıya göre var olup olmamasına göre farklı eşleştirmeler yapıyoruz. event nesnesinin yine tarayıcıya göre wheelDelta özelliği var oradan gerekli değeri yakalıyoruz, yoksa bu sefer detail özelliğinden değerimizi alıyoruz. Bazı tarayıcılarda aşağıya doğru scroll + değer anlamına gelirken bazılarında tam tersi olabiliyor. Tarayıcılar arası farkların detaylarına girmeyeceğim fakat mantığı anlamakta fayda var.

Artık ScrollMiktari değişkenimize scroll değerini aldıktan sonra gelen değerin pozitif veya negatif olmasına göre Image nesnemizi boyutlandırmamız gerekiyor.

    if (ScrollMiktari)

    {

        var Boyutlandir = document.getElementById("SilverlightControl").content.findName("Boyutlandir");

        if (ScrollMiktari > 0)

        {

            Boyutlandir.ScaleX = Boyutlandir.ScaleX  + 0.1;

            Boyutlandir.ScaleY = Boyutlandir.ScaleX  +  0.1;

        }

        else

        {

            Boyutlandir.ScaleX = Boyutlandir.ScaleY - 0.1;

            Boyutlandir.ScaleY = Boyutlandir.ScaleY - 0.1;

        }

    }

Gördüğünüz gibi ilk başta sayfadaki Silverlight kontrolümüzü bularak içerisinden Boyutlandir nesnemizi bir değişkene aktarıyoruz. Sonrasında da ScrollMiktarı'nın durumuna göre Boyutlandir'in ScaleX ve ScaleY değerlerini 0.1 artırıyor veya azaltıyoruz.

Son olarak yapmamız gereken işlem ise Silverlight uygulamamızın bulunduğu sayfanın kendi içinde Scroll etmesini engellemek. Bunun için de fonksiyonumuzun sonunda MouseScroll durumunu tarayıcının değerlendirmesini sonlandırmak için olumsuz değerler geri döndürüyor olacağız.

    if (event.preventDefault)

        event.preventDefault();

    event.returnValue = false;

Yazacağımız JavaScript kodları sonlandığında göre artık Page.xaml.js dosyasının son halini inceleyebiliriz.

if (!window.UntitledProject1)

    window.UntitledProject1 = {};

 

UntitledProject1.Page = function()

{

}

 

UntitledProject1.Page.prototype =

{

    handleLoad: function(control, userContext, rootElement)

    {

    if (window.addEventListener)

        window.addEventListener('DOMMouseScroll', ScrollOldu, false);

        document.onmousewheel = ScrollOldu;

        window.onmousewheel = document.onmousewheel;

    }

}

function ScrollOldu(event)

{

    var ScrollMiktari = 0;

    if (!event)

        event = window.event;

    if (event.wheelDelta)

    {

        ScrollMiktari = event.wheelDelta;

        if (window.opera)

            ScrollMiktari = -ScrollMiktari;

    }

    else if (event.detail)

        ScrollMiktari = -event.detail;

    if (ScrollMiktari)

    {

        var Boyutlandir = document.getElementById("SilverlightControl").content.findName("Boyutlandir");

        if (ScrollMiktari > 0)

        {

            Boyutlandir.ScaleX = Boyutlandir.ScaleX  + 0.1;

            Boyutlandir.ScaleY = Boyutlandir.ScaleX  +  0.1;

        }

        else

        {

            Boyutlandir.ScaleX = Boyutlandir.ScaleY - 0.1;

            Boyutlandir.ScaleY = Boyutlandir.ScaleY - 0.1;

        }

    }

    if (event.preventDefault)

        event.preventDefault();

    event.returnValue = false;

}

Hepinize kolay gelsin.

Bundan bir süre önce Microsoft'un Students 2 Business programı çerçevesinde bir Silverlight eğitimi düzenlemiştik. Eğitim içerisinde bir ara sınıfı mini bir stüdyoya çevirerek bir video kaydı da yapıldı :) Sonunda söz konusu video kaydı Microsoft'un ücretsiz Silverlight Hosting hizmeti olan Silverlight Streaming Services kullanılarak S2B sitesinde yayınlandı.

Video sınıftaki sıcaklığı pek yansıtamamış ama olsun :) Normalde çok daha eğlenceli bir sınıftık.

Silverlight çıktığından bu yana özellikle yurt dışında bir çok ücretsiz ve açık kaynak kodlu proje yayınlandı. Bunların arasında gerçek hayatta kullanılabilirliği en yüksek olan proje Slide.Show projesi. Bu yazıda yukarıdan aşağıda Slide.Show'u inceleyerek kurulumuna ve özelleştirilmesine değineceğiz.

Slide.Show paketini aşağıdaki adreste yer alan SlideShowSource linkine tıklayarak bilgisayarınıza indirebilirsiniz.

http://www.codeplex.com/SlideShow/Release/ProjectReleases.aspx?ReleaseId=8862

Slide.Show paketini kullanmak üzere Expression Web ile "File / New / Web Site" menüsünden yeni bir web sitesi yaratalım. Yarattığımız web sitesinde de boş bir HTML dosyası ekleyelim. Örneğimizde Slide.Show'u harici bir XML dosyasına bağlayacağız. Bir sonraki adımda Slide.Show kontrolüne ait Silverlight.js ve Slideshow.js dosyalarını projemize eklememiz gerekiyor. Bunun için Expression Web içerisinde "File / Import / File" menüsünden biraz önce indirmiş olduğumuz Slide.Show paketi içerisinde "Scripts/Release" klasöründe yer alan iki JavaScript dosyasını seçiyoruz. Sıra geldi bu her iki dosyayı da HTML sayfamıza linklemeye. Aşağıdaki şekilde bir kod ile o işlemi de tamamlayabiliriz.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Daron Yöndem Photo Gallery</title>

<script type="text/javascript" src="Silverlight.js"></script>

<script type="text/javascript" src="SlideShow.js"></script>

</head>

 

<body>

 

</body>

 

</html>

Yapacağımız örnekte Slide.Show tüm sayfayı kaplayacağı için aşağıdaki şekilde CSS tanımlamaları da yapmamız gerekecek.

    <style type="text/css">

        html,body,.SlideShow

        {

            height: 100%;

        }

        body

        {

            margin: 0px;

        }

    </style>

Son olarak Slide.Show kontrolünü sayfaya yerleştirmek üzere gerekli JavaScript kodunu da yazarak sayfamızın HTML yapısını aşağıdaki şekilde tamamlıyoruz.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Daron Yöndem Photo Gallery</title>

<script type="text/javascript" src="Silverlight.js"></script>

<script type="text/javascript" src="SlideShow.js"></script>

    <style type="text/css">

        html,body,.SlideShow

        {

            height: 100%;

        }

        body

        {

            margin: 0px;

        }

    </style>

</head>

 

<body>

    <script type="text/javascript">

        new SlideShow.Control(new SlideShow.XmlConfigProvider());

    </script>

</body>

 

</html>

Sıra geldi Silverlight.js ve Slideshow.js dosyamız ile aynı konumda bulunacak olan ve uygulamamızla ilgili tüm ayarları içerek olan Configuration.xml dosyasını düzenlemeye. Bunun için Expression Web içerisinde "File / New / XML" komutunu kullanabilirsiniz. Yaratacağımız Slide.Show uygulamasında kullanacağımız harici componentler de olacak. Söz konusu componentler Slide.Show download paketi içerisinde Script/Debug klasöründe bulunuyor. Bu klasörde bulunan tüm dosyaları kendi projemizde bir Scripts klasörü oluşturarak içerisine kopyalayalım. Böylece Configuration.xml içerisinde bu dosyaları linkleyerek uygulamamıza ek özellikler katabileceğiz.

<?xml version="1.0" encoding="utf-8" ?>

<configuration width="100%" height="100%">

  <scripts>

    <script key="AlbumViewer" url="Scripts/AlbumViewer.js" />

    <script key="Button" url="Scripts/Button.js" />

    <script key="DataProvider" url="Scripts/DataProvider.js" />

    <script key="NavigationTray" url="Scripts/NavigationTray.js" />

    <script key="ProgressIndicator" url="Scripts/ProgressIndicator.js" />

    <script key="SlideDescription" url="Scripts/SlideDescription.js" />

    <script key="SlideViewer" url="Scripts/SlideViewer.js" />

    <script key="ThumbnailViewer" url="Scripts/ThumbnailViewer.js" />

    <script key="Transition" url="Scripts/Transition.js" />

  </scripts>

  <modules>

    <module type="SlideViewer" />

    <module type="ProgressBar" />

    <module type="SlideDescription" />

    <module type="NavigationTray">

      <option name="initialAlbumView" value="true" />

    </module>

  </modules>

  <transitions>

    <transition type="FadeTransition" name="CrossFadeTransition" />

    <transition type="ShapeTransition" name="CircleOutTransition" />

    <transition type="SlideTransition" name="SlideLeftTransition" />

    <transition type="SlideTransition" name="SlideDownTransition">

      <option name="direction" value="Down" />

    </transition>

    <transition type="WipeTransition" name="WipeRightTransition">

      <option name="direction" value="Right" />

    </transition>

  </transitions>

  <dataProvider type="XmlDataProvider" />

</configuration>

Yukarıda gördüğünüz Configuration dosyası içerisinde SlideShow uygulamamızda kullanacağımız modülleri, script dosyalarını ve geçiş efektlerini belirliyoruz. Son olarak sıra geldi Slide.Show içerisinde gösterilecek olan fotoğrafların bir listesini ayrı bir XML dosyası içerisine yerleştirmeye. Bu noktada da data.xml adında bir dosya yaratarak aşağıdaki şekilde albümler ve fotoğraflar yaratabiliyoruz.

<data transition="CrossFadeTransition">

  <album

    title="Silverlight Trainings"

    description="All around the world"

    image="Images/a29.jpg">

    <slide

      title="Microsoft Turkey Silverlight Trainings"

      description="Happy times."

      image="Images/s07.jpg"

      thumbnail="Images/t07.jpg" />

  </album>

</data>

Yukarıdaki yapıyı takip ederek birden çok albüm ve her albüme birden çok fotoğraf ekleyebilirsiniz. Albümlere ait kapak resmini Album tagının içerisinde image özelliğine atarken her bir slayt için de Slide tagına bir normal fotoğraf bir de thumbnail fotoğrafı aktarmanız gerekiyor.

Tüm bu ayarları tamamladıktan sonra ayrı uygulamanızı internet üzerinden yayınlayabilirsiniz.

Hepinize kolay gelsin.

Silverlight animasyonları içerisinde XAML ile tanımlanan tüm nesneleri dinamik olarak kod ile de tanımlama şansımız var. Bu makalede Silverlight ile dinamik içerik üretimine dair detaylardan bahsedeceğiz.

Silverlight içerisinde dinamik içerik üretebilmek için kullanacağımız JavaScript metodu createFromXaml adında. Bu metod sadece tek bir parametre alıyor, o da üreteceğimiz nesneye ait XAML kodunun ta kendisi. İstediğimiz herhangi bir XAML kodunu createFromXaml metoduna vererek geriye uygun bir JavaScript nesnesi alabiliyoruz. Gelin ufak bir örnek ile konuya giriş yapalım. Aşağıda bir dikdörtgenin XAML kodu bulunuyor, aynı dikdörtgeni JavaScript ile yaratacağız.

<Rectangle Width="100" Height="100" Fill="#FFFF0000" Canvas.Left="100" Canvas.Top="100"/>

Yukarıdaki dikdörtgenin aynısı JavaScript ile yaratabilmek için ilk seçeneğimiz createFromXaml metoduna Rectangle tagını vererek dikdörtgenin özelliklerini ayrı ayrı ayarlamak.

        var Dikdortgen = control.content.createFromXaml("<Rectangle/>");

        Dikdortgen.width = 100;

        Dikdortgen.height = 100;

        Dikdortgen["Canvas.Left"] = 100;

        Dikdortgen["Canvas.Top"] = 100;

        Dikdortgen.Fill = "#FFFF0000";

        rootElement.children.add(Dikdortgen);

Yukarıdaki kodun ilk satırında createFromXaml metodu ile dikdörtgenimizi yaratarak Dikdortgen adındaki bir değişkene aktarıyoruz. Sonrasında da her satırda Dikdortgen değişkeni ile ilgili bir özelliği ayarlıyoruz. En son satırda ise elde ettiğimiz Dikdortgen nesnesini root Silverlight elementinin içine eklemek için children.add metodunu kullanıyoruz. Bu şekli ile birden çok dikdörtgeni farklı özellikler ile dinamik olarak Silverlight animasyonlarına ekleyebilirsiniz.

Örneğimizde bahsi geçen dikdörtgen nesnesini dinamik olarak yaratmanın bir diğer yolu da doğrudan tüm XAML kodunu createFromXaml metoduna topluca vermek. Böylece tek tek dikdörtgenin özelliklerini sonradan ayarlamaya ihtiyaç duymadan daha az kod ile sorunumuzu çözebiliriz.

        var Dikdortgen = control.content.createFromXaml('<Rectangle Width="100" Height="100" Fill="#FFFF0000" Canvas.Left="100" Canvas.Top="100"/>');

        rootElement.children.add(Dikdortgen);

Buraya kadar yaptığımız tüm örneklerde isimsiz nesneler kullandık. Yarattığımız hiçbir dikdörtgenin özel bir ismi yok. Eğer bu dikdörtgenlere veya yarattığınız farklı nesnelere sonradan programatik olarak ulaşabilmek isterseniz baştan bu nesnelere birer isim vermiş olmak gerekecektir. Böyle bir durumda dikdörtgenimizin kodu aşağıdaki şekilde olacaktır.

  <Rectangle x:Name="KUTU" Width="100" Height="100" Fill="#FFFF0000" Canvas.Left="100" Canvas.Top="100"/>

İlk dikdörtgenimize ek olarak bu dikdörtgenin x:Name şeklinde bir özelliği var ve söz konusu özelliğe KUTU değeri aktarılmış. Böylece bu nesneye programatik olarak KUTU adı üzerinden ulaşabileceğiz. Esas sorun yukarıdaki kodu createFromXaml metoduna verdiğinizde karşınıza çıkacak. createFromXaml metodu sürekli hata verecek ve maalesef verdiği hata mesajının da pek anlamlı olmaması sizi çözüm yoluna yönlendirmeyecektir. Bu tarz bir durumda createFromXaml'ın hata vermesinin aslında basit bir nedeni var. x:Name olarak dikdörtgene verdiğimiz özellik aslında XML yazım kuralları gereği ikinci bir namespace kullanıldığı anlamına geliyor. Söz konusu namespace aslında her Silverlight XAML dosyasının roor (kök) elementinde tanımlı durumda.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="640" Height="480"

  Background="White"

  x:Name="Page"

  >

  <Rectangle x:Name="KUTU" Width="100" Height="100" Fill="#FFFF0000" Canvas.Left="100" Canvas.Top="100"/>

</Canvas>

Yukarıdaki kod içerisinde kalın olarak yazılı kısımda bulabileceğiniz namespace tanımları kök Canvas nesnesinde tanımlanmış olduğu için tüm alt nesneler için de geçerli olacaktır. Oysa bizim createFromXaml metoduna verdiğimiz XAML kodunda kullanılan x namespace'inden createFromXaml metodunun haberi yok. Bu durumda aynı namespace tanımlarını createFromXaml'a verdiğimiz kod içerisinde de yapmak zorundayız.

        var Dikdortgen = control.content.createFromXaml('<Rectangle xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="KUTU" Width="100" Height="100" Fill="#FFFF0000" Canvas.Left="100" Canvas.Top="100"/>');

        rootElement.children.add(Dikdortgen);

Yukarıdaki kod içerisinde de gördüğünüz üzere artık createFromXaml metoduna verdiğimiz XAML koduna gerekli namespace tanımlamalarını da ekledik. Böylece herhangi bir hata ile karşılaşmadan istediğimiz isimlerde nesneler yaratarak dinamik olarak animasyonlara ekleyebilir ve bu nesnelere sonradan programatik olarak da ulaşabiliriz.

Hepinize kolay gelsin.

Silverlight animasyonları içerisindeki nesnelerin dinamik olarak kullanıcılar tarafından boyutlandırılmasını sağlayabilirsiniz. Bunun için de tabi ki en hızlı yol kullanıcıya fare ile herhangi bir nesneyi tutarak büyütüp küçültme şansı tanımaktır. Bu makalemizde bu çeşit bir işlevselliği nasıl oluşturabileceğimizi inceleyeceğiz.

Yeni bir Silverlight projesi oluşturarak sahneye deneme amaçlı olarak bir Rectangle nesnesi yerleştirelim. Amacımız kullanıcıların bu nesneye tıklayarak dikdörtgeni fare ile büyütüp küçültebilmelerini sağlamak. Dikdörtgene tıkladıktan sonra fare ile nesneden uzaklaştıkça çizim büyüyecek, nesnenin sol üst köşesine yaklaştıkça dikdörtgen küçülecek.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="640" Height="480"

  Background="White"

  x:Name="Page"

  >

  <Rectangle MouseLeftButtonDown="FareGeldi" MouseMove="FareHareketli" MouseLeftButtonUp="FareGitti" Width="249" Height="237" Fill="#FFFF0000" Stroke="#FF000000" Canvas.Left="86" Canvas.Top="36"/>

</Canvas>

Yukarıdaki şekliyle Silverlifght animasyonumuzu hazırlıyoruz. XAML kodumuz içerisinde bir dikdörtgen bulunuyor. Bu dikdörtgen yerine siz örneklerinizde MediaElement gibi içerisinde video oynayan nesneler de kullanabilirsiniz. Dikdörtgenimize tıklandığında büyüme ve küçülme işlemleri olacağı için dikdörtgenin MouseLeftButtonDown, MouseMove ve MouseLeftButtonUp durumlarına ayrı ayrı JavaScript fonksiyonları yazmamız gerekiyor. Gelin tek tek bu fonksiyonları yazmaya başlayalım.

var FareBasili;

var SonDurum = {};

 

function FareGeldi(sender,args)

{

    sender.captureMouse();

    FareBasili=true;

    SonDurum = args.getPosition(null);

}

İlk olarak fareye ilk tıklandığında çalıştırılacak olan FareGeldi fonksiyonunu yazıyor. Söz konusu fonksiyon içerisinde farenin durumunu global olarak yakalayabilmemizi sağlayacakolan captureMouse metodunu çağırdıktan sonra FareBasili adında düzenlemiş olduğumuz global değişkenin değerini true olarak değiştiriyoruz. Böylece bir sonraki adımda fare hareketini yakalarken büyütme işlemi başlatılmış mı yoksa başlatılmamış mı kontrolünü yapabileceğiz. Son olarak da farenin sahnedeki konumunu yine global değişkenimiz olan SonDurum değişkenine aktarıyoruz.

function FareHareketli(sender,args)

{

    if(FareBasili)

    {

        sender.width += args.getPosition(null).X - SonDurum.X;

        sender.height += args.getPosition(null).Y - SonDurum.Y;

        SonDurum = args.getPosition(null);

    }

}

Dikdörtgen nesnesi üzerinde fare hareket ettikçe tetiklenecek olan MouseMove durumuna bağlı FareHareketli fonksiyonu içerisinde ilk olarak dikdörtgene basılarak herhangi bir büyütme veya küçültme işleminin başlatılıp başlatılmadığı kontrol etmek için FareBasili değişkeninin değerine bakıyoruz. Eğer öncesinde bir büyütme işlemi başlatılmış ise gerekli değişiklikleri yapıyoruz. Farenin güncel konumu ile bir önceki konumu arasında farkı alıp bu farkı nesnenin genişlik ve yükseklik değerlerine ekliyoruz. Son olarak da farenin güncel konumunu tekrar global değişkenimize kaydederek işlemi bitiyoruz. Böylece fare hareket ettikçe gerçekleşen konum değişikliği kadar piksel değeri nesnenin boyutuna yansıtılacak.

function FareGitti(sender,args)

{

    sender.releaseMouseCapture();

    FareBasili = false;

}

Son olarak MouseLeftButtonUp durumunda çalışacak olan FareGitti fonksiyonumuzu yazıyoruz. Bu fonksiyon kullanıcı farenin düğmesinden parmağını çektiğinde çalışacak. Yani artık büyütme veya küçültme işlemi sonlandı. Bu durumdan MouseMove event'ını haberdar edebilmek için hemen global değişkenimizi false olarak değiştiriyoruz.

Artık örneğimiz çalışmaya hazır. Örneğin son halinin kaynak kodları şu şekilde;

[Page.xaml.js]

if (!window.Resize)

    window.Resize = {};

 

Resize.Page = function()

{

}

 

Resize.Page.prototype =

{

    handleLoad: function(control, userContext, rootElement)

    {

    }

}

 

var FareBasili;

var SonDurum = {};

 

function FareGeldi(sender,args)

{

    sender.captureMouse();

    FareBasili=true;

    SonDurum = args.getPosition(null);

}

function FareHareketli(sender,args)

{

    if(FareBasili)

    {

        sender.width += args.getPosition(null).X - SonDurum.X;

        sender.height += args.getPosition(null).Y - SonDurum.Y;

        SonDurum = args.getPosition(null);

    }

}

function FareGitti(sender,args)

{

    sender.releaseMouseCapture();

    FareBasili = false;

}

Hepinize kolay gelsin.

Silverlight içerisinde fare ile nesneler arasında bir etkileşim kurmak için JavaScript ile çok farklı kodlar yazılabilir. Bu makalede herhangi bir nesneyi fare ile tutarak sahnede kendi etrafında çevirmeyi deneyeceğiz. Bunun için hemen yeni bir Silverlight animasyonu yaratıyoruz ve içerisinde örnek olması amacıyla ufak bir resim yerleştiriyoruz. Image nesnesinin adını Foto olarak verdikten sonra Image tagları arasına aşağıdaki şekliyle RotateTransform nesnesi yerleştirmemiz gerekiyor.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="400" Height="400"

  Background="White"

  x:Name="Page"

  >

  <Image Width="185" Height="184" Canvas.Left="110" Canvas.Top="103" Source="image[1].jpg" x:Name="Foto" RenderTransformOrigin="0.5,0.5">

    <Image.RenderTransform>

      <TransformGroup>

        <RotateTransform x:Name="FotoAci" Angle="0"/>

      </TransformGroup>

    </Image.RenderTransform>

  </Image>

</Canvas>

Yukarıdaki kod içerisinde özellikle dikkat etmemiz gereken iki nokta var. Bunlardan ilki Image nesnemizin adının Foto olması, ikincisi ise aynı şekilde Foto'ya ait RotateTransform nesnesine de FotoAci ismini vermiş olmamış. Bu isimler üzerinden söz konusu nesnelere ulaşıyor olacağız.

Kullanıcılar fotoğrafımıza tıklayarak döndürme işlemini başlatabilsinler. Yani Foto nesnesinin MouseLeftButtonDown durumunu kontrol etmeliyiz. Aynı şekilde döndürme işlemini bitirebilmek için MouseLeftButtonUp durumunu da kontrol etmemiz gerekecek. Fakat bunların haricinde fare ile döndürme işlemi yapılırken kullanıcı Foto nesnesinin dışına da çıkabilir. Bu durumda döndürmenin devam edebilmesi için tüm sahnedeki MouseMouve durumunu kontrol etmemiz gerekecek. Ayrıca döndürme işlemine fotoğrafın üzerinde başlayıp dışarıda sonlandırılabilir. Özetle aşağıdaki şekilde dört farklı durumu kontrol etmemiz gerekiyor.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="400" Height="400"

  Background="White"

  x:Name="Page"

  MouseMove="FareHareketli"

  MouseLeftButtonUp="FareGitti"

  >

  <Image MouseLeftButtonDown="FareGeldi" MouseLeftButtonUp="FareGitti" Width="185" Height="184" Canvas.Left="110" Canvas.Top="103" Source="image[1].jpg" x:Name="Foto" RenderTransformOrigin="0.5,0.5">

    <Image.RenderTransform>

      <TransformGroup>

        <RotateTransform x:Name="FotoAci" Angle="0"/>

      </TransformGroup>

    </Image.RenderTransform>

  </Image>

</Canvas>

Şimdi sıra geldi gerekli JavaScript kodlarını yazmaya. Doğruda projemizin Page.xaml.js dosyasına yöneliyoruz. İlk olarak FareGeldi fonksiyonunu yazalım.

var FareBasili;

var SonDurum;

 

function FareGeldi(sender, args)

{

    //Global fare takibini başlat

    sender.captureMouse();

    //Tuşa BASILDI!! :)

    FareBasili = true;

    // Durumu bir kenara kaydet

    SonDurum = args.getPosition(null);

}

Yukarıdaki kodun öncesinde iki adet global değişken tanımlıyoruz. Bu değişkenlerden biri farenin tuşunun basılı olup olmadığı kontrol edecek. Böylece MouseMove durumunda gerekli işlemlerin yapılıp, yapılmamasını sağlayacağız. Diğer değişken ise fare imlecinin pozisyonunu bir kenara kaydediyor, ileride kullanıyor olacağız.

Sıra geldi nesneyi çevirme işlemine, yani FareHareketli JavaScript fonksiyonunu yazmaya.

function FareHareketli(sender,args)

{

    var GuncelDurum = args.getPosition(null);

 

    // Fareye basılı mı??

    if (FareBasili)

    {   

        var AciNesnesi = sender.findName("FotoAci");

 

       // Nesnenin merkez noktasının global

       //koordinatlarını bulalım.

        var Merkez = {};     

        Merkez.X = sender.findName("Foto")["Canvas.Left"] + sender.findName("Foto").width/2;

        Merkez.Y = sender.findName("Foto")["Canvas.Top"] + sender.findName("Foto").height/2;

 

        // Çeviri işlemi

        var SonAci = parseInt(Math.atan2(SonDurum.Y - Merkez.Y, SonDurum.X - Merkez.X) * 360 / (2 * Math.PI));

        var GuncelAci = parseInt(Math.atan2(GuncelDurum.Y - Merkez.Y, GuncelDurum.X - Merkez.X) * 360 / (2 * Math.PI));

        AciNesnesi.Angle += GuncelAci-SonAci;

 

        // Son durumu tekrar sakla.

        SonDurum = GuncelDurum;

    }

}

Yukarıdaki kod sizi korkutmasın. Aslında epey basit bir işlemden bahsediyoruz. İlk satırda farenin güncel koordinatlarını alıyoruz sonrasında da fareye basılı mı yoksa değil mi kontrolünü yapmak için kendi FareBasili değişkenimize danışıyoruz. Eğer farenin düğmesine basılmış ise döndürme işlemini yapmamız gerekecek.

Döndürme işlemini yaptıktan sonra hesapladığımız yeni açı değerini adını FotoAci koyduğumuz RotateTransform nesnesine aktarmamız gerekecek. O nedenle baştan nesnemizi AciNesnesi adında bir değişkene aktarıyoruz. Sıra geldi hesaplamalara; kullanacağımız teknik farenin sahnedeki konumu ile çevirmek istediğimiz nesnenin merkez noktası arasında bir doğru çizerek bu döğrunun X aksına açısını almak olacak. Bu nedenle ilk olarak nesnenin merkezinin global koordinatlarını buluyoruz. Sonrasında açı hesaplama işlemlerini yaparken ilk olarak bir önceki durumdaki, yani bizim SonDurum değişkenine kaydettiğimiz durumdaki açıyı hesaplıyoruz sonra da şu anki durumdaki açıyı hesaplıyoruz. Açı hesaplama için standart JavaScript fonksiyonları kullanıyoruz. Kullandığımız esas fonksiyon olan Math.atan2 geriye Radiant döndürdüğü için onu da dereceye çeviriyoruz.

Son olarak önceki ile sonraki açı arasındaki farkı alarak RotateTransform nesnesinin açısına ekliyoruz. SonDurum değişkenini de güncelledikten sonra işimiz bitiyor.

İşimiz bitiyor derken sadece FareHareketli fonksiyonundan bahsediyordum. Tabi ki daha FareGitti fonksiyonunu da yazmamız lazım.

function FareGitti(sender,args)

{

    FareBasili = false;

    sender.releaseMouseCapture();

}

Gördüğünüz gibi FareGitti kısmı belki de işin en kolay kısmı. Global FareBasili değişkenimizi false yaptıktan sonra global fare yakalamayı da kapatıyoruz.

Artık projemizi çalıştırabiliriz. Foto nesnemizi faremiz ile istediğimiz gibi döndürebiliyoruz.

Hepinize kolay gelsin.

Bu makalemizde Silverlight ile bir EKG animasyonu yapacağız. Önce EKG çizimimizi Expression Design ile yapmalıyız. Bunun için 300*200px yeni bir dosya yaratarak "Pen Tool" ile sahneye bir doğru çizelim. Sonrasında çizdiğimiz doğruya "Add Anchor Point" aracını kullanarak birkaç nokta ekleyelim. Son olarak bu eklediğimiz noktalardan istediklerimizi "Direct Selection Tool" ile seçerek yukarı veya aşağı sürükleyerek bir EKG çizimi yaratabiliriz.

Expression Design içerisinde EKG çizimimiz.

Çizimimiz tamamlandığında göre sıra geldi bu çizimi vektörel olarak Expression Blend tarafına almaya. File / Export menüsünden yola çıkarak Silverlight Canvas seçeneği üzerinden bir XAML çıktısı alıyoruz. XAML dosyası içerisindeki Layer1 adındaki Canvas elementini Blend içerisine kopyalayacağız. Tabi bunun için önce Expression Blend 2 ile yeni bir Silverlight projesi yaratmamız gerekiyor.

Expression Design'dan aldığımız XAML kodunu Blend 2 içerisine yapıştırdığımızda Silverlight uygulamamızın XAML kodu aşağıdaki şekilde oluyor.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="300" Height="200"

  Background="White"

  x:Name="Page"

  >

  <Canvas x:Name="Layer_1" Width="300" Height="200" Canvas.Left="0" Canvas.Top="0">

    <Path Width="300.488" Height="194.519" Canvas.Left="-0.594986" Canvas.Top="5.19727" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 0.405014,137.11L 30.6097,137.11L 42.6763,76.7877L 53.0284,146.736L 59.0672,127.484L 67.733,137.11L 153.962,137.11L 181.568,6.19727L 203.997,198.717L 223.839,65.2365L 241.092,151.87L 248.857,137.11L 298.893,137.11"/>

  </Canvas>

</Canvas>

Kod içerisinde Path olarak gözüken kısım bizim çizimimiz ta kendisi. Layer_1 adındaki Canvas da Expression Design tarafındaki Layer'ımız. Şimdi sıra geldi ince ayarlar yapmaya. İlk olarak Silverlight animasyonunun fonunu siyah yapalım, sonra da Path nesnemizin Stroke rengini parlak yeşile çevirelim. Böylece koyu bir arkaplan üzerinde yeşil kalp atışları gözükecek. Kalp atışlarının normal EKG gibi gözükmesi için bir maske kullanacağız. Maske olarak kullanılmak üzere sahnenin kenarına ekranın dışına bir dikdörtgen çizelim.

Maskemiz kenarda bizi bekliyor.

Maskemizi çizdiğimize göre sıra geldi onu gerçekten Path'imize maske olarak atamaya. Bunun için Expression Blend 2 içerisinde "Objects and Timeline" panelinde hem Path'in içerisinde bulunduğu Canvas'ı hem de dikdörtgenimizi seçerek sağ tuş ile tıklıyoruz. Gelen menüden "Path / Make Clipping Path" komutunu vererek dikdörtgenin bir maske haline gelmesini sağlıyoryz.

"Make Clipping Path" ile maskeleme.

Şimdi sora geldi gerekli animasyonu yaratmaya. Animasyonumuzda maske olarak ayarladığımız dikdörgenin ekranın solundan sağına doğru dolaşması gerekiyor. Bunun için yeni bir StoryBoard yaratalım. Sahne ilk açıldığında animasyonun otomatik başlaması için "Create as a resource" seçeneğini deaktif bırakalım.

Animasyonu maskemize vereceğimiz için bir şekilde maskemizi seçebiliyor olmamız gerekir. Maskeleme yaptığınız herhangi bir nesneyi seçerek araç çubuğundan "Direct Selection Tool"'u seçtiğinizde maskeye müdahale edebildiğinizi göreceksiniz. Bu şekilde animasyonumuz içerisinde iki farklı KeyFrame kaydederek maskeyi farklı konumlara getirebiliriz.

Artık animasyonumuz hazır. Son olarak StoryBoard'un RepeatBehavior özelliğini de Forever yaparsanız sürekli tekrar edecektir. Uygulamanın son haline ait XAML kodu aşağıdaki şekilde.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="300" Height="200"

  Background="#FF000000"

  x:Name="Page"

  >

  <Canvas.Triggers>

    <EventTrigger RoutedEvent="Canvas.Loaded">

      <BeginStoryboard>

        <Storyboard RepeatBehavior="Forever" x:Name="Storyboard1">

          <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.StartPoint)">

            <SplinePointKeyFrame KeyTime="00:00:00" Value="-31.5,-28.5"/>

            <SplinePointKeyFrame KeyTime="00:00:02" Value="308,-29.5"/>

          </PointAnimationUsingKeyFrames>

          <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)">

            <SplinePointKeyFrame KeyTime="00:00:00" Value="-9.5,-28.5"/>

            <SplinePointKeyFrame KeyTime="00:00:02" Value="330,-29.5"/>

          </PointAnimationUsingKeyFrames>

          <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)">

            <SplinePointKeyFrame KeyTime="00:00:00" Value="-9.5,228.5"/>

            <SplinePointKeyFrame KeyTime="00:00:02" Value="330,227.5"/>

          </PointAnimationUsingKeyFrames>

          <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)">

            <SplinePointKeyFrame KeyTime="00:00:00" Value="-31.5,228.5"/>

            <SplinePointKeyFrame KeyTime="00:00:02" Value="308,227.5"/>

          </PointAnimationUsingKeyFrames>

        </Storyboard>

      </BeginStoryboard>

    </EventTrigger>

  </Canvas.Triggers>

    <Canvas x:Name="Layer_1" Width="300" Height="200" Canvas.Left="0" Canvas.Top="0">

      <Canvas.Clip>

        <PathGeometry>

          <PathFigure IsClosed="True" StartPoint="-31.5,-28.5">

            <LineSegment Point="-9.5,-28.5"/>

            <LineSegment Point="-9.5,228.5"/>

            <LineSegment Point="-31.5,228.5"/>

          </PathFigure>

        </PathGeometry>

      </Canvas.Clip>

    <Path Width="300.488" Height="194.519" Canvas.Left="-0.594986" Canvas.Top="5.19727" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF23FF00" Data="F1 M 0.405014,137.11L 30.6097,137.11L 42.6763,76.7877L 53.0284,146.736L 59.0672,127.484L 67.733,137.11L 153.962,137.11L 181.568,6.19727L 203.997,198.717L 223.839,65.2365L 241.092,151.87L 248.857,137.11L 298.893,137.11"/>

  </Canvas>

</Canvas>

Hepinize kolay gelsin.

Silverlight uygulamaları içerisinde ister sürükle&bırak sistemleri kullanın ister doğrudan InkPresenter gibi fare imlecinin farklı anlamlar taşıdığı uygulamalara değinin yeri geldiğinde farenin imlecini bir Silverlight nesnesi ile değiştirebiliyor olmak gerçekten hoş olurdu. Bu yazıda bu yolda neler yapabileceğimize bakacağız.

İlk olarak Silverlight uygulamamızda imlecimizi oluşturacak olan nesneyi oluşturalım. Bunun için ufak bir daire çizerek sahneye yerleştirelim.

<Canvas xmlns="http://schemas.microsoft.com/client/2007"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="640"

      Height="480"

      Background="White"

      x:Name="Page">

  <Ellipse x:Name="Imlec"

          Width="8"

          Height="8"

          Fill="#FFFF0000"

          Stroke="#FF000000"

          Canvas.Left="176"

          Canvas.Top="231" />

</Canvas>

Gördüğünüz gibi yukarıdaki kodumuz içerisinde adını Imlec olarak koymuş olduğumuz bir Ellipse nesnesi bulunuyor. Bu nesnenin farenin esas imleci ile aynı konumda yer alması için Silverlight ana Canvas'ımızın MouseMove durumunu kontrol ederek farenin ekrandaki pozisyonunu alarak Imlec nesnemizin özelliklerine, yani sahnedeki yerine yansıtacağız. MouseMove durumunu aşağıdaki gibi tanımlayalım.

<Canvas xmlns="http://schemas.microsoft.com/client/2007"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="640"

      Height="480"

      Background="White"

      x:Name="Page"

      MouseMove="FareSallandi">

  <Ellipse x:Name="Imlec"

          Width="8"

          Height="8"

          Fill="#FFFF0000"

          Stroke="#FF000000"

          Canvas.Left="176"

          Canvas.Top="231" />

</Canvas>

Sıra geldi FareSallandi adındaki JavaScript fonksiyonunu yazmaya.

function FareSallandi(sender, args)

{

  //Farenin mevcut koordinatlarını değişkenlere alıyoruz.

  var fareX = args.getPosition(null).x;

  var fareY = args.getPosition(null).y;

 

  // Imlec nesnemizin konumunu fareninkonumuna göre değiştiriyoruz.

  sender.findName("Imlec")["Canvas.Left"] = fareX - (sender.findName("Imlec")["Width"] / 2);

  sender.findName("Imlec")["Canvas.Top"] = fareY - (sender.findName("Imlec")["Height"] / 2);

}

Yukarıdaki kod içerisinde özellikle parametre olarak gelen args deyimine dikkat etmekte fayda var. args parametresi üzerinde getPosition metodu ile farenin pozisyonunu alabiliyoruz. Aldığımız X ve Y poziyonlarını kendi değişkenlerimize kaydettikten sonra onları Imlec nesnesinin Canvas.Left ve Canvas.Top değerlerine aktarak Imlec'in fare imleci ile aynı konuma gelmesini sağlıyoruz.

Koordinat bilgilerini Imlec nesnesine aktarırken imlecin genişlik ve yüksekliğinin yarısını çıkartıyoruz, böylece Imlec görseli tam olarak farenin tıklayacağı yeri ortalayabilecek. Aksi halde biraz sağ altında kalacaktır.

Geriye tek bir sorun kalıyor; o da hala orijinal imlecin gözüküyor olması. Imlecin Silverlight içerisinde görünmemesi için ana Canvas nesnesinin Cursor özelliğini None olarak ayarlıyoruz ve son olarak XAML kodumuz aşağıdaki gibi oluyor.

<Canvas xmlns="http://schemas.microsoft.com/client/2007"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="640"

      Height="480"

      Background="White"

      x:Name="Page"

      MouseMove="FareSallandi"

      Cursor="None">

  <Ellipse x:Name="Imlec"

          Width="8"

          Height="8"

          Fill="#FFFF0000"

          Stroke="#FF000000"

          Canvas.Left="176"

          Canvas.Top="231" />

</Canvas>

Eğer isterseniz Imlec nesnesine bir de animasyon atayabilirsiniz. Söz konusu animasyonu Expression Blend 2 içerisinde "Create as a resource" demeden yaratırsanız Silverlight animasyonu sayfaya yüklendiği gibi başlayacaktır.

<Canvas xmlns="http://schemas.microsoft.com/client/2007"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="640"

      Height="480"

      Background="White"

      x:Name="Page"

      MouseMove="FareSallandi"

      Cursor="None">

  <Canvas.Triggers>

    <EventTrigger RoutedEvent="Canvas.Loaded">

      <BeginStoryboard>

        <Storyboard x:Name="FareAnim"

                  RepeatBehavior="Forever">

          <ColorAnimationUsingKeyFrames BeginTime="00:00:00"

                                      Storyboard.TargetName="Imlec"

                                      Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">

            <SplineColorKeyFrame KeyTime="00:00:00"

                                Value="#FFFF0000" />

            <SplineColorKeyFrame KeyTime="00:00:00.5000000"

                                Value="#FFFFFFFF" />

            <SplineColorKeyFrame KeyTime="00:00:01"

                                Value="#FFFF0000" />

          </ColorAnimationUsingKeyFrames>

        </Storyboard>

      </BeginStoryboard>

    </EventTrigger>

  </Canvas.Triggers>

  <Ellipse x:Name="Imlec"

          Width="8"

          Height="8"

          Fill="#FFFF0000"

          Stroke="#FF000000"

          Canvas.Left="176"

          Canvas.Top="231" />

</Canvas>

Animasyonun sürekli tekrar etmesi için RepeatBehavior özelliğini Forever olarak ayarlayabilirsiniz. Böylece fare imleci animasyonlu bir Ellipse olacaktır.

Hepinize kolay gelsin.

 

Visual Studio 2008 ipuçlarına bir tane daha ekliyorum. Özellikle WPF veya Silverlight projeleri ile ilgili çalışmalar yapıyorken XAML dosyalarının görsel panelinin de gösteriliyor olması çoğu zaman can sıkıyor. Visua Studio görsel içerik hazırlama ortamı değil, büyük ihtimal ile Visual Studio içerisinde bir XAML dosyası açıyorsanız kod içerisinde elle müdahale yapmak istiyorsunuzdur.

Sözün özü; "Nasıl yaparız da Visual Studio'nun XAML dosyalarını otomatik olarak sadece kod görünümünde açmasını sağlarız?"

Visual Studio içerisinde "Tools / Options" menüsüne giderek "Text Editor / XAML / Miscellaneous" bölümünde aşağıdaki gibi bir ayarla karşılaşıyorsunuz.

XAML dosyaları sadece kod görüntüsünde açılsın.

Bu ayarı işaretledikten sonra XAML dosyalarını açtığınızda doğrudan kod görünümü gelecektir.

Hepinize kolay gelsin.

Bu makalemizde hızlı bir şekilde örnek bir Silverlight düğmesi tasarlayarak fare ile üzerine gelindiğinde parlamasını üzerinden çekildiğinde de eski haline geri dönmesini sağlayacağız. İlk olarak düğmemizi çizmek için Expression Blend 2 içerisinde yeni bir Silverlight projesi yaratalım ve Rectangle çizim aracı ile bir dikdörtgen çizelim. Dikdörtgeni çizdikten sonra Expression Blend 2 içerisinde "Properties" tabından "Fill" kısmında SolidColor seçerek kırmızı tonlarından biri seçebiliriz. Son olarak da dikdörtgenimizin kenarlarında aşağıdaki fotoğraftaki gibi fare ile tutarak köşelerini yuvarlayalım.

Silverlight düğmemizi yaratıyoruz.

Düğmemizi çizdiğimize göre parlama efekti için biraz değişiklik yapalım. SolidColor yerine Gradient seçerek beyazdan kırmızıya bir geçiş ayarlayarak Expression Blend 2 içerisinde sol araç çubuğundan "Brush Transform" aracını kullanarak aşağıdaki şekilde bir parlama efekti hazırlayalım.

Parlama efekti hazır.

Sıra geldi fare ile üzerine geldiğimizde çalışacak olan animasyonu hazırlamaya. Yapacağımız şey birer saniye arayla BrushTranform aracı ile parlama efektinin yani Gradient'ın yönünü değiştirmek. Animasyonumuzu hazırladıktan sonra düğmenin üzerinden fare ile çekildiğimizde çalıştırılmak üzere animasyonumuzun bir kopyasını yaratacağız.

Animasyonumuzun bir kopyasını alalım.

Animasyonumuzun kopyasını aldıktan sonra "geri çekilme" animasyonunu yaratmak için bir önceki animasyondan aldığımız kopyayı tersine çevireceğiz. Bunun için yukarıdaki görselde de görebileceğiniz Blend içerisinde animasyon menüsünden "Reverse" komutunu kullanacağız. Böylece her iki animasyonumuz da hazır. Artık sıra geldi her iki animasyonun da zamanında çalışmasını sağlayacak kodları yazmaya.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="300" Height="300"

  Background="White"

  x:Name="Page"

  >

  <Canvas.Resources>

    <Storyboard x:Name="Anim1">

      <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(RadialGradientBrush.GradientOrigin)">

        <SplinePointKeyFrame KeyTime="00:00:00" Value="-0.071,-0.091"/>

        <SplinePointKeyFrame KeyTime="00:00:01" Value="1.008,-0.061"/>

      </PointAnimationUsingKeyFrames>

    </Storyboard>

    <Storyboard x:Name="Anim_Copy1">

      <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(RadialGradientBrush.GradientOrigin)">

        <SplinePointKeyFrame KeyTime="00:00:00" Value="1.008,-0.061"/>

        <SplinePointKeyFrame KeyTime="00:00:01" Value="-0.071,-0.091"/>

      </PointAnimationUsingKeyFrames>

    </Storyboard>

  </Canvas.Resources>

  <Rectangle MouseEnter="Geldi" MouseLeave="Gitti" Width="127" Height="33" Stroke="#FF000000" Canvas.Left="62" Canvas.Top="163" RadiusY="10.5" RadiusX="10.5" RenderTransformOrigin="0.189,0.091" x:Name="rectangle">

    <Rectangle.Fill>

      <RadialGradientBrush GradientOrigin="1.008,-0.061">

        <GradientStop Color="#FFFFFFFF" Offset="0"/>

        <GradientStop Color="#FFFF0000" Offset="1"/>

      </RadialGradientBrush>

    </Rectangle.Fill>

  </Rectangle>

</Canvas>

Yukarıdaki XAML kodunda hazırladığımız tüm animasyonlar ve düğmemiz yer alıyor. Düğmemizin MouseEnter ve MouseLeave durumları ayrı JavaScript fonksiyonlarına bağlanmış durumda. Aşağıda söz konusu JavaScript fonksiyonlarını da inceleyebilirsiniz.

function Gitti(sender)

{

  sender.findName("Anim1").Begin();

}

function Geldi(sender)

{

  sender.findName("Anim_Copy1").Begin();

}

Her bir fonksiyon kendisine gönderilen Sender parametresi üzerinden düğmemizi yakalayarak, onun üzerinden de findName ile animasyonları bulup çalıştırıyor.

Böylece üzerine gelince veya fare ile üzerinden ayrıldığımızda uygun animasyonları çalıştıran bir düğmemiz oldu. Hepimize hayırlı olsun ;)

Her Silverlight projesinde yer alan en önemli dosyalardan biri Silverlight.js dosyasıdır. Bu dosya içerisinde özünde üç farklı JavaScript fonksiyonu tanımlanmıştır. Bunlar createObject, createObjectEx ve isInstalled fonksiyonlarıdır. Bu fonksiyonlardan createObjectEx yarattığımız her yeni Silverlight projesinde otomatik olarak kullanılan bir fonksiyondur. Bu makalemiz boyunca bu fonksiyonlarla yapabileceklerimize ve Silverlight.js dosyasının derinliklerine ineceğiz.

createObject ve createObjectEx Metodları

Her iki metod da aslında aynı işi yapıyor. Arada tek farkı createObject metodu aldığı parametreleri tek tek alırken createObjectEx metodu bir JSON dizisi olarak alıyor olması. Gelin hızlıca aldıkları parametrelere ve anlamlarına bir göz atalım.

• Source: Silverlight animasyonuna yüklenecek olan XAML kaynağına ait bir adres veya sayfa içi blok ID'si alabilir.
• Parent: Silverlight animasyonunun sayfada içerisine yerleştirileceği HTML elementinin ID bilgisini alır.
• ID: Sayfadaki Silverlight animasyonunun adı olacak olan ID bilgisini alır. Bu ID sayfadaki başka bir HTML elementi tarafından kullanılmamış olmalıdır.
• Properties : Silverlight animasyonu ile ilgili genişlik, yükseklik, fon rengi gibi özellikleri bir dizi olarak alır.
• Events: Silverlight animasyonu ilk yaratılırken bağlanabilecek JavaScript durum fonksiyonlarının tanımlandığı yerdir. Tanımlanabilen durumlar onLoad ve onError durumlarıdır.
• initParam: Kullanıcı tarafından gerektiğinde tanımlanan parametrelerdir.
• Context: Kullanıcı tarafından gerektiğinde aktarılabilen ve onLoad duruma aktarılacak olan bir parametredir.

Yukarıda iki metod arasındaki kullanım farkını daha net bir şekilde görebilirsiniz. Her iki metod içerisinde de Properties listesi bir JSON listesi olarak aktarılıyor. Şimdi gelelin bu liste içerisinde neleri tanımlayabiliyor olduğumuza.

• Width: Silverlight nesnesinin genişliğini belirler. Sabit bir piksel değeri olabileceği gibi bir yüzde değeri de içerebilir.
• Height: Silverlight nesnesinin yüksekliğini belirler. Sabit bir piksel değeri olabileceği gibi bir yüzde değeri de içerebilir.
• background: Silverlight nesnesinin fon rengini belirler. Varsayılan değeri null şeklindedir ve bu durum fon renginin beyaz olmasına neden olur.
• isWindowless: Silverlight nesnesinin sayfa içerisinde nesnelerden bağımsız olarak yerleştirilebilmesini sağlar. True değeri aktarıldığında nesnenin background değeri artık şeffaflık da içerebilir. Silverlight animasyonu önüne HTML kontrollerini overlay koyabilmek için de bu teknik kullanılır.
• frameRate: Silverlight nesnesinin maksimum gösterebileceği saniyede kare sayısını sınırlar. Desteklenen en yüksek sayı 64 şeklindedir. Varsayılan değer 24'tür.
• inplaceInstallPrompt: Değeri true olduğunda standart Silverlight yükleme görseli yerine kullanıcı sözleşmesine de link içeren bir görsel kullanılır. Böylece kullanıcı Microsoft web sitesine yönlenmeden doğrudan Plug-In'i yüklemeye başlayabilir.
• version: Silverlight animasyonunun çalıştırılabilmesi için istemcide yüklü olması gereken minimum Silverlight Plug-In sürümünü belirler.
• ignoreBrowserVer: Silverlight animasyonu yüklenmeden önce tarayıcının Silverlight destekleyip desteklemediğinin kontrol edilmemesini sağlar. Varsayılan değeri false şeklindedir.
• enableHtmlAccess: Silverlight animasyonu içerisindeki nesnelerin animasyon dışındaki sayfadaki HTML elementlerine ulaşıp ulaşamayacağını belirler. Varsayılan değeri true şeklindedir.

isInstalled

Otomatik kontrol işlemlerinin yanı sıra isterseniz kendi kontrol kodunuzu yazarak Silverlight.js içerisindeki isInstalled metodunu da kullanabilirsiniz. Böylece istemci tarafında hangi Silverlight Plug-In'in yüklü olduğunu görebilirsiniz.

    if(Silverlight.isInstalled("1.0"))

    {

      createSilverlight();

    }

    else

    {

      alert("AMAN TANRIM! Silverlight yüklü değil!!");

    }

Yukarıda gördüğünüz kod ile Silverlight Plug-In'in 1.0 sürümünün yüklü olup olmadığı kontrol ediyoruz. Eğer yüklü değilse uygun bir uyarı mesajı :) gösteriyoruz. Farklı senaryolarda bu noktada kullanıcıya farklı görsel uyarılar gösterilebilir.

Silverlight.js tarafında detaylar bu kadar. Hepinize kolay gelsin.

Bugün Microsoft İstanbul ofislerinde bir başka iş ortakları eğitimini daha bitirdik. Silverlight, WPF ve AJAX konularına değindiğim eğitimde yaptığım bazı demoların kodlarını aşağıda hem blog okuyucularım hem de eğitime katılan öğrencilerimle paylaşıyorum. Peki neden bazılarını? :)

Örnekleri kendime saklama gibi bir çekincem yok, bende örnek bol :) Her gün bir yenisini müşterilere yapıyoruz zaten. Genelde kodları bloga koyamıyor olmamın nedeni tüm örnekleri eğitimlerimde sürekli sıfırdan yapıyor olmam. Bugüne kadar hiçbir eğitimime hazır kod ile veya örnek ile girmedim ve bu durum hiçbir zaman da "hazırlıksız gelmiş" olma gibi bir sıkıntı yaratmadı. Şükür ki eğitimini verdiğim her şeyi zaten her gün 24 saat kullanıyorum :) Durum böyle olunca örnek oluşturma sorunu da olmuyor. Diğer yandan örnekleri canlı canlı yapıyor olmanın bir diğer avantajı da olası "hatalarla" öğrencilerle beraber karşılaşıyor olup, çözebiliyor olmak. Böylece belki de "eve giden öğrencinin karşılaşacağı ilk hatayı" biz çoktan sınıfta işlemiş oluyoruz :)

Sonuçta sınıfta yapılan demoların kodları çoğu zaman "zaman kaybetmemek" adına sadece konsepti gösteren örnekler oluyor. Örneğin bir WPF eğitiminde SQL'den data çekmeyle uğraşmak yerine doğrudan dummy data yaratabiliyorum kod ile. Zaten katılımcılar da SQL'den data çekmeyi zaten biliyor :) Bunun gibi sadece bahsi geçen eğitimin katılımcılarına özel olarak eksikler içeren örnekleri buradan paylaşmayı doğru bulmuyorum.

Neyse, yine çok uzattım. Şimdilik paylaşabileceğim örnek kodlar aşağıda ;)

Silverlight ve WPF Örnek Kodları - 07022008_2.rar (138,72 KB)

Eğitime katılan herkese ve özellikle eğitim sonundaki pozitif olduğu kadar da samimi yorumlara çok teşekkürler.

Bir Silverlight projesi farklı dosyalardan ve yapılardan oluşur. Bu yapılar neredeyse tamamı ister Visual Studio içerisinde ister Expression Blend 2 içerisinde bir Silverlight projesi yarattığınızda otomatik olarak oluşturularak karşınıza çıkar. Her şey ne kadar otomatik olsa da belirli noktalarda işlemlere müdahale edebilmek açısından bizim için otomatik olarak hazırlanan şeylerin neler olduğunu biliyor olmak önemlidir. Bu yazımızda bir Silverlight projesinin doğumundan bahsedeceğiz.

İlk olarak Expression Blend 2 içerisinde yeni bir Silverlight Web Site yaratalım ve bakalım "Project Explorer" içerisinde neler var.

Expression Blend 2 içerisinde Silverlight projesindeki dosyalar.

Gördüğünüz üzere bizim için yaratılmış olan birden çok dosya bulunuyor. İlk olarak gelin default.html dosyasından başlayalım.

default.html

Herhangi bir Silverlight animasyonu tek başına çalışma yetisine sahip değildir. Silverlight nesnelerinin bir şekilde bir web sayfası içerisinde sunuluyor olması gerekir. Bu nedenle bizim projemizde de Expression Blend 2 bizim için otomatik olarak bir HTML dosyası yaratarak söz konusu HTML dosyası içerisinde Silverlight animasyonumuzu yerleştirmiş durumda. Bu HTML dosyasının içeriğine baktığımızda ilginç yapılarla karşılaşıyoruz.

  <script type="text/javascript" src="Silverlight.js"></script>

  <script type="text/javascript" src="Default_html.js"></script>

  <script type="text/javascript" src="Page.xaml.js"></script>

İlk dikkatimizi çeken yukarıdaki şekli ile üç farklı JavaScript dosyasının sayfaya eklenmiş olması. Bu dosyaların ne işlemler yaptığına birazdan sırası ile göz atacağız. HTML sayfamızı incelemeye devam edelim.

  <style type="text/css">

    #silverlightControlHost {

      height: 480px;

      width: 640px;

    }

    #errorLocation {

      font-size: small;

      color: Gray;

    }

  </style>

Sayfa içerisinde yukarıdaki gördüğünüz gibi CSS sınıfları yer alıyor. Bu sınıflar # deyimi ile tanımlandığı için sayfada kendi adlarındaki HTML elementlerini bularak onları etkileyeceklerdir. SilverlightControlHost adındaki element birazdan kodunu göreceğimiz ve içerisinde Silverlight animasyonunu barındıracak olana DIV elementinin ta kendisi. Bu elementin yükseklik ve genişliğini buradan tanımlayarak aslında Silverlight animasyonunun genel yükseklik ve genişliğini de tanımlamış oluyoruz. Bu genişlik ve yükseklik tanımlama işlemi için aslında faydalanabileceğimiz başka bir yer daha var. Ondan da ileriki adımlara bahsedeceğiz. Konuyu CSS kullanmadan çözmek de mümkün.

Diğer CSS sınıfı olan errorLocation ise yine sayfada errorLocation adındaki DIV elementini etkileyecek. Bu element Silverlight animasyonunda herhangi bir hata olursa söz konusu hataya ait mesajın gösterileceği elementin ta kendisi.

  <div id="silverlightControlHost">

    <script type="text/javascript">

      createSilverlight();

    </script>

  </div>

 

  <!-- Runtime errors from Silverlight will be displayed here.

  This will contain debugging information and should be removed or hidden when debugging is completed -->

  <div id='errorLocation'></div>

Bir önceki adımda incelediğimiz ve detaylarından bahsettiğimiz CSS sınıfları yukarıdaki DIV elementlerini etkiliyorlar. Bu elementlerden özellikle SilverlightControlhost elementi çok önemli. Bu element içerisinde Silverlight animasyonumuz yerleştiriliyor olacak. Yerleştirme işlemini yapan JavaScript fonksiyonu da createSilverlight fonksiyonu. createSilverlight fonksiyonu sayfada herhangi bir yerde olabilir veya herhangi bir şekilde çalıştırılabilir.

Şimdi gelelim sırasıyla sayfamıza linklenmiş olan JavaScript dosyalarının ne işe yaradığına.

Silverlight.js

Silverlight JavaScript dosyası sayfanın en üstünde yer almalıdır. Bu dosya içerisindeki kodlar istemci tarafında Silverlight Plug-In'in yüklü olup olmadığı kontrol ederek gerekli mesajların, görsel uyarıların gösterilmesini sağlayacaktır. Eğer bu görsel uyarıları bir şekilde değiştirmek istiyorsanız Silverlight.js dosyası doğru hedeftir.

Default_html.js

Bu dosya içerisinde aslında tek bir JavaScript fonksiyonu bulunuyor; createSilverlight. Hatırlarsanız bu fonksiyon bizim HTML dosyamızda sayfaya Silverlight animasyonumuzu yüklemek için kullandığımız fonksiyondu. Söz konusu fonksiyon doğrudan Default_html.js içerisinde tanımlanıyor.

  var scene = new UntitledProject9.Page();

  Silverlight.createObjectEx({

    source: "Page.xaml",

    //Silverlight animasyonu için yüklenecek olan XAML kaynağı.

    parentElement: document.getElementById("silverlightControlHost"),

    //Animasyonun yerleştirileceği HTML elementinin ID bilgisi.

    id: "SilverlightControl",

    //Animasyona verilen ID bilgisi.

    properties: {

      width: "100%",

      height: "100%",

      version: "1.0"

    },

Yukarıdaki kod createSilverlight fonksiyonunun sadece bir parçası. Silverlight nesnemiz yaratılırken tabi ki bazı parametrelerin verilmesi gerekiyor. Bu parametreleri olabildiğince yukarıdaki kod içerisinde satır aralarında anlatmaya çalıştım. Silverlight animasyonumuzda kullanılacak olan kaynak XAML kodunun geleceği adresten tutun, animasyonun sayfada yükleneceği konumun HTML elementine ait ID bilgisine kadar herşey burada belirleniyor. Özellikle Silverlight animasyonuna da bu noktada bir ID bilgisi verildiğini atlamamak gerek. Silverlight uygulamasının programlanması noktasında bu ID bilgisi üzerinden Silverlight nesnesine ulaşılacaktır.

Son olarak animasyon alanının toplam genişlik ve yüksekliğinin buradan da ayarlandığını bilmekte fayda var. Varsayılan hali ile yaratılan projelerde genişlik ve yükseklik ayarları CSS ile düzenlenmiş durumda. Oysa burada da gerekli ayarlar yapılarak herhangi bir CSS kullanmadan da ilerlenebilir.

Version bilgisi altında şu an için 1.0 bulunuyor. İleride Silverlight'ın farklı sürümleri de yayınlandığında bu noktadaki bilgiye uygun işlemler Plug-In tarafından yapılacaktır.

    events: {

      onLoad: Silverlight.createDelegate(scene, scene.handleLoad),

      onError: function(sender, args) {

        var errorDiv = document.getElementById("errorLocation");

        if (errorDiv != null) {

          var errorText = args.errorType + "- " + args.errorMessage;

 

          if (args.ErrorType == "ParserError") {

            errorText += "<br>File: " + args.xamlFile;

            errorText += ", line " + args.lineNumber;

            errorText += " character " + args.charPosition;

          }

          else if (args.ErrorType == "RuntimeError") {

            errorText += "<br>line " + args.lineNumber;

            errorText += " character " +  args.charPosition;

          }

          errorDiv.innerHTML = errorText;

        } 

Yukarıdaki kod içerisinde aslında iki işlem yapılıyor. Bu işlemlerden ilki Silverlight animasyonunun yüklenmesi yani onLoad durumunda çalıştırılmak üzere bir JavaScript metodunun aktarılması. Söz konusu bu metodu başka bir dosya içerisinde yazıyor olacağız. İkincisi ise onError yani Silverlight animasyonu içerisinde herhangi bir hata olursa çalıştırılacak olan JavaScript fonksiyonunun hazırlanması. Bu fonksiyon doğrudan kod içerisinde yazılmış. Şu andaki kod hatanın mesajını alarak errorDiv adındaki bir HTML elementinin içerisine yerleştiriyor. Söz konusu element de errorLocation adındaki HTML elementinden yakalanıyor. errorLocation elementini HTML dosyamızın içerisinden hatırlıyoruz.

Page.xaml.js

Son olarak sıra geldi esas Silverlight JavaScript kodlarımızı yazacağımız Page.xaml.js dosyamıza. Bu dosyayı kabaca bir code-behind dosyası olarak kabul edebilirsiniz. Dosya içerisinde bizim için yazılmış olan örnek kodlar bulunuyor.

  handleLoad: function(control, userContext, rootElement)

  {

    this.control = control;

 

    // Sample event hookup: 

    rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));

  },

Bu dosya içerisinde özellikle handLoad JavaScript fonksiyonundan bahsetmek istiyorum, çünkü bu fonksiyon bir önceki adımda default_html.js içerisinde Silverlight animasyonunun onLoad durumuna bağlanmıştı. Söz konusu fonksiyon HTML sayfası açıldıktan ve createSilverlight fonksiyonu çalıştırıldıktan sonra hemen çalışacaktır. Yani Silverlight animasyonun yüklenmesinden sonra yapmak isteyeceklerinizi hemen burada yazabilirsiniz. handlLoad içerisindeki örnek kodları da gönül rahatlığı ile silebilirsiniz.

Böylece yeni başlayan bir Silverlight projesindeki dosyaları ve neyin nasıl çalıştığını incelemiş olduk.

Hepinize kolay gelsin.

İster Silverlight uygulamaları olsun ister WPF uygulamaları, her şekilde XAML kodları içerisindeki Brush (fırça) tanımlamaları görsel anlamda çok önemlidir. Herhangi bir nesnenin içerisini boyamaktan tutan resim ile doldurmaya kadar çoğu noktada Brush yapıları kullanılır.

Bu makalemizde Silverlight içerisinde kullanabileceğimiz Brush yapılarını ufak örneklerle inceleyeceğiz. Makale boyunca bahsi geçen tüm işlemleri bir "yazılımcı" perspektifi ile değerlendireceğim, o nedenle XAML kodlarını yazmak için Visual Studio kullanacağız. Tasarımcı arkadaşların Expression Blend dünyasında daha farklı araçları ve olanakları olacaktır.

SolidColorBrush

Herhangi bir nesnenin için tek bir renk ile doldurmak istiyorsanız veya herhangi bir alana tek bir renk atamak istiyorsanız yapmanız gereken bir SolidColorBrush kullanmaktır.

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

  <Canvas Width="120" Height="44">

    <Ellipse Width="500" Height="500">

      <Ellipse.Fill>

        <SolidColorBrush Color="Black"></SolidColorBrush>

      </Ellipse.Fill>

    </Ellipse>

  </Canvas>

</Canvas>

Örneğimizde bir Silverlight animasyonu içerisinde yer alan Ellipse nesnenin içerisini tek bir renk ile doldurmak için uygun bir SolidColorBrush kullanıyoruz. Söz konusu Brush'ın rengini ayarlamak için Color özelliğinden faydalanmamız gerekiyor. Herhangi bir SolidColorBrush'ın Color özelliğine doğrudan bir renk adı verebileceğiniz gibi toplam 8 karakterden oluşan Hexadecimal bir değer de aktarabilirsiniz. #AARRGGBB şeklinde formatlı olan renk değerinin AA kısımlarına Alpha (şeffaflık), RR (Red / Kırmızı), GG (Green / Yeşil), BB (Blue / Mavi) renk değerleri aktarılır.

LinearGradientBrush

Gradient yapısını az çok çoğu programdan biliyoruz, belirli bir renkten başka bir renge doğru geçişlerin yapıldığı boyama şekline Gradient deniyor. Bu şekilde bir boyamayı Silverlight içerisinde yapabilmemiz için GradientBrush yapılarından birini kullanmanız gerekir. Bu çerçevede LinearGradientBrush doğrusal olarak renkler arası geçişlerin yapıldığı bir boyama işlemine olanak tanır.

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

  <Canvas Width="120" Height="44">

    <Ellipse Width="200" Height="200">

      <Ellipse.Fill>

        <LinearGradientBrush>

          <GradientStop Color="Yellow" Offset="0"/>

          <GradientStop Color="Black" Offset="0.7"/>

          <GradientStop Color="Yellow" Offset="1"/>

        </LinearGradientBrush>

      </Ellipse.Fill>

    </Ellipse>

  </Canvas>

</Canvas>

LinearGradientBrush yapıları içerisinde birbirinden bağımsız GradientStop'lar kullanılır. Her bir GradientStop renk geçişinin tamamlanacağı noktayı ve o noktadaki rengi belirler. Bizim örneğimizde sarıdan siyaha ve sonrasında tekrar siyahtan sarıya doğru bir geçiş olacak. Bu doğrusal geçiş boyunca geçişlerin tam olarak hangi noktalarda yapılacağına da her bir GradientStop'ın Offset değeri karar verir. 0 ile 1 arasında tüm geçiş doğrusu üzerinde belirlenen konuma göre GradientStop'lar yerleştirilir. Yukarıdaki kodun oluşturduğu görseli aşağıda inceleyebilirsiniz.

LinearGradientBrush çizimi.

Yukarıdaki resimde de gördüğünüz gibi LinearGradientBrush yapısı sol üst köşeden başlayarak sağ alt köşeye doğru ilerler. Bu doğrunun yönünü değiştirmek için LinearGradientBrush'ların StartPoint ve EndPoint özelliklerinden faydalanabiliriz. Bu özelliklerin her ikisi de LinearGradientBrush doğrusunun başlangıç ve son noktalarının X ve Y koordinatlarını içerir. Söz konusu koordinatlar 1 ile 0 arasında verilerek nesnenin en üst sol noktası 0,0 (origin) olarak kabul edilir. Gerektiğinde bu değerler eksi veya artı olarak 0'dan küçük veya 1'den büyük de olabilir. Bu gibi durumlarda Gradient doğrusunun nesne sınırlarının dışarısında başlayacağı veya biteceği öngörülür.

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

  <Canvas Width="120" Height="44">

    <Ellipse Width="200" Height="200">

      <Ellipse.Fill>

        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

          <GradientStop Color="Yellow" Offset="0"/>

          <GradientStop Color="Black" Offset="0.7"/>

          <GradientStop Color="Yellow" Offset="1"/>

        </LinearGradientBrush>

      </Ellipse.Fill>

    </Ellipse>

  </Canvas>

</Canvas>

Yukarıdaki kod içerisinde tanımlanan LinearGradientBrush'ın başlangıç noktası 0,0 ve sonlanma noktası da 0,1 olarak verilmiş. Başlangıç ve bitiş noktalarının sadece Y koordinatları değiştirilmiş ve bitiş noktası nesnenin sol altına denk getirilmiş. Aldığımız görsel sonuç aşağıdaki gibi olacaktır.

LinearGradientBrush yönündeki değişiklik.

RadialGradientBrush

LinearGradientBrush'ların tüm özelliklerine sahip olan RadialGradientBrush'ların tek farkı doğrusal bir renk değişimi sağlamak yerine dairesel bir renk değişimi sağlamalarıdır.

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

  <Canvas Width="120" Height="44">

    <Ellipse Width="200" Height="200">

      <Ellipse.Fill>

        <RadialGradientBrush>

          <GradientStop Color="Yellow" Offset="0"/>

          <GradientStop Color="Black" Offset="1"/>

        </RadialGradientBrush>

      </Ellipse.Fill>

    </Ellipse>

  </Canvas>

</Canvas>

Yukarıda gördüğünüz yapıda LinearGradientBrush'lara kıyasla tek fark Brush'ımız kendi adı. Aldığımız görsel sonuç ise aşağıdaki şekilde.

RadialGradientBrush çizimi.

RadialGradientBrush'ların merkez noktasını değiştirerek farklı görsel efektler oluşturmak mümkün. Bunun için GradientOrigin denen özellikten faydalanacağız ve söz konusu özelliğe merkez noktası için X ve Y koordinatları aktaracağız. Bu koordinatların da 1 ile 0 arasında olması gerekiyor, aksi halde merkez nokta nesnenin dışına çıkacaktır.

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

  <Canvas Width="120" Height="44">

    <Ellipse Width="200" Height="200">

      <Ellipse.Fill>

        <RadialGradientBrush GradientOrigin="0,0">

          <GradientStop Color="Yellow" Offset="0"/>

          <GradientStop Color="Black" Offset="1"/>

        </RadialGradientBrush>

      </Ellipse.Fill>

    </Ellipse>

  </Canvas>

</Canvas>

Aldığımız görsel sonuç gerçekten etkileyici. Özellikle bir Ellipse kullanmış olmamız RadialGradientBrush'ın ışık etkisi yaratmasına neden oldu.

Origin'i değiştirilmiş RadialGradientBrush.

ImageBrush

Nesnelerin içlerini resimlerle doldurmak için kullanacağınız fırça (Brush) yapısının adı ImageBrush olarak geçiyor.

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

  <Canvas Width="120" Height="44">

    <Ellipse Width="200" Height="200">

      <Ellipse.Fill>

        <ImageBrush ImageSource="kaplumbaga.jpg"></ImageBrush>

      </Ellipse.Fill>

    </Ellipse>

  </Canvas>

</Canvas>

Kodumuzda da gördüğünüz üzere Ellipse'imizin Fill özelliğine bir ImageBrush aktarıyoruz. Söz konusu ImageBrush resim kaynağını ImageSource özelliği ile alıyor. Böylece elde ettiğimiz görüntü aşağıdaki şekilde oluyor.

ImageBrush ile gelen kaplumbağamız :)

ImageBrush'a özel olarak bahsedebileceğimiz bir durum kaynak resmin hedef alana yerleştirilirken en-boy oranına göre ne tarz bir konumlandırma yapılacağıdır. Bu konuyla ilgili ImageBrush'ın Stretch özelliğinden faydalanıyoruz.

• Fill : Resmin en-boy oranı korunmadan hedef alan doldurulur.
• Uniform : Resmin en boy oranı korunarak olabilen en büyük boyutta yerleştirilir.
• UniformToFill: Resmin en-boy oranı korunarak hedef alan tamamen doldurulur. Bu işlemin gerçekleşebilmesi için resmin fazla gelen kısımları dışarıda bırakılır.

VideoBrush

Belki de en ilginç fırçalardan biridir VideoBrush. ImageBrush gibi çalışan VideoBrush kaynak olarak bir resim dosyası almak yerine video alır. Böylece nesnelerin için hareketli bir görüntü ile doldurulabilir.

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

  <Canvas Width="120" Height="44">

    <MediaElement Name="AyiVideo" Source="ayi.wmv" Opacity="0" IsMuted="True"></MediaElement>

    <Ellipse Width="200" Height="200">

      <Ellipse.Fill>

        <VideoBrush SourceName="AyiVideo"></VideoBrush>

      </Ellipse.Fill>

    </Ellipse>

  </Canvas>

</Canvas>

Yukarıdaki kodumuz içerisinde Ellipse'in Fill değerine bir VideoBrush aktarıyoruz. Bu VideoBrush'a video kaynağı olarak AyiVideo adında bir MediaElement bağlamışız. VideoBrush'lar doğrudan video dosyalarını açamaz, arada aracı bir MediaElement gerekir. Bu nedenle sahneye yerleştirdiğimiz MediaElement'imizin şeffaflığını Opacity değerini 0 yaparak arttırıyoruz. Böylece sahnede MediaElement gözükmeyecek. Ayrıca video ile beraber gelen sesin de duyulmaması için yine MediaElement'e ait IsMuted özelliği True yapıyoruz. Sonuçta aşağıdaki görüntüyü elde ediyoruz.

VideoBrush ile aldığımız ayıcık Ellipse içerisinde.

Silverlight 1.0 içerisindeki Brush'larımız hepsi bu kadar. Hepinize kolay gelsin.

Bundan aylaaaar önce :) Türkiye'nin ilk Silverlight eğitimini Microsoft binasında Microsoft iş ortakları için hazırlamıştık. O günlerde konuya ilgisi ile yıldızı parlayan bir öğrencim olan sevgili Eren Emre Kanal :) eğitim sonrasında yazdığı bir Silverlight makalesi ile de dikkatleri çekmişti.

Sevgili Eren'in WordPress altyapısı üzerine kurduğu Silverlight web sitesi olan http://www.weebr.com/ karşınızda! (Gurur duyan bir hoca nidasıyla!) Söz konusu site anında Silverlight resmi sitesinde Showcase bölümünde de Türkiye bayrağı altında yerini aldı.

www.weebr.com Silverlight Showcase'de.

Son olarak tekrar dikkatinizi çekmek istiyorum :) bahsettiğimiz web sitesi Debian Linux sunucu üzerinde çalışıyor ;) Yani tekrar : Silverlight sunucu bağımsız bir teknolojidir.

PCnet'in Şubat sayısındaki yazılarımı her ay olduğu gibi yine buradan sizlere duyurmak istiyorum :) Derginin OKUL bölümünde AJAX, ASP.NET 3.5, Expression Blend ve Silverlight ile ilgili yazılarım yer alıyor.

AJAX : Zaman doluyor, AJAX istekleri yolda.
Expression Blend : WPF Uygulamalarında internette
Silverlight: Silverlight ve JavaScript
ASP.NET 3.5 : ASp.NET 3.5 ve LINQ2SQL

Tüm bu yazılara ek olarak Şubat sayısına özel ".NET Framework 3.5'in Yıldızı: LINQ" makalem de OKUL bölümünde yer alıyor :)

Hepinize kolay gelsin.

Microsoft'da son yaptığımız S2B Silverlight eğitimi sonrası edindiği bilgileri paylaşma kararı alan sevgili Oğuz Sandıkçı'nın yazısını sizlerle paylaşmak istiyorum. Eğitim boyunca "Flashcı" kimliği ile sınıfa renk katan :) sevgili Oğuz'a buradan yazısı için ayrıca teşekkür ediyorum.

http://www.muratkahraman.net/2008/02/konuk-yaz-silverlight-flasha-kar-m.html

Dün İTÜ'de Botego organizasyonu ile mini bir "İnternette Gümüş Devrim: Silverlight" semineri yaptık. Seminer toplam 45 dakika sürdü (sürebildi) :( Pek teknik bir sunum olmadı, benim tarzıma göre çoğu şey havada kaldı. Böyle olacağını da zaten zaman kısıtı nedeniyle tahmin ettiğim içindir ki blogumdan sizlere semineri duyurmadım. Özellikle seminer sonrasında bazı arkadaşların teknik soruları oldu. Bu sorulardan yola çıkarak aslında normal seminerlerimde olduğu gibi daha geniş bir zamanlama ile teknik içeriğe de ihtiyaç olduğu açıkça ortada.

Gümüş Devrim: Silverlight, İTÜ, Botego

Daha önce İTÜ'de bir Silverlight semineri gerçekleştirmiştik. Umarım yakında yeni üniversite döneminin de başlaması ile tekrar ünilerde seminerler düzenliyor olacağım. Blogumu takip ederseniz duyurulara zaten ulaşabilirsiniz. Ayrıca "Hocam bize de gel!" diyenler varsa :) mailinizi beklerim.

Silverlight uygulamalarında videonun yeri çok önemli, tarayıcı ve platform bağımsız olarak istemci tarafında klasik WMV dosyalarını oynatabiliyor olmak büyük avantaj sağlıyor. Tabi tüm bunları yapabilmek için Silverlight içerisinde MediaElement nesneleri kullanmamız gerekiyor. Bu yazıda MediaElement'in kullanımına ve bazı özelliklerine göz atacağız.

<Canvas xmlns="http://schemas.microsoft.com/client/2007"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="300"

      Height="300"

      Background="White"

      x:Name="Page">

  <MediaElement Width="300"

              Height="300"

              Canvas.Left="0"

              Canvas.Top="0" />

</Canvas>

Herhangi bir Silverlight uygulamasına yukarıdaki şekli ile bir MediaElement yerleştirebilirsiniz. Klasik Silverlight nesnelerinde olduğu gibi MediaElement'in de Width, Height ve Canvas.Left, Canvas.Top özellikleri ile sahnedeki boyutu ve konumu belirlenebiliyor.

  <MediaElement Width="300"

              Height="300"

              Canvas.Left="0"

              Canvas.Top="0"

              Source="Lake.wmv"

              Volume="1"

              IsMuted="True" />

MediaElement'e herhangi bir video dosyası yüklemek için Source özelliğini değiştirmek yeterli. Source özelliğine bir dosya adının yanı sıra doğrudan MMS adresleri de aktarabilirsiniz. Ayrıca MediaElement'in Volume özelliği ile sesi veya IsMuted Boolean özelliği ile sesin açık olup olmayacağını da ayarlama şansınız var.

  <MediaElement Width="300"

              Height="300"

              Canvas.Left="0"

              Canvas.Top="0"

              Source="Lake.wmv"

              Stretch="Fill" />

Son olarak MediaElement'e ait Stretch özelliği ile video görselinin MediaElement içerisine nasıl yerleştirileceğine de karar verebilirsiniz. Bu özelliğe verebileceğiniz üç değeri aşağıdaki şekilde tanımlayabiliriz.

• Uniform : Stretch özelliğinin varsayılan değeri olan Uniform ile video görselinin en-boy oranı bozulmadan MediaElement içerisine yerleştirilmesi sağlanır.
• UniformToFill: Bu seçenekte video görselinin en boy oranı korunurken videonun boyu veya eni tam olarak MediaElement içerisini dolduracak şekilde büyütülür ve sığmayan kesimler MediaElement'in dışında tutularak kesilir.
• Fill: Fill seçeneği kullanıldığında video görseli MediaElement içerisine sığacak şekilde tekrar boyutlandırılır. Bu seçenekte videonun en-boy oranı korunmaz.

Videoyu yönetmek...

Herhangi bir video dosyasını oynatırken onu durdurabiliyor olmak önemlidir. Silverlight ile böyle bir işlevsellik sağlayabilmek için kendi düğmelerimizi ve kodumuzu yazmamız gerekiyor. Bu nedenle aşağıdaki şekliyle bir Silverlight uygulaması yaratalım ve sonrasında her bir düğme için yazacağımız kodları incleyelim.

<Canvas xmlns="http://schemas.microsoft.com/client/2007"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="300"

      Height="300"

      Background="White"

      x:Name="Page">

  <MediaElement Width="300"

              Height="300"

              Canvas.Left="0"

              Canvas.Top="0"

              Source="Lake.wmv"

              Stretch="Fill" />

              x:Name="Video" />

  <Canvas Width="73"

        Height="31"

        Canvas.Left="8"

        Canvas.Top="261"

        Opacity="0.7"

        MouseLeftButtonDown="Oynat">

    <Rectangle Width="73"

              Height="31"

              Fill="#FFFFFFFF"

              Stroke="#FF000000"

              RadiusX="16.5"

              RadiusY="16.5" />

    <TextBlock Width="47"

              Height="21"

              Canvas.Left="13"

              Canvas.Top="5"

              TextWrapping="Wrap"><Run Text="Oynat" /></TextBlock>

  </Canvas>

  <Canvas Width="73"

        Height="31"

        Canvas.Left="86"

        Canvas.Top="261"

        Opacity="0.7"

        MouseLeftButtonDown="Bekle">

    <Rectangle Width="73"

              Height="31"

              Fill="#FFFFFFFF"

              Stroke="#FF000000"

              RadiusX="16.5"

              RadiusY="16.5" />

    <TextBlock Width="47"

              Height="21"

              Canvas.Left="13"

              Canvas.Top="5"

              TextWrapping="Wrap"

              Text="Bekle" />

  </Canvas>

  <Canvas Width="73"

        Height="31"

        Canvas.Left="166"

        Canvas.Top="261"

        Opacity="0.7"

        MouseLeftButtonDown="Durdur">

    <Rectangle Width="73"

              Height="31"

              Fill="#FFFFFFFF"

              Stroke="#FF000000"

              RadiusX="16.5"

              RadiusY="16.5" />

    <TextBlock Width="47"

              Height="21"

              Canvas.Left="13"

              Canvas.Top="5"

              TextWrapping="Wrap"

              Text="Durdur" />

  </Canvas>

</Canvas>

Yukarıdaki XAML kodu ile tanımlanan Silverlight nesnesinde toplam üç adet (Oynat, Bekle, Durdur) düğme yer alıyor. Her bir düğme farklı JavaScript fonksiyonlarına bağlanmış durumda. Şimdi sıra geldi gerekli JavaScript fonksiyonlarını yazmaya.

function Oynat(sender)

{

  sender.findName("Video").Play();

}

function Bekle(sender)

{

  sender.findName("Video").Pause();

}

function Durdur(sender)

{

  sender.findName("Video").Stop();

}

Her bir fonksiyonu çalıştıran düğmeye ait sender nesnesi üzerinden findName metodunu çalıştırarak Video ismini vermiş olduğumuz MediaElement'imizi bularak Play, Pause veya Stop metodları ile video üzerinde gerekli işlemleri yapabiliyoruz.

Video'nun Buffer durumunu gösterme...

Video oynatılmadan önce yüklenirken önbellekleme durumunu algılayarak kullanıcıya gösterebiliyor olmak da önemli bir işlevsellik sağlayacaktır. Bu noktada kullanacağımız MediaElement'e ait durumun adı BufferingProgressChanges olarak geçiyor.

  <MediaElement Width="300"

              Height="300"

              Canvas.Left="0"

              Canvas.Top="0"

              Source="Lake.wmv"

              Stretch="Fill"

              x:Name="Video"

              BufferingProgressChanged="Onbellek" />

Yukarıdaki şekli ile gerekli durumu ve çalıştırılacak olan Onbellek JavaScript fonksiyonunu MediaElement içerisinde tanımladıktan sonra sıra geldi gerekli JavaScript fonksiyonunu yazmaya.

function Onbellek(sender)

{

  sender.findName("Fon")["Opacity"]=sender.BufferingProgress;

}

Yukarıdaki fonksiyonda sender nesnesi bizim MediaElement'imizin ta kendisi olduğu için rahatlıkla sender üzerinden yola çıkarak MediaElement'in o anki önbellek durumunu BufferingProgress özelliğinden alabiliyoruz. Önbellek durumu 1 ile 0 arasında decimal olarak gönderileceği için aynı değeri doğrudan başka bir elementin şeffaflığına aktararak yükleme süresince sürekli şeffaftan görünür hale gelen bir animasyon yaratmış oluyoruz. Peki "fon" elementi de nedir? Aşağıdaki şekliyle fonu siyah olan bir dikdörtgeni sahneye koyarsak video yüklenirken söz konusu dikdörtgen giderek görünüz hale gelecek, sonrasında da üzerinde video gözükecektir.

  <Rectangle Width="300"

            Height="300"

            Fill="#FF000000"

            Stroke="#FF000000"

            Canvas.Left="0"

            Canvas.Top="0"

            x:Name="Fon" />

Videoları maskeleme

Maskeleme işlemleri XAML kodlarında Clipping olarak geçer. O nedenle tüm Silverlight nesnelerine olduğu gibi MediaElement'lere de Clip'ler ayarlanabilir. Bunu için aşağıdaki gibi basit bir kod kullanabiliriz.

  <MediaElement Width="300"

              Height="300"

              Canvas.Left="0"

              Canvas.Top="0"

              Source="lake.wmv"

              Stretch="Fill"

              x:Name="Video"

              BufferingProgressChanged="Onbellek">

    <MediaElement.Clip>

      <EllipseGeometry RadiusX="50"

                      RadiusY="50"

                      Center="100,100"></EllipseGeometry>

    </MediaElement.Clip>

  </MediaElement>

Gördüğünüz gibi MediaElement içerisinde ayrı bir EllipseGeometry nesnesi Clip olarak tanımlanmış durumda. Bu şekilde kod yazabileceğiniz gibi doğrudan Expression Blend içerisinde görsel olarak da maskeleme yapma şansınız var. Blend içerisinde herhangi iki nesneyi "Objects and Timeline" panelinden seçerek sağ tıkladığınızda gelen menüden Path / Make Clipping Path komutu vermeniz halinde seçili olan üstteki nesne bir alt nesneye Clip olarak ayarlanacaktır. Aynı şekilde Clip ayarlanmış bir nesneye sağ tıkladığınızda gelen menüden de Path / Release Clipping Path diyerek maskelemeyi kaldırma şansınız da var.