MVVM nedir?
MVVM kullanmayan .NET MAUI uygulamaları genellikle arka planda kod dosyalarında daha fazla kod içerir. .NET MAUI'deki arka planda kod dosyaları şu deseni izler: {something}.xaml.cs. Arka planda kod dosyasındaki çoğu kod genellikle kullanıcı arabirimi (UI) davranışını denetler. Kullanıcı arabirimi davranışı, renk veya metin değiştirme gibi kullanıcı arabiriminde gerçekleşen her şeyi içerebilir. Ayrıca, düğme tıklama işleyicileri de dahil olmak üzere kullanıcı arabirimi nedeniyle gerçekleşen her şeyi içerebilir.
Bu yaklaşımla ilgili bir sorun, arka planda kod dosyalarına birim testleri yazmanın zor olmasıdır. Arka planda kod dosyaları genellikle XAML ayrıştırılarak oluşturulan ve hatta diğer sayfalar tarafından oluşturulan bir uygulama durumu olduğunu varsayar. Bu koşulların, bir kullanıcı arabirimiyle birlikte bir mobil cihazda bile çalışmayabilecek bir birim testi çalıştırıcısında işlenmesi zordur. Bu nedenle, birim testleri bu dosyalardaki kullanıcı arabirimi davranışlarını nadiren test eder.
Ancak MVVM deseninin yararlı olduğu yer burasıdır. Doğru kullanıldığında, MVVM düzeni çoğu UI davranış mantığını görünüm modelleri olarak adlandırılan birim test edilebilir sınıflara taşıyarak bu sorunları çözer. MVVM deseni en yaygın olarak veri bağlamayı destekleyen çerçevelerle kullanılır. Bunun nedeni, .NET MAUI ile her ui öğesini bir viewmodel öğesine veri bağlamanız ve bir görünümde veya arka planda kodu neredeyse ortadan kaldırmanız veya ortadan kaldırmanızdır.
MVVM uygulamasının bölümleri nelerdir?
viewmodel, MVVM deseninin benzersiz bir parçası olsa da, model bölümü ve görünüm bölümü de tanımlar. Bu bölümlerin tanımları Model-View-Controller (MVC) gibi diğer bazı yaygın desenlerle tutarlıdır.
Model nedir?
Bir MVVM uygulamasında model terimi, iş verilerinizi ve işlemlerinizi belirtmek için kullanılır. Model, uygulamanın kullanıcı sunusunun kendisini içermez.
Modele hangi kodun ait olduğunu belirlemek için kullanışlı bir kural, farklı platformlarda taşınabilir olması gerektiğidir. Mobil uygulamadan web arabirimine, hatta komut satırı programına kadar tüm örneklerde aynı modeli kullanın. Bilgilerin kullanıcıya nasıl görüntülendiğiyle ilgisizdir.
Senaryomuzdan İk uygulamasını düşündüğünüzde model, bu varlıklarla ilgili verileri ve mantığı barındıran bir Employee sınıfı ve sınıfı Department içerebilir. Model, kalıcılık mantığını barındıran bir EmployeeRepository sınıf gibi öğeleri de içerebilir. Diğer bazı yazılım tasarımı desenleri, depolar gibi öğeleri modelden ayrı olarak değerlendirir. Ancak MVVM bağlamında genellikle modelin bir parçası olarak iş mantığına veya iş verilerine başvururuz.
C# dilindeki bir modelin iki örneği aşağıda verilmiştir:
public class Employee
{
public int Id { get; }
public string Name { get; set; }
public Employee Supervisor { get; set; }
public DateTime HireDate { get; set; }
public void ClockIn() { ... }
}
public class EmployeeRepository
{
public IList<Employee> QueryEmployees() { ... }
...
}
Görünüm nedir?
Görünüm kodu, düğmeler ve giriş alanları gibi denetimlerin yanı sıra temalar, stiller ve yazı tipleri gibi tamamen görsel öğeler gibi kullanıcıyla doğrudan etkileşim kuran öğeleri denetler.
.NET MAUI'de, kendiniz bir görünüm oluşturmak için herhangi bir C# kodu yazmanız gerekmez. Bunun yerine, görünümlerinizi genellikle XAML dosyalarına göre tanımlarsınız. Elbette, kod aracılığıyla kendi görünümünüzü oluşturduğunuz özel bir kullanıcı denetimini çağıran durumlar vardır.
Nedir viewmodel?
Bu da bizi.viewmodel viewmodel, iş mantığımız (model) ile görünümlerimiz (ui) arasındaki aracıdır.
İk uygulaması için yapabileceklerini viewmodel düşünün. Bir çalışanın kullanılabilir tatil süresini gösteren bir görünüm olduğunu ve tatil bakiyesinin "2 hafta, 3 gün, 4 saat" olarak görüntülenmesini istediğinizi varsayalım. Ancak modeldeki iş mantığı, 13,5 gün ile aynı değeri, 8 saatlik iş günü içindeki toplam günleri temsil eden ondalık bir sayı sağlar. Nesne modeli aşağıdaki listeye benzer olabilir:
Model – Bir
Employeeyöntem içeren sınıfı:public decimal GetVacationBalanceInDays() { //Some math that calculates current vacation balance ... }ViewModel :
EmployeeViewModelŞuna benzer bir özelliği olan bir sınıf:public class EmployeeViewModel { private Employee _model; public string FormattedVacationBalance { get { decimal vacationBalance = _model.GetVacationBalanceInDays(); ... // Some logic to format and return the string as "X weeks, Y days, Z hours" } } }Görünüm : Tek bir etiket ve kapat düğmesi içeren bir XAML sayfası. Etiketin özelliğine
viewmodelbir bağlaması vardır:<Label Text="{Binding FormattedVacationBalance}" />Daha sonra sayfanın örneğine ayarlanmış olması yeterlidir
BindingContextEmployeeViewModel.
Bu örnekte model iş mantığını içerir. Bu mantık bir görsel görüntüye veya cihaza bağlı değildir. Aynı mantığı bir el cihazı veya masaüstü bilgisayar için de kullanabilirsiniz. Görünüm, iş mantığıyla ilgili hiçbir şey bilmiyor. Etiket gibi görünüm denetimleri, ekranda nasıl metin alınıp alınmadığını bilir, ancak bunun bir tatil bakiyesi mi yoksa rastgele bir dize mi olduğuyla ilgilenmez. Her viewmodel iki dünyayı da biraz tanır, böylece aracı olarak hareket edebilir.
İlginç olan, aracı olmayı başarma viewmodel şeklidir: Görünümün bağlanabileceği özellikleri kullanıma sunar. Genel özellikler, veri sağlamanın tek yoludur viewmodel . Bu bizi neden olarak adlandırılıyor viewmodel? MVVM'deki "model", iş süreçlerinin yapısını, verilerini ve mantığını, viewmodel görünümün gerektirdiği yapıyı, verileri ve mantığı temsil eder.
görünümü ile viewmodelnasıl çalışır?
modeliyle ilişkisine viewmodel baktığınızda, standart bir sınıftan sınıfa ilişkidir. viewmodel modelin bir örneğine sahiptir ve özellikler aracılığıyla modelin özelliklerini görünüme sunar. Ancak, bir görünüm üzerinde özellikleri viewmodelnasıl alır ve ayarlar? Değişiklikler yapıldığında viewmodel , görünüm görsel denetimlerini yeni değerlerle nasıl güncelleştirir? Yanıt, veri bağlamadır.
' viewmodelnin özellikleri, nesne görünüme bağlı olduğunda okunur. Ancak bağlamanın, bağlama görünüme viewmodeluygulandıktan sonra özelliklerinin değişip değişmediğini bilmesinin hiçbir yolu yoktur. öğesinin viewmodel değiştirilmesi, yeni değeri görünüme bağlama yoluyla otomatik olarak yaymaz. görünümünden viewmodel görünümüne viewmodel güncelleştirmek için arabiriminin System.ComponentModel.INotifyPropertyChanged uygulanması gerekir.
INotifyPropertyChanged Arabirimi adlı PropertyChangedtek bir olay bildirir. Değerini değiştiren özelliğin adı olan tek bir parametre alır. .NET MAUI'de kullanılan bağlama sistemi bu arabirimi anlar ve bu olayı dinler. üzerinde bir özellik değiştiğinde viewmodel ve olayı tetiklediğinde, bağlama değişikliğin hedefini bildirir.
Bunun bir çalışanla viewmodelİk uygulamasında nasıl çalıştığını düşünün. , viewmodel çalışanı temsil eden, çalışanın adı gibi özelliklere sahiptir. viewmodel arabirimini INotifyPropertyChanged uygular ve özelliği değiştiğinde NamePropertyChanged olayı şu şekilde tetikler:
using System.ComponentModel;
public class EmployeeViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler? PropertyChanged;
private Employee _model;
public string Name
{
get {...}
set
{
_model.Name = value;
OnPropertyChanged(nameof(Name))
}
}
protected void OnPropertyChanged(string propertyName) =>
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
Çalışanın ayrıntılarını açıklayan görünüm, 'nin Name özelliğine viewmodelbağlı bir etiket denetimi içerir:
<Label Text="{Binding Name}" />
Name içinde özelliği değiştiğindeviewmodelPropertyChanged, olay bu özelliğin adıyla oluşturulur. Bağlama olayı dinler ve ardından özelliğin değiştiğini etikete Name bildirir. Ardından etiketin Text özelliği en son değerle güncelleştirilir.