Xamarin Forms MVVM : Mengirimkan Parameter Antar Halaman

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);
        }
Advertisements
Posted in Xamarin, Xamarin Forms | Tagged | Leave a comment

Xamarin MVVM Prism : Navigasi pada Prism

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); }
        }
    }
Posted in Xamarin Forms | Tagged , | Leave a comment

Free E-Book: Membangun Aplikasi Realtime dengan ASP.NET Core SignalR

image

Buku ini ditujukan untuk pengembang software yang ingin membuat aplikasi real-time (Real-Time Application/RTA). Saat ini telah tersedia library yang mempermudah developer untuk membangun aplikasi real-time, salah satunya adalah ASP.NET SignalR.

Buku ini akan memberikan panduan untuk menyiapkan backend yang berperan sebagai server. Sedangkan panduan untuk membuat aplikasi client akan diberikan dalam tiga tipe project yaitu project aplikasi web, aplikasi desktop atau aplikasi mobile platform Android.

Adapun daftar isi dari buku ini adalah sebagai berikut:

Bab 1 Pendahuluan    3

  • Socket    3
  • Multicast    8
  • Aplikasi Web    11
  • Web Socket    12
  • ASP.NET SignalR    12
  • SignalR dan WebSocket    14
  • Transport dan Fallback    14
  • ASP.NET Core SignalR    15
  • Kebutuhan Client    16
  • Javascript Client    16
  • .NET Client    17
  • Source Code    17
  • Referensi    17

Bab 2 Aplikasi ASP.NET Core SignalR    17

  • Membuat Web Project    18
  • Menambahkan SignalR Hub    21
  • Konfigurasi SignalR    21
  • Menambahkan SignalR Client    23
  • Menjalankan Aplikasi    24
  • Source Code    25
  • Referensi    25

Bab 3 SignalR dengan TypeScript dan Webpack    26

  • Membuat ASP.NET Core Web Application    26
  • Konfigurasi Webpack dan TypeScript    27
  • Pengaturan Aplikasi ASP.NET Core    32
  • Client Server Communication    33
  • Mencoba Menjalankan Aplikasi    35
  • Source Code    36
  • Referensi    36

Bab 4 Hosting SignalR pada Microsoft Azure    37

  • Membuat Instance Azure Apps    37
  • Konfigurasi Azure Apps    39
  • Mengunggah Aplikasi    40
  • Bab 5 Windows Form Client    44
  • Membuat Project Windows Form    44
  • Menambahkan NuGet Package SignalR    44
  • Mendesain Form Chat    45
  • Menambahkan Kode Untuk Koneksi    45
  • Menjalankan Aplikasi Windows Forms    49
  • Referensi    51
  • Bab 6 Mobile Client (Xamarin Forms)    52
  • Membuat Project Xamarin Cross Platform    52
  • Menambahkan Library SignalR Pada Xamarin Forms    53
  • Membuat Form Untuk Mengirimkan Pesan    53
  • Menambahkan Kode untuk Menampilkan Data dan Kirim Data    54
  • Menjalankan Aplikasi Xamarin di Android Device/Emulator    57
  • Source Code    59
  • Referensi    59

Dan file dapat diunduh pada link berikut ini:

https://www.researchgate.net/publication/330105251_Seri_Belajar_ASPNET_Membangun_Aplikasi_Real-Time_dengan_ASPNET_Core_SignalR?fbclid=IwAR3PBeI7sYoN_bWbUMYbXwd1gXuN_YzI1l07yCasC8e25sQan2KYS7iBqDk

Untuk menghubungi penulis anda dapat mengirimkan email ke alamat erick@actual-training.com atau ke reza.faisal@gmail.com.

Jika anda tertarik untuk mengikuti pelatihan Xamarin anda dapat mengambil kelas pelatihan di http://actual-training.com.

Posted in .NET Core, ASP Core 2.0, ASP.NET SignalR Core | Tagged , , | Leave a comment

Xamarin MVVM Prism : Navigasi pada Prism

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); }
        }
    }
Posted in Xamarin Forms | Tagged , | Leave a comment

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

