20 Mar 2009 Silverlight 3 Beta – Kontrollerin Birbirine Bağlanması Kategori: Silverlight Etiketler: Silverlight 3 BetaSilverlight 1 Yorum Merhaba arkadaşlar, bu makalemizde Silverlight 3 Beta ile birlikte gelen Silverlight UIElementlerin birbirine nasıl bağlandığını (UI Element to Element Binding) inceliyor olacağız. Silverlight 3 beta ile birlikte kontrolleri ve özelliklerini birbirine bağlayabiliyoruz. WPF içerisinde bu özellik olmasına rağmen Silverlight için yepyeni bir özelliktir. Bu özellik ile birlikte eventler arasında dolaşıp kod yazmadan kontrolleri ve özelliklerini birbirine bağlayabileceğiz. Örneğin, ComoBox’dan seçim yapıldığında seçilen değeri TextBlock kontrolünün Text özelliğine bağlayabiliriz. Geriye gidip daha önce bu işi nasıl yaptığımızı hatırlayalım.Yeni bir Silverlight projesi oluşturalım. Formumuza bir ComboBox ve bir tane de TextBlock kontrolü ekleyelim. [XAML]<UserControl x:Class="Silverlight3ElementToElement.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"><Canvas x:Name="LayoutRoot"Background="White" ><TextBlock x:Name="tbTakim" Width="150" Canvas.Left="15" Canvas.Top="10"></TextBlock><ComboBox x:Name="cmbTakimlar" Width="150" Canvas.Top="30" Canvas.Left="10"> </ComboBox></Canvas></UserControl> ComboBox’dan bir seçim yaptığımızda çalışan SelectionChanged isimli bir event var. Bu event de ComboBox’dan seçtiğimiz değeri TextBlock’un Text özelliğine atayabiliriz. İlk olarak UserControl için Loaded Event Listener’ini oluşturup ComboBox’a eleman ekleyelim. Daha sonra da atama işlemini yapacağomız SelectionChanged event listenerini oluşturalım.[C#]publicMainPage(){InitializeComponent();// Event Listenerları oluşturalım.this.Loaded += new RoutedEventHandler(MainPage_Loaded);cmbTakimlar.SelectionChanged += new SelectionChangedEventHandler(cmbTakimlar_SelectionChanged);}void MainPage_Loaded(object sender, RoutedEventArgs e){// Listbox’a eleman ekliyelimcmbTakimlar.Items.Add("Fenerbahçe");cmbTakimlar.Items.Add("Galatasaray");cmbTakimlar.Items.Add("Beşiktaş");cmbTakimlar.Items.Add("Trabzon Spor");} void cmbTakimlar_SelectionChanged(object sender, SelectionChangedEventArgs e){// Atama işlemini yapalım.tbTakim.Text = cmbTakimlar.SelectedItem.ToString(); } Eskiden bu şekilde kod yazarak kontrolleri ve özelliklerini birbirine bağlayabiliyorduk. Silverlight 3 Beta ile birlikte artık kontrolleri birbirine bağlamak çok daha kolay. [Kullanımı]<UIElement Text="{Binding BağlanacakÖzellik, ElementName=BağlanacakKontrol}"></UIElement > Şimdi yukarıda event listener ile yaptığımız bağlama işlemini Silverlight 3 Beta ile gelen yeni özellik ile yapalım. [XAML]<UserControlx:Class="Silverlight3ElementToElement.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"><Canvas x:Name="LayoutRoot" Background="White" >// TextBlock kontrolünün Text özelliği ile ComoBox kontrolünün SelectedItem özelliğini birbirine bağladık. ComboBox’ın SelectedItem özelliği ne ise TextBlock kontrolünün Text özelliği de o olacak.<TextBlock x:Name="tbTakim" Width="150" Canvas.Left="15" Canvas.Top="10" Text="{Binding SelectedItem,ElementName=cmbTakimlar}"></TextBlock><ComboBox x:Name="cmbTakimlar" Width="150"Canvas.Top="30" Canvas.Left="10"> </ComboBox></Canvas></UserControl> Hiç kod yazmadan kontrolleri birbirine bağladık :) Bu makalenin de sonuna geldik başka bir makale de görüşmek üzere. Silverlight ile kalın ;) Sem GÖKSU www.semgoksu.com | www.yazilimgunlugu.com sem.goksu@yazilimgunlugu.com Kaynaklar msdn.com silverlight.net
20 Mar 2009 Silverlight 3 Beta – DataForm Kontrolüne Genel Bakış Kategori: Silverlight Etiketler: Silverlight 3 BetaSilverlight 1 Yorum Merhaba arkadaşlar, bu makalemizde Silverlight 3 Beta ile birlikte gelen DataForm kontrolünü inceliyor olacağız.Herkesin merakla beklediği, Silverlight 3 Beta’nın duyurulmasıyla birlikte özellikle Data kontrollerinde bir çok yenilik ve yeni kontrol bizleri bekliyor. Bu kontrollerden en başarılısı bana göre DataForm kontrolü olmuş. DataForm kontrolü ile geliştiricinin vakit harcayacağı bir çok işi bizim yerimize düşünüp yapıyor. (Dizayn, validation vb gibi işler). Aynı zamanda istersek DataForm kontrolü istediğimiz gibi kişiselleştirebiliyoruz. DataForm kontrolü, ASP.NET data kontrolü olan DetailsView kontrolüne benzer bir kontroldür. DataForm ile Silverlight da hızlı bir şekilde formlar oluşturabiliyoruz. Bu form tek bir nesne için yada bir koleksiyon içinde olabilir. Örneğin, Ürünler arasında gezinebilir, bu ürünleri güncelleyip, silebilir ve hatta oluşturduğumuz form ile yeni bir ürün de ekleyebiliriz. Yeni bir Silverlight 3.0 projesi oluşturalım ve DataForm kontrolü ile ilk uygulamamızı yapalım. Projemiz de Ürünler ile ilgili işlemler yapacağımızı varsayalım. Bunun için ilk olarak Projemize Urun isimli bir Class ekleyelim [Urun.cs] public class Urun { public int UrunID { get; set; } public string UrunAdi { get; set; } public double Fiyat { get; set; } } Classımız hazır şimdi de Ürün’ü göstereceğimiz formu hazırlayalım. Bunun için projemize bir DataForm kontrolü ekleyelim. Visual Studio 2008 de Toolbox’dan XAML’a kontrolü direk sürükleyebiliriz. Yada XAML kodunu aşağıdaki gibi yazabiliriz. Bunu yapmadan önce projemizin referanslarına System.ComponentModel, System.ComponentModel.DataAnnotations ve System.Windows.Controls.Data.DataForm kütüphanelerini ekleyelim. [XAML]<UserControl xmlns:dc="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm"// DataForm Kontrolünün namespace ve assembly’six:Class="SilverlightHtmlRender.MainPage" 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"> <dc:DataForm x:Name="Urun"></dc:DataForm> // DataForm Kontrolü</Grid></UserControl> Şimdi DataForm kontrolü için UserControl içinde bir Resource oluşturalım. Bu Resource DataForm üzerinde görüntülenecek olan Urun classı’nı içerecek [XAML] <UserControl xmlns:dc="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm" x:Class="SilverlightHtmlRender.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300" xmlns:template="clr-namespace:SilverlightDataForm"><UserControl.Resources> <template:Urun x:Key="urun" UrunID="1" UrunAdi="Laptop" Fiyat="100"></template:Urun></UserControl.Resources> // DataForm Kontrolü için resouce oluşturduk<Grid x:Name="LayoutRoot" Background="White"> <dc:DataForm x:Name="uyeler" CurrentItem="{StaticResource urun}"></dc:DataForm></Grid></UserControl>DataForm kontrolünün CurrentItem özelliği, Dataform üzerinde gösterilecek olan resource’u belirlememize yarar. Burada Resource içinde şuan için tek bir kayıt olduğu için sadece onu gösteriyor olacak. Gördüğünüz gibi hiç uğraşmadan Form aşağıdaki gibi oldu bile :) Form ilk açıldığında herhangi bir değişiklik yapamıyoruz. Sağdaki kaleme tıklarsak değişiklik yapmamıza izin veriyor. Bu işlemi Resource oluşturmadan dinamik olarak da yapabiliriz. Form_Loaded için event listener oluşturalım ve gerekli kodu yazalım. Sonuç yukarıdakiyle aynı olacaktır :)[MainPage.cs] publicMainPage(){ InitializeComponent(); this.Loaded += new RoutedEventHandler(MainPage_Loaded);}void MainPage_Loaded(object sender, RoutedEventArgs e){ // Diamik olarak CurrentItem’a Urun nesnesini atıyoruz. urunler.CurrentItem = new Urun() { UrunID = 1, UrunAdi = "Laptop", Fiyat=100 }; }Form’daki elemanların özelliklerini değiştirmek istersek, her şeyi yazdığımız Urun sınıfından yapabiliyoruz. Bunun için ilgili propertyler’e yada class’a attribute(nitelik) uygulamamız yeterli oluyor. Bu nitelikleri incelmek için Urun sınıfı üzerinde biraz oynayalım. [Urun.cs] publicclass Urun { [Display(Name = "Ürün Kodu", Order = 1, Description = "Ürün Kodunu gösteren Alan")] // Display: Property’nin görünüm özelliklerini belirleyen nitelik // Name: Etiket bilgisini değiştirmemizi sağlayan property // Order: Bu Property’nin Form üzerinde kaçıncı sırada gösterileceğini sağlayan property // Desctiption: Bu property ile ilgili bilgi verecek olan property [Bindable (true, BindingDirection.OneWay)] // Bindable: Bu property’nin form üzerinde gösterilip gösterilmemesini sağlayan nitelik. // BindingDirection: Bu property’nin form da hangi modda gösterileceğini belirtir. OneWay ise property readonly olur. public int UrunID { get; set; } [Display(Name = "Ürün Adı", Order = 2, Description = "Ürün Adını Gösteren Alan")] [Required(ErrorMessage = "Ürün Adı Girmeniz Zorunludur !")] // Required: Bu property’e veri girişinin zorunlu olmasını sağlayan nitelik // ErrorMessage: Eğer bu property’e veri girişi yapılmamışsa gösterilecek olan hata mesajı public string UrunAdi { get; set; } [Display(Name = "Fiyat", Order = 3, Description = "Ürün Fiyatını Gösteren Alan")] [Range(0,100, ErrorMessage="Ürün fıyatı 0-100 arasında olmalıdır")] // Range: Property’e girilen verinin aralığını kontrol eden nitelik // Minumum: Bu property’e girilebilecek en küçük değer // Maximum: Bu property’e girilebilecek en büyük değer // ErrorMessage: Eğer property’e veri girişi belirtilen aralık dışındaysa gösterilecek olan hata mesajı public double Fiyat { get; set; } } Şimdi projeyi tekrar çalıştıralım ve bakalım neler olmuş. İlk olarak etiketler bizim belirlediğimiz gibi olmuş J Ürün Adı alanına herhangi bir değer girmedim ve save butonuna bastım. Hata mesajı çıktı. Ürün kodunun sağında bir şey vardı üzerine gittim ve bana bir bilgi mesajı çıkardı :) Save butonu var orada peki o ne işe yarıyor? Oda formdaki yapılan değişikliklerin onaylanmasını sağlıyor. Akla hemen şu sorunun geldiği tahmin ediyorum. Save butonun’a basınca ben bir işlem yaptırmak istiyorsam ne olacak? Yada kaleme tıkladığımda bir işlem yapılmasını istiyorsam ne yapacağım? Bunun için yapmamız gereken şey IEditableObject Interface’ni ilgili class'a uygulamak olacaktır. Bizde bu Interface’i Urun Class’ına uygulayalım. [Urun.cs] public class Urun :IEditableObject // Interface’i uygulayalım { [Display(Name = "Ürün Kodu", Order = 1, Description = "Ürün Kodunu gösteren Alan")] [Bindable (true, BindingDirection.OneWay)] public int UrunID { get; set; } [Display(Name = "Ürün Adı", Order = 1, Description = "Ürün Adını Gösteren Alan")] [Required(ErrorMessage = "Ürün Kodu Girmeniz Zorunlu !")] public string UrunAdi { get; set; } [Display(Name = "Fiyat", Order = 1, Description = "Ürün Fiyatını Gösteren Alan")] [Range(0,100, ErrorMessage="Ürün fıyatı 0-100 arasında olmalıdır")] public double Fiyat { get; set; } #region IEditableObject Members public void BeginEdit() // Güncelle butonuna(Kaleme) basıldığında çalışacak metot { MessageBox.Show("Güncelleme modu açıldı"); } public void CancelEdit() // Güncelle işlemi iptal edildiğinde çalışacak metot { MessageBox.Show("Güncelleme iptal edildi"); } public void EndEdit() // Güncelle işlemi bittiğinde çalışacak metot { MessageBox.Show("Güncelleme yapıldı"); } #endregion} Şimdiye kadar hep tek nesne ile çalıştık. Şimdi bir ürün koleksiyonu oluşturalım ve onu DataForm kontrolünde kullanalım. [MainPage.cs] void MainPage_Loaded(object sender, RoutedEventArgs e){ // Ürün koleksiyonu oluşturalım. List<Urun> urunCollection = new List<Urun>(); urunCollection.Add(new Urun() { UrunID = 1, UrunAdi = "Masa", Fiyat= 100 }); urunCollection.Add(new Urun() { UrunID = 2, UrunAdi = "Kitap", Fiyat = 120 }); urunCollection.Add(new Urun() { UrunID = 3, UrunAdi = "Defter", Fiyat = 140 }); urunCollection.Add(new Urun() { UrunID = 4, UrunAdi = "Silgi", Fiyat = 120 }); urunCollection.Add(new Urun() { UrunID = 5, UrunAdi = "Cetvel", Fiyat = 110 }); urunler.ItemsSource = urunCollection; // Koleksiyonu ItemSource özelliğine bağladık.}Projemizi tekrar çalıştıralım, Navigasyon, Ekleme butonu, Silme Butonu da eklenmiş ;) Bu makalenin de sonuna geldik başka bir makale de görüşmek üzere. Silverlight ile kalın ;)Sem GÖKSU www.semgoksu.com | www.yazilimgunlugu.com sem.goksu@yazilimgunlugu.com Kaynaklarmsdn.comsilverlight.net
19 Mar 2009 Silverlight 3 Beta Kategori: Yazılım Etiketler: Silverlight 3 BetaSilverlight 0 Yorum Beklenen gün geldi çattı ve Daron Yöndem'den Silverlight 3 ün Beta haberini aldık :) Benim gibi hemen denemek isteyenler için sözü uzatmadan linkleri verelim :) Yalnız dikkat edilmesi gereken nokta Silverlight 3 Beta'yı kurduktan sonra silverlight 2.0' ile geliştirme yapılamıyormuş, bunun için sanal pc'de çalışmanızı öneririm :)Silverlight 3 Beta Tools Silverlight 3 Beta SDKBlend 3 BetaSilverlight 3 İle gelecek Olan Bazı yeniliklerMultitouch desteği geliyor. (Sadece Windows 7'de)MPEG, AAC, H.264 desteği geliyor. İsterseniz kendi codec mekanizmanısı da yazabiliyorsunuz.IIS Media Services üzerinden Smooth Streaming'in Live sürümü geliyor. Artık canlı yayında da bant genişliği yayın esnasında dinamik olarak değiştirilebiliyor.İş uygulamaları için Data kontrolleri geliyor....NET RIA Services ile Silverlight ve ASP.NET arasındaki veri bağlantısı kolaylaştırılıyor.Offline çalışma desteği geliyor. Artık herhangi bir Silverlight uygulamasını Desktop'a normal program gibi alabiliyorsunuz. Mac'te de aynı şekilde çalışıyor. Kendini otomatik update ediyor vs vs :)SaveFileDialog ve bir çok yeni kontrol geliyor; WrapPanel, DockPanel, ViewBox, AutoCompleteBox, TreeView, Label...Lokalde Assembly önbellekleme desteği geliyor.Easing kütüphanaleri ve text animasyonları geliyor.Pixel Shader efektleri geliyor; DropShadow vs... Kendi efektinizi yazabiliyorsunuz.Perspective 3D!GPU destekli video oynatma!DeepZoom projelerinde GPU kullanımı!Network bağlantısını algılayabilme.KaynakDaron Yöndem