MVVM (Model View ViewModel)
- 1. MVVM (Model –View –View Model) Onur SALKAYA 04.04.2015 onursalkaya@gmail.com
- 2. Gündem MVVM nedir? Model, View, ViewModel kavramları ne anlama gelir? MVVM için 2 önemli kural nedir? Binding ve Command kavramları nedir? Benzerlik gösterdiği diğer tasarım desenleri nelerdir? MVVM’i uygulayabilmek için yardımcı kütüphaneler nelerdir? Desenin avantaj ve dezavantajları nelerdir? Demo
- 3. İlk kez 2005 yılında Microsoft’un WPF (Windows Presentation Foundation) takımından John Gossman’ın kişisel bloğunda duyurduğu, WPF ve Silverlight için sunum katmanı olmayı hedefleyen bir tasarım mimarisidir. Temel amaç ‘Seperation Of Concern (!)’ prensibini uygulayabilmektir. Günümüzde front-end tarafında geliştirilmiş bazı kütüphaneleri de oldukça popülerdir. MVVM Nedir ?
- 4. Model : Veritabanı ya da bir servis referansı ile oluşturulmuş tüm sınıflar model olabilir. View : Son kullanıcının gördüğü arayüzlerdir ViewModel : View ile Model arasında doğrudan bir bağlantı yoktur. Bu bağlantıyı sağlayan yapıdır. Model, View, ViewModel kavramları ne anlama gelir?
- 5. Model , View , ViewModel View ModelViewModelDataBinding Presentation and Presantation Logic Business Logic and Data
- 6. MVVM için 2 önemli kural nedir? View,ViewModel’i bilir, fakat tersi söz konusu değildir. View’de bulunan elementler,ViewModel’de tanımlı üyelere ’’Bind’’ edileceklerinden,View’inViewModel’den haberdar olduğunu söyleyebiliriz; ancakViewModel kesinlikleView’de yer alan elementlere erişmez veView’de ne olduğunu bilmez! ViewModel, Model’i bilir, fakat tersi söz konusu değildir. ViewModel, Model’in (mesela bir domain object), üyelerine erişebilir ve kullanabilir, yani kısacaViewModel, Model’i bilir; fakat Model’de yer alan sınıf içindeViewModel’le ilgili herhangi bir kod bulunmaz!
- 7. Binding ve Command kavramları nedir? MVVM’in en güçlü yanları Binding ve Command kavramlarıdır. Binding :ViewModel içerisinde kodlanan iş mantığı için gerekli olan input’lar ya da yapılan işlemler sonucu elde edilen output’larınView içerisinde ilgili kontrollere bağlanması için kullanılan yöntemdir. Command :View içerisinde,ViewModel’de kodlanmış iş parçacıklarının tetiklenmesi için kullanılan yöntemdir.
- 8. Benzerlik gösterdiği diğer tasarım desenleri nelerdir? MVC (Model – View – Controller) MVP (Model – View – Presenter) Presentation Model Page Controller Front Controller
- 9. MVVM’i uygulayabilmek için yardımcı kütüphaneler nelerdir? MVVM tasarım desenini projelerimizde uygulayabilmemiz için bir takım yardımcı sınıf, arayüz ya da metotlara ihtiyacımız vadır. Bu noktada ihtiyacımız olan kütüphaneyi sıfırdan geliştirmek, tercih edeceğimiz yöntemlerden ilkidir. Sıfırdan bir kütüphane geliştirmek yerine, geçerliliği kitlelerce benimsenmiş, aktif olarak kullanılan ve sürekli olarak geliştirilmeye devam eden harici kütüphaneler kullanılabilir.
- 10. Örnek Kütüphaneler Microsoft.Prism (WPF, Silverlight,Windows Phone,Windows Store) MVVM Light (WPF, Silverlight,Windows Phone,Windows Store, Xamarin) Caliburn.Micro (WPF, Silverlight,Windows Phone) Durandal (Javascript) Knockout.js (Javascript)
- 11. Avantajlar İş mantığına odaklanmamızı sağlar. Sunum ve iş mantığı kesin olarak birbirinden ayrıldığı yönetilebilirlik ve olası bir değişikliğin uygulanması daha kolaydır. İş mantığı tamamen ayrı bir katmanda olduğu için test yönelimli geliştirmeye açıktır. View tarafında kontrollere veri bağlama işi (Binding) kolay ve esnektir. Tasarımcı ve programcıya bir arada çalışma şansı sunar.
- 12. Dezavantajlar • ViewModel içerisinde kontrollere erişim sağlanamadığı için kompleks sunum katmanlarında geliştirme yapmak biraz zorlaşabilir. • Yazılan kod satır sayısında artış olabilir. Bunu önlemek için kütüphaneler içerisinde mevcut olan Code Snippet’lardan faydalanabilir, ya da kendi Code Snipped bloklarımızı ekleyebiliriz.
- 13. DEMO
- 14. View <Grid Background="White"> <Button Content="+" Height="23" HorizontalAlignment="Left" Margin="306,147,0,0" VerticalAlignment="Top" Width="60" Command="{Binding IncreaseNumber}" /> <TextBlock Height="44" FontSize="25" HorizontalAlignment="Left" TextAlignment="Center" Margin="215,137,0,0"VerticalAlignment="Top" Width="86" RenderTransformOrigin="0.488,0.975" Text="{Binding Number}"/> <Button Content="-" Height="23" HorizontalAlignment="Left" Margin="149,147,0,0" VerticalAlignment="Top" Width="60" Command="{Binding DecreaseNumber}"/> </Grid>
- 15. public class MainViewModel :ViewModelBase { int _number; public int Number { get { return _number; } set { if (_number == value) return; _number = value; base.RaisePropertyChanged("Number"); } }
- 16. public class MainViewModel :ViewModelBase { public MainViewModel() { this.IncreaseNumber = new RelayCommand(() => this.Number++); this.DecreaseNumber = new RelayCommand(() => this.Number-- ); } public RelayCommand IncreaseNumber { get; set; } public RelayCommand DecreaseNumber { get; set; } }
- 17. TEŞEKKÜRLER… Sunumu ve kaynak kodları almak isteyenler aşağıdaki mail üzerinden iletişime geçebilirler… onursalkaya@gmail.com