Apa itu MVVM pada Xamarin Forms?

Pengembang Xamarin.Forms biasanya membuat antarmuka pengguna di XAML, dan kemudian menambahkan kode di belakang( code behind). Saat aplikasi dimodifikasi, kode bertambah banyak, dan kompleksitas bertambah, masalah pemeliharaan akan muncul. Masalah-masalah ini termasuk ketergantungan ketat (tight coupling) antara kontrol UI dan logika bisnis, yang akan meningkatkan biaya pembuatan modifikasi UI, dan kesulitan ketika  menggunakan unit testing terhadap kode tersebut.

Model-View-ViewModel (MVVM) membantu memisahkan logika bisnis dan presentasi aplikasi dari antarmuka pengguna (UI). Mempertahankan pemisahan yang bersih (loose coupling) antara logika aplikasi dan UI akan membantu mengatasi berbagai masalah pengembangan dan dapat membuat aplikasi lebih mudah untuk diuji, dipelihara, dan dikembangkan. Ini juga dapat meningkatkan peluang penggunaan kembali kode dan memungkinkan pengembang dan desainer UI untuk lebih mudah berkolaborasi saat mengembangkan bagian aplikasi masing-masing.

Ada tiga komponen inti dalam MVVM yaitu model, view, dan view mode. Masing-masing mempunyai  tanggung jawab  yang berbeda. Gambar berikut  menunjukkan hubungan antara tiga komponen.

View bertanggung jawab untuk menentukan struktur, tata letak, dan tampilan dari apa yang dilihat pengguna di layar. Idealnya, setiap tampilan didefinisikan dalam XAML, dengan code behind seminimal mungkin yang tidak mengandung logika bisnis. Namun, dalam beberapa kasus, code behind mungkin berisi logika UI yang mengimplementasikan perilaku visual yang sulit diekspresikan dalam XAML, seperti animasi.

View Model mengimplementasikan properti dan command yang akan dibinding kedalam tampilan, dan memberi tahu tampilan tentang perubahan status apa pun melalui peristiwa pemberitahuan perubahan (notify property changed). Properti dan command yang disediakan view model menentukan fungsionalitas yang akan ditawarkan oleh UI, tetapi view menentukan bagaimana fungsionalitas itu akan ditampilkan.

Kelas Model adalah kelas non-visual yang merangkum data yg digunakan pada aplikasi. Oleh karena itu, model dapat dianggap mewakili model domain aplikasi, yang biasanya menyertakan model data bersama dengan logika bisnis dan validasi. Contoh objek model termasuk data transfer object (DTO), Plain Old C# Object (POCO), dan objek entitas.

Pada contoh dibawah ini akan ditunjukan cara menggunakan mvvm pattern di Xamarin Forms.

Buat Content Page dengan nama CoffeeEquipmentPage.xaml pada folder View

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SampleMVVM.Views.CoffeeEquipmentPage">
    <Grid RowDefinitions="*,Auto,Auto,*">
    <Label Grid.Row="1" HorizontalOptions="Center"
               FontSize="Large" Text="{Binding CountDisplay}" />
<Button x:Name="btnCount" Clicked="btnCount_Clicked" Grid.Row="2" Text="Click Me" />
    </Grid>
</ContentPage>

Kemudian tambahkan code behind sebagai berikut. Properti CountDisplay akan dibinding kedalam Label. Pada contoh dibawah ini masih digunakan event handler untuk aktivitas penekanan tombol, namun pada contoh selanjutnya akan digunakan object Command.

namespace SampleMVVM.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class CoffeeEquipmentPage : ContentPage
    {
        public CoffeeEquipmentPage()
        {
            InitializeComponent();
            BindingContext = this;
        }

        int count = 0;
        private string countDisplay = "Click Me";
        public string CountDisplay
        {
            get { return countDisplay; }
            set
            {
                if (value == countDisplay)
                    return;

                countDisplay = value;
                OnPropertyChanged();
            }
        }

        private void btnCount_Clicked(object sender, EventArgs e)
        {
            count++;
            CountDisplay = $"You clicked {count} time";
        }
    }
}

Pada kode dibawah ini, kita akan menggunakan object Command untuk membinding proses penekanan tombol.. Modifikasi kode sebelumnya pada XAML Page.

    <Grid RowDefinitions="*,Auto,Auto,*">
        <Label Grid.Row="1" HorizontalOptions="Center"
               FontSize="Large" Text="{Binding CountDisplay}" />
        <Button 
            Command="{Binding IncreaseCount}" Grid.Row="2" Text="Click Me" />
    </Grid>

Kemudian pada code behind tambahkan kode berikut. Object Command akan dibinding kedalam button control. Object command sendiri akan digunakan untuk memanggil method OnIncrease untuk mengubah nilai variabel count. Class ini juga harus diturunkan dari BindableObject agar dapat menggunakan  objek OnPropertyChanged() untuk memberi tahu ke UI (form) ada perubahan pada property CountDisplay, sehingga nilai label di form juga ikut berubah.

        public CoffeeEquipmentPage()
        {
            InitializeComponent();
            IncreaseCount = new Command(OnIncrease);
            BindingContext = this;
        }

        private void OnIncrease()
        {
            count++;
            CountDisplay = $"You clicked {count} time";
        }

        public ICommand IncreaseCount { get; }

        int count = 0;
        private string countDisplay = "Click Me";
        public string CountDisplay
        {
            get { return countDisplay; }
            set
            {
                if (value == countDisplay)
                    return;

                countDisplay = value;
                OnPropertyChanged();
            }
        }
    }

Anda juga dapat memisahkan class ViewModel kedalam folder tersendiri agar lebih mudah untuk dimaintain. Buat folder ViewModel untuk menambahkan semua class viewmodel yang akan dibinding kedalam view. Pada ViewModel tambahkan class CoffeeEquipmentViewModel.cs, kemudian pindahkan kodenya.

    public class CoffeeEquipmentViewModel : BindableObject
    {
        public ICommand IncreaseCount { get; }
        public CoffeeEquipmentViewModel()
        {
            IncreaseCount = new Command(OnIncrease);
        }

        int count = 0;
        private string countDisplay = "Click Me";
        public string CountDisplay
        {
            get { return countDisplay; }
            set
            {
                if (value == countDisplay)
                    return;

                countDisplay = value;
                OnPropertyChanged();
            }
        }

        private void OnIncrease()
        {
            count++;
            CountDisplay = $"You clicked {count} time";
        }
    }

Kemudian pada XAML tambahkan kode berikut. Pada XAML dapat ditambahkan namespace viewmodels yang dapat digunakan secara deklaratif pada XAML.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:viewmodels="clr-namespace:SampleMVVM.ViewModels"
             x:Class="SampleMVVM.Views.CoffeeEquipmentPage"
             x:DataType="viewmodels:CoffeeEquipmentViewModel">
    <ContentPage.BindingContext>
        <viewmodels:CoffeeEquipmentViewModel/>
    </ContentPage.BindingContext>
    
    <Grid RowDefinitions="*,Auto,Auto,*">
        <Label Grid.Row="1" HorizontalOptions="Center"
               FontSize="Large" Text="{Binding CountDisplay}" />
        <Button 
            Command="{Binding IncreaseCount}" Grid.Row="2" Text="Click Me" />
    </Grid>
</ContentPage>

Pada blog selanjutnya akan dibahas bagaimana cara menggunakan MVVM Helper untuk mempermudah bekerja dengan MVVM di Xamarin Forms.