Silverlight 3 Beta - Data Kontrolleri ile İş Uygulamaları Geliştirme

Merhaba arkadaşlar, bu makalemizde Silverlight 3 Beta ile birlikte gelen DataForm kontrolü ile DataGrid kontrolünü birlikte kullanarak bir iş uygulaması geliştireceğiz.

Silverlight 3 Beta ile birlikte data kontrollerinin çok geliştirildiğini önceki yazılarımda özellikle vurgulamıştım. Bu makalemizde de bu data kontrollerini kullanarak bir iş uygulaması geliştireceğiz. Uygulamamızda kategoriler ve bu kategoriler ait ürünlerin listelendiği bir uygulama geliştireceğiz. DataForm kontrolünde kategorileri, DataGrid kontrolünde de bu kategoriye ait olan ürünleri listeleyeceğiz. Eğer bu kontroller ile ilgili yeterince bilgimiz yoksa öncelikle aşağıdaki makaleleri okumanızı öneririm.

DataGrid Kontrolü
DataGrid Kontrolü Kolon Yapıları
Web-Servisten Gelen Verinin Listelenmesi
DataForm Kontrolüne Genel Bakış

Yeni bir Silverlight projesi oluşturalım. Örneğimizde SQL Server 2005 örnek veritabanı olan AdventureWorks’u kullanacağız. Silverlight da doğrudan veritabanı erişimi olmadığı için XML Web servisi ile veriyi alacağız. Bunun için projemize web servisi ekleyelim. Servisimizin içinde Urun ve Kategori için iki nesne ve iki metot oluşturalım. İlk metot kategoriler için ikincisi de ürünler için olacak.

[WebService1.asmx]

publicclass WebService1 : System.Web.Services.WebService
{
    public class Kategori // Kategoriler için Entity
    {
        public int KategoriID { get; set; }
        public string KategoriAdi { get; set; }
    }

    public class Urun // Ürünler için Entity
    {
        public int UrunID { get; set; }
        public string UrunAdi { get; set; }
        public decimal ListeFiyati { get; set; }
    }

    [WebMethod]
    public List<Kategori> KategorileriGetir()// Web servisten geriye dönecek olan kategori listesi
    {
        List<Kategori> kategoriler = new List<Kategori>();
        SqlConnection cnn = new SqlConnection("server=.; DataBase=AdventureWorks; uid=sa; pwd=sa12345");
        SqlCommand cmd = new SqlCommand("Select ProductSubCategoryID, Name From Production.ProductSubCategory", cnn);
        cnn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        while (dr.Read())
        {
            kategoriler.Add(new Kategori() { KategoriID = dr.GetInt32(0), KategoriAdi = dr.GetString(1) });
        }
        cnn.Close();
        return kategoriler;
    }

    [WebMethod]
    public List<Urun> UrunleriGetir(int ProductSubcategoryID)//Web servisten geriye dönecek olan Ürün Listesi. Parametre olarak CategoryID’yi aldı.
    {
        List<Urun> urunler = new List<Urun>();
        SqlConnection cnn = new SqlConnection("server=.; DataBase=AdventureWorks; uid=sa; pwd=sa12345");
        SqlCommand cmd = new SqlCommand("Select ProductID, Name, ListPrice From Production.Product Where ProductSubCategoryID=@ProductSubCategoryID", cnn);
        cmd.Parameters.AddWithValue("@ProductSubcategoryID", ProductSubcategoryID);
        cnn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        while (dr.Read())
        {
            urunler.Add(new Urun() { UrunID = dr.GetInt32(0), UrunAdi = dr.GetString(1), ListeFiyati = dr.GetDecimal(2) });
        }
        cnn.Close();
        return urunler;
    }
}

Servisimiz hazır. Şimdi Silverlight uygulamamıza dönelim. Silverlight formumuza bir DataGrid ve DataForm ekleyelim. DataForm kontrolünün fieldlarını istersek kendimiz de oluşturabiliriz. Bunun için AutoGenerateFields özelliğini false yapalım ve fieldlarını kendimiz belirleyelim. Aynı şekilde DataGrid kontrolünün de kolonlarının otomatik olarak oluşmasını engelleyelim ve kolonlarını kendimiz belirleyelim.

[XAML]

<UserControl xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm" xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="SL3DataFormGridVew.MainPage"
xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml"
Width="500" Height="360">
// Animasyon da olsun
<UserControl.Resources>
    // Silverlight 3 Beta ile gelen easing animasyonları kullanalım.
    <Storyboard x:Name="oyna">
        <DoubleAnimation Storyboard.TargetName="dgUrunler" Storyboard.TargetProperty="Opacity" From=".2" To="1" Duration="00:00:01">
            // DoubleAnimastion’ın EasingFunction isimli dependency bir property’si var. Bu Property herhangi bir easing animasyonu atayabiliriz.
            <DoubleAnimation.EasingFunction>
                <QuarticEase EasingMode="EaseInOut"></QuarticEase>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>
