Tag Archives: Xamarin Forms MVVM

Xamarin Forms MVVM : Mengirimkan Parameter Antar Halaman

Posted on by
Reply

Pada framework Prism cara mengirimkan parameter antar halaman sedikit berbeda. Untuk mengirimkan data dari Main Page yang akan diterima oleh About Page, maka tambahkan kode di bawah ini pada bagian MainPageViewModel.cs

        private async void ExecuteNavigateCommand()
        {
            //menambahkan parameter
            var p = new NavigationParameters();
            p.Add("title", "Hello from MainPage");
            await NavigationService.NavigateAsync("AboutPage",p);
        }

Untuk mengambil nilai yang dikirimkan dari MainPage maka kita dapat menggunakan event OnNavigatedTo pada AboutPageViewModel.cs. 

        public override void OnNavigatedTo(INavigationParameters parameters)
        {
            Deskripsi = parameters.GetValue<string>("title");
        }

Properti parameters.GetValue digunakan untuk mengambil data yang dikirimkan dari MainPage. Tampilan dari About Page setelah menerima nilai parameter adalah sebagai berikut.

image

Parameter juga dapat dikirimkan dalam bentuk query string. Untuk menambahkan parameter dalam bentuk query string anda dapat menambahkan kode berikut.

        private async void ExecuteNavigateCommand()
        {
            var nama = "Erick Kurniawan";
            var alamat = "Jogja";
            var p = new NavigationParameters($"nama={nama}&alamat={alamat}");
            p.Add("title", "Hello from MainPage");
            await NavigationService.NavigateAsync("AboutPage",p);
        }

Untuk mengambil parameter berupa query string caranya adalah sebagai berikut:

        public override void OnNavigatedTo(INavigationParameters parameters)
        {
            Deskripsi = parameters.GetValue<string>("title") + " Nama: "+
                parameters.GetValue<string>("nama") + " Alamat: "+
                parameters.GetValue<string>("alamat");
        }

Confirming Navigation

Confirming Navigation dapat digunakan untuk menambahkan kondisi untuk mengijinkan atau tidak mengijinkan navigasi ke halaman lain.

Untuk tidak mengijinkan proses navigasi ke halaman lain dari halaman MainPage maka tambahkan kode untuk mengimplementasikan interface IConfirmNavigation berikut ini.

public class MainPageViewModel : ViewModelBase,IConfirmNavigation
    {}

Kemudian implementasikan method CanNavigate berikut ini.

        public bool CanNavigate(INavigationParameters parameters)
        {
            return false;
        }

Kode diatas digunakan untuk mencegah form MainPage untuk navigasi ke form lain.

Anda juga dapat menambahkan dialog untuk konfirmasi, misal jika pengguna memilih “Accept” (return true) berarti akan dinavigasi ke halaman About.

Tambahkan interface IConfirmNavigationAsync.

public class MainPageViewModel : ViewModelBase,IConfirmNavigationAsync{}
        public MainPageViewModel(INavigationService navigationService,IPageDialogService dialogService)
            : base(navigationService)
        {
            Title = "Main Page";
            _dialogService = dialogService;
        }

Kemudian tambahkan juga kode untuk menampilkan dialog box.

        public Task<bool> CanNavigateAsync(INavigationParameters parameters)
        {
            return _dialogService.DisplayAlertAsync("My Title", "Save?", 
                "Accept", "Cancel");
        }

image

        private async void ExecuteNavigateCommand()
        {
            //menambahkan parameter
            var p = new NavigationParameters();
            p.Add("title", "Hello from MainPage");
            await NavigationService.NavigateAsync("AboutPage",p);
        }

Xamarin MVVM Prism : Navigasi pada Prism

Posted on by
Reply

Pada artikel ini akan dibahas bagaimana cara untuk membuat navigasi antar halaman pada Xamarin Forms menggunakan Prism Framework. Cara yang digunakan pada framework prism berbeda dengan cara navigasi yang sudah kita bahas pada bab sebelumnya.

Untuk menambahkan halaman baru, Tambahkan halaman baru dengan nama AboutPage,

image

Setelah membuat halaman About Page, maka secara otomatis juga akan dibuatkan AboutPageViewModel.cs pada folder ViewModel.

image

Pada AboutPageViewModel.cs, tambahkan kode berikut:

	public class AboutPageViewModel : ViewModelBase
	{
        public AboutPageViewModel(INavigationService navigationService)
             : base(navigationService)
        {
            Title = "About Page";
            Deskripsi = "Ini adalah halaman About pada Aplikasi Coba Prism";
        }

        private string _deskripsi;

        public string Deskripsi
        {
            get { return _deskripsi; }
            set { SetProperty(ref _deskripsi, value); }
        }
    }

