İlkay İlknur

just a developer...

Windows 8 Metro Style Data Uygulamaları ve GridView Kontrolü - C# & XAML

Merhaba Arkadaşlar,

Windows 8 metro style development konusuna giriş yaptığımız yazılarımızın ardından verdiğimiz kısa aradan sonra kaldığımız yerden serimize devam ediyoruz :). Ara vermemizin sebebi de aslında Windows 8 RP ve Visual Studio 2012 RC sürümlerinin çıkmasını beklememizdi. Kabul ediyorum biraz da benim tembelliğimdi :)

Bu yazımızda ise sizlerle Windows 8 Metro Style Data uygulamalarına giriş yapıyor olacağız ve bu kapsamda da GridView kontrolünü incelemeye başlayacağız. Ancak öncelikle Windows 8 tarafındaki data erişimine bir bakalım.

Wind0ws 8 Metro Style Uygulamalarında Veri Erişimi

Windows 8 tarafında bir data-driven Metro Style Uygulama geliştirmek istediğimizde aslında temelde data çekebileceğimiz 2 kaynak bulunmakta.

Bunlar,

  • Web üzerinde bulunan kaynaklar
  • Database içerisinde saklanan veriler.

Web üzerinden bulunan kaynaklardan kastımız aslında RSS gibi veya REST tabanlı doğrudan HTTP tabanlı isteklerde bulunup yanıtı alabileceğimiz kaynaklar.

Database'den kastımız da database içerisinde bulunan veriler ve bu verilerin Windows 8 Metro Style uygulamalarda kullanılması.

Web üzerinde bulunan kaynaklara erişimi ise WinRT üzerinde asenkron olarak gerçekleştirebilmekteyiz. Bunun nedeni de aslında web üzerindeki kaynağa erişim sırasında uygulamanın UI threadini bloklamamak ve kullanıcıya daha iyi bir kullanıcı deneyimi sunabilmek.

Şimdi database tarafına gelirsek. Elimizde bir WPF uygulamamız olduğunu düşünelim ve bu uygulamayı Windows 8 Metro Style uygulamaya çevirmeye çalışacağımız varsayalım. Aklımıza gelecek sorulardan ilki elimizdeki verileri Windows 8 Metro ortamına nasıl aktaracağımız olacak. Çünkü WPF tarafında code-behind tarafında SqlConnection sql = new SqlConnection(); şeklinde database'e bağlanabiliyorduk. (Bu kullanımın doğru olduğunu savunmuyorum sadece böyle yazıldığını varsayıyorum :) ) Peki Windows 8 Metro tarafında da işler böyle yürüyor mu ?

Cevap hayır :) Öyle direk hayır deme bize nedenlerini söyle diyecekseniz peki o zaman başlıyorum :)

  • Öncelikle yazdığınız uygulamanın ARM işlemcili tabletlerde dahi çalışacağını unutmayın. Bu nedenle database manipülasyonunu bu cihazlar üzerinden yapmak dönen datayı işlemek gibi işlemler sizin uygulamanızın performansını oldukça etkileyecektir. Ayrıca uygulamanız amacını da aşacaktır. Bunun yanında data cacheleme mekanizmaları da bu senaryoda olmayacaktır.
  • İkinci nedenimiz de geliştirdiğimiz uygulamada veri erişim kısmında bir değişiklik olacağı zaman bunu tabletteki uygulamayı güncelleyerek mi yapacağız. :) Sizin uygulamanız belki farklı platformlarda da kullanılıyor ve bir platformdaki istek için database de bazı güncellemeler yaptınız ve aslında bu yaptığınız değişiklik sizin uygulamanızda veriyi gösterme anlamında hiçbirşey ifade etmiyor ancak veri erişim katmanında değişiklik gerekiyor. Bu durumda Marketplace'e uygulamamızın update'ini mi göndereceğiz. Bir update süreci sertifikasyon gibi aşamaları gerektirdiği için belki 1 haftadan önce marketplace'te yer alamayacağını düşünürsek. Sanırım database'e metro style uygulamadan bağlanma hevesiniz bayağı bir azaldı. Gelelim son nedene.
  • Zaten şu anda istesenizde Windows 8 Metro Style tarafında SqlConnection sql = new SqlConnection(); yapamıyorsunuz :). Çünkü öyle bir API yok :D Zaten olsa da yapmamanız gerekir yukarıda bahsetmiş olduğum nedenlerden dolayı. ;)

