Blog

  • 20 Mar 2009

Silverlight 3 Beta – DataForm Kontrolüne Genel Bakış

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’si
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">
<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.

resim 1

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

Resim 2

İ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,

Resim 3

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

Kaynaklar
msdn.com
silverlight.net

Yorum (1)

  • Volkan KARAKAYA / 3.4.2009 16:46:32

    Merhaba, Bu nitelikleri dinamik olarak nasil ele alabiliriz? Sonucta verilen hata mesajlari olsun, fieldların aciklamalari olsun db ye bagli secilen dile gore gelebilmesi gibi bi senaryo olabilir. Oneriniz nedir? Tesekkurler

Yorum Yaz