MVVM TASARIM DESENİ TEMELLİ HİYERARŞİK KULLANICI ARAYÜZÜ GEÇERLEME ALTYAPISI

Transkript

1 MVVM TASARIM DESENİ TEMELLİ HİYERARŞİK KULLANICI ARAYÜZÜ GEÇERLEME ALTYAPISI Hakan Bağcı (a), Ahmet Can Bulut (b), Ahmet Kara (c) (a) (b) (c) TÜBİTAK BİLGEM İLTAREN, Ankara ÖZ Simülasyon projelerinde kullanıcı arayüzlerinde girilen verilerin belirli kurallara göre geçerlenmesi ve gerekli hata ve uyarı bildirimlerinin kullanıcıya gösterilmesi ihtiyaç olagelmiştir. Modellerin doğru çalışabilmesi için öncelikli ihtiyaç ilklendirme parametrelerinin geçerli olarak sağlanmasıdır. Geçerleme kuralları sadece bir parametre ile ilgili olabildiği gibi karmaşık arayüzlerde birçok parametreyle de ilgili olabilmektedir. Ayrıca bu parametreler belirli gruplara ayrılarak bu gruplar arasında hiyerarşi oluşturulduğunda üst grupların geçerliliği alt gruplara bağlı olabilmektedir. Bu durumda geçerlemelerin hiyerarşik olarak yapılıp üst gruplara bildirilmesi gerekmektedir. Simülasyon projelerinde kullanıcıların senaryo tanımlaması için uyması gereken birçok karmaşık kural tanımlanmaktadır. Bu makalede bu tür ihtiyaçları karşılamak için MVVM (Model-View-ViewModel) tasarım deseni temel alınarak geliştirilmiş hiyerarşik kullanıcı arayüzü geçerleme altyapısı (Hier-MVVM) önerilmektedir. Hier-MVVM, MVVM tasarım deseninin temel öğelerinden biri olan görüntü modellerini geçerlenebilir kılmaktadır. Bu görüntü modelleri arasında ilişkiler kurarak geçerlemelerin hiyerarşik bir biçimde üst görüntü modellerine aktarılmasına olanak sağlamaktadır. Hier-MVVM sadece gerekli yerlerde ve gerektiği zaman geçerlemelerin yapılmasını sağlar. Ayrıca liste geçerlemelerini daha verimli hale getirmek için çözümler sunar. Hier-MVVM in geçerleme sisteminde dikkate aldığı bu iki temel husus onu çok parametreli karmaşık sistemlerde hiyerarşik geçerleme için iyi bir aday haline getirmektedir. Anahtar Kelimeler: Hiyerarşik Geçerleme, MVVM, Simülasyon, Veri Geçerleme, Yazılım Altyapısı 200

