Carousel kontrolleri son dönemin modası diyebiliriz. Çoğu yazılımın arayüzünde Carousel kontrolleri görmeye başladık. Özellikle web sitelerinde de neredeyse RIA denildiği anda bir yere bir Carousel konulması gibi bir moda da mevcut. Bu çerçevede Silverlight 2 uygulamalarınızda Carousel yapılarından faydalanmak isterseniz herşeyi sıfırdan yazmanıza gerek yok. Bu yazımda sizlere açık kaynak kodu ile dağıtılan hazır bir Carousel kontrolünü tanıtacağım.

Coolmenu Carousel kontrolü

İlk olarak gelin kullanacağımız kontrolü kendi web sitesinden bir bilgisayarımıza indirelim. Aşağıdaki adresten indirebileceğin kontrolün tüm kaynak kodları ile alıp inceleme şansınız var. Biz şimdilik RC0 için hazırlanmış olan paketi alarak içerisinde Coolmenu.DLL dosyasını kullanacağız. Yani kaynak kodları ile uğraşmayacak doğrudan kontrolün Compile edilmiş halini projelerimize entegre edeceğiz.

http://pagebrooks.com/archive/2008/08/21/coolmenu-a-silverlight-menu-control.aspx

Projemize Carousel ekleyelim!

Projemizde Coolmenu Carousel kontrolünü kullanabilmek için ilk olarak download paketinden Coolmenu.Dll dosyasına Silverlight projemize referans olarak eklemeliyiz. Sonrasında XAML tarafında söz konusu kontrolü sayfaya koyabilmemiz için gerekli namespace tanımlarını yapmamız şart.

[XAML]

< UserControl x : Class ="SilverlightApplication8.Page"

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

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

   Width="400" Height="300"

   xmlns:SilverlightContrib_Controls="clr-namespace:SilverlightContrib.Controls;assembly=CoolMenu">

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

        < SilverlightContrib_Controls : CoolMenu x : Name ="Carousel"/>

    </ Grid >

</ UserControl >

Yukarıdaki XAML kodunu incelediğiniz özellikle dikkat etmemiz gereken aslında iki nokta var. Bunlardan ilki xmlns tanımımız. SilverlightContrib_Controls adında tanımladığımız yeni XML namespace'imiz doğrudan Coolmenu assembly'sini hedefliyor. Böylece söz konusu assembly içerisindeki tüm kontrollü XAML içerisinde kullanabileceğiz. Bir sonraki adımda da tanımladığımız NameSpace'i kullanarak CoolMenu kontrolünden bir adet ekrana yerleştirerek adını da Carousel olarak tanımlıyoruz. Bu aşamadan sonrası için kod tarafına geçmemiz ve bu Carousel içerisinde gösterilecek öğeleri tanımlamamız gerek.

[VB]

Dim Foto AsNew Image

Foto.Source = New Imaging.BitmapImage(New Uri("http://daron.yondem.com/tr/images/vesikalik2.png", UriKind.Absolute))

Carousel.Items.Add(New SilverlightContrib.Controls.CoolMenuItem() With {.Content = Foto})

Foto = New Image

Foto.Source = New Imaging.BitmapImage(New Uri("http://daron.yondem.com/tr/images/vesikalik2.png", UriKind.Absolute))

Carousel.Items.Add(New SilverlightContrib.Controls.CoolMenuItem() With {.Content = Foto})

Foto = New Image

Foto.Source = New Imaging.BitmapImage(New Uri("http://daron.yondem.com/tr/images/vesikalik2.png", UriKind.Absolute))

Carousel.Items.Add(New SilverlightContrib.Controls.CoolMenuItem() With {.Content = Foto})

