Windows Phone Development Blog: Model-View-ViewModel (MVVM)

Katmanli mimarilerle gelistirilmis yazilimlarin cogunda MVC yani Model View Controller kullanildigina cogu kez sahit olmussunuzdur. Bu sefer incelemek istedigim konu ise MVVM’di.

MVVM yani Model – View – ViewModel…

Isminden de anlasilacagi gibi bir Presentation Layer (Sunum Katmani) icin kullanilan Design Pattern (Tasarim Deseni)’dir. Makalemde MVVM’den biraz bahsettikten sonra, basit bir uygulama ile aslinda arastirmama bir virgul koyacagim…

MVVM tasarim deseni Microsoft’un taninan isimlerinden John Gossman tarafindan olusturulmustur. Bu tasarim deseni genellikle WPF, Silverlight ve Windows Mobile tarafinda kullanilmaktadir. Gunumuzde halen bu teknolojilerde kullanilirken buna bir yenisi olarak Windows Phone’da eklenilmistir. Kullanim amaci ise, WPF ve Silverlight uygulamalarinda Presentation Layer’in olusturulmasi icin kullanilacak bir mamiri yapi olmasi gerektigidir.

MVVM en belirgin ozelligi; view tarafinda yani gorsel olarak kullandigimiz nesnelerin ve bu nesneleri kullanacak olan arka planda ki kodlarin arasinda en belirgin siniri ayirmaktir. Bunu daha cok is mantigi olarak da adlandirabiliriz.

Tum gorevleri gerceklestirebilmesi icin MVVM’in kutuphanelerini kullanmamiz gerekir, tabi bunun icin kendimizde kutuphanelerimizi kurallara uygun olacak sekilde olusturabiliriz. MVVM Toolkit adi altinda internette bulunan acik kaynak kodlu bu kutuphanelerden calismalarinizda faydalanabilirsiniz. Indereceginiz bu MVVM Toolkit icerisinde hem WPF hem de Silverlight icin gerekli tum DLL’leri bir arada bulabilme imkaniniz olacaktir.

Ayni zamanda MVVM icin yararlanabileceginiz diger guzel bir kaynak ise ; “In the Box – MVVM Training” olabilir. Yine indireceginiz bu kaynak ile visual studio icerisinde actiktan sonra karsiniza adim adim egitimler gelecektir, bu sayede de ilginizi ceken yerleri inceleyebilirsiniz.

MVVM hakkinda ki daha fazla bilgi ve gerekli download’lar icin asagida ki linklerden faydalanabilirsiniz ;

http://mvvmlight.codeplex.com

http://wpf.codeplex.com/wikipage?title=WPF%20Model-View-ViewModel%20Toolkit

http://simplemvvmtoolkit.codeplex.com

http://www.galasoft.ch/mvvm

In The Box – MVVM Training icin asagida ki linkten faydalanabilirsiniz ;

http://karlshifflett.wordpress.com/2010/11/07/in-the-box-ndash-mvvm-training

Model – View – ViewModel

MVVM’im temel yapisindan bahsedecek olursak ;

Model ; Projelerimizde kullandigimiz kodlar, veriler, servisler, poco’lar* ve tum isin mutfagi ile ilgili siniflarin bulundugu taraftir diyebiliriz.

View ; Projenizin kullanici ile iletisimde kalabilmesi icin gerekli olan arayuzu yani gorunumudur.

ViewModel ; Isin en onemli yapisi olan ViewModel’e gelirsek eger, kullandigimiz kodlarimiz ve tasarimlarimizla adeta arada bir kopru gorevini ustleniyor diyebilirim. Soyle aciklayacak olursam; View tarafi Model tarafi ile dogrudan iletisime gecebilmesi icin ViewModel yapisini kullanmasi gerekiyor. Tum bu iletisimi saglarken View’in durum bilgilerini saklayarak isin gorunum kismina ulasacaktir. Bir nevi is mantigi prensibi ile calisiyorda diyebiliriz. Ve yine MVVM’in genellikle kullanilmis oldugu yer olan WPF ve Silverlight tarafindan olaya bakacak olursak, DataContext’lerle es degerdedir.

Kisacasi ; projelerimizde View, .xaml uzanti, ViewModel, .Cs/.Vb uzantiyi veya Wpf’i, Model ise .Cs/.Vb uzantilarini kullanir.

