MVVM konusunda tonla İngilizce makale olmasına rağmen Türkçe içeriğin (her zaman ki gibi) eksik olması ve Türkiye'de bilinirliğini arttırmak amacıyla MVVM hakkında bir makale yazmayı düşünüyordum. .NET Framework teknolojileriyle ilgili yazılım geliştiricilere yönelik çıkması planlanlanan ancak çeşitli sebeplerden dolayı iptal edilen bir dergi için aylar önce yazdığım orijinal makalemi bu amaçla düzenleyerek - ve bir blog postu için uzun olduğu için bölerek - sizlerle paylaşıyorum.

1. WPF ile Model View ViewModel: Giriş
2. WPF ile MVVM: Model
3. WPF ile MVVM: View
4. WPF ile MVVM: ViewModel
5. WPF ile MVVM: Parçaları Birleştirmek
Seriye ait kaynak kodlar: MvvmWithWpfSample.rar (245,34 KB)

ViewModel (VM), diğer bir değişle “model of a view”, View’ın bir çeşit modelidir. Üzerinde View’ın durumunu ve davranışlarını tutar.  View’ın sunabilmesi için bazen ham, yani direk olarak Model’in özelliklerini, bazen de (altında genellikle model özellikleri olacak şekilde sarmalayarak) kendi üzerinde özellikler tanımlar. Model’i, View’ın sunabileceği hale getirdiği için VM’i “aslında koca bir dönüştürücüdür” şeklinde tanımlayanlar olmuştur (Josh Smith).

ViewModel’in önemli bir sorumluluğu da Model’i direk refere ettiği için Model servislerini çağırmasıdır. View’lar ViewModel üzerinde tanımlanan özelliklere “bind” ederler. Bu özelliklerden bir kısmı da aslında View’ın Command’larını çalıştıran delegelerdir. Delegeler çağrıldığında, örneğin müşteri arama komutu gerçekleştiğinde, VM bu isteği gerekli parametreleri sağlayarak Model’e iletir ve Model’in cevabını alarak View tarafından kullanılabilecek hale getirir.

MVVM tasarım kalıbı, aynı Fowler’ın PM’de bahsettiği gibi GUI (yani View) veya ViewModel tarafında bir özelliğin değeri değiştirildiğinde diğer tarafın da bundan haberdar olmasını gerektirir. View tarafında bu işlem Binding mekanizmaları ve GUI bileşenleri ile kolayca halledilir. Örneğin View’daki bir metin kutusuna yazılan bir metin Binding deklerasyonu ile tanımlandığı ölçüde otomatik olarak VM’de bağlandığı özelliği günceller. Ancak VM, yani kod tarafından yapılan bir değişiklik View tarafından otomatik olarak algılanamaz. Örneğin müşteri arama komutu sonucu Model’imizden dönen bir dizi Customer nesnesinin CustomersFound koleksiyonunu doldurduğunu düşünelim, ne yazık ki böyle bir durumda binding tanımlarımızın eksiksiz olmasına rağmen View, yani GUI’miz otomatik olarak kendini güncelleyerek bulunan müşterileri göstermez. View’ımıza ilgili VM özelliğinin değiştiğini haber verecek bir mekanizma gereklidir. System.ComponentModel isim uzayında bulunan INotifyPropertyChanged arayüzü bu işlevi sağlar. Bu arayüz sadece bir PropertyChanged event’i tanımlar.  View içindeki WPF mekanizmaları, DataContext özelliğine referansı atanmış nesne INotifyPropertyChanged arayüzünü uyguluyorsa PropertyChanged event’ini işleyecek şekilde kendini kaydeder. Böylelikle bir VM özelliği değişirse View, kaydolduğu VM PropertyChanged eventi sayesinde bundan haberdar olur ve üzerinde gerekli güncellemeyi gerçekleştirir. INotifyPropertyChanged mekaniklerinin View tarafındaki kısmı WPF tarafından otomatik gerçekleştirilmesine rağmen, özellik değişince VM tarafında bu event’i tetiklemek yine MVVM geliştiricisine kalır. MVVM altyapılarında INotifyPropertyChanged implementasyonu genellikle bütün VM’lerin türediği kök bir sınıfta halledilir, ancak tetikleme işlemi bir şekilde VM özelliğinin setter’ına sızabilir.