[C#]

Image Foto = new Image();

Foto.Source = new Imaging.BitmapImage(new Uri("http://daron.yondem.com/tr/images/vesikalik2.png", UriKind.Absolute));

Carousel.Items.Add(new SilverlightContrib.Controls.CoolMenuItem { Content = Foto });

Foto = new Image();

Foto.Source = new Imaging.BitmapImage(new Uri("http://daron.yondem.com/tr/images/vesikalik2.png", UriKind.Absolute));

Carousel.Items.Add(new SilverlightContrib.Controls.CoolMenuItem { Content = Foto });

Foto = new Image();

Foto.Source = new Imaging.BitmapImage(new Uri("http://daron.yondem.com/tr/images/vesikalik2.png", UriKind.Absolute));

Carousel.Items.Add(new SilverlightContrib.Controls.CoolMenuItem { Content = Foto });

Örnek kodlarımız içerisinde sürekli yeni Image nesneleri yaratarak bunları tek tek birer öğe (CoolMenuItem) olarak Carousel kontrolümüze ekliyoruz. Her bir CoolMenuItem'ın Content özelliğine herhangi bir Silverlight nesnesi atayabilirsiniz. Bu ister bizim örneğimizdeki gibi bir resim ister bir video, yani MediaElement olabilir.

Örnek Carousel Kontrolü (Tıklamayı unutmayın :))

Hepinize kolay gelsin...

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...

Yılın ilk yazısında yıl boyunca tüm yazılarınızda kullanabileceğiniz bir kolaylıktan bahsetmek istiyorum; kod renklendirmek! Özellikle teknik makale yazanların en büyük dertlerinden biri de Visual Studio içerisinde kod renklendirmeleri gibi web sayfalarında da kodların renkli olarak gözükmesini sağlamaktır. Bu kapsamda bazıları kodların resim dosyaları olarak sitelerine koyar fakat bu durum okunabilirlilik açısından sorun yaratmasa da "kodları kopyalayamayan milyonlar" :) tarafından küfür yemenize ramak kaldı demektir!

Bugün aslında çok basit bir JavaScript kütüphanesinden bahsedeceğiz. Bu kütüphane sayesinde aşağıdaki dillerle yazılmış tüm kodları otomatik olarak sayfa içerisinden JavaScript ile renklendirebiliyorsunuz.

Yukarıdaki listede desteklenen dillerin yanında bir de MicroFormat tanımlarını bulabilirsiniz. Bunların ne şekilde kullanıldığına birazdan değineceğiz.

Color Coding için altyapı hazırlıkları...

İlk olarak sitenizdeki tüm kodları PRE tagları arasına almanız gerekiyor. Eğer kodlarınız içerisinde XML'de olduğu gibi < ve > işaretleri varsa bu sefer de bir textarea kullanabilirsiniz. Söz konusu tagların hepsine isim olarak aynı ismi vermeniz gerek. Ayrıca tagların CSS class isminin de yukarıdaki listede bulunan dillere göre MicroFormat'lardan alınması şart. Gelin hızlı bir örnekle nasıl bir şeyden bahsettiğimizi görelim.

< pre name ="code" class ="vb.net">

Dim x as string

</ pre >

Gördüğünüz gibi PRE tagının ismi CODE ve class değeri de vb.net şeklinde ayarlanmış. Birazdan yazacağımız JavaScript kodunda sayfada adı code olan tüm tagların içeriğinin renklendirilmesini belirteceğiz ve renklendirme yapılırken her bir code adındaki tagın class ismine bakılarak hangi dilde kod yazıldığını anlaşılacak. Peki tüm bunları nasıl yapacağız?

İlk olarak buradan kullanacağımız tüm JavaScript dosyalarını indirebilirsiniz. Dosyalar içerisinde kodların görselliğini ayarlayacak bir CSS ve bir de clipboard kopyalama sistemi için Flash dosyası bulunuyor. Özellikle bilgisayarınıza tüm dosyaları indirdiğinizde scripts klasörüne bakarsanız aslında her dil için ayrı ayrı JavaScript dosyaları bulunduğunu görebilirsiniz. Paketteki shCore.js dosyası tüm renklendirme sisteminin ana dosyası. Diğer JS dosyaları ise ayrı ayrı dillere özel olarak hazırlanmış. Bu dosyalardan hangilerini istiyorsanız onları sayfanıza eklemeniz yeterli olacaktır.

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

< script language ="javascript" src ="scripts/shCore.js"></ script >

< script language ="javascript" src ="scripts/shBrushVb.js"></ script >

< script language ="javascript">window.onload = function ()

