Xamarin MVVM Prism–Menggunakan Delegates Command

Pada subbab ini akan dibahas cara penggunaan Delegates Command pada Prism. Delegate Command digunakan untuk membinding event handler yang sudah dibuat pada ViewModel.

Sebagai contoh kita akan membuat aplikasi untuk membuat calculator sederhana yang mempunyai untuk menambah dan mengurangi data.

Pada Views tambahkan prism content page dengan nama CalculatorPage.xaml, maka secara otomatis akan dibuatkan file ViewModel degan nama CalculatorPageViewModel.cs.

image

Pada ViewModel tambahkan properti yang akan di-binding kedalam form.

public class CalculatorPageViewModel : ViewModelBase
	{
        public CalculatorPageViewModel(INavigationService navigationService)
            : base(navigationService)
        {
            Title = "Contoh Calculator";
        }

        private double _bilangan1;
        public double Bilangan1
        {
            get { return _bilangan1; }
            set { SetProperty(ref _bilangan1, value); }
        }

        private double _bilangan2;
        public double Bilangan2
        {
            get { return _bilangan2; }
            set { SetProperty(ref _bilangan2, value); }
        }

        private double _hasil;
        public double Hasil
        {
            get { return _hasil; }
            set { SetProperty(ref _hasil, value); }
        }
    }

Kemudian tambahkan juga form yang akan digunakan untuk menampilkan data dari ViewModel. Pada CalculatorPage.xaml, tambahkan kode berikut:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="ContohPrism.Views.CalculatorPage" Title="{Binding Title}">
    <StackLayout>
        <Entry Placeholder="Masukan bilangan 1" Keyboard="Numeric" Text="{Binding Bilangan1}" />
        <Entry Placeholder="Masukan bilangan 2" Keyboard="Numeric" Text="{Binding Bilangan2}" />
        <Entry Text="{Binding Hasil}" />
        <StackLayout Orientation="Horizontal">
            <Button Text="Tambah" Command="{Binding CalculateCommand}" />
        </StackLayout>
    </StackLayout>
</ContentPage>

Untuk membinding data kedalam entry dapat digunakan keyword Binding kemudian diikuti dengan nama objek properti yang akan dibinding.

Untuk event handler dapat ditambahkan binding pada property Command pada tombol. Untuk kode pembuatan event handler menggunakan Delegate Command adalah sebagai berikut:

        private DelegateCommand _calculateCommand;
        public DelegateCommand CalculateCommand =>
            _calculateCommand ?? (_calculateCommand = new DelegateCommand(ExecuteCalculateCommand));

        private void ExecuteCalculateCommand()
        {
            Hasil = Bilangan1 + Bilangan2;
        }

image

Advertisements

About Erick Kurniawan

IT Trainer, Consultant, & Microsoft Azure MVP Actual Training (http://actual-training.com)
This entry was posted in Xamarin Forms and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s