Xamarin Forms MVVM : ListView dengan Menggunakan Prism

Pada bab ini akan dijelaskan bagaimana cara membinding data kedalam ListView dengan menggunakan framewrok Prism.

Pertama pada project CobaPrism yang sudah dibuat pada tutorial sebelumnya, tambahkan view dengan nama ListArtikelPage.xaml

image

Untuk membuat model yang akan di tampilkan pada ListArtikelPage, buat folder dengan nama Models. Pada folder Models tambahkan clas dengan nama Artikel.cs

    public class Artikel
    {
        public int ArtikelID { get; set; }
        public string Judul { get; set; }
        public string Deskripsi { get; set; }
    } 

Setelah View dibuat maka file ViewModel juga otomatis akan dibuat. Tambahkan file ListArtikelPageViewModel.cs.

    public class ListArtikelPageViewModel : ViewModelBase
    {
        public ListArtikelPageViewModel(INavigationService navigationService)
            : base(navigationService)
        {
            Title = "Main Page";
            _listArtikel = new List<Artikel>
            {
                new Artikel{ArtikelID=1,Judul="Pemrograman CSharp",Deskripsi="Deskripsi Buku Pemrograman CSharp"},
                new Artikel{ArtikelID=2,Judul="ASP.NET Core 2.1",Deskripsi="Deskripsi Buku Pemrogaman ASP.NET Core 2.1"},
                new Artikel{ArtikelID=3,Judul="Xamarin Forms",Deskripsi="Deskripsi Buku Xamarin Forms"}
            };
        }

        private List<Artikel> _listArtikel;
        public List<Artikel> ListArtikel
        {
            get { return _listArtikel; }
            set { SetProperty(ref _listArtikel, value); }
        }
    }

Pada file diatas dapat dilihat bahwa ListArtikel bertipe collection of Artikel. Data pada ListArtikel akan ditampilkan pada ListView. Pada ListArtikelPage.xaml, tambahkan kode berikut:

<?xml version="1.0" encoding="utf-8" ?>
<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.ListArtikelPage" Title="{Binding Title}">
    <StackLayout>
        <ListView ItemsSource="{Binding ListArtikel}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Judul}" Detail="{Binding Deskripsi}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Jika program dijalankan maka akan ditampilkan data List Artikel pada ListView.

image

    public class Artikel
    {
        public int ArtikelID { get; set; }
        public string Judul { get; set; }
        public string Deskripsi { get; set; }
    } 

Xamarin Forms MVVM Prism : Menggunakan EventToCommand Behaviour

ListView tidak memiliki properti command, sehingga untuk menangani event handler (ItemTapped) pada saat item dipilih harus menggunakan EventToCommandBehaviour.

Untuk menggunakan EventToCommand Behaviour, tambahkan kode berikut pada view ListArtikelPage.xaml

    <StackLayout>
        <ListView ItemsSource="{Binding ListArtikel}">
            <ListView.Behaviors>
                <b:EventToCommandBehavior EventName="ItemTapped"
                                          Command="{Binding ItemTappedCommand}"
                                          EventArgsConverter="{StaticResource itemTappedEventArgsConverter}" />
            </ListView.Behaviors>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Judul}" Detail="{Binding Deskripsi}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

Penambahan EventToCommandBehaviour ditujukan untuk membinding event ItemTapped pada ListView. Ini dikarenakan ListView tidak memiliki properti Command.

Untuk mengambil nilai kembalian dari event handler yang dibinding maka harus dibuat objek converter. Pada solution explorer tambahkan folder dengan nama Converters, kemudian tambahkan file baru dengan nama ItemTappedEventArgsConverter.cs. Tambahkan kode sebagai berikut:

    public class ItemTappedEventArgsConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var itemTappedEventArgs = value as ItemTappedEventArgs;
            if (itemTappedEventArgs == null)
            {
                throw new ArgumentException("Kembalian diharapkan berupa Item Tapped", nameof(value));
            }
            return itemTappedEventArgs.Item;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

Kemudian pada ListArtikelPageViewModel.cs tambahkan method yang digunakan untuk menangani event ItemTapped.

    public class ListArtikelPageViewModel : ViewModelBase
    {
----------------------------------------------

        public Artikel ItemSelected { get; set; }

        public DelegateCommand<Artikel> _itemTappedCommand;
        public DelegateCommand<Artikel> ItemTappedCommand =>
            _itemTappedCommand ?? (_itemTappedCommand = new DelegateCommand<Artikel>(ExecuteTtemTappedCommand));

        private void ExecuteTtemTappedCommand(Artikel obj)
        {
            ItemSelected = obj;
            _dialogService.DisplayAlertAsync("Keterangan", $"Judul: {obj.Judul}", "OK");
        }
    }