Not : Yukarıda bahsettiğim nedenler uygulamanızın ana datasına erişimin nasıl yapılması ile ilgiliydi. Yani metro style uygulama ile ilgili bir takım user settinglerini localde saklayabileceğiniz yapılar zaten şu anda WinRT içerisinde mevcut.

Peki elimizde bir database var ve biz bu elimizdeki verileri nasıl dışarıya açacağız ? Cevap oldukça basit : Web Servis :) Peki web servise erişimi nasıl yapacağız ? Bunun da cevabı oldukça basit. Asenkron :) Asenkron işlemlerin yönetiminde de C# 5.0 ile beraber gelen async / await yapısını kullanıyor olacağız. Detaylı bilgi için buraya :)

Bu konsept aslında sırf Metro Style uygulamalar ile sınırlı değil. Eğer elinizde bulunan dataları çeşitli platformlarda kullanmanız gerekiyorsa araya mutlaka bir web servis katmanı alarak dış platformları data access katmanında soyutlamanız doğru bir hareket olacaktır ;)

Şimdi gelelim artık metro style uygulama geliştirme tarafına :)

GridView Kontrolü

Metro Style uygulama geliştirirken en sık kullanacağımız kontrollerden biri de GridView kontrolü. Elimizdeki verileri toplu şekilde göstermek istediğimizde içerisindeki elemanları Grid şeklinde gösterebilen bir kontrol GridView kontrolü. Evet çok fazla uzatmadan artık pratikte görmek için File=>New Project ve Blank Metro Style Application'ı seçerek boş bir uygulama yaratıyoruz.

Uygulama olarak bir restoranımız olduğunu düşünelim ve bu restoran için bir Windows 8 Metro Style uygulama geliştireceğimizi varsayalım. Restoran içerisinde satılan yiyecekler ile ilgili bilgiler ise web servis aracılığıyla geliyor olacak ve biz yemek listesini web servis içerisinde bulunan GetFoods metodu ile alacağız. Bu metot içerisinden dönen Food tipinin içeriği ise şu şekilde.

[sourcecode language="csharp"] public class Food { [DataMember] public string FoodName { get; set; } [DataMember] public decimal Price { get; set; } [DataMember] public string ImageUrl { get; set; } } [/sourcecode]

Şimdi ilk olarak bir GridView kontrolü alalım ve MainPage.xaml içerisine sahneye yerleştirelim.

[sourcecode language="xml"] <Page x:Class="App4.MainPage" IsTabStop="false" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App4" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <GridView x:Name="foodGrid" Margin="50,140,15,15"/> </Grid> </Page> [/sourcecode]

Şimdi sıra geldi datayı web servisten çekme kısmına. İlk olarak web servis referansını projemize ekliyoruz.

Advanced butonuna tıkladığımızda asenkron web servis erişiminin bulunduğu bölüme dikkat ;)

Şimdi sıra geldi web servis bağlantısına ve aldığımız dataları GridView kontrolüne bağlamaya. Bu işlemi sayfanın OnNavigated eventi içerisinde gerçekleştiriyor olacağız. OnNavigated metodu MainPage.xaml sayafasına navigasyon gerçekleştiğinde tetiklenmekte.

[sourcecode language="csharp"] protected async override void OnNavigatedTo(NavigationEventArgs e) { FoodService.ServiceClient client = new FoodService.ServiceClient(); ObservableCollection<Food> foodList = await client.GetFoodsAsync(); foodGrid.ItemsSource = foodList; } [/sourcecode]

Gördüğünüz gibi eğer daha önce XAML tabanlı bir platformda (Silverlight,WPF,Windows Phone vb...) geliştirme yaptıysanız kodlar sizin için oldukça tanıdık gelecektir. Windows 8 Metro Style tarafında da genel konsept aslında aynı. GridView kontrolünün ItemsSource propertysine elimizdeki listeyi veriyoruz.