Örnek senaryomuz için SearchWindowViewModel adlı bir sınıf oluşturup, SearchWindowView’ımıza bind edilmek üzere özelliklerimizi Diyagram 3’de görüldüğü üzere oluşturuyoruz.

ViewModel Sınıflarımız

Dikkat edilirse SearchWindowView sınıfının içi inşa edici metodu dışında boştur, yani View’ın code behind’ını boş tutma çabalarımız sonuç vermiştir. SearchWindowViewModel üzerinde tanımlanmış özellikleri inceleyelim. CustomerNameSearched, GUI’mizdeki arama metin kutusunun Text özelliğine bağlanmıştır. CustomersFound, GUI’deki arama sonucu gözükecek listenin öğelerine bağlanmıştır. IsCustomerSearchResultsVisible arama sonucu gözükecek listenin Visibility’sine bağlanmıştır. SearchCommand ise “Listele” butonunun Command’ı olarak bağlanmıştır.

Özelikle değinilmesi gereken iki noktadan biri CustomersFound koleksiyonunun bir ObservableCollection olmasıdır. Bunun sebebi senaryomuzda kullanılmasa bile CustomersFound koleksiyonuna herhangi bir öğe eklenip çıkarıldığında GUI’mizin kendini güncellemesini istememizdir.  Tahmin edeceğiniz üzere ObservableCollection’ın normal bir koleksiyondan tek farkı, INotifyPropertyChanged arayüzünü uygulamış olmasıdır.

Değineceğimiz ikinci nokta ise SearchCommand’dır. Bu özellik ICommand, tipindedir ve içerisinde OnSearchCommand’ı sarmalayan bir DelegateCommand nesnesi döndürür. DelegateCommand, kullanıcı tanımlı ICommand oluşturmayı kolaylaştırmak için geliştirilen benzeri sınıflardan biridir ve Microsoft tarafından geliştirilen uygulama geliştirme altyapısı Prism’in bileşenidir. Aşağıda bulunan "Command Sorunsalı Üzerine” adlı başlıkta Command’larla ilgili daha fazla bilgiye yer vereceğiz.

Kullanıcı uygulamayı çalıştırıp, arama kutusuna giriş yaptıktan sonra, “Listele” butonuna tıkladığında, VM üzerindeki OnSearchCommand çalışacak ve Model’i sorgulayıp gerekli bilgileri aldıktan sonra, üzerinde bulunan CustomersFound koleksiyonunu dolduracak ve IsCustomerSearchResultsVisible özelliğini true değerine çekecektir. VM üzerinde güncellenen az önce saydığımız özellikler setter kısımlarında ViewModelBase de tanımlı PropertyChanged event’ini tetikledikleri için de, bu event’i dinleyen View kendini güncelleyerek sonuçları kullanıcıya gösterecektir.

Command Sorunsalı Üzerine

WPF bize MVVM için birçok olanak tanımasına rağmen View’daki bileşenlerin event’lerini VM’deki Command‘lara Binding yaparak çözmek, aslında bazı zorlukları da beraberinde getirir. Command’ların tasarım nedeni, birden fazla kaynaktan (ICommandSource), gelebilecek aynı işlevin tek bir nesne ile simgelemektir. Örneğin bir metin kutusundan fare ile seçerek “Kopyala” komutunun verilmesi ile klavye ile CTRL+C yapılması durumunda ApplicationCommands.Copy komutu gönderilir. Kendi komutunuzu oluşturmak istediğinizde ICommand arayüzünü implemente eden bir sınıf yazmanız gerekir. Ayrıca komutunuzun hangi metodu çalıştıracağıyle ilgili CommandBinding’ini de ya XAML içine, ya da code behind’a el ile kodlayarak koymalısınız. Sıkıntılar burada bitmiyor, her View bileşeni bir ICommandSource olmadığından Command’ları tetikleyeceğiniz bileşenler de sınırlıdır. Yine aynı şekilde Command’ların tetikleneceği eventler’de sınırlıdır. Bütün bunları aşmak amacıyla MVVM altyapısı geliştiricileri, DelegateCommand (Prism), RelayCommand (JoshSmith), SimpleCommand (Marlon Grechs) gibi ICommand implementasyonları ve bunları XAML’da ilgili element’de deklare etmeyi sağlayan AttachedBehaviour veya DependencyProperty’ler oluşturmuşlardır.