2 HIERARCHICAL USER INTERFACE VERIFICATION FRAMEWORK BASED ON MVVM DESIGN PATTERN ABSTRACT Verification of input parameters and user notification with warning and error messages is a major need in simulation software projects. Verified initialization parameters are the first step of valid model execution. Verification rules may depend on a single parameter, but sometimes may depend on multiple parameters on complex user interfaces. Hierarchically grouping of parameters let verification done based on sub-groups. Lots of complex rules exist to define a scenario in simulation software projects. To overcome these needs we propose a hierarchical user interface verification framework (Hier- MVVM) that is based on MVVM (Model-View-ViewModel) design pattern. Hier- MVVM lets ViewModels of MVVM verifiable. It manages relationships between ViewModels to reflect verification results hierarchically in parent ViewModels. Hier- MVVM lets verification done only in required ViewModels at required times. It also supports list verifications done efficiently. These two design concerns of Hier-MVVM let it to be a good candidate in simulation software with multiple parameters and hierarchical verification. Keywords: Data Verification, Hierarchical Verification, MVVM, Simulation, Software Framework 1. GİRİŞ Günümüzde yazılım sistemlerinin karmaşık hale gelmesiyle beraber bu sistemleri yönetmek için kullanılan kullanıcı arayüzleri de karmaşık hale gelmeye başlamıştır. Özellikle girilen verilerin tanımlanmış kurallara göre geçerlenmesinin gerektiği durumlarda kullanıcı dostu arayüzler geliştirmek zor bir problem halini almıştır. Bu verilerin hiyerarşik olması ve farklı seviyelerdeki parametre gruplarındaki hata/uyarıların diğer seviyeleri de etkilemesi gibi durumlar ortaya çıktığında bu problem daha da zor hale gelmektedir. Bu nedenle bu problemi jenerik bir şekilde çözen altyapıların geliştirilmesi son zamanlarda büyük önem kazanmıştır. Simülasyon projeleri gibi kullanıcıların senaryo tanımlaması için uyması gereken birçok karmaşık kuralın bulunduğu yazılımlarda bu tür durumlarla çok sık karşılaşılmaktadır [6]. Bu problemin çözümüne yönelik araştırma grubumuz tarafından yakın geçmişte farklı çözümler de geliştirilmiştir [7,8]. Kullanıcı arayüzü geliştirirken belirli bir tasarım deseni kullanmak geliştirme sürecini daha kolay hale getirmektedir. Buradan yola çıkarak MVP (Model-View-Presenter) ve MVC (Model-View-Controller) gibi tasarım desenleri oluşturulmuştur yılında 201

3 Martin Fowler MVP tasarım desenine benzeyen PM (Presentation Model) desenini tanıtmıştır [1] yılında Microsoft WPF kütüphanesinin tasarımcılarından olan John Gossman MVVM (Model-View-ViewModel) tasarım deseninden ilk defa bahsetmiştir [2]. MVVM tasarım deseni PM deseninin WPF kullanarak özelleştirilmiş hali olarak kabul edilebilir. MVVM ve PM tasarım desenini MVP ve MVC den ayıran temel özellik görüntü modelinin (ViewModel) görüntü bileşeninin (View) referansına ihtiyaç duymamasıdır. MVVM in JavaScript için geliştirilmiş versiyonu olan KnockoutJS [3] gibi diğer bazı diller için de geliştirilmiş versiyonları bulunmaktadır. Bu makalede hiyerarşik kullanıcı arayüzlerini geçerleme problemini çözmek için geliştirilen MVVM tasarım deseni temelli altyapı anlatılmaktadır. Bu altyapı kısaca Hier-MVVM (Hiyerarşik MVVM) olarak isimlendirilmiştir. Hier-MVVM görüntü modelleri arasında hiyerarşi kurulmasına olanak sağlar. Geçerleme sonuçları hiyerarşik olarak üst kısımlara aktarılır. Her görüntü modeli kendisi ve altındaki görüntü modellerinden sorumludur. Hier-MVVM in temel hedefi geçerlemeleri gerektiği yerde ve gerektiği zaman yaparak verimli bir geçerleme altyapısı sunmaktır. Bu makalede MVVM deseninde bulunan Model, View ve ViewModel terimlerinin Türkçe karşılıkları sırasıyla Model, Görüntü Bileşeni ve Görüntü Modeli olarak kullanılmıştır. Bu makalede örnekler basit bir çalışan bilgi sistemi üzerinden anlatılacaktır. Bu bilgi sistemi çalışanları listeler ve her çalışan hakkında bilgiler tutar. Makalenin kalan kısmında önce MVVM hakkında kısa bilgilendirme yapılıp daha sonra Hier-MVVM altyapısı tanıtılacaktır. Sonuç bölümünde ise Hier-MVVM hakkında genel bir değerlendirme yapılacaktır. 2. MVVM Hier-MVVM altyapısını tanıtmadan önce MVVM tasarım deseninin temel öğeleri olan Model, Görüntü Bileşeni ve Görüntü Modeli nden bahsetmek faydalı olacaktır. MVVM in temel öğeleri ve bu öğeler arasındaki ilişkiler Şekil 1 deki diyagramda gösterilmiştir. MVVM in temel hedefi görüntü bileşenleri geliştirme sürecini işleyiş mantığı ve veri modelleri geliştirme sürecinden ayırmaktır [4]. WPF Binding mekanizması bu süreleri ayırmayı mümkün kılmıştır. Görüntü bileşeni geliştirenler WPF kütüphanesi tarafından sunulan XML tabanlı XAML dilini kullanarak kullanıcı arayüzlerini oluştururlar. İşleyiş mantığı geliştiricileri ise görüntü modelleri oluşturarak veri modellerini yönetirler. Görüntü modelleri ve görüntü bileşenleri (XAML ile geliştirilen bileşenler) arasındaki ilişki ise WPF Binding mekanizması kullanılarak yapılır [5]. Binding aracılığıyla görüntü modelindeki elemanlar kullanıcı arayüz elemanlarına bağlanmış olur. Model, kullanıcı arayüzü kullanarak yönetilmek istenen verilerin tutulduğu sınıflara verilen genel isimdir. Çalışan bilgi sisteminde bir çalışanın bilgisini tutan Employee 202

