RSS Feeds

14 Kasım 2010 Pazar

MVVM I : Hey, bu da nereden çıktı şimdi?

1

WPF ve Silverlight’ın arayüz programlaması için oldukça güçlü alternatifler olarak yazılım projelerinde yer almaya başladıkları şu günlerde, geliştirme yapan herkesin çok işine yarayacağını düşündüğüm seriye nihayet bu yazıyla birlikte başlıyoruz. Önümüzde uzun bir yol olacak ve bu uzun yol boyunca MVVM desenini geliştireceğimiz uygulamalar eşliğinde öğrenmeye çalışacağız. Serinin bu ilk yazısında ise, MVVM’in teknik olarak detaylı bir incelemesini yapmak yerine,  konuya kısa bir giriş yapacak ve bazı temel sorulara cevap arayacağız.

Bir yazılımda geliştirme yapan ekipler çoğu zaman en az iki kişiden oluşmakta olup, yazılan kod satırları da yine çoğu zaman birkaç bini aşmaktadır. Bu sebeple projede yer alan tüm üyelerin, geliştirme sürecinde, ortak kuralları kabul etmeleri ve bu kuralların doğurduğu kısıtlamalar dahilinde hareket etmeleri oldukça önemlidir. Böylece programcılar karşılaştıkları problemlere kendilerince çözümler getirmeleri yerine, önceden tanımlı desenleri kendi problemlerine uygulayarak, genel bir standartın oluşmasına olanak sağlarlar. 

Katmanlı mimari kullanılarak geliştirilen yazılımların sunum katmanları (Presentation Layer) için sıkça başvurulan tasarım desenleri aşağıda listelenmiştir :

  • Page Controller
  • Front Controller
  • Model-View-Controller (MVC)
  • Application Controller
  • Observer
  • Model-View-ViewModel (MVVM)Smile

BingoooooWink O halde MVVM’in sunum katmanının tasarlanmasında yararlanılan bir desen olduğunu söylemek doğru olacaktır. Hatta tam doğru bir tanım için şöyle söylenmelidir: “MVVM, WPF ve Silverlight uygulamalarında sunum katmanının oluşturulması için kullanılan bir mimari desendir.”

MVVM tasarım deseni Microsoft’un WPF takımından John Gossman tarafından yaratılmış olup, MVC’nin bir varyasyonu olarak düşünülebilir. Aynı zaman da Martin Fowler’ın PresentationModel ‘ine de oldukça benzemektedir.

MVVM’in temel hedefi, programda yer alan görsel elementler ile (UserControl, Page, Control, Window vb.), bu elementlerin kullanıcıyla etkileşimlerine ilişkin kodlamayı birbirlerinden en keskin şekilde ayırmaktır. Geleneksel arayüz programlamasında, bir ekrana ait iş mantıkları, o ekranın code-behind dosyasında kodlanırken, MVVM’de tam aksine code-behind ‘ın temiz kalması hedeflenir. “Nasıl yani?” dediğinizi duyar gibiyim, ancak bu sorunun cevabını bir sonraki yazıya bırakarak kaldığımız yerden devam edelim.

MVVM tasarım deseninin uygulanması

Bir WPF/Silverlight projesinde MVVM desenini kullanabilmek için, öncelikle bir MVVM kütüphanesi oluşturmak gerekir. MVVM kütüphanesi, tasarım deseninin projeye uygulanabilmesi için gerekli tipleri içerecektir. Bu noktada programcı ya kendi MVVM kütüphanesini sıfırdan geliştirmeli ya da var olan var olan kütüphanelerden birini tercih etmelidir. Çeşitli blog’larda ve Codeplex gibi açık kaynak kodlu projelerin paylaşıldıkları sitelerde farklı MVVM kütüphaneleri bulunabilmektedir. Bu kütüphanelerin tümü özünde aynı olmalarına rağmen, bazıları Code-snippet, Project Templates gibi ekstra özellikler sağlayarak ve önemlisi geliştirilmesi sürerek (yeni versiyonları yayınlanarak) ön plana çıkmaktadır.

Bizler bu yazı dizisinde gerçekleştireceğimiz projelerde MVVM kütüphanesi olarak, Laurent Bugnion’ın hazırladığı, http://www.galasoft.ch/mvvm/getstarted/ adresinden bilgi edinilebilen, açık kaynak kodlu MVVM Toolkit’ini kullanacağız. Bugnion’ın  MVVM Toolkit’i, desenin projeye uygulanması için gerekli DLL’lerin hem Silverlight hem de WPF versiyonlarına sahip olmakla birlikte, ayrıca işleri kolaylaştıran Visual Studio ve Expression Blend eklentilerini de içeriyor. Toolkit’in öne çıkan özelliklerini listelersek :

  • Hem Silverlight hem WPF için kullanılabilir olması
  • Kod yazımını çok kolaylaştıran çeşitli Code Snippet’lar
  • Geliştirilmeye devam edilmesi
  • Design-Time desteği
  • Dökümantasyon
  • Hem Visual Studio hem de Blend için proje şablonları
  • Windows Phone 7 geliştirmesi için VS2010 ve Blend desteği 

MVVM yazı dizisinde yapacağımız örnek projelerde bu toolkit’i kullanacağımız için, sizler de aşağıdaki adresten gerekli dosyaları indirerek, projeleri kendi bilgisayarınızda çalıştırabilir ve örnekleri bizzat test edebilirsiniz.

http://mvvmlight.codeplex.com/

Model-View-ViewModel