WPF ile MVVM: View (MVVM-3)

November 26, 2010

MVVM konusunda tonla İngilizce makale olmasına rağmen Türkçe içeriğin (her zaman ki gibi) eksik olması ve Türkiye'de bilinirliğini arttırmak amacıyla MVVM hakkında bir makale yazmayı düşünüyordum. .NET Framework teknolojileriyle ilgili yazılım geliştiricilere yönelik çıkması planlanlanan ancak çeşitli sebeplerden dolayı iptal edilen bir dergi için aylar önce yazdığım orijinal makalemi bu amaçla düzenleyerek - ve bir blog postu için uzun olduğu için bölerek - sizlerle paylaşıyorum.

1. WPF ile Model View ViewModel: Giriş
2. WPF ile MVVM: Model
3. WPF ile MVVM: View
4. WPF ile MVVM: ViewModel
5. WPF ile MVVM: Parçaları Birleştirmek
Seriye ait kaynak kodlar: MvvmWithWpfSample.rar (245,34 KB)

View’larımız, görsel öğelerin tanımlandığı, (bir sekme kontrolünün sekmeler arasında geçişi gibi GUI bileşenlerinin doğal bir parçası olan veya bir animasyon gibi yine GUI amaçlı tasarlanmış dinamizm dışında) içinde mümkün olduğunca az interaktivite kodu içeren kullanıcı arabirimi tanımlarıdır. XAML ile pencerelerimizi, kullanıcı kontrollerimizi ve kullanıcının ulaşabileceği tüm GUI’yi tasarlarız.

MVVM’in önemli bir özelliği olarak, UX tasarımcısı ile yazılım geliştiricinin paralel çalışmasına olanak sağladığını söylemiştik. Bunu sağlamak için GUI tasarlanırken XAML’ın code behind’ına kod yazılmaması gerektiği tekrar hatırlatalım. Tasarımcı butonları ve listeyi yerleştirir ancak Button_Click gibi bir olay işleme metod tanımı yapmaz. İleride göreceğimiz üzere bunu geliştirici de yapmaz. Çünkü Button.Click gibi eventler’ı (olay?) işlemek yine View’ın bir parçası olarak gördüğümüz code behind’ı kullanmayı gerektirir. Ancak birinci motivasyonumuz olan GUI’nin kendisi ile etkileşimini ayırmak presibiyle çeliştiğinden dolayı MVVM’de mümkün olduğunca klasik olay işleme metodlarını kullanmayız.

Peki bir butona tıklandığında yapılması gerekenleri nasıl açıklayacağız? Elimiz kolumuz bağlı gibi gözükmesine rağmen yine WPF’in içinde gelen Command altyapısı bu durumda bize yardımcı olur. View tasarımımızı yaparken, veya View ve ViewModel geliştirilmesi bitirildiğinde, butonumuzun üzerinde bulunan Command özelliklerine, tıklandığında çalışacak kodlarımızı içeren ViewModel metodumuzu “Bind” ederiz diğer bir değişle bağlarız. WPF Binding mekanizmalarını yoğun olarak kullanacağımızdan bahsetmiştik, öyle ki GUI’mizde gözükecek ve girilecek verileri bağlamanın yanında GUI bileşenlerinin interaktivitesinde çalışacak kodları da aslında bir çeşit veri bağlama ile tanımlarız.

View’lar konusundaki bilinmesi gereken bir konu da blendability’dir. Microsoft Expression Blend, XAML ile WYSIWYG tadında ve kod düzenleme de yapabildiğiniz GUI tasarlamak için kullanılan bir tasarımcı aracıdır. Blendability ise bu uygulamanın XAML dosyalarını, MVVM uygulamamız çalışmadan, yani tasarım zamanında ne kadar başarılı sunduğunu gösteren bir ölçüdür.  İyi bir blendability’ye sahip bir projede tasarımcılar daha rahat çalışabilir.

