-=ANONYMUSE=-: Belajar

Mempelajari membangun Aplikasi Multi-platform dengan Xamarin form dan Visual Studio

Kali ini saya ingin berbagi tentang apa yang telah saya dapatkan dalam kurang lebih 1 bulan belajar di dicoding academy. Sebelumnya saya tertarik dengan course yang satu ini bukan hanya Karena ketentuan dari MSP yang mengharuskan mempelajari cross platform namun juga Karena sebelumnya aku tertarik dengan cross platform.

Apa itu Xamarin

Xamarin adalah platform pengembangan aplikasi mobile dari Microsoft. Dengan Xamarin anda dapat membuat aplikasi mobile cross platform pada perangkat Android, IOS, Windows 10, Windows 8.1, dan Windows Phone. Saat ini terdapat 3 produk Xamarin yang dapat anda pilih yaitu:

Xamarin for Android
Xamarin for IOS
Xamarin Forms

Seperti namanya Xamarin for Android digunakan jika anda ingin membuat aplikasi native Android. Sedangkan Xamarin for IOS digunakan untuk membuat aplikasi native IOS. Jika anda menggunakan salah satu atau kedua teknologi tersebut maka anda dapat membagi komponen yang sudah anda buat pada satu project untuk digunakan di project yang lain. Namun yang dapat dibagi hanya komponen selain UI (User Interface). Xamarin for Android dan Xamarin for IOS masih menggukanan komponen UI yang spesifik dengan platform.

Xamarin Forms adalah teknologi yang lebih baru, kelebihan dari Xamarin Forms adalah dapat menggunakan satu UI yang dapat di gunakan pada platform yang berbeda. Dengan Xamarin Forms anda cukup mengembangkan satu aplikasi dengan target platform yang berbeda. Xamarin Forms menggunakan format XAML (eXtensible Application Markup Language) untuk membuat tampilan UI.

Arsitektur dari platform Xamarin dapat dilihat pada gambar dibawah ini:

Gambar dibawah ini menunjukan level pembagian kode pada Xamarin.

Saran untuk instalasi Xamarin pada visual studio, jika device yang kalian gunakan memiliki spesifikasi yang tebilang tidak sangat tinggi silahkan pertimbangkan untuk tidak menginstal android emulator. Karena debuging androidpun juga bisa dilakukan menggunakan smartphone kita pribadi.

Application Lifecycle pada Xamarin Forms

Xamarin Forms mempunyai application lifecycle yang sederhana. Ada tiga method utama yang digunakan untuk menangani method lifecycle, ketiga proses tersebut adalah:

OnStart: method ini akan dipanggil ketika aplikasi pertama kali dijalankan.
OnSleep: method ini akan dipanggil setiap kali app berpindah ke mode background
OnResume: method ini akan dipanggil ketika app masuk ke mode resume setelah sebelumnya masuk ke mode background.

Ketika pengguna memilih tombol Back atau Home pada ponsel, maka aplikasi yang sedang aktif pada saat itu akan masuk ke mode background. Ketika pengguna memilih kembali aplikasi tersebut, maka app tersebut di resume dan app tersebut dibawa kembali ke mode foreground. Saat ketika aplikasi dijalankan pertama kali, saat app masuk ke mode background dan masuk ke mode foreground lagi, sampai app tersebut ditutup (terminate).

Xamarin Forms UI (User Interface)

Ada tiga komponen utama yang membentuk Xamarin Forms UI yaitu:

Page: Halaman yang digunakan untuk menampilkan view yang disusun menggunakan layout.
Views: komponen kontrol yang ada pada Xamarin Forms seperti Entry, Button, dll.
Layout: komponen yang digunakan untuk mengatur posisi views pada halaman.

Page

Class Page adalah kontainer utama untuk setiap tampilan pada halaman aplikasi di Xamarin Forms. Class ini diturunkan dari class Xamarin.Forms.VisualElement. Class Page adalah baseclass untuk membuat dari semua class UI pada Xamarin Forms. Berikut adalah beberapa contoh Page yang umum digunakan:

ContentPage
MasterDetailPage
NavigationPage
TabbedPage
CarouselPage

View

View adalah kontrol interaktif yang ada pada Page. Berikut ini adalah jenis-jenis view yang ada pada Xamarin Forms.

Basic – fundamental views

Label
Image
Button
BoxView

List – scrollabe dan selectable list

ListView

Text Entry – entry input pengguna menggunakan keyboard

Entry
Editor

Selection – pilihan pengguna yang lebih dari satu.

Picker
DatePicker
TimePicker
Stepper
Slider
Switch

User Feedback – notifikasi pengguna

Activity

Layout

Layout adalah wadah yang digunakan untuk pengaturan posisi kontrol (view, atau layout lain). Ada beberapa macam layout yang didukung oleh Xamarin Form yaitu:

StackLayout: mengatur kontrol secara horisontal atau vertikal.
AbsoluteLayout: pengaturan posisi berdasarkan letak yang pasti.
RelativeLayout: pengaturan posisi kontrol berdasarkan kontrol yang lain.
Grid: membuat layout yang terdiri dari kolom dan baris seperti tabel.

Penggunaan StackLayout

Pada contoh dibawah ini akan ditunjukan bagaimana cara menggunakan StackLayout untuk mengatur view.

1. Pada portable project di Modul2, tambahkan forms xaml page baru dengan nama SampleStackLayout.xaml. Kemudian tambahkan kode xaml 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"

x:Class="Modul2.SampleStackLayout">

</StackLayout>

</StackLayout>

</ContentPage>

2. Pada file App.xaml.cs tambahkan kode berikut untuk menjalankan halaman ini pada saat program pertama kali dijalankan.

public App()

{

InitializeComponent();

MainPage = new SampleStackLayout();

}

3. Hasilnya dapat dilihat pada gambar dibawah ini.

Contoh Penggunaan Absolute Layout

Pada contoh dibawah ini akan ditunjukan cara untuk menggunakan Absoule Layout.

1. Pada project portable, tambahkan xaml page baru dengan nama AbsoluteLayout.xaml. kemudian tambahkan kode xaml 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"

x:Class="Bab2XamarinForm.AbsoluteLayout">

<Label Text="I'm centered on iPhone 4 but no other device"

AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap" />

<Label Text="I'm bottom center on every device."

AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"

LineBreakMode="WordWrap" />

<BoxView Color="Olive" AbsoluteLayout.LayoutBounds="1,.5, 25, 100"

AbsoluteLayout.LayoutFlags="PositionProportional" />

<BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"

AbsoluteLayout.LayoutFlags="PositionProportional" />

<BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"

AbsoluteLayout.LayoutFlags="PositionProportional" />

</AbsoluteLayout>

</ContentPage>

2. Pada file App.xaml.cs tambahkan kode berikut untuk menjalankan halaman ini pada saat program pertama kali dijalankan.

public App()

{

InitializeComponent();

MainPage = new AbsoluteLayout();

}

3. Hasilnya dapat dilihat pada gambar berikut:

Menggunakan Relative Layout

RelativeLayout dapat digunakan untuk memposisikan elemen menggunakan automatic scaling pada ukuran layar yang berbeda. Penggunaan layout ini memanfaatkan relasi antar view. Setiap view akan dapat diposisikan terhadap view sebelah/tetangganya.

1. Pada project portable, tambahkan xaml page baru dengan nama RelativeLayout.xaml. Kemudian tambahkan kode xaml berikut:

<BoxView Color="Red" x:Name="redBox"

RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,

Property=Height,Factor=.15,Constant=0}"

RelativeLayout.WidthConstraint="{ConstraintExpression

Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"

RelativeLayout.HeightConstraint="{ConstraintExpression

Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}" />

<BoxView Color="Blue"

RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,

ElementName=redBox,Property=Y,Factor=1,Constant=50}"

RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,

ElementName=redBox,Property=X,Factor=1,Constant=50}"

RelativeLayout.WidthConstraint="{ConstraintExpression

Type=RelativeToView,ElementName=redBox, Property=Width,Factor=.5,Constant=0}"

RelativeLayout.HeightConstraint="{ConstraintExpression

Type=RelativeToView,ElementName=redBox, Property=Height,Factor=.5,Constant=0}" />

</RelativeLayout>

2. Pada file App.xaml.cs tambahkan kode berikut untuk menjalankan halaman ini pada saat program pertama kali dijalankan.

public App()

{

InitializeComponent();

MainPage = new RelativeLayout();

}

3. Hasilnya akan dapat dilihat pada gambar berikut:

Menggunakan GridLayout

Dengan menggunakan GridLayout, kita dapat memposisikan view berdasarkan alamat row dan kolom sama seperti ketika kita menggunakan spreadsheet di Microsoft Excel atau html table.

1. Pada project portable, tambahkan xaml page baru dengan nama GridLayout.xaml. Kemudian tambahkan kode xaml 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"

x:Class="Modul2.GridLayout">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</ContentPage>

2. Pada file App.xaml.cs tambahkan kode berikut untuk menjalankan halaman ini pada saat program pertama kali dijalankan.

public App()

{

InitializeComponent();

MainPage = new GridLayout();

}

3. Hasilnya akan dapat dilihat pada gambar berikut:

Menggunakan Layout dan View sederhana pada Xamarin Form

1. Buat project Cross Platform dan pilih Blank Xaml App (Portable). Beri nama project tersebut Modul2.

2. Pada portable project tambahkan kode berikut di MainPage.xaml. MainPage.xaml adalah halaman pertama yang dibuat ketika anda membuat project. Halaman ini juga adalah halaman yang akan dijalankan pertama kali ketika anda menjalankan aplikasi.

<?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:local="clr-namespace:Modul2"

x:Class="Modul2.MainPage">

<Label x:Name="lblDetail" Text="Label ini digunakan untuk menampilkan detail"

FontSize="20" HorizontalOptions="CenterAndExpand"/>

<Button x:Name="btnHello" Text="Hello Button" HorizontalOptions="Center"

VerticalOptions="Fill" />

<Entry x:Name="entryHello" Placeholder="Username" VerticalOptions="Center"

Keyboard="Text"/>

<Image x:Name="helloImg" Source="icon.png" Aspect="AspectFit"

HorizontalOptions="Center" VerticalOptions="Fill"/>

</StackLayout>

</ScrollView>

</ContentPage>

3. Kemudian pada file MainPage.xaml.cs tambahkan kode berikut untuk menambahkan event pada tombol klik.

public partial class MainPage : ContentPage