4 sınıfı bir çalışan için modeli temsil eder. Bu çalışanları listeleyen bir üst model ise çalışan listesi modeli olarak tanımlanabilir. Aynı şekilde bir çalışan modeli altında alınan eğitimleri tutan bir eğitim listesi modeli bulunabilir. Bir başka deyişle modeller hiyerarşik olarak tanımlanabilirler. Şekil. 1. MVVM Tasarım Deseni Görüntü Bileşeni, verilerin kullanıcıya gösterildiği bileşenlerdir. Bu bileşenler ızgara, liste, açılır kutu, metin kutusu gibi temel öğeler olabileceği gibi bunların bir araya getirilmesiyle oluşturulan karmaşık görüntü bileşenleri de olabilirler. Örneğin çalışan bilgi sisteminde bir çalışan verisini kullanıcıya göstermek için bir EmployeeView görüntü bileşeni oluşturulabilir. Görüntü Modeli, model ile görüntü bileşeni arasında bulunur. Temel görevi model verilerinin arayüze yüklenmesi ve arayüzde yapılan değişikliklerin modele yansıtılmasıdır. Bu sayede model ve görüntü bileşeni direkt olarak etkileşim içinde olmazlar. Bütün değişiklikler görüntü modeli aracılığıyla yapılır. Görüntü modeli, görüntü bileşeninin referansına ihtiyaç duymaz. Bunun yerine WPF kütüphanesinde sunulan Binding mekanizması ve INotifyPropertyChanged arayüzleri kullanılarak görüntü modelleri ve görüntü bileşenleri haberleşirler. Kullanıcının arayüzden tetiklediği komutları görüntü modellerinde temsil eden komutlar da MVVM in öğeleri arasında sayılabilir. Örneğin kullanıcının arayüzde bir düğmeye basması komutu için ilgili görüntü modelinde bir komut tanımlanmalıdır. Bu komutlar WPF in sağladığı ICommand arayüzü kullanılarak oluşturulmaktadır. 3. HIER-MVVM 3.1. Geçerleme hiyerarşisi oluşturma Hier-MVVM, MVVM tasarım desenini temel alarak geliştirilen hiyerarşik kullanıcı arayüzü geçerleme altyapısıdır. Hier-MVVM, MVVM tasarım desenine ek olarak 203