Modelimizde bulunan müşterileri aramak için Ekran-1’de görünen basit GUI’yi kullanıyor olacağız.

Demo Kullancı Arayüzü

Senaryomuza göre kullanıcılarımızı isimlerine göre arayıp, bilgilerini listeleyebilmeliyiz. Bu aşamada üretilen SearchView.xaml dosyasına baktığımızda, herhangi bir bağlama veya olay yönetimi veya bir Command ile ilgili bir deklerasyon bulunmaz. Tasarımcı çalışırken, C# kodlarıyla ilgisiz – içinde JavaScript kodu olmayan bir HTML dosyası benzeri – xaml dosyaları hazırlar. Örnek  senaryomuz için SearchWindowView’ını oluşturuyoruz (Kod 1). View’ımız şimdilik bir veri bağlama (binding) içermiyor, ViewModel’imizi oluşturduktan sonra gerekli veri bağlamalarımızı tanımlıyor olacağız.

<Window x:Class="WpfApplication.Views.SearchWindowView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Arama" Height="350" Width="525">
    <StackPanel Orientation="Vertical">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Müşteri İsmi" Width="86" Height="24" Margin="12,10,0,10" Padding="0,5,0,0"></TextBlock>
            <TextBox Width="217"  Height="24" Margin="10,10,0,10"/>
            <Button Width="100"  Height="24" Margin="10,10,0,10">Listele</Button>
        </StackPanel>
        <StackPanel>
            <ListView>
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="Müşteri No" Width="Auto">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock VerticalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="Adı" Width="Auto">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock VerticalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="Soyadı" Width="Auto">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock VerticalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>
        </StackPanel>
    </StackPanel>
</Window>
Kod 1: SearchWindowView

ViewModel tamamlandıktan sonra, veya ViewModel’imizin nasıl olacağı hakkında bir fikrimiz mevcutsa VM henüz bitirilmeden, binding yani veri bağlama ifadeleri View’a eklenir. View’da yer alan bağlama ifadelerinde, ViewModel’in özelliklerine atıfta bulunulur. View’lar, ViewModel’in üzerindeki özelliklere bağlanabilmek için ellerinde bir nesne örnek referansı barındırmak zorundadirlar. Bunun için ViewModel, View kök element’i üzerinde bulunan ve WPF’de bir çok bileşenin türediği FrameworkElement’ten miras alınan object tipindeki DataContext’e atanır. DataContext, View içindeki tüm element’ler için özelliklerine bağlanabilecekleri bir kök nesne sağlar.

View’larınız genellikle Window, Page veya UserControl’den türeyecektir, ancak bunlarla sınırlı değildir. ViewModel örneğinin referansını atayacağımız, DataContext’i olan herhangi bir FrameworkElement View tanımlamak için kullanılabilir.

View .xaml dosyalarınızı isimlendirirken genellikle sonuna “...View” eki konması geleneği mevcuttur. Kod-1’de listelediğimiz View’a arama yapacağı için ve bir pencere olduğu için “SearchWindowView” adını verdik. View’lar aslında birer XAML dosyası olduğu için WPF/Silverlight ile ilgili kurallar, View’lar için de aynen geçerlidir. Tek unutulmaması gereken mümkün olduğunca code behind kullanımından kaçınılması gerektiğidir.

WPF ile MVVM: Model (MVVM-2)

November 26, 2010

MVVM konusunda tonla İngilizce makale olmasına rağmen Türkçe içeriğin (her zaman ki gibi) eksik olması ve Türkiye'de bilinirliğini arttırmak amacıyla MVVM hakkında bir makale yazmayı düşünüyordum. .NET Framework teknolojileriyle ilgili yazılım geliştiricilere yönelik çıkması planlanlanan ancak çeşitli sebeplerden dolayı iptal edilen bir dergi için aylar önce yazdığım orijinal makalemi bu amaçla düzenleyerek - ve bir blog postu için uzun olduğu için bölerek - sizlerle paylaşıyorum.

