25 Eylül 2009 Cuma

Silverlight Toolkit İçerisinden DataForm Kontrolünün Kullanımı

Merhabalar,
Bu yazımda Silverlight Toolkit içerisinde bulunan DataForm kontrolünden bahsediyor olacağım.Her nekadar DataForm kontrolü Silverlight 3.0 Beta sürümünde Silverlight SDK içerisinde bulunsa da Silverlight 3.0'ın nihai sürümünde kontrol Silverlight Toolkit içerisine kaydırıldı.Bu nedenle kontrolü kullanabilmeniz için öncelikle Silverlight Toolkit'i CodePlex üzerinden indirip kurmanız gerekiyor.Kurulumu yaptıktan sonra Silverlight Toolkit içerisindeki kontrolleri kullanabilirsiniz.
Bu yazımızda inceleyeceğimiz DataForm kontrolünü internette arattığınızda herkesin ASP.NET'teki DetailsView kontrolüne benzettiğini göreceksiniz.Ben de aynı benzetmeyi yapmadan geçemeyeceğim.DataForm kontrolü ile çok hızlı bir şekilde veri formları hazırlayabiliyoruz ve DataForm kontrolünü de diğer kontrollerde olduğu gibi istediğimiz gibi kişiselleştirebiliyoruz.

DataForm Kontrolünü Kullanımı
DataForm kontrolünü sahneye eklemek için Visual Studio içerisinden DataForm kontrolünü kodda ilgili yere sürükleyip bırakmamız yeterli.Visual Studio bizim yerimize gerekli DLL'leri ve namespaceleri projeye eklemektedir.Aynı senaryo Expression Blend için de geçerli.XAML kodumuz ise şu şekilde olacaktır.

<UserControl xmlns:dataFormToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit"x:Class="SilverlightApplication5.MainPage"

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

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

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

<Grid x:Name="LayoutRoot">

<dataFormToolkit:DataForm x:Name="dataForm">dataFormToolkit:DataForm>

Grid>

UserControl>


Kontrolü ekleme kısmında XAML tarafında yapacağımız işlem şimdilik bu kadar.Artık DataForm kontrolüne bağlayacağımız sınıfı hazırlamamız gerekiyor.Bu işlem için aşağıdaki gibi bir personel sınıfı kullanacağız.

public class Personel

{

public string personelNo { get; set; }

public string kimlikNo { get; set; }

public DateTime iseBaslama { get; set; }

public string Departman { get; set; }

}


DataForm'u en basit haliyle kullanmamız için yapmamız gereken artık bir Personel nesnesi üretmek ve bunu DataForm kontrolüne bağlamak.Bağlama işlemi için ise DataForm kontrolünün CurrentItem propertysi mevcut.Bu property sayesinde mevcut kontrole nesne bağlamamız yada bağladığımız nesneye erişmemiz mümkün hale geliyor.Şimdi bir Personel nesnesi yaratalım ve DataForm kontrolüne bağlayalım.


void MainPage_Loaded(object sender, RoutedEventArgs e)

{

Personel personel = new Personel() { personelNo = "1", kimlikNo ="12345678901", iseBaslama = DateTime.Now, Departman = "Yazilim Gelistirme"};

dataForm.CurrentItem = personel;

}


Uygulamayı çalıştırdığımızda ise şu şekilde bir DataForm oluşacaktır.


Eminim şuan farketmişsinizdir ki DataForm kontrolü form içerisinde her bir propertynin adını kullanarak bir alan oluşturmakta.Bu nedenle de kullandığımız property ismi DataForm üzerinde doğrudan etkili olmakta.Ancak genellikle projelerimizde belirli bir isimlendirme standartını kullandığımızdan ve boşluk kullanarak değişken oluşturamadığımızdan dolayı maalesef değişken isimlerini DataForm içinde kullanmamız çokta mantıklı görünmüyor.Bunun için 2 alternatifimiz var.Birincisi metadata bilgileri ile görüntüleme ismini belirleme ikincisi ise DataForm'u özelleştirerek kendi kontrollerimizi eklemek.Ancak şuanda bizi ilgilendiren kısım görüntüleme ismi değiştirme olduğu için bu işlemi metadata bilgilerini değiştirerek gerçekleştireceğiz.


