Pada tutorial .NET MAUI kali ini akan dibahas bagaimana penggunaan MVVM Pattern pada .NET MAUI. Untuk melihat tutorial MAUI yang lain, anda dapat melihat tautan blog berikut:
– Belajar .NET MAUI – Memulai .NET MAUI Project
– Belajar .NET MAUI – Basic Data Binding
Apa itu MVVM Pattern pada .NET MAUI
Model-View-ViewModel (MVVM) adalah arsitektur yang membantu memisahkan logika bisnis dan layer presentasi dari antarmuka pengguna. Dengan melakukan pemisahan yang jelas antara logika aplikasi dan antarmuka, MVVM membantu menyederhanakan berbagai masalah pada pengembangan aplikasi dan membuat aplikasi lebih mudah diuji, dipelihara, dan dikembangkan.
Berikut adalah penjelasan tentang bagian yang ada pada MVVM:
– Model: Model merepresentasikan data dan logika bisnis dari aplikasi. Ini berisi representasi dari objek domain (biasanya dari sumber data seperti database), class untuk mengakses data, serta logika bisnis yang diperlukan. Model ini independen dan tidak tergantung pada komponen yang lain.
– View: View merupakan komponen yang bertugas untuk menampilkan antarmuka pengguna. Pada .NET MAUI, tampilan adalah file XAML yang mendefinisikan tata letak dan komponen pada antarmuka.
– ViewModel: ViewModel berperan sebagai perantara antara Model dan View. ViewModel mengambil data dari Model, memprosesnya, dan menampilkan data tersebut di View. ViewModel juga menerima input dari pengguna melalui komponen View, memvalidasi input, dan memperbarui Model sesuai dengan input data pengguna. ViewModel juga independen dan tidak tergantung komponen lain, sehingga dapat diuji secara terpisah.
Untuk mencoba menggunakan MVVM pattern pada MAUI, tambahkan folder MVVM pada project anda, dan buat folder Models, Views, dan ViewModels.
Kemudian pada folder Models tambahkan class Customer.cs, tambahkan kode berikut
public class Customer
{
public string Name { get; set; } = null!;
public string? Street { get; set; }
public string? City { get; set; }
public string? State { get; set; }
public int ZipCode { get; set; }
public string? Phone { get; set; }
public DateTime BirthDay { get; set; }
public TimeSpan ContactTime { get; set; }
public double Balance { get; set; }
public bool ActiveCustomer { get; set; }
}
Kemudian tambahkan class CustomerViewModel.cs pada folder ViewModels.
public class CustomerViewModel
{
public Customer Customer { get; set; }
public CustomerViewModel()
{
Customer = new Customer
{
Name = "Jhon Doe",
Street = "123 Main St",
City = "Anytown",
State = "WA",
ZipCode = 98001,
Phone = "123-456-7890",
BirthDay = new DateTime(1980, 1, 1),
ContactTime = new TimeSpan(8, 0, 0),
Balance = 100.00,
ActiveCustomer = true
};
}
}
Untuk menampilkan data, pada folder Views tambahkan file xaml untuk menampikan desain dengan nama CustomerView.xaml.
<VerticalStackLayout Spacing="10" Padding="30">
<Label
Text="{Binding Customer.Name}"
FontSize="25"
VerticalOptions="Start"
HorizontalOptions="Start"/>
<Label
Text="{Binding Customer.Street}"
FontSize="25"
VerticalOptions="Start"
HorizontalOptions="Start" />
<Label
Text="{Binding Customer.City}"
FontSize="25"
VerticalOptions="Start"
HorizontalOptions="Start" />
<Label
Text="{Binding Customer.State}"
FontSize="25"
VerticalOptions="Start"
HorizontalOptions="Start" />
<Label
Text="{Binding Customer.ZipCode}"
FontSize="25"
VerticalOptions="Start"
HorizontalOptions="Start" />
<Label
Text="{Binding Customer.Phone}"
FontSize="25"
VerticalOptions="Start"
HorizontalOptions="Start" />
<HorizontalStackLayout Spacing="20">
<Label
Text="When to Call"
FontSize="25"
VerticalOptions="Center"
HorizontalOptions="Start" />
<TimePicker Time="{Binding Customer.ContactTime}"
FontSize="25"
VerticalOptions="Center"/>
</HorizontalStackLayout>
<HorizontalStackLayout Spacing="20">
<Label
Text="Active Customer"
FontSize="25"
VerticalOptions="Center"
HorizontalOptions="Start" />
<Switch IsToggled="{Binding Customer.ActiveCustomer}"
OnColor="Orange" ThumbColor="Green"
VerticalOptions="Center"/>
</HorizontalStackLayout>
<HorizontalStackLayout Spacing="20">
<Label
Text="Birthday"
FontSize="25"
VerticalOptions="Center"
HorizontalOptions="Start" />
<DatePicker Date="{Binding Customer.BirthDay}"
FontSize="25"
VerticalOptions="Center"/>
</HorizontalStackLayout>
<HorizontalStackLayout Spacing="20">
<Label
Text="Current Balance"
FontSize="25"
VerticalOptions="Center"
HorizontalOptions="Start" />
<Entry Text="{Binding Customer.Balance}"
FontSize="25"
VerticalOptions="Center"/>
</HorizontalStackLayout>
</VerticalStackLayout>
Keyword binding digunakan untuk mengambil nilai dari class ViewModel. Untuk menambahkan data binding pada code behind:
public partial class CustomerView : ContentPage
{
public CustomerView()
{
InitializeComponent();
BindingContext = new CustomerViewModel();
}
}
Jika dijalankan hasilnya sebagai berikut:
Binding Command
Pada contoh diatas sudah ditunjukan bagaimana cara membinding data dari objek ViewModel ke tampilan View. Selain binding ke view komponen yang dapat menampilkan data seperti Label dan TextBox, binding juga dapat dilakukan ke Command, contohnya untuk menangani penekanan tombol.
Pada folder ViewModels tambahkan class dengan nama CommandViewModel, kemudian tambahkan kode berikut:
public class CommandViewModel
{
public ICommand BtnClickCommand =>
new Command(() =>
App.Current.MainPage.DisplayAlert("Hello", "Hello Command", "OK"));
}
Kemudian tambahkan tombol pada View yang akan digunakan untuk membinding Command.
<VerticalStackLayout>
<Button Text="Click" Command="{Binding BtnClickCommand}"/>
</VerticalStackLayout>
Hasilnya dapat dilihat pada tampilan berikut:
Menggunakan INotifyPropertyChanged
Interface INotifyPropertyChanged dapat diimplementasikan pada objek ViewModel yang akan dibuat. Objek ini digunakan untuk memberitahu View / tampilan, biasanya View yang terikat (binding), bahwa nilai properti telah berubah. Sebagai contoh objek Employee dengan properti yang disebut Name. Ketika nilai dari Name berubah, INotifyPropertyChanged akan memicu event PropertyChanged yang memberitahu sistem binding bahwa data telah berubah, sehingga View / tampilan dapat diperbarui dengan nilai yang baru.
Berikut adalah contoh implementasinya, buat class dengan nama CalcViewModel.
public class CalcViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler? PropertyChanged;
private int num1;
private int num2;
private int answer;
public int Num1
{
get => num1;
set
{
num1 = value;
OnPropertyChanged();
}
}
public int Num2
{
get => num2;
set
{
num2 = value;
OnPropertyChanged();
}
}
public int Answer
{
get => answer;
set
{
answer = value;
OnPropertyChanged();
}
}
public ICommand SumCommand => new Command(() => Answer = Num1 + Num2);
protected void OnPropertyChanged([CallerMemberName] string name = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
}
Untuk membinding ViewModel tambahkan page berikut dengan nama CalcView.xaml
<VerticalStackLayout Margin="20" Spacing="20">
<Entry Placeholder="Number 1" Text="{Binding Num1}"/>
<Entry Placeholder="Number 2" Text="{Binding Num2}"/>
<Entry Placeholder="Answer" Text="{Binding Answer}"/>
<Button Command="{Binding SumCommand}" HorizontalOptions="Center" Text="Sum"/>
</VerticalStackLayout>
Kemudian pada code behind tambahkan kode:
public partial class CaclView : ContentPage
{
public CaclView()
{
InitializeComponent();
BindingContext = new CalcViewModel();
}
}
Hasilnya dapat dilihat sebagai berikut:
Penggunaan INotifyPropertyChanged sangat penting dalam pola desain MVVM karena memungkinkan pemisahan antara logika bisnis dan presentasi UI berupa View, serta memfasilitasi komunikasi dua arah antara View dan ViewModel.
Erick Kurniawan 
Leave a comment