1. WPF ile Model View ViewModel: Giriş
2. WPF ile MVVM: Model
3. WPF ile MVVM: View
4. WPF ile MVVM: ViewModel
5. WPF ile MVVM: Parçaları Birleştirmek
Seriye ait kaynak kodlar: MvvmWithWpfSample.rar (245,34 KB)

Model bileşenleri, diğer bir çok mimari tasarım kalıbında olduğu gibi, iş mantığı veya bunlara ait servislerin bulunduğu bileşenlerdir.

Monolitik bir uygulamada domain nesneleri, validasyon ve domain servisleri bu katmanda yer alır. Bu katmandan aşağı doğru veritabanı sorgu ve komutları gider.

Dağıtık bir uygulamada ise, genellikle bir uygulama sunucusuna yapılan web servis veya remoting gibi çağrıları yöneten servis sınıfları, validasyon sınıfları ve uygulama sunucusuna yapılan çağrıları ve cevapları taşıyan mesaj bileşenleri olan Veri İletim Nesneleri (Data Transfer Object – DTO’lar)  yer alır. Eğer klasik ASP.NET 2.0 Web Servisleri çağrılarak uygulama sunucusuyla iletişim kuruluyorsa, Visual Studio ile verilen referens sonucu otomatik üretilen web servis vekil (proxy) sınıflarının model sınıfı olarak kullanılması tavsiye edilmez. İleride bahsedeceğimiz ve WPF ile kurulan MVVM tasarım kalıbının önemli (ve belki de en rahatsız edici?) öğelerinden biri olan INotifyPropertyChanged arayüzünün modelde bulunan veri sınıfları tarafından uygulanması gerekebilir. Bu durumda, üzerinde kontrolümüz olmayan Visual Studio tarafından üretilmiş sınıfları kullanmak yerine, kendi istemci tarafı model sınıflarımızı oluşturmamız gerekecektir. Klasik ASP.NET web servisleri yerine, Windows Communication Foundation (WCF) altyapısıyla hazırlanan servisler kullanarak modelimizi oluşturursak istemci tarafında, uygulama sunucusunda oluşturulan mesaj kütüphanesini (DTO’ları, birer WCF Servis Kütüphanesi projesinde tanımlayarak) aynen kullanabiliriz. Bu yöntemin avantajı istemci tarafında model için DTO->model nesne eşleştirmesine sahip olmadan kullanmak olacaktır. Kabul edilebilir bir tasarım sorunu ise sunucu tarafındaki bu DTO’larda istemcinin ihtiyaç duyacağı INotifyPropertyChanged arayüzünün uygulanması, yani istemci ile ilintili kaygıların sunucuya sızmasına olanak verilmesidir.

Diagram 2’de makalemizde kullanmak için oluşturduğumuz örnek bir model mevcuttur.

Örnek Modelimiz

Görüldüğü gibi model sınıflarımız bildiğimiz POCO’lardan (Plain Old CLR Object) oluşmaktadır. Bu POCO’ları yukarıda tartıştığımız gibi, ister ASP.NET servis referansı sonucu üretilen DTO’lardan nesne eşleştirmesi ile (örneğin AutoMapper kullanarak), isterseniz WCF ile hem sunucu hem de istemcide ortak kullanarak ve DataContract betimlemeleriyle oluşturabilirsiniz. Model, basit ve anlaşılır olmak amacıyla, bilindik senaryo olan müşteri bilgisi senaryosunu tasvir edecek şekilde tasarlandı. Müşterinin kişisel bilgilerini, adresini, şehir ve telefon bilgilerini içeren (Diagram-1) modelin anemik olması gözünüze çarpmış olabilir. Bunun birinci sebebi, MVVM için modelin diğer M içeren kalıplardan pek farklı olmamasıdır, dolayısıyla üzerinde fazla durmayacağımız basit bir tasarım yeterlidir. İkinci sebep ise istemci-sunucu tarzı bir mimaride DTO kullanılacağını varsayarsak istemci tarafındaki model nesnelerinizin elle tutulur bir miktarda iş mantığı içermemesi gerekmesidir. Model üzerinde yapacağımız operasyonları View ve VM konularında anlatacağız.