- Onemli bir detaya deginmemiz gerekirse is akisi icerisinde View yapisi ViewModel ile iletisime gecerken bunun tek tarafli oldugunu anlayabiliriz. View’de olusturdugumuz nesnelerimizin viewmodel tarafindan Binding edilmesinden dolayidir. Yine bu tek tarafli iliskinin devaminda ise ViewModel, Model ile iletisime gecerken aksi durumun gozlenememesidir. Bunuda soyle ozetleyecek olursam, Model icin olusturdugum bir sinif icerisinde ViewModel ile ilgili herhangi bir olayi barindiramiyor, ama ViewModel, Model icerigini bilmek zorundadir. Birazdan gerceklestirdigim uygulamada bunu daha iyi gozlemeleyebileceksiniz.

*POCO Kavrami ; (Plain Old CLR Object); .Net Framework uzerinde tanimlayabildigimiz herhangi bir iliskisi olmayan olusturabilecegimiz nesnelerimizdir. Herhangi bir siniftan turemez, arayuzler uygulanmaz veya ozel nitelikleri isaret etmezler.

MVVM Avantaj / Dezavantaj

MVVM’in Avantajlarini siralayacak olursak ; ViewModel yapisi ile yazilimcinin daha cok is mantigina yonelmesini saglayacaktir. Verilerin alinmasinda yada goruntulenmesinde ki kontroller degisse bile yapilacak olan is mantigi degismeyecektir ve viewmodel tarafindan herhangi bir degisiklik yapilmasina gerek kalmayacaktir. Bunu daha once de bahsetmis oldugum View ve Model arasinda ki bagin ince bir sinir ile ayrilmasindan animsayabilirsiniz. Diger bir kulaga hos gelen avantaji ise XAML icerisinde kullandigimiz Binding’ler iletisimi en ileri seviyeye cekebiliyoruz. Ve bu yapi sayesinde kodlarimizi, tasarimlarimizi daha kolay bir sekilde test etme imkanimiz oluyor. Bu test sonucunda da islerin ayni zamanda ilerlemesi de yine buyuk bir avantaj olarak gorulmektedir.

MVVM”in Dezavantajlari ; ViewModel’e erisememek yada herhangi bir degisiklik uygulayamamak is akisini biraz aksatabiliyor. Diger bir dezavantaji ise fazla kod satir sayisi olusabilmektedir.

MVVM_Application Uygulamasi ;

Uygulamami Microsoft’un WPF teknolojisini kullanarak gerceklestiriyor olacagim.

Uygulamamiz, personel verilerini kullanicidan aldiktan sonra output ekranina yazdirabilecek basit bir tasarim olacaktir. Bunun icin Visual Studio ortaminda yeni bir WPF Application olusturuyorum. Ve icerisine 2 tane Class olusturuyorum.

Class’larimdan birisi Model yapisini tasiyacak olan Personel_Model.Cs, digeri ise ViewModel yapisini tasiyacak olan Personel_ViewModel.cs’dir. Uygulamaninin gorunum yani View tarafini ise WPF’in .xaml uzantili tasarim ekrani ile gerceklestiriyorum. Class’larimizin isimlerini belirledikten sonra uygulamamiza gerekli olan kutuphaneyi referans etmemiz gerekiyor. References uzerinde sag click Add Reference… lokasyonunu kullanarak kutuphanenizi ekleyebilirsiniz.

Kutuphanenin isminde Prism ismine dikkat etmissinizdir.

Prism hakkinda kisaca bahsedecek olursam ;

Micrsoft MVVM uzerinde ki calismalarina devam ettigi siralarda meydana getirdigi Prism ismi ile bilinen framework ortami diyebiliriz. Diger bir deyisle, WPF, Silverlight ve Windows Phone icin daha zengin, esnek ve kolay tasarimlarin ortaya cikabilmesi icin tasarlanmis bir rehberde diyebiliriz. Peki bununla ilgili kayanak nasil edinebilir diyorsaniz, msdn’in Developer’s Guide to Microsoft Prism kaynagi size rehber olacaktir;

http://msdn.microsoft.com/en-us/library/gg406140.aspx

Yine Prism ile ilgili DLL’i bu linklerden devam ederek Microsoft Download merkezinden Prismv4 veye Prismv4.1 i indirip bilgisayariniza library dosyalarini cikartarak uygulamaniza Add Referance yontemi ile ekleyebilirsiniz.

Prism Versionlarini indirebileceginiz linkler asagidadir ;

http://www.microsoft.com/en-us/download/details.aspx?id=4922

http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=28950

