Apa yang dimaksud dengan MVVM?
Aplikasi MAUI .NET yang tidak menggunakan MVVM umumnya memiliki lebih banyak kode dalam file code-behind mereka. File code-behind di .NET MAUI mengikuti pola ini: {something}.xaml.cs. Sebagian besar kode dalam file code-behind biasanya mengontrol perilaku antarmuka pengguna (UI). Perilaku UI dapat mencakup apa pun yang terjadipada UI, seperti mengubah warna atau beberapa teks. Dan itu dapat mencakup apa pun yang terjadi karena UI, termasuk handler klik tombol.
Salah satu masalah dengan pendekatan ini adalah sulit untuk menulis pengujian unit terhadap file code-behind. File code-behind sering mengasumsikan status aplikasi yang dibuat dengan mengurai XAML atau bahkan dibuat oleh halaman lain. Kondisi ini sulit ditangani dalam runner pengujian unit yang bahkan mungkin tidak berjalan pada perangkat seluler, apalagi dengan antarmuka pengguna. Jadi, pengujian unit jarang dapat menguji perilaku UI dalam file-file ini.
Tetapi di sinilah pola MVVM berguna. Ketika digunakan dengan benar, pola MVVM memecahkan masalah ini dengan memindahkan sebagian besar logika perilaku UI ke kelas yang dapat diuji unit yang disebut viewmodel. Pola MVVM paling umum digunakan dengan kerangka kerja yang mendukung pengikatan data. Itu karena dengan .NET MAUI, Anda dapat mengikat data setiap elemen UI ke viewmodel dan menghilangkan atau hampir menghilangkan kode dalam tampilan atau kode di belakang.
Apa saja bagian dari aplikasi MVVM?
viewmodel Meskipun merupakan bagian unik dari pola MVVM, pola juga mendefinisikan bagian model dan bagian tampilan. Definisi bagian-bagian ini konsisten dengan beberapa pola umum lainnya, seperti Model-View-Controller (MVC).
Apa itu model?
Dalam aplikasi MVVM, istilah model digunakan untuk menunjukkan data dan operasi bisnis Anda. Model tidak melibatkan dirinya sendiri dengan presentasi pengguna aplikasi.
Aturan yang berguna untuk menentukan kode apa yang termasuk dalam model adalah bahwa kode tersebut harus portabel di berbagai platform. Dari aplikasi seluler hingga antarmuka web atau bahkan program baris perintah, menggunakan model yang sama di semua instans. Ini tidak terkait dengan bagaimana informasi ditampilkan kepada pengguna.
Ketika Anda memikirkan aplikasi SDM dari skenario kami, model mungkin menyertakan Employee kelas dan Department kelas yang menyimpan data dan logika tentang entitas tersebut. Model ini juga dapat mencakup hal-hal seperti EmployeeRepository kelas yang menyimpan logika persistensi. Beberapa pola desain perangkat lunak lainnya akan menganggap hal-hal seperti repositori sebagai terpisah dari model. Tetapi dalam konteks MVVM, kami sering merujuk ke logika bisnis atau data bisnis apa pun sebagai bagian dari model.
Berikut adalah dua contoh model di C#:
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() { ... }
...
}
Apa itu tampilan?
Kode tampilan mengontrol hal-hal yang langsung berinteraksi dengan pengguna, seperti kontrol seperti tombol dan bidang entri, serta elemen visual murni lainnya seperti tema, gaya, dan font.
Di .NET MAUI, Anda tidak perlu menulis kode C# apa pun untuk menghasilkan tampilan sendiri. Sebagai gantinya, Anda sering menentukan tampilan Anda dengan file XAML. Tentu saja, ada situasi yang meminta kontrol pengguna kustom, di mana Anda membuat tampilan Anda sendiri melalui kode.
Apa itu viewmodel?
Itu membawa kita kembali ke viewmodel. viewmodel adalah perantara antara logika bisnis (model) kami dan pandangan kami (UI).
Pikirkan tentang apa yang viewmodel mungkin dilakukan untuk aplikasi HR. Katakanlah ada tampilan yang menampilkan waktu liburan karyawan yang tersedia, dan Anda ingin saldo liburan ditampilkan sebagai "2 minggu, 3 hari, 4 jam." Tetapi logika bisnis dalam model memberikan nilai yang sama dengan 13,5 hari, angka desimal yang menunjukkan total hari dalam hari kerja 8 jam. Model objek mungkin terlihat seperti daftar berikut:
Model – Kelas
Employee, yang mencakup metode:public decimal GetVacationBalanceInDays() { //Some math that calculates current vacation balance ... }ViewModel – Kelas
EmployeeViewModelyang memiliki properti seperti ini: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" } } }Tampilan – Halaman XAML yang berisi satu label dan tombol tutup. Label memiliki pengikatan ke
viewmodelproperti :<Label Text="{Binding FormattedVacationBalance}" />Anda kemudian hanya perlu
BindingContextuntuk halaman yang diatur ke instansEmployeeViewModel.
Dalam contoh ini, model berisi logika bisnis. Logika ini tidak terikat ke tampilan visual atau perangkat. Anda dapat menggunakan logika yang sama untuk perangkat genggam atau komputer desktop. Tampilan tidak tahu apa-apa tentang logika bisnis. Kontrol tampilan, seperti label, tahu cara mendapatkan teks di layar, tetapi tidak peduli apakah itu adalah saldo liburan atau string acak. Tahu viewmodel sedikit dari kedua dunia, sehingga dapat bertindak sebagai perantara.
Yang menarik adalah bagaimana viewmodel capaian menjadi perantara: Ini mengekspos properti tempat tampilan dapat mengikat. Properti publik adalah satu-satunya cara menyediakan viewmodel data. Ini membawa kita ke mengapa itu disebutviewmodel. "Model" dalam MVVM mewakili struktur, data, dan logika proses bisnis, viewmodel mewakili struktur, data, dan logika yang diperlukan tampilan.
Bagaimana cara kerja tampilan dengan viewmodel?
Saat Anda melihat hubungan viewmodel yang dimiliki dengan model, itu adalah hubungan kelas ke kelas standar. viewmodel memiliki instans model dan mengekspos aspek model ke tampilan melalui properti. Tapi, bagaimana tampilan mendapatkan dan mengatur properti pada viewmodel? viewmodel Saat perubahan, bagaimana tampilan memperbarui kontrol visual dengan nilai baru? Jawabannya adalah pengikatan data.
Properti viewmodel's dibaca pada saat objek terikat ke tampilan. Tapi, pengikatan tidak memiliki cara untuk mengetahui apakah viewmodelproperti 's berubah setelah pengikatan diterapkan ke tampilan. Mengubah viewmodel tidak secara otomatis menyebarkan nilai baru melalui pengikatan ke tampilan. Untuk memperbarui dari ke viewmodel tampilan, viewmodel harus mengimplementasikan System.ComponentModel.INotifyPropertyChanged antarmuka.
Antarmuka INotifyPropertyChanged mendeklarasikan satu peristiwa bernama PropertyChanged. Dibutuhkan satu parameter, nama properti yang mengubah nilainya. Sistem pengikatan yang digunakan dalam .NET MAUI memahami antarmuka ini dan mendengarkan peristiwa tersebut. Saat properti berubah pada viewmodel dan menaikkan peristiwa, pengikatan akan memberi tahu target perubahan.
Pikirkan tentang cara kerjanya dalam aplikasi SDM dengan karyawan viewmodel. memiliki viewmodel properti yang mewakili karyawan, seperti nama karyawan. Mengimplementasikan viewmodelINotifyPropertyChanged antarmuka dan ketika Name properti berubah, meningkatkan PropertyChanged peristiwa, seperti ini:
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));
}
Tampilan yang menjelaskan detail karyawan berisi kontrol label yang terikat ke viewmodelproperti 's Name :
<Label Text="{Binding Name}" />
Name Ketika properti berubah dalam viewmodel, PropertyChanged peristiwa dinaikkan dengan nama properti tersebut. Pengikatan mendengarkan peristiwa lalu memberi tahu label bahwa Name properti berubah. Kemudian, properti label Text diperbarui dengan nilai terbaru.