MVVM konusunda tonla İngilizce makale olmasına rağmen Türkçe içeriğin (her zaman ki gibi) eksik olması ve Türkiye'de bilinirliğini arttırmak amacıyla MVVM hakkında bir makale yazmayı düşünüyordum. .NET Framework teknolojileriyle ilgili yazılım geliştiricilere yönelik çıkması planlanlanan ancak çeşitli sebeplerden dolayı iptal edilen bir dergi için aylar önce yazdığım orijinal makalemi bu amaçla düzenleyerek - ve bir blog postu için uzun olduğu için bölerek - sizlerle paylaşıyorum.

1. WPF ile Model View ViewModel: Giriş
2. WPF ile MVVM: Model
3. WPF ile MVVM: View
4. WPF ile MVVM: ViewModel
5. WPF ile MVVM: Parçaları Birleştirmek
Seriye ait kaynak kodlar: MvvmWithWpfSample.rar (245,34 KB)

Model View ViewModel (MVVM), son günlerde adı sıkça duyulan ve genellikle WPF ile birlikte kullanılan bir mimari tasarım kalıbıdır. Bu makale ile başlayarak WPF’den bahsedip, MVVM’in bileşenlerinin neler olduğuna ve nasıl oluşturulup kullanılacağına değinmeyi düşünüyorum. İlerleyen makalelerde örnek olmak amacıyla basit bir MVVM uygulaması da geliştireceğiz. Tasarım kalıbından bahsetmeden önce, platform olarak kullanacağımız WPF kütüphanesine kısaca değinelim.

WPF


Çoğunuzun bildiği gibi, Windows Presentation Framework (WPF) önümüzdeki dönemde klasik Windows uygulamaları için Microsoft'un tercih ettiği GUI (Graphical User Interface - Grafik Kullanıcı Arabirimi) teknolojisidir. WPF ile, Microsoft, eskiyen grafik arabirim teknolojisi GDI/GDI+'ı bırakıp DirectX üzerine kurulu bir yeni bir model oluşturdu. DirectX kullanımı sayesinde WPF ile yeni görsel efektler (animasyonlar, grafik dönüşümler) ve arka planda donanım hızlandırması kullanımı da mümkün hale geldi. Görsel ve donanımsal iyileştirmelerin yanı sıra, WPF ile birlikte yeni bir yazılım geliştirme modeli de geldi. Bu yeni modele göre, sunum ile ilgili yazılım bileşenleri XML tabanlı Extensible Application Markup Language (XAML) dili kullanarak görsel tasarımcılar (veya yeni tabiriyle UX – user experience, yani kullanıcı deneyimi tasarımcıları) tarafından geliştirilirken, geri kalan uygulama mantığının klasik yazılım geliştiriciler tarafından geliştirilmesi planlandı. Ancak bu çalışma modelini destekleyerek geliştiricileri yönlendiren bir tasarım kalıbı olmadan, görsel bileşenlerin uygulama kodları arasına sızması, en azından büyük projelerde büyük bir olasılıktır. Sebebi ise her XAML dosyasının, içindeki görsel bileşenlerin tanımlandığı eş sınıfını tutan bir .xaml.cs uzantılı “code behind” dosyasına sahip olmasıdır (Yazılım geliştirme ortamının Visual Studio olduğunu varsayıyorum). Bu code behind sınıfı ile GUI bileşenlerine ulaşıp, değişiklik yapması söz konusudur. MVVM uygulamalarımızda iş mantığını GUI mantığından mümkün olduğunca ayırmak amacıyla code behind’ı kullanmamaya çalışırız.

WPF özellikle barındırdığı güçlü Binding yani bağlama mekanizmaları sayesinde MVVM’e uygundur. Binding mekanizmaları, Fowler’ın MVVM’e çok benzeyen Presentation Model (PM)’i anlatırken bir dezavantaj olarak vurguladığı “prezentasyon model’i ile view’ı senkronize edecek kod yazılması gerektiği” zorluğunu oldukça azaltır.

WPF ve İşletim Sistemleri Bağımlılığı

