Tag Archives: Xamarin MVVM Prism

Xamarin Forms Menggunakan Prism Part 1

Posted on by
Reply

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