Posted in Xamarin Forms | Tagged , | Leave a comment

Xamarin Forms Menggunakan Prism Part 1

Apa itu Prism?

Prism adalah salah satu framework yang menggunakan pattern MVVM (Model View View Model) sehingga anda dapat membuat kode dengan lebih loosely coupled, maintanable, dan testable. Untuk menerapkan MVVM pattern pada Xamarin Forms, dapat digunakan beberapa jenis framework diantaranya adalah Prism, MvvMLight, FreshMvvM, dll

Kenapa Menggunakan Prism?

Prism adalah framework MVVM yang lengkap, simple, dan sangat berguna. Prism menangani masalah navigation, events, modules, dan semua yang dibutuhkan untuk membuat project dari yang kecil ke besar.

Bagaimana Cara install Prism?

Pada Visual Studio 2017 tambahkan Visual Studio Extension pilih Tools – kemudian pilih Extensions and Update.

image

Kemudian cari extension dengan nama Prism.Template.Pack.

image

Setelah package tersebut selesai diinstall maka anda dapat membuat project Xamarin Forms dengan menggunakan Prism.

Membuat Project Prism Baru

Pada Visual Studio buat project baru, kemudian pilih Prism – Prism Blank App Xamarin Form- kemudian beri nama ContohPrism.

image

Akan muncul tampilan seperti gambar dibawah ini untuk pemilihan target aplikasi yang akan dibuat. Pada contoh dibawah ini dipilih platform Android dan IOS.

image

Sedangkan untuk pilihan container pilih Unity container, kemudian tekan tombol create project.

Setelah project jadi, anda dapat melihat bahwa ada 3 project yang sudah dibuat. Pada project ContohPrism, buka file App.xaml, maka akan dapat dilihat bahwa pada project ini menggunakan Prism Framwork.

image

Buka file App.xaml. file ini adalah file yang pertama kali akan dijalankan.

<?xml version="1.0" encoding="utf-8" ?>
<prism:PrismApplication xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Unity;assembly=Prism.Unity.Forms"
             x:Class="ContohPrism.App">
	<Application.Resources>

		<!-- Application resource dictionary -->

	</Application.Resources>
</prism:PrismApplication>

Kemudian pada file App.xaml.cs dapat dilihat bahwa pada aplikasi yang dibuat, sudah didaftarkan halaman yang pertama kali akan ditampilkan ketika aplikasi dijalankan yaitu halaman MainPage.

protected override async void OnInitialized()
        {
            InitializeComponent();
            await NavigationService.NavigateAsync("NavigationPage/MainPage");
        }

        protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {
            containerRegistry.RegisterForNavigation<NavigationPage>();
            containerRegistry.RegisterForNavigation<MainPage, MainPageViewModel>();
        }

Pada Prism sebelum anda membuat halaman, anda harus terlebih dahulu menyiapkan ViewModel yang nantinya akan digunakan pada halaman tersebut. Misalnya untuk halaman MainPage dibuat file MainPageViewModel.

Kemudian semua halaman yang akan digunakan pada aplikasi juga harus didaftarkan dengan menggunakan objek containerRegistery.

Pada kode diatas dapat dilihat bahwa halaman yang pertama kali akan dijalankan adalah halaman MainPage. Ini dapat dilihat pada method OnInitialized().

Buka halaman MainPageViewModel, halaman ini berisi objek-objek yang nanti akan dapat digunakan pada MainPage.xaml.

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

Kemudian ViewModel tersebut akan di binding kedalam halaman 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!" />
    </StackLayout>

</ContentPage>

Klik kanan pada project Android, kemudian pilih Set As Startup Project, kemudian jalankan aplikasi, maka akan ditampilkan tampilan sebagai berikut:

image

Posted in Xamarin Forms | Tagged , , | Leave a comment

Video Tutorial Xamarin: Pengaksesan RESTful API Part 4

Pada video ini akan dijelaskan cara untuk mengakses backend services berupa RESTful API dari Xamarin Forms.

Posted in Uncategorized | Tagged | Leave a comment