5 görüntü modellerini geçerlenebilir hale getirmektedir. Hier-MVVM altyapısında bulunan temel sınıflar arasındaki ilişkiler Şekil 2 deki sınıf diyagramında gösterilmiştir. Şekil 2 de gösterilen ViewModelBase sınıfı görüntü modellerinin türediği soyut sınıftır. Bu sınıf INotifyPropertyChanged arayüzünü gerçeklediği için görüntü modeli içinde yapılan değişikliklerin kullanıcı arayüzüne bildirilmesini sağlar. ValidatingViewModelBase sınıfı ise yine bir soyut sınıf olmakla birlikte geçerlemeye olanak sağlar. Şekil. 2. Görüntü Modeli Sınıfları Liste geçerlemeleri için ListItemViewModel ve ListViewModel olmak üzere iki jenerik sınıf tanımlanmıştır. ListViewModel listeye eleman ekleme, listeden eleman çıkarma, liste elemanlarını aşağı/yukarı hareket ettirme gibi temel liste komutlarını hazır olarak sunmaktadır. Buna ek olarak liste üzerinde özel komutlar tanımlanmasına da izin vermektedir. ListItemViewModel sınıfı, ValidatingViewModelBase sınıfından türetilmiştir. ValidatingViewModelBase sınıfına ek olarak liste elemanının liste içindeki sırasını tutar. Jenerik ListViewModel<TViewModel, TModel> sınıfı kullanarak nesneler tanımlanırken TViewModel tipi ListItemViewModel<TModel> olmalıdır. 204

6 Şekil. 3. Özellik (Parametre) Sınıfları Şekil 3 te özellik (parametre) sınıfları gösterilmiştir. İki farklı tipte özellik sınıfı vardır. Bunlar ValueProperty ve RefProperty sınıflarıdır. ValueProperty double, integer gibi null değeri alamayan ilkel veri tipleri için tasarlanmış sınıftır. RefProperty ise referans tipleri için tanımlanmış özellik sınıfıdır. Örneğin bir çalışanın yaşını ValueProperty<int> olarak tanımlarken, ismini RefProperty<string> tipinde tanımlayabiliriz. ValidatingViewModelBase sınıfından türetilmiş bir sınıf birçok UIProperty içerebilir. Örneğin EmployeeViewModel sınıfı ValueProperty<int> Age ve RefProperty<string> Name özelliklerini içerir. Burada Age özelliği ilgili veri modelindeki çalışana ait yaşı, Name özelliği çalışan ismini yönetmektedir. Geçerleme hiyerarşisini oluşturmak için ValidatingViewModelBase sınıfının sunduğu Register metodu kullanılır. Register metodu parametre olarak geçerlenebilir bir nesne almaktadır. Hier-MVVM de geçerlenebilir nesneler görüntü modelleri, özellikler ve liste görüntü modelleridir. Özellikler Register metodu kullanarak ilgili görüntü modeline bağlanırlar. Aynı şekilde alt görüntü modelleri bir üst görüntü modeline bağlanırlar. Liste görüntü modellerinde de her bir liste elemanının görüntü modeli liste görüntü modeline bağlanır. Bu şekilde geçerleme hiyerarşisi oluşturulmuş olur. Her bir görüntü modeli kendisine bağlı alt özellik ve görüntü modellerinin geçerleme sonuçlarını toplamaktan sorumludur. Şekil 4 te örnek bir hiyerarşi gösterilmiştir. Bu örnekte EmployeeListViewModel sınıfı birden fazla EmployeeViewModel görüntü modelini içeren bir ListViewModel sınıfıdır. Bir çalışanın yaşının geçerlenmesi sonrasında ortaya çıkan hata ilgili EmployeeViewModel nesnesini, o da EmployeeListViewModel nesnesini etkilemektedir. Hiyerarşideki her bir görüntü modeli ve özellik kendisinden talep edildiğinde geçerleme sonuçlarını döner. 205