Method ExecuteItemTappedCommand juga digunakan untuk mengambil parameter objek yang dikirimkan dari Item Tapped, data yang diambil berupa data objek dari ListView.

Berikut adalah tampilan ketika memilih salah satu item pada ListView.

image

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);
        }

.NET Conf 2018

Saat ini, ada beberapa variasi aplikasi, seperti mobile phone, aplikasi web, desktop, IoT, dll. Kehadiran berbagai aplikasi adalah mendukung pengembang untuk menggunakan alat yang dapat digunakan untuk membuat aplikasi dengan keluaran multi-platform.

Platform .NET adalah salah satu alat yang dapat digunakan oleh pengembang, yang memiliki kemampuan tinggi untuk mendukung pengembang membuat aplikasi dengan output multi-platform. NET adalah platform pengembangan perangkat lunak yang menangani banyak tugas berat untuk Anda ketika Anda ingin membuat aplikasi. Kerangka aplikasi membantu Anda membangun jenis aplikasi atau beban kerja tertentu dan memungkinkan anda membangun aplikasi untuk platform apa pun dengan sistem operasi apa pun.

Microsoft Innovation Center berinisiatif untuk mengadakan acara .NET Conf 2018 dengan mengambil tema tentang layanan kognitif dan kecerdasan buatan.  Konferensi diadakan pada hari Selasa, 18 September 2018 di perpustakaan Digital Fakultas Teknik UGM diikuti oleh 39 peserta. Konferensi ini dibagi menjadi tiga fase dengan pembicara dan topik yang berbeda.

Pembicara pertama adalah Ridi Ferdiana, beliau menyampaikan tentang penggunaan platform NET yang dapat digunakan untuk membuat aplikasi dengan output multi-platform. Dia juga menjelaskan layanan kognitif dan kecerdasan buatan yang dapat digunakan dalam kehidupan nyata untuk mempermudah aktivitas manusia.

Faturahman Yudanto sebagai pembicara kedua, ia menunjukkan kepada peserta bagaimana mengembangkan bot menggunakan layanan kognitif, mulai dari pembangun bot di Visual Studio untuk menyebarkan bot ke cloud.

Pada sesi terakhir Erick Kurniawan menjelaskan kepada peserta tentang Xamarin untuk mengembangkan aplikasi seluler menggunakan Visual Studio. Dia menyampaikan cara membuat aplikasi seluler menggunakan Xamarin dari awal hingga akhir untuk peserta konferensi.

Tulisan pada website MIC dapat diakses pada link ini.

145

BEKRAF Developer Day 2018

Pada tanggal 1 July 2018 telah dilaksanakan acara Bekraf Developer Day Surabaya 2018 di Hotel JW Marriott Surabaya. 

Acara ini diselenggarakan atas kerjasama Badan Ekonomi Kreatif (BEKRAF) dan Dicoding dengan dukungan Asosiasi Game Indonesia, Dicoding Elite, Google Developer Expert, Intel Innovator, Komunitas ID-Android, Samsung Developer Warrior, Microsoft Indonesia dan perusahaan-perusahaan teknologi di Indonesia.

Tema acara ini adalah: Membangun Kemandirian Bangsa Melalui Teknologi Digital

Pada acara ini peserta akan mendapatkan update teknis dari para praktisi yang telah sukses dalam pengembangan aplikasi, web, game, dan Internet of Things yang dikemas dalam sesi inspirasi, workshop, live coding, dan talkshow.

Situs resmi untuk pendaftaran acara ini dapat diakses pada laman berikut: https://www.dicoding.com/events/1724#content-event-session

Pada acara ini saya diberi kesempatan untuk berbagi ilmu dengan rekan-rekan developer dari seluruh Indonesia untuk membawakan materi Introduction To Azure Mobile Services, Xamarin, and Cognitive Services. Pada sesi ini saya menjelaskan bagaimana cara menggunakan layanan Azure Mobile Services dan layanan Cognitive Services untuk kemudian digunakan pada aplikasi mobile berbasis Xamarin Forms.

123