MVVM’in açılımı olan Model, View ve ViewModel’in  ne anlama geldiklerini zaten serinin devam eden yazılarında detaylı inceleyeceğiz, ancak bu giriş yazısında, kavramların biraz daha oturması amacıyla MVVM’i oluşturan baş harflerden bahsetmekte fayda var.

  1. View : Programın arayüzünü oluşturan formlar, MVVM’de View olarak anılmaktadırlar. Bir View, Silverlight Page, UserControl, Window, DataTemplate vb. herhangi bir tip olabilir. Önemli olan, nesnenin, çalışma anında bir görüntü üretiyor oluşudur.
  2. ViewModel : Bir View’ın, tüm iş mantığını barındıran tipe ViewModel denmektedir. Özetle View ile Model arasındaki bağlantıyı sağlar ve View’in durum bilgisini korur. ViewModel felsefesi şunu amaçlar : “Bu sınıfta kontrollere erişmeden, dolayısıyla kontrolleri hiç düşünmeden sadece iş mantığını kodla!” .
  3. Model : Basit bir ürün düzenleme formunu (View) kodlarken (ViewModel), bir Urun sınıfının oluşturulması ve ürünlere ait özelliklerin, property olarak Urun sınıfına eklenmesi söz konusudur. Bu durumda  View’’de yer alan elementleri, her biri birbirinden bağımsız bir int, bir string bir decimal’a değere bağlamak yerine, bir Urun nesnesine bağlanması çok daha doğrudur. Bu durumda yazılan Urun sınıfının Model sınıf olduğu söylenebilir. Model sınıfların özel olarak bir takım Attribute’larla işaretlenme zorunluluğu da yoktur. Diğer bir deyişle POCO sınıfı dahi bir Model olarak olarak kullanılabilir; ancak çoğu zaman model sınıflar ya servis referansının eklenmesiyle otomatik üretilir ya da bir ORM aracıyla oluşturulur.

4

Model, View ve ViewModel ile ilgili bilinmesi gereken çok önemli iki altın kuralı da atlamamak gerekir. Bunlar :

  1. View, ViewModel’i bilir, fakat tersi söz konusu değildir.
    View’de bulunan elementler, ViewModel’de tanımlı üyelere Bind edileceklerinden, View’in ViewModel’i bildiğini söyleyebiliriz; ancak ViewModel kesinlikle View’de yer alan elementlere erişmez ve View’de ne olduğunu bilmez.
  2. ViewModel, Model’i bilir, fakat tersi söz konusu değildir.
    ViewModel, Model’in, örneğin bir Urun sınıfının üyelerine erişebilir ve kullanabilir, yani kısaca ViewModel, Model’i bilir; fakat Model’de yer alan sınıf içinde ViewModel’le ilgili herhangi bir kod bulunmaz.

MVVM’in Avantajları

  • ViewModel kodlama alışkanlığı, geliştiriciye, iş mantığına odaklanma zorunluluğu ve disiplinini kazandırır.
  • Arayüzde verilerin alınmasını (input) ve görüntülenmesini (output) sağlayan kontroller değişse de iş mantığı değişmedikçe ViewModel’de bir değişiklik yapılmasına gerek yoktur.  Sonuç olarak, Görünüm ve İşler’in keskin bir şekilde ayrılması hem yönetilebilirliği arttırır hem de olası bir değişiklikliğin daha kolay uygulanabilmesini sağlar.
  • MVVM tasarımının uygulandığı WPF ya da Silverlight uygulamalarında Expression Blend’in becerileri  daha etkin kullanılabilmektedir. View’in “Blendability” ‘si yükselirSmile
  • XAML içinde yapılan Binding’ler ile, kontrollere değer bağlama işlemi oldukça kolaylaşmaktadır. MVVM, Binding kullanımlarını en üst düzeye çıkartarak, kod dosyasındaki veri bağlama işlerini kod tekrarı olmadan ve çok konforlu bir biçimde yapılmasını sağlar.
  • İş mantığı arayüzden bağımsız olduğundan, programın test edilmesi çok daha kolaydır. Yani daha bir  “Testable” ‘dırSmile
  • Tasarımcılar ile programcıların aynı projede eş zamanlı çalışmalarını daha etkili hale getirir.

MVVM’in Dezavantajları

  • ViewModel’de kontrollere erişememek, zaman zaman işi zorlaştırabilir. Bu tarz durumlarla çok karşılaşmamak için MVVM’i iyi anlamak ve benzer problemlere nasıl çözümler önerildiğini okumak, araştırmak gerekir.
  • Zaman zaman yazılan kod satır sayısının artmasına sebep olabilir; ancak code snippet’ları kullanmaya alıştığınızda bu durum artık bir dezavantaj olmayacaktır.

Serinin bir sonraki yazısı itibariyle, örnekler üzerinden MVVM’i konuşmaya ve avantajlarını anlamaya devam edeceğiz. Öğrendiklerinizi kısaca bir gözden geçirmek üzere, MVVM’in temel kavramlarına kısaca değinmiş olduğumuz bu bölümdeki bazı sorulara göz atabilirsiniz.

  • MVVM nedir?
  • Model, View, ViewModel kavramları ne anlama gelir?
  • Model, View ve ViewModel arasındaki iki önemli kural nelerdir?
  • Benzerlik gösterdiği diğer tasarım desenleri nelerdir?
  • MVVM Toolkit nedir?
  • Desenin avantaj ve dezavantajları nelerdir?

Faydalı olması dileğiyle…

2 yorum:

Tolga Yaramış dedi ki...

Güzel bir baslangic makalesi olmus devamini bekliyorum...

Lebron James dedi ki...

Eline sağlık Cenk hocam

Yorum Gönder