WPF, Microsoft.NET Framework 3.0 ile yayımlanmıştır. Bundan önce sürümü çıkan Windows XP SP2 ve Windows 2003 işletim sistemlerinde WPF uygulamalarını çalıştırabilmek için .NET Framework 3.0 veya WPF içeren daha yeni bir .NET Framework kurulumu yapılmalıdır. Daha yeni Windows Vista, Windows 7 veya Windows Server 2008’de WPF uygulamalarını çalıştırmak için bir kuruluma ihtiyaç duyulmaz. Burada dikkat edilmesi gereken nokta, sonradan .NET Framework kurulumu yapılması gereken iletim sistemlerinde, WPF’in, Windows tarafından kullanılan (geliştiricinin bilmesi veya müdahale etmesi gerekmeyan) bir emülator yardımıyla çalıştırıldığıdır. Emülasyon yardımıyla çalıştırılan WPF uygulamaları hafıza ve işlemci gib sistem kaynaklarını daha çok kullanır ve göreceli olarak (aynı donanımda) daha yavaş çalışır. Emülasyon yardımıyla çalışan uygulamalar ayrıca Windows Vista veya Windows 7 gibi işletim sistemlerinde emülasyonsuz çalışan kopyalarına göre çok ufak görsel farklar içerebilir. Tavsiye edebileceğim şey WPF uygulamanızı, güncel işletim sisteminizde test ettikten sonra, halen yaygın olarak kullanılan Windows XP kullanan bir makinaya da götürüp orada bir incelemeniz olacaktır.


MVVM


MVVM, yani Model View ViewModel, GUI ile iş mantığının entegre edilmesi yani sunum amaçlı düşünülmüş bir mimari tasarım kalıbıdır. MVVM, diğer mimari tasarım kalıplarına  göre daha yeni tanındığı için birçok şekilde yorumlanmıştır ve dolayısıyla farklı uygulamalara sahiptir.

MVVM, 3 tür bileşenin bir araya gelmesiyle oluşur: Model bir windows istemci için web servislerin veya iş mantığı bileşenlerinin ve verinin olduğu bloktur, View  görsel (işitsel?) kullanıcı deneyimi bileşenlerinin yer aldığı bloktur, daha çok (ve bu makalede de) WPF – XAML  bileşenleri kullanılarak uygulanır. ViewModel (VM), Model’in, View için gerekli biçime dönüştüğü, View’ın durumunun tutulduğu ve kullanıcı interaktivitesinin yönetildiği bileşenlerin bulunduğu bloktur.

Mimari Bloklar

MVVM’in bu kadar kısa sürede gündeme yayılmasını sağlayan ve Model View Controller (MVC), Model View Presenter (MVP) gibi diğer mimari kalıplardan sıyrılmasını sağlayan bileşen ve bence üçlemenin en önemli bileşeni ViewModel’dir. Model’in View’a yerleştirilmesi sırasında çeşitli şekillerde biçimlendirilmesini veya Model’de yeri olmayan sadece View ile ilgili bilgilerin (örneğin bir listenin görülebilir mi olduğunun) tutulmasını sağlayan, ayrıca MVC’deki Controller’ın görevlerini de üstlenen ViewModel bileşenleridir. Farklı MVC uygulamaları, MVC tanımında olmamasına rağmen ihtiyaç nedeniyle Controller’a ek olarak kendilerine has ViewModel implementasyonları kullanır.

Peki MVVM kullanmanın faydaları nelerdir, niçin bir WPF uygulamasında MVVM mimarisi uygulamalıyız?