FREE E-Book: Seri Belajar Xamarin – Cross Platform Mobile App dengan Xamarin Forms & Visual Studio 2017

Telah terbit FREE eBook Seri Belajar Xamarin dengan Judul Seri Belajar Xamarin – Cross Platform Mobile App dengan Xamarin Forms & Visual Studio 2017.Buku ini berisi materi pembuatan aplikasi mobile dengan target platform Android, iOS, dan Universal Windows Platform (UWP) menggunakan Xamarin Forms dan Visual Studio 2017.

cover xamarin vs 2017

Buku ini terdiri dari  84 halaman dan terbagi menjadi 6 Bab yaitu:

  • Bab 1 – Pengenalan Xamarin Form    5
    • Pendahuluan    5
    • Apa itu Xamarin    5
    • Instalasi Visual Studio 2017 dan Xamarin    6
    • Memulai Membuat Project Xamarin Form    7
    • Application Lifecycle pada Xamarin Forms    8
    • Xamarin Forms UI (User Interface)    9
    • Komponen Utama pada Xamarin    9
    • Xamarin Form UI    9
    • Page    9
    • Layout    10
    • View    10
    • Membuat Solusi Xamarin Form    10
    • Membuat Project Xamarin Form    11
    • Application Lifecycle pada Xamarin Form    13
  • Bab 2 – Desain Tampilan menggunakan Layout    15
    • Interaksi dengan kontrol pada Xamarin Form    18
  • Bab 3 – Membuat List    20
    • Binding List Of String    20
    • Menampilkan Data dari Data Model    21
    • Menambahkan Gambar Pada Cell    23
    • Kustomisasi Baris pada List    25
    • Menambahkan Tombol Pada List    27
    • Menggunakan Context Action    30
  • BAB 4 – Navigasi    33
    • Navigation Pattern    33
    • Menambahkan Navigation Page    33
    • Membuat Dropdown Menu    35
    • Menggunakan Modal    36
    • Menggunakan Popup    40
    • Menggunakan Display Action Sheet    41
    • Mengirimkan Data antar Page    42
    • Global Class    44
    • Menggunakan Master Page    45
    • Menggunakan Tab Page    48
  • BAB 5 – SQLite dan REST Services    51
    • Mengunakan Data Template    51
    • Data Template dengan Selection    53
    • Bekerja dengan SQLite    55
    • Menggunakan REST Services    63
    • Studi Kasus: Barang    70
  • BAB 6 – Bekerja dengan Azure Mobile Apps    75
    • Menambahkan Layanan Azure Mobile App.    75
    • Membuat Xamarin Forms Project    79

Anda dapat mengunduh FREE E-Book ini pada tautan berikut ini.

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.

FREE E-Book: Seri Belajar Xamarin–Pengenalan Xamarin for Android

Telah terbit FREE eBook Seri Belajar Xamarin dengan Judul Seri Belajar Xamarin – Pengenalan Xamarin for Android.Buku ini berisi materi pembuatan aplikasi mobile dengan target platform Android menggunakan Xamarin for Android dan Visual Studio IDE.

xamarin android

Buku ini terdiri dari  50 halaman dan terbagi menjadi 5 Bab yaitu:

  • 1    Pengenalan Xamarin4Android    5
    • 1.1    Instalasi Xamarin for Visual Studio    5
  • 2    Arsitektur Android Platform    7
    • 2.1    Xamarin dan Android    8
    • 2.2    Menjalankan Android Emulator    10
    • 2.3    Menambahkan Activity    20
    • 2.4    Menyimpan State ketika proses Recreated Activity    22
    • 2.5    Android Life Cycle Management    23
    • 2.6    Menambahkan Menu    25
    • 2.7    Menambahkan Navigasi Action Bar    26
    • 2.8    Menambahkan Context Menu    26
    • 2.9    Mengirimkan Nilai antar Activity    27
    • 2.10    Code Sharing dengan Platform Lain    29
  • 3    Layout    34
    • 3.1    Linear Layout    34
    • 3.2    Relative Layout    34
    • 3.3    Table Layout    36
    • 3.4    Grid View    38
  • 4    Membuat ListView    40
    • 4.1    Menampilkan data dengan ListView    40
    • 4.2    Menggunakan ListActivity    41
    • 4.3    Menggunakan Simple Adapter    42
  • 5    Menggunakan REST Web Services    43

Anda dapat mengunduh FREE E-Book ini pada tautan berikut ini.

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.