</UserControl.Resources>
<Canvas x:Name="LayoutRoot" Background="White">
    // Kategorilerin listeleneceği DataForm Kontrolü. AutoGenerateFields özelliğini false yaptık ve içerisinde ki fieldlar otomatik olarak oluşturulmasını engelledik.
    <dataControls:DataForm x:Name="dgKategoriler" AutoGenerateFields="False" Width="480" Canvas.Top="10" Canvas.Left="10" Height="150">
        // DataForm kontrolünün fiedlarını belirliyoruz.
        <dataControls:DataForm.Fields>
            // Yeni bir field ekliyoruz.
            // FieldLabelContent => Kontrolün etiket bilgisi
            // isReadOnly => Bu fieldda yer alan Kontrol sadece okunabilir olacak
            // Binding => Verikaynağından gelen değeri bağlıyoruz.
            // FieldLabelPosition => Kontrolün eiketi nerede görünsün
            <dataControls:DataFormTextField FieldLabelContent="Kategori ID" IsReadOnly="True" Binding="{Binding KategoriID}" FieldLabelPosition="Top">
            </dataControls:DataFormTextField>
            <dataControls:DataFormTextField FieldLabelContent="Kategori Adı" Binding="{Binding KategoriAdi}" FieldLabelPosition="Top">
            </dataControls:DataFormTextField>
        </dataControls:DataForm.Fields>
    </dataControls:DataForm>
     // Kategoriye ait ürünlerin yer aldığı DataGrid Kontrolü. AutoGenerateColumns özelliğini false yaparak kolonların otomatik olarak oluşturulmasını engelledik.
    <data:DataGrid x:Name="dgUrunler" AutoGenerateColumns="False" Canvas.Top="170" Canvas.Left="10" Width="480" Height="180">
        // Datagrid’e kolonları ekleyelim
        <data:DataGrid.Columns>
            // Header => Kolonum başlık bilgisi
            // Binding => Verikaynağından gelen değeri bağlıyoruz.
            <data:DataGridTextColumn Header="Ürün ID" Binding="{Binding UrunID}"></data:DataGridTextColumn>
            <data:DataGridTextColumn Header="Ürün Adı" Binding="{Binding UrunAdi}"></data:DataGridTextColumn>
            <data:DataGridTextColumn Header="Liste Fiyatı" Binding="{Binding ListeFiyati}"></data:DataGridTextColumn>
        </data:DataGrid.Columns>
    </data:DataGrid>
</Canvas>
</UserControl>

Dizayn olarak her şey hazır. Artık Web servise bağlanıp verileri çekebiliriz. Bunun için Silverlight projemize gelelim ve sağ tıklayarak “Add Service Reference” diyelim. Discover butonuna tıkladığımız da servisi otomatik olarak bulacaktır. OK butonuna basalım ve servisi ekleyelim.

Resim 1

Servise bağlandıktan sonra yapmamız gereken tek şey servisten gelen veriyi kontrollere bağlamak olacak.

[C#]

public partial class MainPage : UserControl
{
    // Web Servis’in örneğini oluşturalım
    WebService1SoapClient servis = new WebService1SoapClient();
    public MainPage()
    {
        InitializeComponent();
        // Uygulama ilk yüklendiğinde çalışan Loaded event listenerini oluşturalım.
        this.Loaded += span style='color: blue'>new RoutedEventHandler(MainPage_Loaded);
        // Hatırlayacak olursanız, Web servisleri varsayılan olarak Asenkron olarak çalışıyordu. Burada Servisten kategorilerin getirildiğinde çalışacak olan event listeneri oluşturalım.
        servis.KategorileriGetirCompleted += new EventHandler<SL3DataFormGridVew.ServiceReference1.KategorileriGetirCompletedEventArgs>(servis_KategorileriGetirCompleted);
        // DataForm kontrolünden kategoriler arasında geçerken çalışacak olan event listeneri luşturalım.
dgKategoriler.CurrentItemChanged += new EventHandler<EventArgs>(dgKategoriler_CurrentItemChanged);
        // Servisten Ürünler getirildikten sonra çalışacak olan event listeneri oluşturalım.
        servis.UrunleriGetirCompleted += new EventHandler<UrunleriGetirCompletedEventArgs>(servis_UrunleriGetirCompleted);
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        // Servise Kategorileri getirecek olan metot için istekte bulunuyoruz.
        servis.KategorileriGetirAsync();
    }

    void servis_KategorileriGetirCompleted(object sender, SL3DataFormGridVew.ServiceReference1.KategorileriGetirCompletedEventArgs e)
    {
        // Gelen sonucu DataForm’un ItemsSource özelliğine bağlıyoruz.
        dgKategoriler.ItemsSource = e.Result;
    }

    void dgKategoriler_CurrentItemChanged(object sender, EventArgs e)
    {
        // Seçili olan elemanı bir kategori nesnesine atadık. Object döndüğü içinde cast ettik.
        Kategori kategori = (Kategori)dgKategoriler.CurrentItem;
        // Servise Ürünleri getirecek olan metot için istekte bulunuyoruz.
        servis.UrunleriGetirAsync(kategori.KategoriID);
    }

    void servis_UrunleriGetirCompleted(object sender, UrunleriGetirCompletedEventArgs e)
    {
        // Ürünler geldiğinde animasyonu oynatalım.
        oyna.Begin();
        // Gelen sonucu datagarid’in ItemsSource özelliğine bağlıyoruz.
        dgUrunler.ItemsSource = e.Result;
    }
}

Sonuca bakalım,

Resim 2

İstediğimiz gibi kayıtlar arasında gezinebilir ve ürünlerin de değiştiğini ve animasyonun da çalıştığını görebiliriz.. Bu makalenin de sonuna geldik başka bir makale de görüşmek üzere. Silverlight ile kalın ;) Makale de kullandığımız örneği indirmek için tıklayınız

Sem GÖKSU
www.semgoksu.com | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
msdn.com
silverlight.net

Yorum (1)

Bahadir Özdemir / 10.9.2010 09:49:03

Mrb:) DataForm Kontrolu uzerinde yeni bir field ekleme isleminde bölümnde bir sorunla karşlasyrm.. Bunun sebebi nedir acaba?

Blog

Silverlight 3 Beta - Data Kontrolleri ile İş Uygulamaları Geliştirme

Yorum (1)

Yorum Yaz