Metadata tanımlama


Eğer daha önce ASP.NET Dynamic Data uygulamaları ile uğraştıysanız metadata sizin için çok yabancı gelmeyecektir.Çünkü yine burada olduğu gibi ASP.NET Dynamic Data uygulamalarında da LINQ to SQL ile oluşturduğumuz sınıflardaki gösterim bilgilerini değiştirmek için yine metadata tanımlıyorduk.Metadata tanımlamak için System.ComponentModel.DataAnnotations isim uzayında pekçok sınıf mevcut.Bu sınıflar ile ilgili propertynin görüntüleme ismini değiştirebilir, propertynin zorunlu bir property olduğu ve boş bırakılmaması gerektiği bildirilebiliriz.

İsim uzayında bulunan bazı attribute sınıflara örnek vermek gerekirse:


Display : Display(Name="DataForm'da görüntülenme adı",Description="Alan yanında gösterilecek tooltip",Order=Form üzerinde hangi sırada gösterilecek)

Required: Required (ErrorMessage="Eğer saha boş geçilirse verilecek uyarı mesajı")

Range: Range(minimum,maximum,ErrorMessage="minimum ve maximum sınırı dışında girilen veriler için verilecek hata mesajı")

RegularExpression: RegularExpression("regular expression pattern",ErrorMessage="Regular expressiona uymayan girdilerde verilecek olan hata mesajı")


Yukarıdaki DataAnnotion isim uzayındaki attribute sınıflarını kullanarak daha önce kullanmış olduğumuz Personel sınıfındaki propertylere aşağıdaki gibi meta attributeler ekleyebiliriz.


public class Personel

{

[System.ComponentModel.DataAnnotations.Display(Name="Personel No")]

[System.ComponentModel.DataAnnotations.Required(ErrorMessage="Personel No Giriniz")]

public string personelNo { get; set; }

[System.ComponentModel.DataAnnotations.Display(Name = "Kimlik No",Description="TC Kimlik No")]

[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "TC Kimlik No Giriniz")]

public string kimlikNo { get; set; }

[System.ComponentModel.DataAnnotations.Display(Name = "İşe Başlama Tarihi")]

public DateTime iseBaslama { get; set; }

[System.ComponentModel.DataAnnotations.Display(Name = "Departman")]

public string Departman { get; set; }

}


Yukarıdaki metadataları ekledikten sonra uygulamamızı çalıştırdığımızda ise şu şekilde bir DataForm ile karşılaşıyoruz.



Sizde yukarıda bir kısmını açıkladığım meta sınıflarını kullanarak çok farklı validasyon mekanizmaları oluşturabilir ve kullandığınız DataForm'u daha özel bir şekilde kullanabilirsiniz.


DataForm ile birden fazla nesne üzerinde çalışmak


Şuana kadar sürekli olarak DataForm'a sadece 1 nesne bağladık ve hep bu nesne üzerinde işlemlerimizi gerçekleştirdik.Halbuki DataForm'un güzel özelliklerinden birisi de kendisine verilen koleksiyon içerisindeki nesneler üzerinde dolaşmaya imkan sağlaması ve görüntülemesi.Bu özelliği göstermek için ise bir koleksiyon tanımlayacağız ve koleksiyonu DataForm'un ItemsSource propertysine bağlayacağız.


void MainPage_Loaded(object sender, RoutedEventArgs e)