{    dp.SyntaxHighlighter.ClipboardSwf = '/scripts/clipboard.swf';   

dp.SyntaxHighlighter.HighlightAll('code');}</script>

Yukarıda gördüğünüz kodları sayfanıza yerleştirirseniz aslında tüm gerekli ayarları da tamamlamış oluyorsunuz. Böylece gerekli CSS sınıfları ve JavaScript kütüphaneleri sayfaya eklenmiş oldu. Son olarak sayfa açıldığında da hem ClipBoard için kullanacağımız Flash dosyasını hem de sayfada taranacak tagların isimlerini aktarmış olduk.

Renklendirilmiş kodumuz.

Yukarıda gördüğünüz son görsel şekil yazdığımız kodların sonucu ortaya çıkıyor. JavaScript kütüphanesi PRE taglarından böyle bir görsellik yaratıyor. Eğer isterseniz bu görsellik içerisinde bazı noktaları da PRE taglarına ek parametreler ekleyerek tanımlayabilirsiniz.

< pre name ="code" class ="vb.net:nocontrols:firstline[10]">">

Dim x as string

</ pre >

Yukarıdaki kod içerisinde class değerinde kullandığımız dili tanımladıktan sonra üst üste iki nokta koyarak diğer parametrelerimizi de yazabiliyoruz. Bu parametrelerden nocontrols parametresi görsel arayüzde üstteki düğmelerin gözükmemesini sağlarken firstline ise kod görünümüzdeki ilk satırın satır numarasını belirliyor.

Hepinize yeni yılda bol paylaşımlı günler dilerim ;)

Veeee yılbaşı geldi :) Yeni bir yıl yeni heyecanlar ve tabi eskitilen bir yıl ve yaşananlar. Neyse geyiği bırakıp konuya dönelim :) Malumunuz yeni yıl gelirken hemen bir E-Kart savaşı başlar :) Herkes birbirine milyonlarca kutlama mesajı gönderir ve bu mesajların içerisinde de E-kartların yeri büyüktür. Ben de bir kaç dakika ayırarak sizler için ufak bir Silverlight 2.0 E-Kart hazırladım.

E-kart'ın kaynak kodlarını da aşağıdaki adresten bilgisayarınıza indirebilirsiniz. Bu vesile ile bloğumu okuyan herkesin yeni yılını da kutluyorum.

E-Kart Kaynak Kodları - 31122008_1.rar (1,83 MB)

WPF veya Silverlight projelerinde Inıt durumu ile PageLoad veya WindowLoad event'ları arasındaki fark bazen ilk bakışta yokmuş gibi varsayılarak kodların doğrudan Init kısmına yazıldığını çok gördüm. Bazen bu durum sorun çıkarmasa da aslında tam olarak Init durumu bitmediği için bazı kaynaklara veya kontrollere ulaşmama hatta bu ulaşıp / ulaşmama durumunun da belli olmaması :) gibi garip hatalar ile karşılaşabilirsiniz. O nedenle benim genel tavsiyem sürekli Loaded event'larının kullanılması ve Init'in sadece ek event-listener tanımlamalarının yapılacağı bir konum olarak saklanması.

Bu çerçevede bir diğer sorun ise Init durumuna yazdığınız kodların aslında hem Blend hem de Visual Studio tarafından Design modundayken çalıştırılıyor olması. Eğer bu bilgiye sahip değilseniz maalesef ki Init durumunda yaptığınız ağır bir işlemin bir anda Visual Studio ve Blend'in arayüzüne de binmesi ve Page.XAML gibi bir dosyayı açtığınız anda yüksek işlemci kullanımları ile karşılaşmanız olası. En basit çözüm bu kodları Init'den çıkarmak ve Loaded'a yerleştirmek olabilir fakat ya Init'i kesinlikle kullanmanız gerekiyorsa?