Şimdi F5'e basarak uygulamamızı çalıştıralım ve uygulamamız nasıl görücek bir bakalım.

Sanki tam istediğimiz gibi olmadı :) Nesnelerimiz GridView kontrolü içerisinde göründü ancak bağladığımız Food tipinin sadece ismi ekrana yazıldı. Yani toString metodu çağrıldı.

Daha önce XAML tarafıyla uğraşanlar GridView içerisinde ItemTemplate yaratmadık diyeceklerdir. :)  Çünkü GridView şu anda içerisine verdiğimiz nesneleri nasıl göstereceği konusunda bilgi sahibi değil ;)

ItemTemplate yaratmanın 2 yöntemi var. İlki Visual Studio 2012 ile beraber templateları özelleştirme. Bir diğeri de Expression Blend içerisinden templateları özelleştirme.

Visual Studio 2012 içerisinde yapmak istediğimizde, designer görünümünde kontrole sağ tıkladığımızda tıpkı Expression Blend'de yaptığımız gibi kontrolün templatelarını özelleştirebilmekteyiz.

Bir diğer yöntem de Expression Blend kullanmak. Çünkü artık Expression Blend, Visual Studio 2012 kurulumuyla beraber bilgisayarımıza yüklenmekte ve rahatça kullanabilmekteyiz. Bunun için de değiştirmek istediğiniz sayfaya sağ tıkladığınızda "Open in Blend" 'e basarak ilgili sayfayı Expression Blend içerisinden editleyebilmekteyiz.

Ben eskiden kalma alışkanlıklarımdan dolayı tasarım tarafını daha çok Blend tarafında hallediyorum. Ancak yukarıda göstermiş olduğum gibi siz de isterseniz bu işlemleri Visual Studio 2012 içerisinden gerçekleştirebilirsiniz.

Şimdi geri dönelim konumuza :) GridView kontrolüne içerisindeki her bir nesneyi nasıl göstereceğini söyleyecektik. Bunun için de GridView içerisinde bir ItemTemplate yaratmamız gerekmekte. Biz ItemTempate olarak yemeğin resmini ve resmin altında da yemeğin adını yazıyor olacağız.

[sourcecode language="xml"] <Page x:Class="App4.MainPage" IsTabStop="false" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App4" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources> <DataTemplate x:Key="FoodTemplate"> <Grid> <Image HorizontalAlignment="Left" Height="246" VerticalAlignment="Top" Width="250" Stretch="UniformToFill" Source="{Binding ImageUrl}"/> <Border BorderThickness="1" HorizontalAlignment="Left" Height="22.393" Margin="0,223.607,0,0" VerticalAlignment="Top" Width="250" Background="Black" Opacity="0.4"> <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="3,2,0,0" Text="{Binding FoodName}"/> </Border> </Grid> </DataTemplate> </Page.Resources> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <GridView x:Name="foodGrid" Margin="50,140,15,15" ItemTemplate="{StaticResource FoodTemplate}"/> </Grid> </Page> [/sourcecode] Şimdi uygulamamızı yeninden çalıştıralım ve neler değişti bir bakalım :)

Tamam kabul ediyorum uygulama biraz fazla akıl çelici oldu :) Ancak gördüğünüz gibi GridView içerisinde ItemTemplate'ı yaratarak istediğimiz şekilde nesneyi gösterebildik.

Data uygulamalarına giriş yaptığımız bu yazımızda sizlerle Windows 8 Metro Style uygulamalarda veri erişiminin nasıl yapılabileceğimizi ve en sık kullanılan data kontrollerinden olan GridView kontrolünü nasıl kullanabileceğimizi incelemiş olduk.

Daha önce  mevcut Windows 8 uygulamaları görenler "yahu bunun böyle gruplanmış halleri oluyor. Mesela zeytinyağlılar bir grupta, tatlılar bir grupta görünüyor" o nasıl oluyor diye sorabilirler :) Bu da diğer yazımızın konusu olsun ;)

Görüşmek Üzere,