{

public MainPage()

{

InitializeComponent();

btnHello.Clicked += BtnHello_Clicked;

}

private void BtnHello_Clicked(object sender, EventArgs e)

{

lblDetail.Text = entryHello.Text;

}

4. Untuk menjalankan aplikasi pada platform Android, klik kanan pada project Droid kemudian pilih Set as StartUp Project

5. Tekan tombol Ctrl+F5 untuk menjalankan aplikasi pada emulator Android. Hasilnya dapat dilihat pada tampilan berikut:

Kalkulator Sederhana

1. Pada project Modul2 yang sudah anda buat sebelumnya, klik kanan pada portable project – Add - New Item – pilih Forms Xaml Page – beri nama KalkulatorPage.xaml.

2. Kemudian tambahkan desain xaml berikut pada halaman KalkulatorPage.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="Modul2.KalkulatorPage">

</StackLayout>

</ContentPage>

3. Tambahkan juga kode program C# pada file KalkulatorPage.xaml.cs.

public partial class KalkulatorPage : ContentPage

{

public KalkulatorPage()

{

InitializeComponent();

btnTambah.Clicked += Btn_Clicked;

btnKurang.Clicked += Btn_Clicked;

btnKali.Clicked += Btn_Clicked;

btnBagi.Clicked += Btn_Clicked;

}

private void Btn_Clicked(object sender, EventArgs e)

{

double hasil = 0;

var myBtn = (Button)sender;

switch(myBtn.Text)

{

case "Tambah":

hasil = Convert.ToDouble(entryBil1.Text) + Convert.ToDouble(entryBil2.Text);

break;

case "Kurang":

hasil = Convert.ToDouble(entryBil1.Text) - Convert.ToDouble(entryBil2.Text);

break;

case "Kali":

hasil = Convert.ToDouble(entryBil1.Text) * Convert.ToDouble(entryBil2.Text);

break;

case "Bagi":

hasil = Convert.ToDouble(entryBil1.Text) / Convert.ToDouble(entryBil2.Text);

break;

}

entryHasil.Text = hasil.ToString();

}

4. Jalankan program diatas pada emulator dengan menekan tombol Ctrl+F5. Hasil dari program diatas dapat dilihat pada gambar berikut.

4. Untuk membuat file .apk yang akan anda upload maka anda dapat mengikuti langkah sebagai berikut:

a. Klik kanan pada project Droid, kemudian pilih Android Manifest, kemudian lengkapi informasi dari aplikasi anda.

b. Pilih ‘Release’ pada solution configuration.

c. Pada tampilan Android Options – Linker – pilih Sdk Assembly Only. Pengaturan ini bertujuan agar hanya file sdk yang diperlukan saja yang akan ditambahkan ke file .apk.

Cara Membuat APK pada Xamarin Form (versi baru)

1. Klik kanan pada project Android, kemudian pilih Archive.

2. Setelah langkah ini dikerjakan maka Visual Studio akan menyiapkan semua file yang nanti akan dikompilasi menjadi file .apk.

3. Setelah selesai pilih tombol Distribute untuk mendistribusikan .apk yang akan dibuat. Ada dua pilihan yaitu Ad Hoc dan Google Play. Pilih Ad Hoc untuk mendistribusikan .apk tanpa melalui google play.

4. Anda akan diminta untuk membuat sertifikat Android Keystore, masukan data yang dibutuhkan seperti gambar dibawah ini, kemudian tekan tombol Create.

5. Setelah proses signing identity pada aplikasi yang kita buat, pilih tombol Save As.

6. Beri nama .apk tersebut, misalnya modul2.modul2

7. Anda akan diminta untuk memasukan password yang sebelumnya sudah anda buat ketika membuat Android Keystore.

8. Anda dapat melihat bahwa kita sudah berhasil membuat file .apk yang siap untuk didistribusikan.

Binding Data yang bertipe List Of String

Mekanisme binding umum digunakan pada Xamarin Form. Binding adalah mengaitkan data yang ada pada data source (sumber data) ke kontrol tertentu. Ada dua macam jenis binding yaitu one-way binding dan two-way binding. One-way binding digunakan hanya untuk menampilkan data saja, sedangkan two-way binding digunakan untuk menampilkan dan mengedit data.

Menampilkan Data bertipe List Of String

1. Buat Xamarin Cross Platform Portable solution dengan nama Modul3. Kemudian pada project Portable tambahkan halaman xaml baru (Form Xaml Page) dengan nama BindingListString.xaml, kemudian 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"

x:Class="Modul3.BindingListString">

</ContentPage>

2. Pada file BindingListString.xaml.cs tambahkan kode C# berikut untuk menampilkan data berupa objek List kedalam kontrol ListView.

public BindingListString()

{

InitializeComponent();

List<string> items = new List<string> { "First", "Second", "Third" };

listView.ItemsSource = items;

}

3. Anda juga dapat mengambil informasi data/item yang dipilih pada ListView, caranya adalah dengan menambahkan event handler ‘ItemTapped’ kedalam ListView.

public BindingListString()

{

InitializeComponent();

List<string> items = new List<string> { "First", "Second", "Third" };

listView.ItemsSource = items;

//untuk mengambil nilai item ketika diklik pada baris

listView.ItemTapped += async (sender, e) =>

{

await DisplayAlert("Tapped", e.Item.ToString() + " was selected", "OK");

((ListView)sender).SelectedItem = null;

};

}

4. Setelah itu masuk ke halaman App.xaml.cs dan ubah kode program berikut di bagian constructor seperti berikut :

public App()

{

InitializeComponent();

MainPage = new BindingListString();

}

5. Tekan F5 untuk menjalankan program pada emulator, hasilnya dapat dilihat pada gambar dibawah ini:

Menampilkan Data dari Objek Data Model

Pada contoh berikut dijelaskan cara menampilkan data dari objek data model yang sudah disiapkan sebelumnya.

1. Pada project Portable, tambahkan folder baru dengan nama Models, kemudian tambahkan class dengan nama ListItem.cs.

public class ListItem

{

public string Title { get; set; }

public string Description { get; set; }

}

Untuk class yang digunakan untuk Binding, pastikan menggunakan Public

2. Kemudian tambahkan halaman xaml baru (Form Xaml Page) dengan nama BindingToDataModel.xaml, kemudian tambahkan kode xaml 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"

x:Class="Modul3.BindingToDataModel">

<ListView.ItemTemplate>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</ContentPage>

Pada halaman xaml diatas digunakan ItemTemplate untuk mengatur data yang akan ditampilkan pada kontrol ListView. Keyword Binding digunakan untuk mengikatkan data yang diambil dari objek data model kedalam kontrol ListView.

Element TextCell digunakan untuk menampilkan dua informasi yaitu title dan description.

3. Pada file BindingToDataModel.xaml.cs tambahkan kode berikut ini.

public partial class BindingToDataModel : ContentPage

{

public BindingToDataModel()

{

InitializeComponent();

BindingContext = new ListViewDataModelViewModel();

}

public class ListViewDataModelViewModel : BindableObject

{

private List<ListItem> lstItems;

public ListViewDataModelViewModel()

{

lstItems = new List<ListItem>

{

new ListItem { Title="Mystic", Description="Mystic team blue badge" },

new ListItem {Title="Instinct",Description="Instinct team yellow badge" },

new ListItem {Title="Valor",Description="Valor team red badge" }

};

}

public List<ListItem> ListItems

{

get { return lstItems; }

set {

lstItems = value;

OnPropertyChanged("ListItems");

}

Jika ada merah pada ListItem tambahkan using Modul3.Models;

Property BindingContext digunakan untuk mengarahkan sumber data yang akan ditampilkan pada halaman xaml.

Class ListViewDataModelViewModel.cs. akan digunakan untuk membuat objek ListItems yang akan ditampilkan kedalam kontrol ListView.

Pada kode diatas dapat dilihat bahwa class ListViewDataModelViewModel diturunkan dari class BindableObject, ini bertujuan agar kita dapat menggunakan method OnPropertyChanged() yang akan memberi tahu program bahwa ada objek yang berubah.

4. Untuk mengambil informasi dari data yang dipilih pada kontrol ListView, anda dapat menambahkan event ItemTapped ke dalam class BindingToDataModel seperti ditunjukan pada kode berikut:

private async void ListViewItemTapped(object sender, ItemTappedEventArgs e)

{

ListItem item = (ListItem)e.Item;

await DisplayAlert("Tapped", item.Title.ToString() + " was selected", "OK");

((ListView)sender).SelectedItem = null;

}

5. Setelah itu masuk ke halaman App.xaml.cs dan ubah kode program berikut di bagian constructor seperti berikut :

public App()

{

InitializeComponent();

MainPage = new BindingToDataModel();

}

6. Tekan tombol F5 untuk menjalankan aplikasi pada android emulator.

Menampilkan Gambar pada Cell

Pada contoh yang sebelumnya anda sudah menggunakan ListView ItemTemplate untuk menampilkan informasi berupa Text dan Detail. Kontrol ListView pada Xamarin juga menyediakan template yang menampilkan tidak hanya data berupa text, pada contoh dibawah ini kita akan mencoba untuk menampilkan data berupa gambar pada kontrol ListView.

1. Pada project portable, tambahkan halaman xaml baru dengan nama ListViewImageCell.xaml.

2. Kemudian tambahkan kode xaml berikut ini:

<?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="Modul3.ListViewImageCell">

<ListView.ItemTemplate>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</ContentPage>

Pada kode xaml diatas dapat dilihat bahwa elemen Data Template yang digunakan berbeda dengan contoh sebelumnya yang menggunakan element TextCell, pada kasus ini digunakan element ImageCell untuk menampilkan data berupa image dan text.

3. Pada folder Models modifikasi class ListItem.cs yang sebelumnya sudah dibuat. Tambahkan property Source yang akan digunakan untuk menyimpan informasi gambar.

public class ListItem

{

public string Source { get; set; }

public string Title { get; set; }

public string Description { get; set; }

}

4. Pada file ListViewImageCell.xaml.cs tambahkan kode berikut ini

public partial class ListViewImageCell : ContentPage

{

public ListViewImageCell()

{

InitializeComponent();

BindingContext = new ListViewImageCellViewModel();

}

public class ListViewImageCellViewModel : BindableObject

{

private List<ListItem> listItems;

public List<ListItem> ListItems

{

get { return listItems; }

set

{

listItems = value;

OnPropertyChanged("ListItems");

}

public ListViewImageCellViewModel()

{

listItems = new List<ListItem>

{

new ListItem { Source="first.png", Title="Mystic", Description="Mystic team blue badge" },

new ListItem { Source="second.png", Title="Instinct",Description="Instinct team yellow badge" },

new ListItem { Source="third.png", Title="Valor",Description="Valor team red badge" }

};

}

5. Tambahkan juga class dengan nama ListViewImageCellViewModel.cs. Class ini berisi objek-objek yang akan ditampilkan pada kontrol ListView.

6. Kode diatas mirip dengan contoh sebelumnya, hanya ada tambahan inisialisasi satu property baru yaitu Source yang berisi nama file image yang akan ditampilkan.

7. Untuk menambahkan image yang akan ditampilkan, tambahkan image yang akan ditampilkan kedalam project Droid (untuk aplikasi android) di folder Resources\drawable. Pada contoh berikut ditambahkan tiga file bertipe .png kedalam folder tersebut. Anda dapat download asset tersebut disini

8. Kemudian tekan tombol F5 untuk menjalankan program pada emulator, hasil dari aplikasi yang sudah dibuat dapat dilihat pada kode berikut ini. Jangan lupa untuk mengganti inisalisasi page yang diload oleh aplikasi pada App.xaml.cs

Kustomisasi Baris pada ListView

Selain menampilkan teks dan gambar pada kontrol ListView yang sudah dibuat pada contoh sebelumnya, kita juga dapat membuat tampilan sendiri sesuai dengan kebutuhan. Pada contoh dibawah ini ditunjukan bagaimana cara menampilkan ListView yang mempunyai baris yang sudah dikustomisasi.

1. Pada project portable, tambahkan halaman xaml baru dengan nama ListViewCustom.xaml. Kemudian tambahkan xaml berikut ini.

<?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="Modul3.ListViewCustom">

<ListView.ItemTemplate>

</StackLayout>

</StackLayout>

</ViewCell>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</ContentPage>

Pada kode xaml diatas dapat dilihat bahwa kontrol ListView dapat mempunyai ItemTemplate yang berupa ViewCell. Element ViewCell ini sangat fleksible sehingga dapat diisi dengan element lain. Pada contoh diatas dapat dilihat bahwa ViewCell diisi dengan tiga kontrol label yang disusun menggunakan StackLayout.

2. Pada folder Models modifikasi class ListItem yang sebelumnya sudah dibuat dengan menambahkan property baru yaitu Price.

public class ListItem

{

public string Source { get; set; }

public string Title { get; set; }

public string Description { get; set; }

public string Price { get; set; }

}

3. Tambahkan kode pada file ListViewCustom.xaml.cs sebagai berikut:

public partial class ListViewCustom : ContentPage

{

public ListViewCustom()

{

InitializeComponent();

BindingContext = new ListViewCustomViewModel();

}

public class ListViewCustomViewModel : BindableObject

{

private List<ListItem> listItems;

public List<ListItem> ListItems

{

get { return listItems; }

set

{

listItems = value;

OnPropertyChanged("ListItems");

}

public ListViewCustomViewModel()

{

listItems = new List<ListItem>

{

new ListItem { Title="Pokeball", Description="Pokeball Red", Price="Rp.10.000" },

new ListItem {Title="Masterball",Description="Masterball Blue",Price="Rp.20.000" },

new ListItem {Title="Ultraball",Description="Ultraball Yellow",Price="Rp.50.000" }

};

}

4. Untuk menjalankan program tekan tombol F5, maka anda akan dapat melihat hasilnya pada android emulator. Jangan lupa untuk mengganti inisalisasi page yang diload oleh aplikasi pada App.xaml.cs

Jenis-jenis Navigasi pada Xamarin Forms

Ada beberapa jenis navigasi yang dapat digunakan pada Xamarin Forms, beberapa diantaranya yaitu:

Hierarchical
Modal
Tabs
Master Pages

Menambahkan Navigasi Sederhana

Pada contoh yang pertama akan ditunjukan bagaimana cara untuk menggunakan navigasi, cara ini digunakan untuk memanggil halaman selanjutnya dari halaman pertama.

1. Buat Solusi Xamarin Cross Platform Portable dengan nama Modul4.

2. Pada project portable tambahkan halaman xaml baru dengan nama NavigationPage1.xaml. Kemudian tambahkan kode xaml berikut.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage Title="Navigasi Hirarki" xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="Modul4.NavigationPage1">

<ContentPage.Content>

</StackLayout>

</ContentPage.Content>

</ContentPage>

Pada kode xaml diatas terdiri dari dua kontrol yaitu label dan button. Jika tombol ditekan maka diharapkan halaman 2 akan ditampilkan.

3. Untuk mengaktifkan mekanisme navigasi pada halaman, tambahkan objek NavigationPage pada file App.xaml.cs.

public App()

{

InitializeComponent();

MainPage = new NavigationPage(new NavigationPage1());

}

Pada kode diatas dapat dilihat bahwa ketika memanggil halaman NavigationPage1 untuk pertama kali, maka objek NavigationPage juga harus dibuat agar fitur navigasi dapat digunakan.

4. Pada file NavigationPage1.xaml.cs tambahkan kode berikut:

public partial class NavigationPage1 : ContentPage

{

public NavigationPage1()

{

InitializeComponent();

btnSecond.Clicked += BtnSecond_Clicked;

}

private async void BtnSecond_Clicked(object sender, EventArgs e)

{

await Navigation.PushAsync(new NavigationPage2());

}

Method Navigation.PushAsync() diatas digunakan untuk memanggil halaman selanjutnya yaitu halaman NavigationPage2.

5. Pada project portable, tambahkan halaman xaml dengan nama NavigationPage2.xaml. Kemudian 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"

x:Class="Modul4.NavigationPage2">

<ContentPage.Content>

</StackLayout>

</ContentPage.Content>

</ContentPage>

6. Kemudian tambahkan kode pada NavigationPage2.xaml.cs. Method Navigation.PopAsync() digunakan untuk kembali ke halaman sebelumnya.

public partial class NavigationPage2 : ContentPage

{

public NavigationPage2()

{

InitializeComponent();

btnBack.Clicked += async (sender, e) =>

{

await Navigation.PopAsync(true);

};

}

7. Tekan tombol F5 untuk menjalankan aplikasi. Ketika tombol “Go To Second Page” dipilih maka otomatis halaman kedua akan ditampilkan.

8. Untuk kembali ke halaman sebelumnya, anda dapat menekan tombol “BACK” atau menekan tombol panah dipojok kiri atas.

Membuat Dropdown Menu

Pada contoh dibawah ini akan ditunjukan bagaimana menggunakan kontrol Dropdown Menu dan cara navigasi antar halaman.

1. Pada project portable, tambahkan halaman xaml dengan nama DropdownMenu.xaml. kemudian tambahkan kode xaml berikut ini:

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage Title="Dropdown menggunakan Toolbar" xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="Modul4.DropdownMenu">

<ContentPage.ToolbarItems>

</ContentPage.ToolbarItems>

<ContentPage.Content>

</ContentPage.Content>

</ContentPage>

Pada kode xaml diatas dapat dilihat penambahan ToolbarItems untuk membuat menu dropdown.

2. Kemudian tambahkan kode pada DropdownMenu.xaml.cs.

public partial class DropdownMenu : ContentPage

{

public DropdownMenu()

{

InitializeComponent();

}

protected async void Navigate(object sender, EventArgs args)

{

string type = (string)((ToolbarItem)sender).CommandParameter;

Type pageType = Type.GetType("Bab4." + type + ", Modul4");

Page page = (Page)Activator.CreateInstance(pageType);

await this.Navigation.PushAsync(page);

}

Pada kode diatas ketika toolbar menu item dipilih maka program akan melakukan pengecekan item mana yang dipilih, kemudian membuat instan objek dari Page yang dituju, dan terakhir mengarahkan ke halaman yang dituju.

3. Untuk melihat hasilnya pada android emulator, tekan tombol F5, maka akan ditampilkan gambar sebagai berikut. Jangan lupa untuk mengganti inisalisasi page yang diload oleh aplikasi pada App.xaml.cs

Menggunakan Modal Form

Modal Forms digunakan untuk menampilkan form bertipe modal. Ada tiga alternatif penggunaan modal form pada Xamarin Forms yaitu:

Modal Form untuk Navigasi
Modal Form untuk Alert
Modal Form untuk Action Sheet pop-up menu

Dengan menggunakan modal form anda dapat menampilkan halaman full-screen. Ketika modal form ditampilkan, maka navigation bar tidak akan ditampilkan sampai form modal tersebut ditutup.

1. Pada project portable tambahkan halaman xaml baru dengan nama ModalPage.xaml. Kemudian tambahkan kode berikut:

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage Title="Contoh Modal" xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="Modul4.ModalPage">

<ContentPage.Content>

</StackLayout>

</ContentPage.Content>

</ContentPage>

2. Buat juga halaman xaml dengan nama ModalSecondPage.xaml, kemudian 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"

x:Class="Modul4.ModalSecondPage">

<ContentPage.Content>

</StackLayout>

</ContentPage.Content>

</ContentPage>

3. Untuk menampilkan Modal Form yang sudah dibuat pada langkah sebelumnya, tambahkan kode berikut pada file ModalPage.xaml.cs.

public partial class ModalPage : ContentPage

{

public ModalPage()

{

InitializeComponent();

}

protected async void Navigate(object sender, EventArgs args)

{

await Navigation.PushModalAsync(new ModalSecondPage(), false);

}

Pada kode diatas dapat dilihat bahwa method Navigation.PushModalAsync digunakan untuk memanggil form modal.

4. Untuk dapat kembali ke halaman sebelunya, anda dapat menambahkan kode berikut pada file ModalSecondPage.xaml.cs.

public partial class ModalSecondPage : ContentPage

{

public ModalSecondPage()

{

InitializeComponent();

}

protected async void Navigate(object sender, EventArgs args)

{

await Navigation.PopModalAsync();

}

5. Tekan tombol F5 untuk menjalankan program pada Android Emulator. Tampilan pemanggilan modal form dapat dilihat pada gambar berikut ini. Jangan lupa untuk mengganti inisalisasi page yang diload oleh aplikasi pada App.xaml.cs

Membuat Popup Alert

Selain untuk menampilkan halaman baru seperti pada contoh sebelumnya, modal form juga dapat digunakan untuk membuat popup Alert.

1. Pada project portable tambahkan halaman xaml dengan nama PopupMainPage.xaml. kemudian tambahkan kode xaml berikut ini.

<?xml version="1.0" encoding="utf-8" ?>

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:local="clr-namespace:Modul4;assembly=Modul4"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="Modul4.PopupMainPage">

<TabbedPage.Children>

<local:AlertPage Title="Alerts" Icon="icon.png" />

<local:ActionSheetPage Title="ActionSheets" Icon="icon.png" />

</TabbedPage.Children>

</TabbedPage>

2. Kemudian tambahkan juga halaman baru dengan nama AlertPage.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="Modul4.AlertPage">

<ContentPage.Content>

</StackLayout>

</ContentPage.Content>

</ContentPage>

3. Pada file PopupMainPage.xaml.cs ubahlah sebagai berikut:

public partial class PopupMainPage : TabbedPage

{

public PopupMainPage()

{

InitializeComponent();

}

4. Pada file AlertPage.xaml.cs tambahkan kode berikut ini untuk menampilkan popup display alert.

public partial class AlertPage : ContentPage

{

public AlertPage()

{

InitializeComponent();

}

async void OnAlertSimpleClicked(object sender, EventArgs e)

{

await DisplayAlert("Alert", "You have been alerted", "OK");

}

async void OnAlertYesNoClicked(object sender, EventArgs e)

{

var answer = await DisplayAlert("Question?", "Would you like to play a game", "Yes", "No");

}

5. Selain alert kita juga dapat membuat action sheet popup. Action Sheet mirip seperti Alert hanya saja ada tambahan tombol konfirmasi, dan nilai kembalian konfirmasi dari pengguna dapat diambil. Untuk itu tambahkan halaman xaml dengan nama ActionSheetPage.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="Modal4.ActionSheetPage">

<ContentPage.Content>

</StackLayout>

</ContentPage.Content>

</ContentPage>

6. Tambahkan code-behind pada file ActionSheetPage.xaml.cs.

public partial class ActionSheetPage : ContentPage

{

public ActionSheetPage()

{

InitializeComponent();

}

async void OnActionSheetSimpleClicked(object sender, EventArgs e)

{

var action = await DisplayActionSheet("ActionSheet: Send to?", "Cancel", null, "Email", "Twitter", "Facebook");

}

async void OnActionSheetCancelDeleteClicked(object sender, EventArgs e)

{

var action = await DisplayActionSheet("ActionSheet: SavePhoto?", "Cancel", "Delete", "Photo Roll", "Email");

}

7. Untuk mengaktifkan mekanisme navigasi pada halaman, tambahkan objek PopupMainPage pada file App.xaml.cs.

public App()

{

InitializeComponent();

MainPage = new Modul4.PopupMainPage();

}

8. Tekan tombol F5 untuk menjalankan aplikasi pada Android Emulator. Jangan lupa untuk mengganti inisalisasi page yang diload oleh aplikasi pada App.xaml.cs

Mengirimkan Data Antar Page

Pada aplikasi yang cukup kompleks dan terdiri lebih dari satu halaman dibutuhkan mekanisme untuk mengirimkan data antar halaman.

Ada beberapa cara yang dapat digunakan untuk mengirimkan data antar halaman. Cara yang pertama dan yang paling mudah adalah mengimkan data melalui objek konstruktor.

1. Pada project portable, tambahkan attribut x:Name="lblparam" pada Label di halaman NavigationPage2.xaml yg sebelumnya sudah dibuat. Sehingga tampilannya berikut ini.

<?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="Modul4.NavigationPage2">

<ContentPage.Content>

</StackLayout>

</ContentPage.Content>

</ContentPage>

2. Kemudian tambahkan kode berikut pada halaman NavigationPage2.xaml.cs yang sudah dibuat pada latihan sebelumnya.

public NavigationPage2(string param)

{

InitializeComponent();

lblParam.Text = "Nama anda : " + param;

btnBack.Clicked += async (sender, e) =>

{

await Navigation.PopAsync(true);

};

}

Dapat dilihat pada kode diatas bahwa pada konstruktor NavigationPage2 ditambahkan satu parameter yaitu param yang bertipe string. Kemudian nilai dari parameter tersebut akan ditampilkan pada kontrol lblParam.

3. Untuk mengirimkan data pada saat objek NavigationPage2 dibuat, tambahkan kode berikut pada NavigationPage1.xaml.cs.

public partial class NavigationPage1 : ContentPage

{

--------

private async void BtnSecond_Clicked(object sender, EventArgs e)

{

await Navigation.PushAsync(new NavigationPage2("Erick Kurniawan"));

}

4. Tekan tombol F5 untuk menjalankan program pada Android Emulator. Tampilan pengiriman data antar page dapat dilihat pada gambar berikut ini. Jangan lupa untuk mengganti inisalisasi page yang diload oleh aplikasi pada App.xaml.cs

Menggunakan objek Application.Current.Properties

Selain menggunakan parameter pada konstruktor, anda juga dapat juga menggunakan objek Application.Current.Properties untuk mengirimkan data antar halaman. Objek ini mirip seperti objek session pada aplikasi web yang juga berfungsi untuk menyimpan data yang dapat diakses oleh halaman lain.

1. Pada file app.xaml.cs, tambahkan kode berikut untuk membuat objek Application.Current.Properties pada saat program dijalankan pertama kali.

public App()

{

InitializeComponent();

Application.Current.Properties["id"] = "22002321";

MainPage = new NavigationPage(new NavigationPage1());

}

2. Kemudian untuk mengambil nilai dari objek tersebut pada halaman NavigationPage2, tambahkan kode berikut:

public partial class NavigationPage2 : ContentPage

{

public NavigationPage2(string param)

{

InitializeComponent();

lblParam.Text = "Nama anda : " + param + "id "+(string)Application.Current.Properties["id"];

btnBack.Clicked += async (sender, e) =>

{

await Navigation.PopAsync(true);

};

}

3. Tekan tombol F5 untuk menjalankan program pada Android Emulator. Tampilan dapat dilihat pada gambar berikut ini. Jangan lupa untuk mengganti inisalisasi page yang diload oleh aplikasi pada App.xaml.cs

Menggunakan Master Page

Master Page adalah salah satu jenis template navigasi yang sudah disediakan pada Xamarin Forms. Dengan menggunakan master page pengguna dapat memilih menu pada area disebelah kiri halaman, dan konten dari aplikasi akan ditampilkan di area kanan halaman.

1. Pada project portable, tambahkan kode xaml berikut pada halaman MainPage.xaml.

<?xml version="1.0" encoding="UTF-8"?>

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:Modul4;assembly=Modul4"

x:Class="Modul4.MainPage">

<MasterDetailPage.Master>

<local:MasterPage x:Name="masterPage" />

</MasterDetailPage.Master>

<MasterDetailPage.Detail>

<x:Arguments>

<local:ContactsPage />

</x:Arguments>

</NavigationPage>

</MasterDetailPage.Detail>

</MasterDetailPage>

2. Langkah pertama yang harus dilakukan adalah dengan membuat container yang akan diisi dengan halaman master dan halaman navigasi.

3. Pada project portable Modul4, tambahkan class dengan nama MasterPageItem.cs. Class ini berisi data dari menu yang akan ditampilkan pada MasterPageItem.

public class MasterPageItem

{

public string Title { get; set; }

public string IconSource { get; set; }

public Type TargetType { get; set; }

}

4. Kemudian pada MainPage.cs tambahkan kode berikut ini.

public partial class MainPage : MasterDetailPage

{

public MainPage ()

{

InitializeComponent ();

masterPage.ListView.ItemSelected += OnItemSelected;

}

void OnItemSelected (object sender, SelectedItemChangedEventArgs e)

{

var item = e.SelectedItem as MasterPageItem;

if (item != null) {

Detail = new NavigationPage ((Page)Activator.CreateInstance (item.TargetType));

masterPage.ListView.SelectedItem = null;

IsPresented = false;

}

5. Kemudian tambahkan halaman xaml dengan nama MasterPage.xaml. Halaman ini akan berisi daftar menu yang akan ditampilkan.

<?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="Modul4.MasterPage"

Padding="0,40,0,0"

Icon="icon.png"

Title="Personal Organiser">

<ContentPage.Content>

<ListView.ItemTemplate>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</StackLayout>

</ContentPage.Content>

</ContentPage>

6. Pada halaman master page ditambahkan kontrol ListView untuk menampilkan menu. Kemudian pada MasterPage.xaml.cs tambahkan kode berikut:

public partial class MasterPage : ContentPage

{

public ListView ListView { get { return listView; } }

public MasterPage()

{

InitializeComponent();

var masterPageItems = new List<MasterPageItem> ();

masterPageItems.Add (new MasterPageItem {

Title = "Contacts",

IconSource = "contacts.png",

TargetType = typeof(ContactsPage)

});

masterPageItems.Add (new MasterPageItem {

Title = "TodoList",

IconSource = "todo.png",

TargetType = typeof(TodoListPage)

});

masterPageItems.Add (new MasterPageItem {

Title = "Reminders",

IconSource = "reminders.png",

TargetType = typeof(ReminderPage)

});

listView.ItemsSource = masterPageItems;

}

Jika Terdapat merah pada ContactsPage, TodoListPage dan ReminderPage abaikan. Karena halaman tersebut belum dibuat. Selanjutnya akan membuat classhalaman tersebut

7. Untuk menampilkan halaman di bagian detail tambahkan halaman xaml dengan nama ContactsPage.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="Modul4.ContactsPage"

Title="Contacts Page">

<ContentPage.Content>

</StackLayout>

</ContentPage.Content>

</ContentPage>

8. Kemudian tambahkan juga halaman xaml dengan nama ReminderPage.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="Modul4.ReminderPage"

Title="Reminder Page">

<ContentPage.Content>

</StackLayout>

</ContentPage.Content>

</ContentPage>

9. Terakhir tambahkan halaman xaml dengan nama TodoListPage.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="Modul4.TodoListPage"

Title="TodoList Page">

<ContentPage.Content>

</StackLayout>

</ContentPage.Content>

</ContentPage>

10. Pada file App.xaml.cs tambahkan kode berikut untuk menjalankan halaman MainPage ketika aplikasi dijalankan untuk pertama kali.

public App ()

{

MainPage = new Modul4.MainPage();

}

11. Tekan tombol F5 untuk menjalankan program pada Android Emulator. Tampilan pengiriman master page dapat dilihat pada gambar berikut ini.

Menambahkan Tab Page

Selain Master Page, Xamarin Forms juga menyediakan template untuk menggunakan Tab Page. Tab Page digunakan jika ingin menampilkan banyak halaman yang akan digabungkan pada satu halaman saja.

1. Pada project portable tambahkan halaman xaml baru dengan nama TabbedPageDemo.xaml. Kemudian tambahkan kode xaml berikut:

<?xml version="1.0" encoding="utf-8" ?>

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:Modul4;assembly=Modul4"

x:Class="Modul4.TabbedPageDemo">

<TabbedPage.Resources>

<local:NonNullToBooleanConverter x:Key="booleanConverter" />

</ResourceDictionary>

</TabbedPage.Resources>

<TabbedPage.ItemTemplate>

<Label Text="{Binding Name}"

Font="Bold,Large"

HorizontalOptions="Center" />

<Image Source="{Binding PhotoUrl}"

WidthRequest="200"

HeightRequest="200" />

<Label Text="Family:"

HorizontalOptions="FillAndExpand" />

<Label Text="{Binding Family}"

Font="Bold,Medium" />

</StackLayout>

<StackLayout Orientation="Horizontal"

IsVisible="{Binding Subfamily,

Converter={StaticResource booleanConverter}}">

<Label Text="Subfamily:"

HorizontalOptions="FillAndExpand" />

<Label Text="{Binding Subfamily}"

Font="Bold,Medium" />

</StackLayout>

<StackLayout Orientation="Horizontal"

IsVisible="{Binding Tribe,

Converter={StaticResource booleanConverter}}">

<Label Text="Tribe:"

HorizontalOptions="FillAndExpand" />

<Label Text="{Binding Tribe}"

Font="Bold,Medium" />

</StackLayout>

<Label Text="Genus:"

HorizontalOptions="FillAndExpand" />

<Label Text="{Binding Genus}"

Font="Bold,Medium" />

</StackLayout>

</ContentPage>

</DataTemplate>

</TabbedPage.ItemTemplate>

</TabbedPage>

Pada elemen TabbedPage dapat ditambahkan template yang berisi layout dari Tab halaman yang akan dibuat.

2. Untuk menambahkan icon berupa file .png, anda dapat menaruh icon tersebut kedalam project Droid pada folder Resources\drawable seperti yang sudah ditunjukan pada modul sebelumnya. Contoh disini dengan nama file monkeyicon.png

3. Kemudian tambahkan kode berikut pada file App.xaml.cs untuk menjalankan halaman TabbedPageDemo ketika aplikasi dijalankan untuk pertama kali.

public App()

{

MainPage = new TabbedPageDemo();

}

4. Buat class baru dengan nama MonkeyDataModel.cs. Class ini akan digunakan sebagai sumber data yang ditampilkan pada kontrol Tab.

public class MonkeyDataModel

{

public string Name { set; get; }

public string Family { set; get; }

public string Subfamily { set; get; }

public string Tribe { set; get; }

public string Genus { set; get; }

public string PhotoUrl { set; get; }

public static IList<MonkeyDataModel> All { set; get; }

static MonkeyDataModel ()

{

All = new ObservableCollection<MonkeyDataModel> {

new MonkeyDataModel {

Name = "Chimpanzee",

Family = "Hominidae",

Subfamily = "Homininae",

Tribe = "Panini",

Genus = "Pan",

PhotoUrl = "http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Schimpanse_Zoo_Leipzig.jpg/640px-Schimpanse_Zoo_Leipzig.jpg"

new MonkeyDataModel {

Name = "Orangutan",

Family = "Hominidae",

Subfamily = "Ponginae",

Genus = "Pongo",

PhotoUrl = "http://upload.wikimedia.org/wikipedia/commons/b/be/Orang_Utan%2C_Semenggok_Forest_Reserve%2C_Sarawak%2C_Borneo%2C_Malaysia.JPG"

new MonkeyDataModel {

Name = "Tamarin",

Family = "Callitrichidae",

Genus = "Saguinus",

PhotoUrl = "http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Tamarin_portrait_2_edit3.jpg/640px-Tamarin_portrait_2_edit3.jpg"

}

};

}

5. Tambahkan kode NonNullToBooleanConverter.cs pada project portable. Kode ini digunakan untuk mengkonversi data yang akan ditampilkan pada tab jika datanya bernilai null.

class NonNullToBooleanConverter : IValueConverter

{

public object Convert (object value, Type targetType, object parameter, CultureInfo culture)

{

if (value is string) {

return !string.IsNullOrEmpty ((string)value);

}

return value != null;

}

public object ConvertBack (object value, Type targetType, object parameter, CultureInfo culture)

{

return null;

}

6. Langkah terakhir tambahkan kode pada file TabbedPageDemo.cs.

public TabbedPageDemo()

{

InitializeComponent ();

ItemsSource = MonkeyDataModel.All;

}

Tekan tombol F5 untuk menjalankan program pada Android Emulator. Tampilan pengiriman master page dapat dilihat pada gambar berikut ini.

https://gifdicoding.blob.core.windows.net/academyxamarin/monkey.gif

Bekerja dengan SQL Lite

Pada subbab berikut akan dibahas bagaimana cara untuk menyimpan data secara lokal menggunakan database SQLite. Contoh aplikasi yang akan dibuat adalah aplikasi untuk menyimpan dan memanipulasi data Pegawai.

Membuat Aplikasi Daftar Pegawai dengan SQLite

1. Buat Xamarin Form solution dengan nama SampleSQLite.

2. Kemudian tambahkan library SQLite.Net-PCL pada semua project agar dapat menggunakan SQLite.

3. Klik kanan pada solution 'SampleSQLite'. Kemudian pilih NuGET package dan tambahkan paket SQLite.Net-PCL pada project portable, dan droid.

4. Pada project portable SampleSQLite tambahkan kode c# berikut untuk membuat objek interface yang digunakan untuk membuat method koneksi.

using SQLite.Net;

namespace SampleSQLite

{

public interface ISQLIte

{

SQLiteConnection GetConnection();

}

5. Pada project Droid, buat class dengan nama SqliteService.cs dan tambahkan kode berikut untuk membuat db sqlite baru:

using System;

using Xamarin.Forms;

using SampleSQLite.Droid;

using System.IO;

using SampleSQLite;

[assembly: Dependency(typeof(SqliteService))]

namespace SampleSQLite.Droid

{

public class SqliteService : ISQLIte

{

public SqliteService() { }

public SQLite.Net.SQLiteConnection GetConnection()

{

var sqliteFilename = "Pegawai.db3";

string documentsPath =

Environment.GetFolderPath(Environment.SpecialFolder.Personal);

var path = Path.Combine(documentsPath, sqliteFilename);

Console.WriteLine(path);

if (!File.Exists(path)) File.Create(path);

var plat = new SQLite.Net.Platform.XamarinAndroid.SQLitePlatformAndroid();

var conn = new SQLite.Net.SQLiteConnection(plat, path);

return conn;

}

6. Pada kode diatas kita akan membuat file database lokal dengan nama Pegawai.db3. File database tersebut akan disimpan kedalam folder pada device android anda yaitu pada folder /data/data/[your.package.name]/files.

7. Pada project portable tambahkan class dengan nama Employee.cs yang akan digunakan untuk menyimpan data pegawai pada database SQLite.

using SQLite.Net.Attributes;

using System;

namespace SampleSQLite

{

public class Employee

{

[PrimaryKey, AutoIncrement]

public long EmpId { get; set; }

[NotNull]

public string EmpName { get; set; }

public string Designation { get; set; }

public string Department { get; set; }

public string Qualification { get; set; }

}

8. Keyword PrimaryKey menandakan bahwa field EmpId adalah primary key. Autoincrement menunjukan bahwa kode EmpId akan digenerate otomatis oleh SQLite secara berurutan.

9. Pada project portable tambahkan juga class dengan nama DataAccess.cs. Kemudian tambahkan kode berikut:

using SQLite.Net;

using System.Collections.Generic;

using Xamarin.Forms;

namespace SampleSQLite

{

public class DataAccess

{

SQLiteConnection dbConn;

public DataAccess()

{

dbConn = DependencyService.Get<ISQLIte>().GetConnection();

dbConn.CreateTable<Employee>();

}

public List<Employee> GetAllEmployees()

{

return dbConn.Query<Employee>("Select * From [Employee]");

}

public int SaveEmployee(Employee aEmployee)

{

return dbConn.Insert(aEmployee);

}

public int DeleteEmployee(Employee aEmployee)

{

return dbConn.Delete(aEmployee);

}

public int EditEmployee(Employee aEmployee)

{

return dbConn.Update(aEmployee);

}

10.Kode diatas adalah kode yang digunakan untuk membuat table baru dan perintah untuk CRUD (Create, Read, Update, Delete).

11. Pada project portable tambahkan juga kode berikut pada file App.xaml.cs.

namespace SampleSQLite

{

public partial class App : Application

{

private static DataAccess dbUtils;

public App()

{

InitializeComponent();

MainPage = new NavigationPage(new ManageEmployee());

}

public static DataAccess DBUtils

{

get

{

if (dbUtils == null)

{

dbUtils = new DataAccess();

}

return dbUtils;

}

12. Class tersebut adalah class yang akan dijalankan untuk pertama kali ketika aplikasi tersebut dijalankan.

13. Untuk menampilkan data pegawai, buat halaman xaml baru dengan nama ManageEmployee.xaml. Kemudian 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"

x:Class="SampleSQLite.ManageEmployee">

<ListView.HeaderTemplate>

</StackLayout>

</DataTemplate>

</ListView.HeaderTemplate>

<ListView.ItemTemplate>

</StackLayout>

</ViewCell>

</DataTemplate>

</ListView.ItemTemplate>

<ListView.FooterTemplate>

</StackLayout>

</DataTemplate>

</ListView.FooterTemplate>

</ListView>

</StackLayout>

</ContentPage>

14. Pada kode xaml diatas ditambahkan sebuah kontrol ListView untuk menampilkan data yang akan diambil dari media penyimpanan lokal SQLIte.

15. Pada file ManageEmployee.xaml.cs tambahkan kode berikut.

namespace SampleSQLite

{

public partial class ManageEmployee : ContentPage

{

public ManageEmployee()

{

InitializeComponent();

var vList = App.DBUtils.GetAllEmployees();

lstData.ItemsSource = vList;

}

void OnSelection(object sender, SelectedItemChangedEventArgs e)

{

if (e.SelectedItem == null)

{

return;

}

var vSelUser = (Employee)e.SelectedItem;

Navigation.PushAsync(new ShowEmployee(vSelUser));

}

public void OnNewClicked(object sender, EventArgs args)

{

Navigation.PushAsync(new AddEmployee());

}

16. Kode diatas digunakan untuk menampilkan data pegawai yang diambil dari media penyimpanan lokal dan juga menangani event untuk memilih data yang ada pada kontrol ListView untuk ditampilkan detailnya.

17. Untuk menangani penambahan data pegawai baru, buat halaman xaml baru dengan nama AddEmployee.xaml. Kemudian tambahkan kode xaml berikut ini:

<?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="SampleSQLite.AddEmployee">

<ContentView.Padding>

</ContentView.Padding>

<ContentView.Content>

</ContentView.Content>

</ContentView>

</ViewCell>

</TableSection>

</TableRoot>

</TableView>

</StackLayout>

</ContentPage>

18. Kemudian tambahka kode pada file AddEmployee.xaml.cs sebagai berikut.

using Xamarin.Forms;

namespace SampleSQLite

{

public partial class AddEmployee : ContentPage

{

public AddEmployee()

{

InitializeComponent();

}

public void OnSaveClicked(object sender, EventArgs args)

{

var vEmployee = new Employee()

{

EmpName = txtEmpName.Text,

Department = txtDepartment.Text,

Designation = txtDesign.Text,

Qualification = txtQualification.Text

};

App.DBUtils.SaveEmployee(vEmployee);

Navigation.PushAsync(new ManageEmployee());

}

19. Untuk menampilkan halaman detail pegawai per record, tambahkan halaman xaml dengan nama ShowEmployee.xaml. Halaman ini juga memiliki tombol edit dan delete record.

<?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="SampleSQLite.ShowEmpolyee">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</StackLayout>

</ContentPage>

20. Kemudian tambahkan kode berikut pada file ShowEmployee.xaml.cs.

namespace SampleSQLite

{

public partial class ShowEmpolyee : ContentPage

{

Employee mSelEmployee;

public ShowEmployee(Employee aSelectedEmp)

{

InitializeComponent();

mSelEmployee = aSelectedEmp;

BindingContext = mSelEmployee;

}

public void OnEditClicked(object sender, EventArgs args)

{

Navigation.PushAsync(new EditEmployee(mSelEmployee));

}

public async void OnDeleteClicked(object sender, EventArgs args)

{

bool accepted = await DisplayAlert("Konfirmasi", "Apakah anda yakin untuk mendelete data ?", "Yes", "No");

if (accepted)

{

App.DBUtils.DeleteEmployee(mSelEmployee);

}

await Navigation.PushAsync(new ManageEmployee());

}

21. Terakhir tambahkan halaman xaml untuk mengedit data dengan nama EditEmployee.xaml. Kemudian 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"

x:Class="SampleSQLite.EditEmployee">

<ContentView.Padding>

</ContentView.Padding>

<ContentView.Content>

</ContentView.Content>

</ContentView>

</ViewCell>

</TableSection>

</TableRoot>

</TableView>

</StackLayout>

</ContentPage>

22. Tambahkan kode untuk mengedit data pada file EditEmployee.xaml.cs dibawah ini.

namespace SampleSQLite

{

public partial class EditEmployee : ContentPage

{

Employee mSelEmployee;

public EditEmployee(Employee aSelectedEmp)

{

InitializeComponent();

mSelEmployee = aSelectedEmp;

BindingContext = mSelEmployee;

}

public void OnSaveClicked(object sender, EventArgs args)

{

mSelEmployee.EmpName = txtEmpName.Text;

mSelEmployee.Department = txtDepartment.Text;

mSelEmployee.Designation = txtDesign.Text;

mSelEmployee.Qualification = txtQualification.Text;

App.DBUtils.EditEmployee(mSelEmployee);

Navigation.PushAsync(new ManageEmployee());

}

23. Tekan tombol F5 untuk menjalankan program pada Android Emulator.

Menggunakan REST Services pada Xamarin Forms

Pada contoh dibawah ini REST Services yang dibangun menggunakan framework ASP.NET Web API yang sudah dipasang pada layanan komputasi awan Microsoft Azure.

Adapun alamat dari REST Service yang digunakan: http://actservices.azurewebsites.net/api/TodoItem/

Untuk pengecekan apakah Web Services tersebut dapat berjalan, anda dapat menggunakan tool Fiddler. Anda dapat mengunduh tools fiddler secara gratis pada tautan berikut ini https://www.telerik.com/download/fiddler.

Mengakses REST Services Menggunakan Fiddler.

1. Langkah pertama yang akan dilakukan adalah melakukan percobaan untuk mengakses contoh backend services yang sudah tersedia.

2. Buka tools fiddler, kemudian arahkan ke tab Composer. Pilih method GET untuk mengambil dari dari REST Services, kemudian tambahkan alamat berikut http://actservices.azurewebsites.net/api/TodoItem/. Kemudian tekan tombol Execute.

3. Pada jendela bagian kiri akan ditampilkan hasil-nya. Status yang tertera adalah 200 OK yang menunjukan bahwa request ke server berhasil.

4. Data JSON yang dikembalikan dapat dilihat pada gambar dibawah ini.

Mengakses REST Services dari Xamarin Forms.

1. Buat project Xamarin Forms baru dengan nama TodoREST.

2. Klik kanan pada solution kemudian pilih Manage Nuget Package for Solution. Kemudian tambahkan library Microsoft.Bcl.Build, Microsoft.Net.Http, dan Newtonsoft.Json.

3. Pada project Portable, tambahkan folder dengan nama Models. Kemudian tambahkan class dengan nama TodoItem.cs. Class ini akan digunakan untuk membuat objek yang dapat menampung data dari REST Services. Tambahkan kode c# berikut:

namespace TodoREST

{

public class TodoItem

{

public string ID { get; set; }

public string Name { get; set; }

public string Notes { get; set; }

public bool Done { get; set; }

}

4. Pada project portable, tambahkan juga class dengan nama Constants.cs untuk menyimpan alamat url dari REST Services.

public static class Constants

{

public static string RestUrl =

"http://actservices.azurewebsites.net/api/TodoItem/{0}";

}

5. Pada project portable, tambahkan foder dengan nama Data. Kemudian pada folder tersebut tambahkan interface baru dengan nama IRestService.cs. Interface ini berisi method-method yang akan digunakan untuk menampilkan, menambahkan, mengedit, dan mendelete data.

using System.Threading.Tasks;

using TodoREST.Models;

namespace TodoREST.Data

{

public interface IRestService

{

Task<List<TodoItem>> RefreshDataAsync();

Task SaveTodoItemAsync(TodoItem item, bool isNewItem);

Task DeleteTodoItemAsync(string id);

}

6. Pada folder Data, tambahkan class dengan nama RestServices.cs. Class ini digunakan untuk mengakses REST Services menggunakan class HttpClient dan menampung datanya kedalam objek koleksi yang sudah disediakan.

using System;

using System.Collections.Generic;

using System.Diagnostics;

using System.Net.Http;

using System.Net.Http.Headers;

using System.Text;

using System.Threading.Tasks;

using Newtonsoft.Json;

using TodoREST.Data;

namespace TodoREST.Data

{

public class RestService : IRestService

{

HttpClient client;

public List<TodoItem> Items { get; private set; }

public RestService()

{

client = new HttpClient();

client.MaxResponseContentBufferSize = 256000;

}

public async Task<List<TodoItem>> RefreshDataAsync()

{

Items = new List<TodoItem>();

var uri = new Uri(string.Format(Constants.RestUrl, string.Empty));

try

{

var response = await client.GetAsync(uri);

if (response.IsSuccessStatusCode)

{

var content = await response.Content.ReadAsStringAsync();

Items = JsonConvert.DeserializeObject<List<TodoItem>>(content);

}

catch (Exception ex)

{

Debug.WriteLine(@"Kesalahan {0}", ex.Message);

}

return Items;

}

public async Task SaveTodoItemAsync(TodoItem item, bool isNewItem = false)

{

var uriPost = new Uri(string.Format(Constants.RestUrl, string.Empty));

var uriPut = new Uri(string.Format(Constants.RestUrl, item.ID));

try

{

var json = JsonConvert.SerializeObject(item);

var content = new StringContent(json, Encoding.UTF8, "application/json");

HttpResponseMessage response = null;

if (isNewItem)

{

response = await client.PostAsync(uriPost, content);

}

else

{

response = await client.PutAsync(uriPut, content);

}

if (response.IsSuccessStatusCode)

{

Debug.WriteLine(@"TodoItem berhasil disimpan.");

}

catch (Exception ex)

{

Debug.WriteLine(@"Kesalahan {0}", ex.Message);

}

public async Task DeleteTodoItemAsync(string id)

{

var uri = new Uri(string.Format(Constants.RestUrl, id));

try

{

var response = await client.DeleteAsync(uri);

if (response.IsSuccessStatusCode)

{

Debug.WriteLine(@"TodoItem berhasil didelete.");

}

catch (Exception ex)

{

Debug.WriteLine(@"Kesalahan {0}", ex.Message);

}

7. Class diatas berisi method-method untuk mengakses REST Services yang digunakan untuk menampilkan, menambah, mengedit, dan mendelete data.

8. Pada folder Data, tambahkan class dengan nama TodoItemManager.cs. Class ini berfungsi untuk memanggil method pada class RestServices.cs.

using System.Collections.Generic;

using System.Threading.Tasks;

using TodoREST.Models;

namespace TodoREST.Data

{

public class TodoItemManager

{

IRestService restService;

public TodoItemManager(IRestService service)

{

restService = service;

}

public Task<List<TodoItem>> GetTasksAsync()

{

return restService.RefreshDataAsync();

}

public Task SaveTaskAsync(TodoItem item, bool isNewItem = false)

{

return restService.SaveTodoItemAsync(item, isNewItem);

}

public Task DeleteTaskAsync(TodoItem item)

{

return restService.DeleteTodoItemAsync(item.ID);

}

9. Langkah selanjutnya adalah menampilkan data yang sudah diambil dari REST Services. Untuk itu pada project portable buat folder baru dengan nama Views.

10. Pada folder Views tambahkan halaman xaml dengan nama TodoListPage.xaml. Halaman ini digunakan untuk menampilkan informasi todolist pada kontrol ListView.

<?xml version="1.0" encoding="UTF-8"?>

<ContentPage.ToolbarItems>

<ToolbarItem.Icon>

</ToolbarItem.Icon>

</ToolbarItem>

</ContentPage.ToolbarItems>

<ContentPage.Content>

<ListView.ItemTemplate>

</StackLayout>

</ViewCell>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</ContentPage.Content>

</ContentPage>

11. Tambahkan gambar plus.png dan icon.png pada project Droid (folder Resources\drawable). Dengan klik kanan pada drawable > Add > Existing Item... > kemudian cari gambar icon

12. Kemudian tambahkan kode berikut pada file TodoListPage.xaml.cs.

using Xamarin.Forms;

namespace TodoREST.Views

{

public partial class TodoListPage : ContentPage

{

bool alertShown = false;

public TodoListPage()

{

InitializeComponent();

}

protected async override void OnAppearing()

{

base.OnAppearing();

listView.ItemsSource = await App.TodoManager.GetTasksAsync();

}

void OnAddItemClicked(object sender, EventArgs e)

{

var todoItem = new TodoItem()

{

ID = Guid.NewGuid().ToString()

};

var todoPage = new TodoItemPage(true);

todoPage.BindingContext = todoItem;

Navigation.PushAsync(todoPage);

}

void OnItemSelected(object sender, SelectedItemChangedEventArgs e)

{

var todoItem = e.SelectedItem as TodoItem;

var todoPage = new TodoItemPage();

todoPage.BindingContext = todoItem;

Navigation.PushAsync(todoPage);

}

13. Kode diatas berisi method yang digunakan untuk menampilkan data todo list kedalam kontrol ListView, dan menambahkan event ketika list tersebut dipilih.

14. Tambahkan halaman xaml baru dengan nama TodoItemPage.xaml. Halaman ini digunakan untuk menampilkan detail todo, mengedit, dan mendelete data.

<?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="TodoREST.TodoItemPage"

Title="Todo">

<ContentPage.Content>

</StackLayout>

</ContentPage.Content>

</ContentPage>

15. Tambahkan kode berikut pada file TodoItemPage.xaml.cs.

using System;

using TodoREST.Models;

using Xamarin.Forms;

namespace TodoREST

{

public partial class TodoItemPage : ContentPage

{

bool isNewItem;

public TodoItemPage(bool isNew = false)

{

InitializeComponent();

isNewItem = isNew;

}

async void OnSaveActivated(object sender, EventArgs e)

{

var todoItem = (TodoItem)BindingContext;

await App.TodoManager.SaveTaskAsync(todoItem, isNewItem);

await Navigation.PopAsync();

}

async void OnDeleteActivated(object sender, EventArgs e)

{

var todoItem = (TodoItem)BindingContext;

await App.TodoManager.DeleteTaskAsync(todoItem);

await Navigation.PopAsync();

}

void OnCancelActivated(object sender, EventArgs e)

{

Navigation.PopAsync();

}

16. Langkat terakhir tambahkan kode berikut pada file App.xaml.cs pada project portable.

using TodoREST.Data;

using Xamarin.Forms;

public class App : Application

{

public static TodoItemManager TodoManager { get; private set; }

public App()

{

TodoManager = new TodoItemManager(new RestService());

MainPage = new NavigationPage(new TodoListPage());

}

17. Tekan tombol F5 untuk menjalankan aplikasi pada emulator Android.

Menjalankan Xamarin Forms pada IOS Platform

Untuk dapat terkoneksi dengan komputer Mac, mengkompilasi kode, dan menjalankan aplikasi pada IOS simulator, anda harus terhubung dengan komputer Mac yang berada pada satu jaringan. Selain itu anda juga membutuhkan beberapa program yang harus sudah terinstal pada komputer Mac anda. Adapun requirement yang dibutuhkan untuk diinstal pada komputer Mac adalah sebagai berikut:

Komputer Mac yang menjalankan OS X Yosemite (10.10) atau versi yang lebih tinggi.
Xamarin Studio 5.10 atau versi yang lebih tinggi.
Xamarin.iOS SDK.
Apple’s Xcode(7+) IDE dan iOS SDK.

Anda dapat mendownload XCode pada link dibawah ini:

https://developer.apple.com/download/.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image1.png

Pada modul ini saya akan menggunakan XCode versi 8.2.1. Setelah XCode terinstal, maka langkah selanjutnya yang harus dilakukan adalah menginstal Xamarin for Mac. Anda dapat mengunduh Xamarin for Mac pada link berikut ini: https://www.xamarin.com/download

Untuk membuat aplikasi Xamarin Forms IOS ada dua alternatif cara pengembangan aplikasi yang dapat anda pilih. Yang paling mudah adalah anda langsung menggunakan komputer Mac dan menggunakan editor Xamarin Studio for Mac, cara ini lebih praktis dan mudah karena tidak perlu menggunakan lebih dari 1 komputer.

Cara yang kedua adalah dengan tetap menggunakan komputer Windows dan IDE Visual Studio 2015. Cara ini dibutuhkan jika anda menginginkan mendeploy aplikasi anda tidak hanya pada platform Android dan IOS. Dengan menggunakan sistem operasi Windows 10, maka anda dapat mentarget platform yang lebih luas seperti Windows 8.1, Windows Phone, dan Windows 10 UWP (Universal Windows Platform).

Menggunakan Xamarin Studio for Mac

1. Buka editor Xamarin Studio for Mac. Kemudian pilih New Solution. Pada jendela New Solution pilih Multiplatform App - Xamarin Forms - Form App.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image2.png

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image3.png

2. Pilih tombol Next, kemudian beri nama aplikasinya Modul6_1. Untuk informasi organization identifier anda dapat menambahkan nama namespace dari project anda secara bebas. Pada contoh ini saya memberi nama com.dicodingxamarin. Karena anda menggunakan komputer Mac maka target aplikasi yang dapat dibuat adalah aplikasi Android dan IOS. Anda tidak dapat mentarget aplikasi Windows jika menggunakan komputer Mac.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image4.png

3. Untuk pilihan Shared Code pilih Portable Class Library dan jangan lupa untuk mencentang pilihan “Use XAML for user interface files”, kemudian pilih tombol Next.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image5.png

4. Tentukan lokasi dimana anda akan menyimpan project anda pada komputer Mac. Kemudian tekan tombol Create untuk membuat solution baru. Tampilan IDE Xamarin Studio for Mac dapat dilihat pada gambar dibawah ini.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image6.png

5. Pada solution diatas mempunyai 3 macam project yaitu Portable, Android, dan IOS. Klik kanan pada project IOS kemudian pilih “Set as startup project”.

Untuk menjalankan project pada IOS simulator, pilih tombol Run.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image7.png

Maka akan IOS simulator akan dijalankan, dan project tersebut akan di deploy pada IOS simulator tersebut. Tampilan IOS simulator yang menjalankan project dapat dilihat pada gambar berikut.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image8.png

Mendeploy Aplikasi IOS pada Devices (IPhone atau IPad)

Selain menggunakan simulator, anda juga dapat langsung mendeploy aplikasi IOS yang sudah kita buat pada Xamarin Forms ke devices.

Untuk mendeploy aplikasi IOS ke device ada beberapa langkah yang harus dipenuhi. Urutan langkah tersebut dapat dilihat pada bagan dibawah ini:

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image9.png

(sumber: https://developer.xamarin.com/guides/ios/getting_started/installation/device_provisioning/)

Membuat Development Certificate (Signing Identities)

1. Langkah pertama yang harus dilakukan adalah anda harus memiliki AppleID, jika belum anda dapat membuat AppleID terlebih dahulu.

2. Buka Xcode, pilih Xcode Menu – Preferences.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image10.png

3. Kemudian pilih Account Tabs

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image11.png

4. Tambahkan AppleID kedalam menu Accounts. Kemudian pilih tombol “View Details”.

5. Akan ditampilkan pilihan Signing Identities, pilih iOS Development, dan pilih tombol Create.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image12.png

6. Apple mungkin akan mengingatkan anda untuk menyetujui perubahan license agreement.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image13.png

7. Log in ke dalam Apple Developer Center (https://developer.apple.com/) untuk menyetujui agreement yang baru.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image14.png

8. Untuk memastikan bahwa anda sudah berhasil membuat Signing Identity maka anda dapat membuka aplikasi Keychain Access pada komputer Mac anda.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image15.png

9. Pada daftar diatas dapat dilihat Certificate Signing Identity yang berhasil dibuat.

Menambahkan Devices

Langkah selanjutnya adalah membuat provisioning profile dan entities yang dibutuhkan untuk dapat menjalankan aplikasi pada iOS devices. Device yang akan digunakan juga harus memiliki versi OS yang kompatibel dengan versi XCode yang anda gunakan, jika berlainan maka anda harus mengupdate versi XCode dan OS pada Devices.

Untuk membuat provisioning profile, anda harus mendaftarkan devices yang akan digunakan. Ikuti langkah-langkah dibawah ini:

1. Jalankan XCode

2. Sambungkan device dengan menggunakan kabel USB

3. Pilih Windows menu, kemudian pilih Devices

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image16.png

4. Anda dapat meilihat bahwa device anda sudah terhubung dengan XCode.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image17.png

5. Buat project baru pada XCode

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image18.png

6. Kemudian pilih Single View Application, dan pilih tombol Next.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image19.png

7. Tambahkan informasi nama project dan organization identifier. Pemberian nama ini akan menentukan nama namespacenya. Misal pada contoh dibawah ini nama namespacenya adalah com.actualsolusi.HelloXamarin.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image20.png

8. Pilih folder untuk menyimpan project XCode yang kita buat.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image21.png

9. Setelah project jadi maka XCode secara otomatis akan menggunakan Signing Identity yang sebelumnya sudah anda buat, kemudian membuat provisioning profile secara otomatis.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image22.png

10. Detail provisioning profilenya dapat dilihat pada gambar dibawah ini:

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image23.png

11. Provisioning profile ini yang nanti akan kita gunakan pada project Xamarin Forms.

Membuat Project Xamarin Forms.

1. Buka tools Xamarin Studio, kemudian buat solution baru. Pilih Xamarin Forms App.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image24.png

2. Beri nama project dan organization identifier sama dengan project XCode yang sudah kita buat sebelumnya.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image25.png

3. Pilih lokasi untuk menyimpan project Xamarin Forms yang anda buat.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image26.png

4. Pada project IOS buka file info.plist dan pastikan namespace nya sama dengan namespace project yang sudah anda buat di XCode.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image27.png

5. Klik kanan pada project HelloXamarin.IOS, kemudian pilih IOS Bundle Signing. Masukan Signing Identity dan Provisioning Profile sesuai dengan gambar dibawah ini.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image28.png

6. Untuk mencoba menjalankan aplikasi pada device, pilih target device (pada contoh berikut adalah Erick’s iPad). Kemudian tekan tombol Run untuk menjalankan aplikasi Xamarin Forms pada device.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image29.png

7. Jika berhasil maka aplikasi yang sudah kita buat akan terinstal di device seperti pada gambar berikut.

https://gifdicoding.blob.core.windows.net/academyxamarin/m6_image30.png

Menambahkan Layanan Azure Mobile App.

Azure Mobile App adalah salah satu layanan dari Microsoft Azure yang dikhususkan untuk mendukung aplikasi Mobile. Dengan menggunakan layanan Azure Mobile App maka pengembang aplikasi mobile tidak perlu membuat sendiri backend services secara manual. Azure Mobile App menyediakan berbagai fitur yang memudahkan pengembang aplikasi mobile untuk bekerja dengan data menggunakan Easy Table, Autentikasi, Push Services, dan juga kemampuan sinkronisasi secara offline (offline data sysnc).

1. Masuk kedalam portal Microsoft Azure (portal.azure.com). kemudian pilih layanan Mobile Apps Quickstart untuk membuat layanan Mobile Apps secara instan.

https://gifdicoding.blob.core.windows.net/academyxamarin/m7_image1.png

2. Tekan tombol “Create” untuk membuat layanan Mobile Apps Quickstart.

https://gifdicoding.blob.core.windows.net/academyxamarin/m7_image2.png

3. Masukan nama services sebagai contoh saya memasukan nama layanan dengan nama “actualmobileservices”(Anda tidak dapat menggunakan nama yang sudah digunakan).

4. Kemudian pilih Subscription, pada contoh ini digunakan accout Dreamspark/Microsoft Imagine (free account untuk mahasiswa dan akademisi).

5. Buat resource group baru. Resource group digunakan untuk mengelompokan layanan yang ada di azure.

6. Untuk plan digunakan plan FREE yang dapat digunakan jika menggunakan account Dreamspark/Microsoft Imagine. Untuk lokasi data center pilih yang terdekat yaitu SEA (Southeast Asia).

7. Pilih tombol Create untuk membuat layanan Mobile App.

https://gifdicoding.blob.core.windows.net/academyxamarin/m7_image3.png

8. Setelah berhasil membuat layanan tersebut, masuk kedalam menu layanan Mobile App sebagai berikut. Disana anda dapat melihat berbagai macam fitur yang ditawarkan.

https://gifdicoding.blob.core.windows.net/academyxamarin/m7_image4.png

9. Pilih salah satu fitur yang ada yaitu “Easy Tables”. Dengan Easy Table anda dapat membuat table dengan mudah dan mengakses table tersebut menggunakan REST web services atau menggunakan Azure Mobile App SDK pada Xamarin Forms.

10. Secara default Easy Table akan menyimpan data pada database SQLite yang ada pada server, ini tidak disarankan untuk kepentingan production. SQLite masih dapat digunakan untuk kepentingan development.

https://gifdicoding.blob.core.windows.net/academyxamarin/m7_image5.png

11. Langkah selanjutnya adalah membuat easy table dengan nama Barang.

https://gifdicoding.blob.core.windows.net/academyxamarin/m7_image6.png

12. Untuk melihat daftar kolom yang ada pada table di Easy Table anda dapat memilih pilihan Manage schema.

13. Anda dapat menambahkan table baru, serta menambahkan kolom yang dibutuhkan.

https://gifdicoding.blob.core.windows.net/academyxamarin/m7_image7.png

14. Kemudian pada table schema, tambahkan kolom baru yaitu KodeBarang, NamaBarang, Stok, HargaBeli, dan HargaJual.

https://gifdicoding.blob.core.windows.net/academyxamarin/m7_image8.png

Membuat Xamarin Forms Project

1. Buat Xamarin Forms Project dengan nama SampeMobileAzure.

https://gifdicoding.blob.core.windows.net/academyxamarin/m7_image9.png

2. Tambahkan package Microsoft.Azure.Mobile.Client pada project.

https://gifdicoding.blob.core.windows.net/academyxamarin/m7_image10.png

3. Kemudian pada project portable tambahkan class Barang sebagai representasi dari table Barang yang ada pada Easy Table di Azure.

using Microsoft.WindowsAzure.MobileServices;

using Newtonsoft.Json;

namespace SampleMobileAzure

{

public class Barang

{

private string _id;

[JsonProperty(PropertyName = "id")]

public string Id

{

get { return _id; }

set { _id = value; }

}

private string _kodeBarang;

[JsonProperty(PropertyName = "KodeBarang")]

public string KodeBarang

{

get { return _kodeBarang; }

set { _kodeBarang = value; }

}

private string _namaBarang;

[JsonProperty(PropertyName = "NamaBarang")]

public string NamaBarang

{

get { return _namaBarang; }

set { _namaBarang = value; }

}

private int _stok;

[JsonProperty(PropertyName = "Stok")]

public int Stok

{

get { return _stok; }

set { _stok = value; }

}

private decimal _hargaBeli;

[JsonProperty(PropertyName = "HargaBeli")]

public decimal HargaBeli

{

get { return _hargaBeli; }

set { _hargaBeli = value; }

}

private decimal _hargaJual;

[JsonProperty(PropertyName = "HargaJual")]

public decimal HargaJual

{

get { return _hargaJual; }

set { _hargaJual = value; }

}

[Version]

public string Version { get; set; }

}

4. Tambahkan juga class dengan nama Constants.cs yang digunakan untuk menyimpan url dari web services yang diakses.

namespace SampleMobileAzure

{

public static class Constants

{

public static string ApplicationURL = @"https://actualmobileservices.azurewebsites.net";

}

5. Tambahkan class BarangManager.cs, tambahkan method yang akan digunakan untuk mengambil data, menambah, dan mengupdate data dari Mobile App services.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Microsoft.WindowsAzure.MobileServices;

using System.Diagnostics;

using System.Collections.ObjectModel;

using SampeMobileAzure;

namespace SampleMobileAzure

{

public class BarangManager

{

private IMobileServiceTable<Barang> _barangTable;

public BarangManager()

{

var client = new MobileServiceClient(Constants.ApplicationURL);

_barangTable = client.GetTable<Barang>();

}

public async Task<ObservableCollection<Barang>> GetBarangAsync()

{

try

{

IEnumerable<Barang> barangs = await _barangTable.ToEnumerableAsync();

return new ObservableCollection<Barang>(barangs);

}

catch (MobileServiceInvalidOperationException msioe)

{

Debug.WriteLine("@Invalid sync operation: {0}", msioe.Message);

}

catch (Exception e)

{

Debug.WriteLine(@"Sync error: {0}", e.Message);

}

return null;

}

public async Task SaveTaskAsync(Barang barang)

{

if (barang.Id == null)

{

await _barangTable.InsertAsync(barang);

}

else

{

await _barangTable.UpdateAsync(barang);

}

6. Tambahkan class dengan nama ActivityIndicatorScope.cs. Class ini akan digunakan untuk menampilkan activity indicator pada saat aplikasi mengambil data dari services.

using System;

using System.Threading.Tasks;

using Xamarin.Forms;

namespace SampleMobileAzure

{

public class ActivityIndicatorScope : IDisposable

{

private bool _showIndicator;

private ActivityIndicator _indicator;

private Task _indicatorDelay;

public ActivityIndicatorScope(ActivityIndicator indicator, bool showIndicator)

{

_indicator = indicator;

_showIndicator = showIndicator;

if (showIndicator)

{

_indicatorDelay = Task.Delay(2000);

SetIndicatorActivity(true);

}

else

{

_indicatorDelay = Task.FromResult(0);

}

private void SetIndicatorActivity(bool isActive)

{

_indicator.IsVisible = isActive;

_indicator.IsRunning = isActive;

}

public void Dispose()

{

if (_showIndicator)

{

_indicatorDelay.ContinueWith(t => SetIndicatorActivity(false),

TaskScheduler.FromCurrentSynchronizationContext());

}

7. Tambahkan halaman xaml baru dengan nama BarangPage.xaml. Halaman ini digunakan untuk menampilkan data barang pada kontrol ListView.

<?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="SampleMobileAzure.BarangPage" Title="List Of Barang">

<ContentPage.ToolbarItems>

</ContentPage.ToolbarItems>

<ContentPage.Content>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<ActivityIndicator

HorizontalOptions="Center"

VerticalOptions="Center"

IsVisible="False"

IsEnabled="True"

x:Name="syncIndicator"/>

<ListView.ItemTemplate>

</StackLayout>

</ViewCell>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</Grid>

</ContentPage.Content>

</ContentPage>

8. Kemudian tambahkan kode c#-nya pada BarangPage.xaml.cs.

using System.Threading.Tasks;

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

namespace SampleMobileAzure

{

[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class BarangPage : ContentPage

{

private BarangManager _barangManager = new BarangManager();

public BarangPage()

{

InitializeComponent();

}

protected override async void OnAppearing()

{

base.OnAppearing();

await RefreshItems(true);

}

private async Task RefreshItems(bool showActivityIndicator)

{

using (var scope = new ActivityIndicatorScope(syncIndicator, showActivityIndicator))

{

listViewBarang.ItemsSource = await _barangManager.GetBarangAsync();

}

private async void ListView_OnItemTapped(object sender, ItemTappedEventArgs e)

{

TambahBarangPage tambahPage = new TambahBarangPage();

Barang item = (Barang) e.Item;

tambahPage.BindingContext = item;

((ListView) sender).SelectedItem = null;

await Navigation.PushAsync(tambahPage);

}

private async void MenuItem_OnClicked(object sender, EventArgs e)

{

TambahBarangPage tambahPage = new TambahBarangPage(true);

await Navigation.PushAsync(tambahPage);

}

private async void ListViewBarang_OnRefreshing(object sender, EventArgs e)

{

var list = (ListView) sender;

Exception error = null;

try

{

await RefreshItems(false);

}

catch (Exception ex)

{

error = ex;

}

finally

{

list.EndRefresh();

}

if (error != null)

{

await DisplayAlert("Refresh Error !", "Couldn't refresh data (" + error.Message + ")", "OK");

}

9. Kemudian tambahkan halaman dengan nama TambahBarangPage.xaml. Halaman ini akan digunakan untuk menampilkan data, menambah data, dan mengupdate data.

<?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="SampleMobileAzure.TambahBarangPage" Title="Tambah Barang">

<ContentPage.Content>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackLayout>

</Grid>

</ContentPage.Content>

</ContentPage>

10. Kemudian tambahkan kode pada TambahBarangPage.xaml.cs untuk menambah dan mengupdate data Barang.

using System;

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

namespace SampleMobileAzure

{

[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class TambahBarangPage : ContentPage

{

private BarangManager _barangManager = new BarangManager();

private bool _isNew = false;

public TambahBarangPage()

{

InitializeComponent();

}

private void ClearAll()

{

foreach (var ctr in gvBarang.Children)

{

if (ctr is Entry)

{

var item = ctr as Entry;

item.Text = string.Empty;

}

public TambahBarangPage(bool isNew)

{

InitializeComponent();

_isNew = isNew;

if (_isNew)

{

txtKodeBarang.Focus();

}

private async void BtnSave_OnClicked(object sender, EventArgs e)

{

if (_isNew)

{

var barang = new Barang()

{

KodeBarang = txtKodeBarang.Text,

NamaBarang = txtNamaBarang.Text,

Stok = Convert.ToInt32(txtStok.Text),

HargaBeli = Convert.ToDecimal(txtHargaBeli.Text),

HargaJual = Convert.ToDecimal(txtHargaJual.Text)

};

await _barangManager.SaveTaskAsync(barang);

ClearAll();

await DisplayAlert("Keterangan", "Data Barang berhasil ditambah !", "OK");

}

else

{

var barang = (Barang) this.BindingContext;

await _barangManager.SaveTaskAsync(barang);

await DisplayAlert("Keterangan", "Data Barang berhasil diupdate !", "OK");

}

11. Sebelum menjalankan ke emulator, atur page yang akan dijalankan terlebih dahulu. Pengaturannya terdapat pada App.xaml.cs. Sesuaikan seperti code dibawah ini:

public App()

{

InitializeComponent();

MainPage = new NavigationPage(new BarangPage());

}

12. Jalankan aplikasi untuk melihat hasilnya pada Android emulator.

https://gifdicoding.blob.core.windows.net/academyxamarin/m7_image11.png

https://gifdicoding.blob.core.windows.net/academyxamarin/m7_image12.png

Minggu, 04 Juni 2017

Belajar

Tidak ada komentar:

Posting Komentar