[C#]

            if (System.ComponentModel.DesignerProperties.GetIsInDesignMode(this) == false)

            {

            }

İşte yukarıdaki gibi bir kontrol ile söz konusu Init kodunun içinde uygulamanın DesignMode'da olup olmadığını kontrol edebilirsiniz. Böylece eğer sayfa Visual Studio veya Blend ile Design modunda açılmış ise bu IF içerisinde kodlar çalıştırılmayacak. Oysa programı F5 ile compile edip çalıştırdığınızda ise herhangi bir sorun ile karşılaşamaycaksınız.

Hepinize kolay gelsin.

Son iki gündür daha önce de sizlere duyurmuş olduğum Microsoft'un MSP Days etkinliğindeydim. Ankara, Çankaya Üniversitesi'nde düzenlenen etkinlikte Microsoft Student Partner unvanına sahip genç kardeşlerimiz teknik sunumlar yaptılar. Açıkçası "genç" olmalarının yanında ortalamanın çok üstünde bir performans sergilediklerini ve abilerine taş çıkartabilecek nitelikte bir içerik ürettiklerini söyleyebilirim. Şaşırmadım desem yalan olur :)

MSP Days'deki MultiPoint SDK sunumum.

Benim de normal şartlarda Windows Azure anlatacağım MSP Days etkinliğinde ufak bir sorun yaşadığımız için konumu değiştirerek MultiPoint SDK üzerinden MultiPoint uygulama geliştirmeyi anlatmayı tercih ettim :) Özellikle sunumu ilginç bulan arkadaşlar oldu :) Aşağıda sizlerle de sunumumu paylaşıyorum.

MultiPoint SDK Sunumu - 28122008_2.pptx (3,48 MB)

Etkinlikteki başarılarından dolayı tüm MSP kardeşlerimi kutluyorum. Başarınız daimi olsun ;)

INETA tarafındaki aktiviteleri duyurdukça gelen yorumlar arasında sürekli "İzmir'e de gelin hocam" serzenişleri oluyor. Geliyoruz! :)

INETA EGE Hit karşınızda.

Programımız yoğun, her gün üç ayrı oturumumuz var. 10-11 Ocak hafta sonu Dokuz Eylül Üniversitesi Rektörlük Binası'nda DESEM Salonları'nda gerçekleştireceğim etkinliğe İzmir'den herkesi bekliyoruz. Sonra "Hocam gelmiyorsunuz" demeyin :)

Duyuruyu bloguna koymak isteyenlere bir de banner hazırladık ;) Haydi bakalım Ege ;)

Bugün sabahtan Bursa Uludağ Üniversitesi'ndeydim. Hazır Microsoft'un Gençsen Geleceksin etkinliği için gitmişken üniversiteye biraz daha erken gidiyim ve arada bir de ASP.NET 3.5 AJAX semineri yapalım dedim. Yaklaşık sanırım 2.5 saat süren bir AJAX semineri sonrasında Gençsen Geleceksin kısmını da tamamlayarak Uludağ Üniversitesi'nden ayrıldım.

Uludağ Üniversitesi, Bursa

Aslında bu AJAX seminerini yapmamın özel bir nedeni var. AJAX biraz eskimiş bir terim olarak gözükse de işin gerçeği Türkiye'de AJAX'ı ve özellikle Microsoft'un AJAX Framework'ünün detaylarını bilen kişi sayısı hala ciddi şekilde kısıtlı. Herkes UpdatePanel'den ötesini bilmiyor. Bu derdime ek olarak bir de arada sırada aldığım "Hocam niye AJAX anlatmıyorsunuz?" maillerini de katarsak ortaya Uludağ Üniversitesi'ndeki AJAX seminerim çıktı. 2.5 saatte herşeyi anlatabildim diyemem, seminerin sonuna doğru bazı şeyleri hızlı geçmem gerekti ama en azından güzel bir giriş oldu. Tabi ki seminerin tamamını videoya da kaydettik ve yakında sizlerle blogumun SeminerTV bölümünden paylaşacağım. Böylece artık mail atmadan AJAX seminerimi webden izleyebileceksiniz.

Uludağ Üniversitesi'ndeki organizasyonlardaki katkısından dolayı özellikle sevgili Muhammed Medeni Baykal kardeşime buradan çok teşekkür ediyorum. Evet biliyorum daha organizasyona katkısı olan bir çok kardeşim var :) onları da buradan kucaklıyor ve çıkışta İskender yemeye gelmedikleri için kınıyorum :)