7 3.2. Geçerleme kuralları tanımlama Şekil. 4. Örnek Hiyerarşi Hiyerarşinin nasıl tanımladığını açıkladıktan sonra geçerleme kurallarının nasıl tanımladığından bahsetmemiz gerekir. Hier-MVVM altyapısı geçerleme kuralları tanımlamak için Şekil 5 teki temel sınıfları tanımlamıştır. Şekil. 5. Geçerleme Kuralı Sınıfları ValidatorBase sınıfı bütün geçerleme kurallarının türemesi gerektiği soyut ata sınıftır. ListValidatorBase sınıfı ise listelerin geçerlenmesi için kullanılan özelleştirilmiş bir sınıftır. ValidatorBase sınıfı geçerlemeleri yapan Validate isimli bir metot içerir. Bu sınıftan türetilen geçerleme kuralı sınıfları bu metodun içeriğini sağlarlar. Şekil 6 da örnek bir geçerleme kuralı tanımlanmıştır. Bu kural arayüzde bulunan ve zorunlu olarak girilmesi gereken bir alanın değerinin olup olmadığını kontrol eder. Eğer zorunlu olan alan bir değere sahip değilse ilgili özelliğe hata mesajı atanır. 206

8 Şekil. 6. Geçerleme Kuralı Örneği Bir özelliğe bağlanmış olan geçerleme kuralı özelliğin değeri değiştiğinde çalıştırılır. Bir özelliğin değeri değiştiğinde bu özelliğin değerinden başka bir özellik etkileniyorsa etkilenen özelliğin geçerleme kuralları da çalıştırılır. Geçerleme kuralları sadece etkilenen özelliklerde çalıştırıldığı ve hiyerarşideki bütün geçerlemelerin tekrar yapılmasına gerek bırakılmadığı için geçerleme verimli bir şekilde yapılmış olur. Bu özellik çok parametreli karmaşık arayüzlerde bile Hier-MVVM altyapısını kullanılabilir kılmaktadır. Hier-MVVM altyapısında liste geçerlemelerini daha verimli hale getirmek için ListValidatorBase sınıfı tanımlanmıştır. Bu sınıf geçerlemelerin listede hangi değişiklik yapıldığında tetiklenmesini belirlemeye izin verir. Örneğin listedeki eleman sayısını geçerleyen bir kuralın sadece listeye eleman eklendiğinde veya çıkarıldığında tetiklenmesi yeterli olacaktır. Bu geçerleme için listedeki bir elemanın değerinin değişmesi geçerleme kuralının tetiklenmesine sebep olmayacaktır. Liste geçerlemeleri için yapılan bu iyileştirme çok sayıda eleman içeren listelerin hızlı bir şekilde geçerlenebilmesinde Hier-MVVM kullanılmasına olanak sağlamıştır. Hier-MVVM, geçerleme kuralları sonuçlarını 3 farklı tipte sınıflandırır. Bunlar bilgi, uyarı ve hata mesajlarıdır. Geçerleme kuralları sadece hataları belirlemek için kullanılmaz. Uyarı ve bilgi mesajları üretmek için de geçerleme kuralları kullanılabilir. Hiyerarşinin herhangi bir yerinde bulunan bir elemanın geçerlilik seviyesi hesaplanırken alt elemanlardaki sonuçların tipi dikkate alınır. Öncelik sırası hata, uyarı ve bilgi şeklindedir. Hata olmadığı sürece görüntü modeli geçersiz olarak nitelendirilmez Geçerleme sonuçlarının gösterimi Geçerlenebilir öğeler olan görüntü modelleri, özellikler ve liste görüntü modelleri IValidating arayüzünü gerçeklemektedir. IValidating arayüzü Şekil 7 de gösterilmiştir. IValidating arayüzü elemanları kullanıcı arayüzündeki görüntü bileşenlerinin durumunu 207