{

System.Collections.ObjectModel.ObservableCollection<Personel> koleksiyon =new System.Collections.ObjectModel.ObservableCollection<Personel>();

Personel personel1 = new Personel() { personelNo = "1", kimlikNo ="12345678901", iseBaslama = DateTime.Now, Departman = "Yazilim Gelistirme"};

Personel personel2 = new Personel() { personelNo = "2", kimlikNo ="12345678902", iseBaslama = DateTime.Now, Departman = "Sistem" };

Personel personel3 = new Personel() { personelNo = "3", kimlikNo ="12345678903", iseBaslama = DateTime.Now, Departman = "Test" };

Personel personel4 = new Personel() { personelNo = "4", kimlikNo ="12345678904", iseBaslama = DateTime.Now, Departman = "Yazilim Gelistirme"};

Personel personel5 = new Personel() { personelNo = "5", kimlikNo ="12345678905", iseBaslama = DateTime.Now, Departman = "Destek" };

koleksiyon.Add(personel1);

koleksiyon.Add(personel2);

koleksiyon.Add(personel3);

koleksiyon.Add(personel4);

koleksiyon.Add(personel5);

dataForm.ItemsSource = koleksiyon;

}

Uygulamayı çalıştırdığımızda ise bizi şu şekilde bir DataForm karşılıyor.



Sağ üst köşede gördüğümüz gibi DataForm koleksiyon üzerinde dolaşmak için gerekli olan navigasyon sistemini ekledi.Bunun yanında koleksiyona yeni nesne eklemek için ise yukarıdaki + işareti kullanılabilir durumda.Yine - işareti ile de mevcut nesne silinebilir durumda.


DataForm içeriğini özelleştirme

Çoğu Silverlight kontrolünde olduğu gibi DataForm kontrolünde de özelleştirme mekanizmaları bulunmakta.Bu mekanizmaları kullanarak DataForm'u sil baştan kendi dilediğimiz şekilde dizayn edebilmekteyiz.

Bunun için öncelikle daha önce ASP.NET veri kontrolleri ile ilgilenenlerin aşina oldukları şekilde DataForm'un AutoGenerateFields propertysini false yapmamız gerekiyor.Böylece artık DataForm propertylere uygun TextBlock yada TextBoxları üretmeyecek ve bizim istediğimiz kontrolleri kullanacak.


<dataFormToolkit:DataForm AutoGenerateFields="False" x:Name="dataForm">

dataFormToolkit:DataForm>


Gösterilecek olan şablonu ayarlamak için ise DataForm içerisindeki EditTemplate özelliğine geçmemiz gerekiyor.EditTemplate içerisindeki DataTemplate propertysi ise görüntülenme sırasındaki şablonu gösteriyor olacak.Örneğin DataForm üzerinde sadece Departman bilgisini Label şeklinde göstermek istersek.


<dataFormToolkit:DataForm AutoGenerateFields="False" x:Name="dataForm">

<dataFormToolkit:DataForm.EditTemplate>

<DataTemplate>

<dataFormToolkit:DataField Label="Departman">

<TextBlock Text="{Binding Departman}"/>

dataFormToolkit:DataField>

DataTemplate>

dataFormToolkit:DataForm.EditTemplate>

dataFormToolkit:DataForm>


Yukarıdaki bir kullanım bizim işimizi görecektir.DataField'ın Label özelliği ile ilgili propertynin başlığının ne olacağı bildirilmektedir.Daha sonra ise onun altına istediğimiz kontrolü ekleme ve Binding mekanizması ile property bağlama şansına sahibiz.Gördüğümüz gibi istediğimiz yerleşimi DataForm'a kazandırmak bu kadar kolay.


DataForm kontrolü özellikle veri ağırlıklı uygulamalarda işimizi oldukça kolaylaştırmaktadır.Bizlere sağladığı özelleştirme mekanizmaları ile de istediklerimizi deklaratif bir şekilde tanımlama imkanı sağlamakta.Böylece de uygulama geliştirme süresi oldukça kısalmakta.

DataForm kontrolü ile ilgili yazacaklarım bu kadar.Bir sonraki yazıda görüşmek üzere ...

1 yorum:

Kemal Kendir dedi ki...

dataform ile ilgili güzel bir örnek olmuş. Teşekkürler