Yorum Gönder


Yorumlar

  • profile

    İlkay İlknur

    • 4
    • 2
    • 2013

    @MehmetSait Bu tipi Web Servis tarafında oluşturman gerekir.

  • profile

    İlkay İlknur

    • 4
    • 2
    • 2013

    @Arda, Web Servis linkini bulamamış gözüküyor. Baştaki hede.com kısmını kaldırıp localhost altından test yapmanı öneriririm.

  • profile

    İlkay İlknur

    • 4
    • 2
    • 2013

    @Ali,Uygulama Webservis üzerinden DB'ye bağlanıyor. Buna başta değindim ancak makale konusundan çokta uzaklaşmamak adına o kodları paylaşmadım. Windows 8 tarafı için aslında özel bir işlem yok DB tarafında. Klasik Data Access ;)

  • profile

    Mehmet Sait YILMAZ

    • 2
    • 2
    • 2013

    Hocam Merhaba , aşağıdaki kodları nereye yazacağım yeni class ekliyorum oraya ekliyorum olmuyor,yeni yeni öğrenmeye çalışıyorum Public class Food { [DataMember] public string FoodName { get; set; } [DataMember] public decimal Price { get; set; } [DataMember] public string ImageUrl { get; set; } }

  • profile

    Arda

    • 31
    • 1
    • 2013

    Merhaba, Windows 8 de sizin örneğinizden yola çıkarak yeni uygulama geliştirmeye başladım. Fakat aşağıda ki hatayı alıyorum. Sebebi ne olabilir? Web Service'i test ettim çalışıyor. An exception of type 'System.ServiceModel.EndpointNotFoundException' occurred in mscorlib.dll but was not handled in user code Additional information: There was no endpoint listening at http://www.hede.com/services/service.asmx that could accept the message. This is often caused by an incorrect address or SOAP action. See InnerException, if present, for more details. If there is a handler for this exception, the program may be safely continued.

  • profile

    Ali Özdemir

    • 16
    • 1
    • 2013

    Merhabalar, Öncelikle böyle bir makale için teşekkürler. Benim sorum, Veritabanı ile ilgili işlerden hiç bahsetmediniz. Yani web servis veritabanına bağlanmıyor mu? Veriler nerede tutuluyor? Eğer web servis veritabanına bağlanıyorsa bunun kodlarını da paylaşabilir misini? Bu kısımda sıkıntı çekiyorum. Teşekkürler.

  • profile

    İlkay İlknur

    • 30
    • 12
    • 2012

    Merhaba Barış, Pek çabuk dönemedim mesajına :) ancak servisten List<T> tipini dönmen yeterli. Zaten servis referansını eklerken List tipi otomatik olarak ObservableCollection<T>'a mapleniyor.

  • profile

    Barış Ceviz

    • 24
    • 12
    • 2012

    Hocam Anlatımınız Çok Güzel Teşekkürler. Silverlightta Da WebServis Geliştiriyordum. Verileri Datagirdview e atıyordum şimdi ben servisimde geri dönen veri List olaraktı şimdi burada ObservableCollection kullanmışsınız ben serviste nasıl geri veri döndüreyim hocam mesajıma çabuk dönmenizi bekliyorum hocam :) bu arada burak hocam size de çok teşekkür ederim eğitim videolarınız ve makalelerinizle client olayını aştık resmen :) sizede tekrar tekrar teşekkürer hocam

  • profile

    İlkay İlknur

    • 10
    • 7
    • 2012

    Sağolasın hocam :) Servis zaten kaçınılmaz bu senaryoda. Tabletten DB'ye bağlanmaya çalışırsan allah kolaylık versin :)

  • profile

    burak selim şenyurt

    • 10
    • 7
    • 2012

    Hocam yazının sonuna kadar herşey iyiydi de o yemek fotoğraflarını görmeyeydik daha iyiydi :) Şaka bir yana ellerine sağlık oldukça güzel bir yazı olmuş. En çok dikkatimi çeken veri çekmek için Service kullanma zorunluluğunun getirilmesi. Biri zamanında "Bir gün herşey servis olacak" demişti :)