9 tanımlayan özellikler içerir. Geçerleme kurallarıyla hata mesajı ataması yapabileceğimiz gibi, görüntü bileşenlerinin salt okunur, görünür, seçilebilir kılınmış olup olmadığı gibi durumlarını da atayabiliriz. IValidating arayüzü tarafından sunulan bu özellikler ilgili görüntü bileşenlerine WPF in Binding mekanizması kullanılarak bağlanabilir. Şekil. 7. IValidating Arayüzü Geçerleme sonuçlarının gösterimi için WPF kütüphanesinin sağladığı veri kalıpları (DataTemplate) kullanılarak hata verilerinin nasıl gösterileceği tanımlanabilir. Şekil 8 de çalışan isim alanının en az 3 harfli olmasını denetleyen bir geçerleme kuralının çalıştırılması sonucunda bulunan hatanın nasıl gösterildiği örneklenmiştir. 4. SONUÇLAR Şekil. 8. Örnek Hata Gösterimi Kullanıcıların doğru veri girişini sağlayabilmesi için kullanıcı arayüzleri için geçerleme kuralları tanımlanmaktadır. Bu geçerleme kurallarını tanımlamak ve kullanıcı arayüzüne yansıtmak karmaşık sistemlerde büyük bir problem olagelmiştir. Özellikle günümüzde kullanıcılar tarafından sağlanması gereken verilerin büyümesi ve daha da karmaşık hale gelmesi ile birlikte sistemleri yönetmek zorlaşmıştır. Bu tip sistemlerde veriler çoğu zaman hiyerarşik olarak tanımlanmaktadır. Bu durum geçerlemelerin hiyerarşik olarak yapılması gerekliliğini ortaya çıkarmaktadır. Hier-MVVM altyapısı karmaşık sistemlerin kullanıcı arayüzlerini daha kullanışlı hale getirmek, geçerlemeleri kolay yöntemlerle tanımlayabilmek ve tanımlanan geçerlemeleri en verimli şekilde çalıştırmak için tasarlanmış bir kütüphanedir. 208

10 HierMVVM görüntü modelleri arasında kurduğu hiyerarşi sayesinde geçerlemelerin hiyerarşik olarak üst görüntü modellerine aktarılmasını sağlar. Geçerlemeler sadece ilgili yerlerde ve gerektiği zaman yapılır. Buna ek olarak listeler için özel tasarlanmış sınıfları kullanarak tanımlanan geçerlemeler, birçok sistemde performans problemleri oluşturan liste geçerlemelerinin de verimli bir şekilde yapılmasına olanak sağlamıştır. Hier-MVVM, yukarıda sayılan özellikleri göz önüne alındığında çok parametreli karmaşık sistemlerde hiyerarşik geçerleme için kullanılabilecek bir altyapı olduğunu göstermektedir. Araştırma grubumuz içerisinde de pek çok simülasyon projesi içerisinde kullanılarak olgunluğunu ispatlamıştır. 5. KAYNAKÇA [1] M. Fowler, Presentation Model, [Son Ziyaret: 15 Nisan 2014]. [2] J. Gossman, Tales from the Smart Client: Introduction to Model/View/ViewModel pattern for building WPF apps, [Son Ziyaret: 15 Nisan 2014]. [3] S. Sanderson, KnockoutJS, [Son Ziyaret: 15 Nisan 2014]. [4] Model View ViewModel, [Son Ziyaret: 15 Nisan 2014] [5] S. Wildermuth, Windows Presentation Foundation Data Binding: Part 1, microsoft.com/en-us/library/aa aspx, [Son Ziyaret: 15 Nisan 2014]. [6] Balcı, O., Verification, Validation, and Testing,in Handbook of Simulation, Eds. Jerry Banks, John Wiley & Sons, 1998 [7] Demir, İ., Tezcan, Z., & Alpdemir, M. N. KABAN: Simülasyon Verileri Geçerleme ve Otomatik Kullanıcı Arabirimi Oluşturma Altyapısı. USMOS [8] Şimşek, A., Demir, İ., & Tezcan, Z.. KABAN-2: Kullanıcı Ara Birimi ve Geçerleme Altyapısı, UYMS