MVVM, tasarımsal bileşenler ile kullanıcıların bunlar ile etkileşimi halinde çalışacak kodların iyi bir ayrımını sağlar. En basit izahı ile bir butonun nerede duracağı, boyutlarının ne olacağı gibi deklaratif tasarım özellikleri ile butona tıklandığında ne yapacağı gibi prosedürel tanımların farklı sınıflarda olmasını sağlar ve bu sayede test edilebilirliği arttırır. Butonun ne yapacağı ile ilgili kod bloğunun bulunduğu sınıfta (ki bir ViewModel sınıfından bahsediyoruz), GUI referensı olmadığı için, gerçek bir GUI olmadan dolayısıyla GUI testi gibi karmaşık konulara girmeden, tıklama olayını test edebilirsiniz. MVVM’in günümüz uygulamaları WPF ve Silverlight için tasarlandığı için, bu platformlarda geliştirdiğiniz uygulamalarda, Binding gibi platform mekanizmaları sayesinde el ile daha az kod yazarsınız. MVVM, Geliştirici-UX Tasarımcısı ayrımını desteklediği için yazılım geliştirme süreci paralel olarak dolayısıyla daha hızlı ilerler.

MVVM’in dezavantajları nelerdir diye sorulduğunda akla gelen ilk cevap John Gossman’ın da belirttiği üzere, WPF Binding’lerin yoğun kullanımı nedeniyle fazla veri girişi-gösterimi bir arada olan uygulamalarda yoğun hafıza tüketimi göze çarpar. MVVM, VM’den View’a referens verilemediği için ve code behind da kullanılmadığı için, Windows Forms’dan gelen kodlama alışkanlıklarına sahip geliştiriciler için ilk başta kısıtlayıcı ve zorlayıcı gelebilir, ancak ilerledikçe geliştiricilerin düşünce biçimi MVVM’e uyum sağlayacaktır.

MVVM Tasarım Kalıbı Tarihi Kökeni


İlk olarak Microsoft çalışanı John Gossman’ın bir blog postuyla tanınan MVVM, aslında kökleri Smalltalk’a dayanan eski bir kalıptır.  Bazıları, Martin Fowler’ın sunum kalıpları içinde MVP’yi ikiye ayırıp, bunlardan birini de Presentation Model (PM) olarak adlandırdığı içeriği MVVM’e çok benzer çalışmasını refere ederek,  MVVM’in aslında ismi değiştirilmiş PM tasarım kalıbı olduğunu iddia etse de, John Gossman, WPF Disciples adlı e-posta grubunda, MVVM teriminin Microsoft içinde eskiden Smalltalk ile çalışmış geliştiriciler tarafından kullanıldığını ancak kendisinin bunu sadece dışarıya açtığını belirtmiştir. Fowler ile yakın zamanlarda ve birbirlerinden habersiz olarak bu çalışmaları yaptığını da eklemiştir. Zaten Fowler, PM makalesinde aslında bu kalıbın Smalltalk’ta kullanılan Application Model’in aynısı olduğunu söyleyerek yine Smalltalk’a gönderme yapmıştır.

IEBlog'dan yapılan açıklamaya göre 2007'nin sonunda (Ekim/Aralık dönemi) yayınlanacak bir "kill bit" i ile MSXML4 nesnesinin Internet Explorer'da oluşturulması engellenecek.

Kullanıcıların, mevcut uygulamalarını MSXML6'ya geçirmesi önerilen yazıda, IE dışındaki uygulamaların bundan etkilenmeyeceği belirtiliyor. MSXML4'in gelecek 12 ay içinde ise Microsoft Download Center'dan kaldırılacağı da buna ek olarak belirtilen bir haber.

IEBlog'da haberin kaynağı olarak Microsoft XML Team's Blog gösteriliyor.

Bu iş için freeware iki adet güzel tool mevcut. Biri Microsoft kaynaklı Internet Explorer DevToolBar, diğeri ise Fiddler. Göz atılası gerekirse kullanılası araçlar, tavsiye ederim...

JavaScript ve trim()

March 29, 2006

Böyle bir şey yok :), yani JavaScript'te trim() tadında bir metod mevcut değil.  Böyle bir metodun olmaması beni çok şaşırttı, ilginç olanı bunu daha önce farketmemiş olmam bir arkadasim bugun bana konudan bahsedince ilk tepkim "dabii ki vardir" oldu. Ama daha sonra bunun için replace() veya substring() gibi metodların kullanildigini gordum. Ayrıca simdi aklima gelen bir soru da, JavaScript'te substr() ve substring() gibi birbirlerinin yerine kullanilabilen iki metod olmasina ragmen dil tasarımcilarinin trim()'i nasil atladıklari...