Linklerden faydalanarak indirdiginiz bu dll’lerin bulundugu klasorun icerisinden, Bin klasoru icerisinde uc adet klasor bulunmaktadir. Daha onceden de bahsettigim gibi bu gerekli dll’lerin kullanildigi yerlere gore kullanicilara kolaylik olmasi adina bu klasor isimleri verilmistir. Desktop uygulamalari icin, Silverlight uygulamalari icin, Phone uygulamalari icin bu klasor isimlerinden gerekli dll’ leri kullanabilirsiniz. Bu projemizde Silverlight klasoru icerisinde ki microsoft.practices.prism.dll ‘i Add Referance’ye ekleyebilirsiniz. Yine Prism ile ilgili indirdiginiz bu klasor icerisinde ki icerikler hakkinda tum detayli bilgilere MSDN linkinde ki Developer’s Guide to Microsoft Prism makalelerinden konulara ayrintili bir sekilde ulasabilirsiniz…

Sizde Personel_View.Xaml tasariminizi yandaki gibi olusturabilirsiniz.

Kullandigimiz Label, Button ve Textbox kontrollerinin kod kismini yine xaml tarafinda olusturucaz.

Dilerseniz simdi Kod tasarimlarimiza baslayalim;

Personel_Model.Cs Kaynak Kodu ;

Personel_Model.cs clasimiz MVVM’in model yapisini olusturacak bir poco sinifi olarak tasarliyorum. Olusturdugum degerlerin get ve set’lerini belirliyorum.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace MVVM_Application
{
public class Personel_Model
{
public int TcNo { get; set; }
public string Isim { get; set; }
public string Soyisim { get; set; }
public string Gorev { get; set; }
public string Departman { get; set; }
}
}

Personel_ViewModel.Cs Kaynak Kodu ;

Personel_ViewModel.cs classimiz MVVM’in ViewModel yapisini olusturacagi icin icerisinde oncelikle prism ile ilgili kutuphaneyi tanitmamiz gerekiyor. Readonly keyword’u ile Personel_Model sinifinin tipinde bir personel degiskeni olusturuyorum. Class’imizin kurucu metodunda ise Personel_Model’den yeni bir nesne olusturmakla birlikte SonucYazdir adinda Prism’nin kullanmis oldugu generic bir sinif ile yeni bir olay olusturmus oluyoruz. Ve yine bununla ilgili get ve set’lerin arayuzlerini belirtiriyoruz. Ve son olarakta System.Text namespace’inin bir yapisi icerisinde ki StringBuilder sinifindan yararlanarak sanki bir diziymis gibi dinamik bir yapi olusturarak append komutu ile verilerimizi kullanicidan aliyoruz. Ve yine System.Diagnostics namespace’nin Debug.Writeline yapisi ile verilerimizi visual studio’nun output ekranina yazdiriyor olacagiz.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.Practices.Prism.Commands;
using System.Windows.Input;
using System.Diagnostics;

namespace MVVM_Application
{
public class Personel_ViewModel
{
private readonly Personel_Model personel;

public Personel_ViewModel()
{
personel = new Personel_Model();
Yazdir = new DelegateCommand<object>(SonucuYazdir);
}

public Personel_Model Personel
{
get { return personel; }
}

public ICommand Yazdir { get; private set; }

private void SonucuYazdir(object obj)
{
Debug.WriteLine(BuildResultString());
}

private string BuildResultString()
{
StringBuilder builder = new StringBuilder();
builder.Append(“TC NO: “);
builder.Append(this.personel.TcNo);
builder.Append(“\nISIM: “);
builder.Append(this.personel.Isim);
builder.Append(“\nSoyIsim: “);
builder.Append(this.personel.Soyisim);
builder.Append(“\nGorev: “);
builder.Append(this.personel.Gorev);
builder.Append(“\nDepartman: “);
builder.Append(this.personel.Departman);
return builder.ToString();
}
}
}

Personel_View.XAML Kaynak Kodu ;

Artik sirada uygulamamizin View kisminda ki gerekli kodlarin bulunacagi Personel_View.Xaml’in tasarimina geldi.

Projemizin icerisine oncelik olarak hiyerarsik bir sekilde icerisinde barindirdigi ve de kullanacagimiz class’lardan haberdar olabilmesi icin binding islemlerini tanitacagimiz kisim; x:Class=”MVVM_Application.Personel_View” ve de xmlns:nano=”clr-namespace:MVVM_Application” dir. Daha sonra datacontext islemi icin Personel_ViewModel’i kullanmasi gerektigini referans olarak gosteriyoruz. Ve artik textbox ile button kontrollerimizin Binding’lerini de belirttikten sonra uygulamamizi calistirabiliriz.

</nano:Personel_ViewModel>
</Grid.DataContext>

</Grid>
</Window>

Uygulamanin Ekran Goruntusu ;

Ve Yazdir butonunu tikladiktan sonra debug.writeline ile birlikte output ekranina sonuclarimizi aktariyor;

Keyifli Calismalar Dilerim…

Windows Phone Development Blog

26 Mayıs 2012 Cumartesi

Model-View-ViewModel (MVVM)