Bagikan melalui

Ringkasan Bab 18. MVVM

  • Artikel

Catatan

Buku ini diterbitkan pada musim semi 2016, dan belum diperbarui sejak saat itu. Ada banyak dalam buku yang tetap berharga, tetapi beberapa materi sudah kedaluarsa, dan beberapa topik tidak lagi sepenuhnya benar atau lengkap.

Salah satu cara terbaik untuk merancang aplikasi adalah dengan memisahkan antarmuka pengguna dari kode yang mendasar, yang kadang-kadang disebut logika bisnis. Ada beberapa teknik, tetapi yang disesuaikan untuk lingkungan berbasis XAML dikenal sebagai Model-View-ViewModel atau MVVM.

Keterkabelan MVVM

Aplikasi MVVM memiliki tiga lapisan:

  • Model menyediakan data yang mendasar, terkadang melalui file atau akses web
  • Tampilan adalah antarmuka pengguna atau lapisan presentasi, umumnya diimplementasikan dalam XAML
  • ViewModel menyambungkan Model dan Tampilan

Model tidak tahu viewModel dan ViewModel tidak tahu tampilan. Ketiga lapisan ini umumnya terhubung satu sama lain menggunakan mekanisme berikut:

Tampilan, ViewModel, dan Tampilan

Dalam banyak program yang lebih kecil (dan bahkan yang lebih besar), seringkali Model tidak ada atau fungsionalitasnya diintegrasikan ke dalam ViewModel.

ViewModels dan pengikatan data

Untuk terlibat dalam pengikatan data, ViewModel harus mampu memberi tahu Tampilan saat properti ViewModel telah berubah. ViewModel melakukan ini dengan mengimplementasikan INotifyPropertyChanged antarmuka di System.ComponentModel namespace. Ini adalah bagian dari .NET daripada Xamarin.Forms. (Umumnya ViewModels mencoba mempertahankan kemandirian platform.)

Antarmuka INotifyPropertyChanged mendeklarasikan satu peristiwa bernama PropertyChanged yang menunjukkan properti yang telah berubah.

Jam ViewModel

DateTimeViewModel di Xamarin.Formspustaka Book.Toolkit menentukan properti jenis DateTime yang berubah berdasarkan timer. Kelas mengimplementasikan INotifyPropertyChanged dan mengaktifkan PropertyChanged peristiwa setiap kali DateTime properti berubah.

Sampel MvvmClock membuat instans ViewModel ini dan menggunakan pengikatan data ke ViewModel untuk menampilkan informasi tanggal dan waktu yang diperbarui.

Properti interaktif dalam ViewModel

Properti dalam ViewModel dapat lebih interaktif, seperti yang ditunjukkan oleh SimpleMultiplierViewModel kelas , yang merupakan bagian dari sampel SimpleMultiplier . Pengikatan data menyediakan nilai multiplicand dan multiplier dari dua Slider elemen dan menampilkan produk dengan Label. Namun, Anda dapat membuat perubahan ekstensif pada antarmuka pengguna ini di XAML tanpa perubahan konsekuensi pada ViewModel atau file code-behind.

ViewModel Warna

ColorViewModel di Xamarin.Formspustaka Book.Toolkit mengintegrasikan model warna RGB dan HSL. Ini ditunjukkan dalam sampel HslSliders:

Cuplikan layar tiga TK

Menyederhanakan ViewModel

Kode di ViewModels dapat disederhanakan dengan menentukan OnPropertyChanged metode menggunakan CallerMemberName atribut , yang mendapatkan nama properti panggilan secara otomatis. Kelas ViewModelBase di Xamarin.Formspustaka Book.Toolkit melakukan ini dan menyediakan kelas dasar untuk ViewModels.

Antarmuka Perintah

MVVM bekerja dengan pengikatan data, dan pengikatan data berfungsi dengan properti, sehingga MVVM tampaknya kekurangan dalam hal menangani Clicked peristiwa Button atau Tapped peristiwa TapGestureRecognizer. Untuk mengizinkan ViewModels menangani peristiwa tersebut, Xamarin.Forms mendukung antarmuka perintah.

Antarmuka perintah memanifestasikan dirinya dalam Button dengan dua properti publik:

Untuk mendukung antarmuka perintah, ViewModel harus menentukan properti jenis ICommand yang kemudian terikat data ke Command properti Button. Antarmuka ICommand mendeklarasikan dua metode dan satu peristiwa:

Secara internal, ViewModel mengatur setiap properti jenis ICommand ke instans ICommand kelas yang mengimplementasikan antarmuka. Melalui pengikatan data, Button awalnya memanggil CanExecute metode , dan menonaktifkan dirinya sendiri jika metode mengembalikan false. Ini juga mengatur handler untuk CanExecuteChanged peristiwa dan panggilan CanExecute setiap kali peristiwa tersebut dipicu. Button Jika diaktifkan, metode Execute memanggil metode setiap kali diklikButton.

Anda mungkin memiliki beberapa ViewModels yang mendahului Xamarin.Forms, dan ini mungkin sudah mendukung antarmuka perintah. Untuk ViewModels baru yang dimaksudkan untuk digunakan hanya dengan Xamarin.Forms, Xamarin.Forms menyediakan Command kelas dan Command<T> kelas yang mengimplementasikan ICommand antarmuka. Jenis generik adalah jenis argumen ke Execute metode dan CanExecute .

Eksekusi metode sederhana

Sampel PowersOfThree menunjukkan cara menggunakan antarmuka perintah di ViewModel. Kelas PowersViewModel mendefinisikan dua properti jenis ICommand dan juga mendefinisikan dua properti privat yang diteruskannya ke konstruktor paling Command sederhana. Program ini berisi pengikatan data dari ViewModel ini ke Command properti dua Button elemen.

Elemen Button dapat dengan mudah diganti dengan TapGestureRecognizer objek di XAML tanpa perubahan kode.

Kalkulator, hampir

Sampel AddingMachine menggunakan Execute metode dan CanExecute dari ICommand. Ini menggunakan AdderViewModel kelas di Xamarin.Formspustaka Book.Toolkit. ViewModel berisi enam properti jenis ICommand. Ini diinisialisasi dari konstruktor dan Command konstruktor dan CommandCommand<T> konstruktor .Command<T>Command Kunci numerik dari mesin yang menambahkan semuanya terikat ke properti yang diinisialisasi dengan Command<T>, dan string argumen ke Execute dan CanExecute mengidentifikasi kunci tertentu.

ViewModels dan siklus hidup aplikasi

Yang AdderViewModel digunakan dalam sampel AddingMachine juga menentukan dua metode bernama SaveState dan RestoreState. Metode ini dipanggil dari aplikasi ketika tidur dan ketika dimulai lagi.