Untuk menambahkan tombol Navigasi pada halaman MainPage, tambahkan kode berikut pada MainPage.xaml.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ContohPrism.Views.MainPage"
             Title="{Binding Title}">
    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Label Text="Welcome to Xamarin Forms and Prism!" />
        <Button Text="About Page" Command="{Binding NavigateCommand}" />
    </StackLayout>
</ContentPage>

Untuk menambahkan event handler yang akan mengarahkan Navigasi ke halaman About, tambahkan DelegateCommand pada MainPageViewModel.cs

public class MainPageViewModel : ViewModelBase
    {
        public MainPageViewModel(INavigationService navigationService)
            : base(navigationService)
        {
            Title = "Main Page";
        }

        private DelegateCommand _navigateCommand;
        public DelegateCommand NavigateCommand =>
            _navigateCommand ?? (_navigateCommand = new DelegateCommand(ExecuteNavigateCommand));

        private async void ExecuteNavigateCommand()
        {
            await NavigationService.NavigateAsync("AboutPage");
        }
    }

Kemudian jalankan aplikasi untuk mencoba menjalankan navigasi halaman.

imageimage

	public class AboutPageViewModel : ViewModelBase
	{
        public AboutPageViewModel(INavigationService navigationService)
             : base(navigationService)
        {
            Title = "About Page";
            Deskripsi = "Ini adalah halaman About pada Aplikasi Coba Prism";
        }

        private string _deskripsi;

        public string Deskripsi
        {
            get { return _deskripsi; }
            set { SetProperty(ref _deskripsi, value); }
        }
    }

Xamarin MVVM Prism : Navigasi pada Prism

Posted on by
Reply

Pada artikel ini akan dibahas bagaimana cara untuk membuat navigasi antar halaman pada Xamarin Forms menggunakan Prism Framework. Cara yang digunakan pada framework prism berbeda dengan cara navigasi yang sudah kita bahas pada bab sebelumnya.

Untuk menambahkan halaman baru, Tambahkan halaman baru dengan nama AboutPage,

image

Setelah membuat halaman About Page, maka secara otomatis juga akan dibuatkan AboutPageViewModel.cs pada folder ViewModel.

image

Pada AboutPageViewModel.cs, tambahkan kode berikut:

	public class AboutPageViewModel : ViewModelBase
	{
        public AboutPageViewModel(INavigationService navigationService)
             : base(navigationService)
        {
            Title = "About Page";
            Deskripsi = "Ini adalah halaman About pada Aplikasi Coba Prism";
        }

        private string _deskripsi;

        public string Deskripsi
        {
            get { return _deskripsi; }
            set { SetProperty(ref _deskripsi, value); }
        }
    }

Untuk menambahkan tombol Navigasi pada halaman MainPage, tambahkan kode berikut pada MainPage.xaml.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ContohPrism.Views.MainPage"
             Title="{Binding Title}">
    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Label Text="Welcome to Xamarin Forms and Prism!" />
        <Button Text="About Page" Command="{Binding NavigateCommand}" />
    </StackLayout>
</ContentPage>

Untuk menambahkan event handler yang akan mengarahkan Navigasi ke halaman About, tambahkan DelegateCommand pada MainPageViewModel.cs

public class MainPageViewModel : ViewModelBase
    {
        public MainPageViewModel(INavigationService navigationService)
            : base(navigationService)
        {
            Title = "Main Page";
        }

        private DelegateCommand _navigateCommand;
        public DelegateCommand NavigateCommand =>
            _navigateCommand ?? (_navigateCommand = new DelegateCommand(ExecuteNavigateCommand));

        private async void ExecuteNavigateCommand()
        {
            await NavigationService.NavigateAsync("AboutPage");
        }
    }

Kemudian jalankan aplikasi untuk mencoba menjalankan navigasi halaman.

imageimage

	public class AboutPageViewModel : ViewModelBase
	{
        public AboutPageViewModel(INavigationService navigationService)
             : base(navigationService)
        {
            Title = "About Page";
            Deskripsi = "Ini adalah halaman About pada Aplikasi Coba Prism";
        }

        private string _deskripsi;

        public string Deskripsi
        {
            get { return _deskripsi; }
            set { SetProperty(ref _deskripsi, value); }
        }
    }

Xamarin MVVM Prism–Menggunakan Delegates Command

Posted on by
Reply

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