Pembangunan Cross Platform Mobile App Dengan Xamarin Forms

See discussions, stats, and author profiles for this publication at: https://www.researchgate.
net/publication/323644257
Seri Belajar Xamarin: Pembangunan Cross Platform Mobile App dengan

Xamarin Forms & Visual Studio 2017
Book · March 2018
CITATIONS READS
0 4,366
2 authors:
M Reza Faisal Erick Kurniawan

Universitas Lambung Mangkurat Universitas Kristen Duta Wacana
38 PUBLICATIONS 27 CITATIONS 16 PUBLICATIONS 1 CITATION
SEE PROFILE SEE PROFILE
Some of the authors of this publication are also working on these related projects:
IT Asset Management View project
Publications View project
All content following this page was uploaded by M Reza Faisal on 08 March 2018.
The user has requested enhancement of the downloaded file.

1
KATA PENGANTAR
Penulis mendedikasikan buku ini kepada Komunitas Microsoft User Group Indonesia dan INDC yang selalu
memberi dukungan dan dorongan kepada penulis untuk terus memiliki semangat untuk berkarya dan berbagi.
Tidak lupa penulis juga mengucapkan terima kasih kepada Microsoft Indonesia atas dukungan dan dedikasinya
pada komunitas MUGI & INDC sehingga kami bisa selalu terus berkarya.
Buku ini ditujukan untuk pengembang yang ingin mempelajari pembuatan aplikasi mobile cross platform
(Android, IOS, UWP) dengan menggunakan teknologi Microsoft seperti bahasa C#, XAML, dan IDE Visual Studio
2017.
Untuk menghubungi penulis anda dapat mengirimkan email ke alamat erick@actual-training.com atau ke
reza.faisal@gmail.com.
Akhir kata semoga buku ini dapat bermanfaat bagi komunitas IT di Indonesia.
Yogyakarta, 2 Maret 2018
Erick Kurniawan & M. Reza Faisal
2
DAFTAR ISI
Daftar Isi ................................................................................................................................................................. 1

Kata Pengantar ....................................................................................................................................................... 2
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
3
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
4
BAB 1 – PENGENALAN XAMARIN FORM
PENDAHULUAN
Bab ini dibuat untuk rekan pengembang aplikasi mobile di Indonesia yang ingin belajar bagaimana cara
mengembangkan aplikasi mobile Cross Platform untuk sistem operasi IOS, Android, dan Windows 10. Xamarin
menggunakan bahasa C# dan .NET Framework, jadi bagi anda pengembang .NET yang ingin membuat aplikasi
mobile muti platform teknologi ini adalah pilihan yang tepat bagi anda. Xamarin dapat digunakan secara gratis
karena sudah satu paket dengan Visual Studio 2015 Community Edition.
APA ITU XAMARIN

Xamarin adalah platform pengembangan aplikasi mobile dari Microsoft. Dengan Xamarin anda dapat membuat
aplikasi mobile cross platform pada perangkat Android, IOS, dan Windows 10. 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:
5
Gambar dibawah ini menunjukan level pembagian kode pada Xamarin.
Microsoft baru-baru ini sudah membuat platform Xamarin Forms menjadi platform open source, dan anda dapat
mendownload kode Xamarin Forms pada link berikut https://github.com/xamarin/Xamarin.Forms.
INSTALASI VISUAL STUDIO 2017 DAN XAMARIN

Anda dapat menggunakan Xamarin dengan menginstal Visual Studio 2017 ditambah dengan paket installasi
Mobile development. Langkah pertama anda dapat menginstal Visual Studio 2017 pada link berikut ini.
Kemudian langkah selanjutnya adalah memilih paket instalasi Mobile development with .NET.
6
Ketika anda memilih paket tersebut, maka anda akan dapat membuat project Xamarin for Android, Xamarin for
IOS, dan Xamarin Forms beserta dengan semua SDK yang dibuatuhkan (baik Android maupun IOS).
MEMULAI MEMBUAT PROJECT XAMARIN FORM

Untuk memulai membuat project Xamarin Form, buka Visual Studio 2015, kemudian buat project Cross Platform
– Blank Xaml App dengan nama Latihan1.
7
Setelah project selesai dibuat maka anda akan dapat melihat tampilan solution explorer pada Visual Studio yang
berisi 3 project yaitu:
• .NET Standard: berisi project utama yang akan dishare secara otomatis ke project yang mempunyai
platform spesifik (pada versi sebelumnya disebut sebagai portable project).
• Android: project untuk platform Android.
• IOS: project untuk platform IOS.
• UWP (Windows 10) – jika anda menggunakan sistem operasi Windows 10 dan menginstal Windows
10 SDK.
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
8
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.
KOMPONEN UTAMA PADA XAMARIN

Komponen Pages, Layout, dan views merupakan komponen utama dari Xamarin Form UI. Pages adalah container
utama, sedangkan setiap tampilan di layar dibentuk dari satu class Pages. Sebuah pages dapat terdiri dari class
layout, yang mungkin mempunyai beberapa layout lagi didalamnya. Layout digunakan untuk menata isi dari
pages.
XAMARIN FORM UI
Pada Xamarin ada beberapa kontrol yang dapat di share antar platform. Ada lebih dari 40 kontrol yang dapat
digunakan yang dibagi menjadi empat bagian besar yaitu:
• Page
• Layout
• View
• Cell
PAGE
Page Class merupakan container utama yang ditampilkan pada layar. Class ini diturunkan dari
Xamarin.Form.VisualElement. Page adalah base class untuk membuat UI class yang lain. Berikut adalah beberapa
jenis Page yang dapat digunakan:
• ContentPAge
• MasterDetailPage
• NavigationPage
• TabbedPage
• CarouselPage
9
LAYOUT
Komponen Layout digunakan untuk mengatur komponen View. Komponen View berisi konten yang akan
ditampilkan pada layar. Berikut adalah beberapa jenis pengaturan layout yang dapat digunakan pada Xamarin.
• StackLayout
• AbsoluteLayout
• RelativeLayout
• Grid
• ScrollView
• Frame
• Content View
VIEW
Pada Xamarin view adalah kontrol yang digunakan untuk menampilkan data maupun menerima masukan dari
pengguna. Berikut adalah beberapa jenis view yang ada pada Xamarin Form.
• Basic View
o Label
o Image
o Button
o BoxView
• List View: mendukung scrollable dan selectable list.
o ListView
o Text Entry – user entry of text strings using a keyboard
o Entry
o Editor
• Selection: pengguna dapat memilih field.
o Picker
o DatePicker
o TimePicker
o Stepper
o Slider
o Switch
• User Feedback: digunakan untuk notifikasi status pengguna
o ActivityIndicator
o ProgressBar
MEMBUAT SOLUSI XAMARIN FORM

Ketika anda membuat solusi Xamarin Form baru, maka secara otomatis Visual Studio akan membuatkan
beberapa project dengan platform yang berbeda:
o Android Project
o IOS Project
o Windows Phone Project
o Windows Universal App Project
o Xamarin Core Library Project.
10
MEMBUAT PROJECT XAMARIN FORM
Untuk membuat aplikasi baru untuk project Xamarin Form, pilih Blank App (Xamarin Form Portable), kemudian
beri nama Bab1XamarinForm.
Setelah memilih template Xamarin Form Portable, maka Visual Studio akan membuatkan beberapa macam
project yang mendukung aplikasi cross platform sebagai berikut:
Lihat project Bab1XamarinForm, project ini berisi kode-kode yang akan digunakan secara portable pada project
yang lain. Halaman App.xaml adalah halaman yang pertama kali akan dijalankan pada aplikasi ini. Pada kode
dibawah ini dapat dilihat bahwa pada saat aplikasi dijalankan pertama kali maka halaman yang akan dipanggil
untuk ditampilkan adalah halaman MainPage.xaml.
public App()
{
InitializeComponent();
11
MainPage = new Bab1XamarinForm.MainPage();
}
Pada halaman MainPage.xaml dapat dilihat kode XAML yang berisi view yang akan ditampilkan pada halaman.
<?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:Bab1XamarinForm"
x:Class="Bab1XamarinForm.MainPage">
<Label Text="Welcome to Xamarin Forms!"
VerticalOptions="Center"
HorizontalOptions="Center" />
</ContentPage>
Pada kode diatas dapat dilihat bahwa view yang akan ditampilkan adalah Label.
Untuk menjalankan kode pada platform Android, klik kanan pada solution explorer, kemudian pilih
Bab1XamarinForm.Droid pada pilihan Single startup project.
Untuk menjalankan aplikasi android pilih device atau emulator yang akan digunakan. Pada contoh ini digunakan
visual studio android emulator dengan versi android Lollipop 5.1. kemudian tekan Ctrl+F5 untuk melakukan
deploy ke device/emulator.
Hasilnya akan dapat dilihat pada tampilan berikut ini:
12
Untuk menjalankan aplikasi Xamarin Form pada IOS Simulator, anda membutuhkan komputer yang menjalankan
Mac OS. Adapun requirement yang dibutuhkan adalah sebagai berikut:
1. Komputer Mac yang menjalankan OS X Yosemite (10.10) atau versi yang lebih tinggi.
2. Xamarin Studio 5.10 atau versi yang lebih tinggi.
3. Xamarin.iOS SDK.
4. Apple’s Xcode(7+) IDE dan iOS SDK.
Setelah semua requirement diatas sudah terinstall maka anda dapat menghubungkan komputer PC dimana anda
menginstall Visual Studio dan Xamarin untuk terhubung ke mesin Mac untuk menjalankan IOS Simulator.
APPLICATION LIFECYCLE PADA XAMARIN FORM

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
13
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 terminate, disebut
sebagai application lifecycle. Pada Xamarin Form Application class memiliki tiga macam method yang dapat
digunakan untuk menangani proses application lifecycle. Ketiga proses tersebut adalah sebagai berikut:
• 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.
Contoh 1.1 Menambahkan View dan Layout
Pada contoh dibawah ini akan ditunjukan bagaimana cara untuk menambahkan view dan layout yang sederhana.
Buat xaml form baru dengan nama SampleView1.xaml. Kemudian tambahkan beberapa view berupa Label,
Button, Entry, dan Image sebagai berikut:

x:Class="Bab1XamarinForm.SampleView1">
<ScrollView VerticalOptions="FillAndExpand">
<StackLayout HeightRequest="1500">
<Label Text="Label Judul" FontSize="40" HorizontalOptions="Center"/>
<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="monkey.png" Aspect="AspectFit"
HorizontalOptions="Center" VerticalOptions="Fill"/>
</StackLayout>
</ScrollView>
</ContentPage>
Kemudian tambahkan event handler ketika tombol btnHello diklik.
public SampleView1()
{
btnHello.Clicked += BtnHello_Clicked;
}
14
private void BtnHello_Clicked(object sender, EventArgs e)
{
lblDetail.Text = entryHello.Text;
}
Kemudian tambahkan kode berikut untuk mendeteksi gesture tap pada view Image.
public SampleView1()
{
-----------------------------------
var tapGestureRecognizer = new TapGestureRecognizer();

tapGestureRecognizer.Tapped += async (sender, e) =>
{
helloImg.Opacity = 0.5;
await Task.Delay(200);
helloImg.Opacity = 1;
};
helloImg.GestureRecognizers.Add(tapGestureRecognizer);
BAB 2 – DESAIN TAMPILAN MENGGUNAKAN 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.
Contoh 2.1 Penggunaan StackLayout
Buat portable cross plaftform application baru dengan nama Bab2XamarinForm. Kemudian buat halaman baru
dengan nama SampleStackLayout.xaml. Tambahkan kode xaml berikut:

x:Class="Bab2XamarinForm.SampleStackLayout" Padding="10,5,10,5">
<StackLayout>
<StackLayout Spacing="0">
<Label Text="Posisi Start atau flush left" HorizontalOptions="Start"/>
15
<Label Text="Posisi Center" HorizontalOptions="Center"/>
<Label Text="Posisi End atau flush right" HorizontalOptions="End"/>
</StackLayout>
<StackLayout Spacing="0" Orientation="Horizontal">
<Label Text="Posisi Start" HorizontalOptions="Start"/>
<Label Text="Posisi Center" HorizontalOptions="CenterAndExpand"/>
<Label Text="Posisi End" HorizontalOptions="End"/>
</StackLayout>
</StackLayout>
</ContentPage>
Pada file App.xaml.cs tambahkan kode berikut untuk menampilkan halaman SampleStackLayout.
public App()
{
MainPage = new Bab2XamarinForm.SampleStackLayout();
}
Contoh 2.2 Penggunaan Absolute Layout
Tambahkan halaman baru pada project dengan nama AbsoluteLayout.xaml. Kemudian tambahkan kode xaml
berikut:

x:Class="Bab2XamarinForm.AbsoluteLayout">
<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"
<BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"
</AbsoluteLayout>
</ContentPage>
Contoh 2.3 Menggunakan Relative Layout
16
Tambahkan halaman baru pada project dengan nama RelativeLayout.xaml.

x:Class="Bab2XamarinForm.RelativeLayout">
<RelativeLayout>
<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>
</ContentPage>
Contoh 2.4 Grid Layout
Tambahkan page baru pada project dengan nama GridLayout.xaml. Kemudian tambahkan kode xaml berikut:

x:Class="Bab2XamarinForm.GridLayout">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Top Left" Grid.Row="0" Grid.Column="0" />
<Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
<Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
17
<Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
</Grid>
</ContentPage>
INTERAKSI DENGAN KONTROL PADA XAMARIN FORM

Selain view basic yang sudah anda pelajari sebelumnya seperti Label, Button, Entry, dan Image, ada beberapa
macam Xamarin Form View untuk pilihan yang sering digunakan, diantaranya adalah:
• Picker : pop-up untuk memilih nilai dari list.

• DatePicker: pop-up untuk memilih tanggal.
• TimePicker: pop-up untuk memilih jam, menit, dan detik.
• Stepper: tombol yang digunakan untuk menambah dan mengurangi nilai.
• Slider: memilih nilai menggunakan slide kontrol.
• Switch: on/off kontrol.
Contoh 2.5 Menggunakan Kontrol Seleksi
Contoh aplikasi dibawah ini akan menunjukan bagaimana cara menggunakan berbagai macam kontrol seleksi
yang ada pada Xamarin.Form.
Buat halaman xaml baru dengan nama SelectionView.xaml, kemudian tambahkan kode berikut:

x:Class="Bab2XamarinForm.SelectionView">
<StackLayout HorizontalOptions="Center">
<Label x:Name="eventValue" Text="Label"/>
<Label x:Name="pageValue" Text="PageValue"/>
<Picker x:Name="picker" Title="Option" VerticalOptions="CenterAndExpand" />
<DatePicker x:Name="datePicker" Format="D" VerticalOptions="CenterAndExpand" />
<TimePicker x:Name="timePicker" Format="T" VerticalOptions="CenterAndExpand" />
<Stepper x:Name="stepper" Minimum="0" Maximum="10" Increment="1"
HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
<Slider x:Name="slider" Minimum="0" Maximum="100" Value="50"
VerticalOptions="CenterAndExpand" WidthRequest="300"/>
<Switch x:Name="switcher" HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
18
</ContentPage>
Kemudian tambahkan juga kode C# berikut pada halaman SelectionView.xaml.cs
namespace Bab2XamarinForm
{
public partial class SelectionView : ContentPage
{
public SelectionView()
{
//menambahkan data pada kontrol picker

var options = new List<String> { "First", "Second", "Third", "Fourth" };
foreach(string optionName in options)
{
picker.Items.Add(optionName);
}
picker.SelectedIndexChanged += (sender, args) =>
{
pageValue.Text = picker.Items[picker.SelectedIndex];
};
//datepicker
datePicker.DateSelected += (object sender, DateChangedEventArgs e) =>
{
eventValue.Text = e.NewDate.ToString();
pageValue.Text = datePicker.Date.ToString();
};
//timepicker
timePicker.PropertyChanged += (sender, e) =>
{
if(e.PropertyName==TimePicker.TimeProperty.PropertyName)
{
pageValue.Text = timePicker.Time.ToString();
}
};
//steper
stepper.ValueChanged += (sender, e) =>
{
eventValue.Text = String.Format("Stepper value is {0:F1}",
e.NewValue);
pageValue.Text = stepper.Value.ToString();
};
//slider
slider.ValueChanged += (sender, e) =>
{
eventValue.Text = String.Format("Slider value is {0:F1}", e.NewValue);
pageValue.Text = slider.Value.ToString();
};
//switcher
switcher.Toggled += (sender, e) =>
{
eventValue.Text = String.Format("Switch is now {0}", e.Value);
pageValue.Text = switcher.IsToggled.ToString();
};
this.Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5);
19
}
}
}
Hasil yang ditampilkan pada emulator dapat dilihat pada gambar dibawah ini.
BAB 3 – MEMBUAT LIST

Pada bab ini akan dibahas cara penggunaan kontrol list pada Xamarin Form. List adalah salah satu kontrol yang
banyak dipilih untuk menampilkan data pada layar ponsel, karena keterbatasan layar ponsel. Untuk
menampilkan data dari sumber data tertentu kedalam kontrol list diperlukan mekanisme binding.
BINDING 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.
Buat page xaml baru dengan nama BindingListString.xaml. tambahkan kode berikut:

x:Class="Bab3.BindingListString">
<ListView x:Name="listView" />
</ContentPage>
Kemudian tambahkan kode C# sebagai berikut untuk menambahkan data pada komponen List.
public BindingListString()
{
List<string> items = new List<string> { "First", "Second", "Third" };

listView.ItemsSource = items;
20
}
Untuk memilih salah satu item pada list anda dapat menambahkan kode berikut:
public BindingListString()
{
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;
};
//memilih row menggunakan event selected

/*listView.ItemSelected += async (sender, e) =>
{
if (e.SelectedItem == null) return;
await DisplayAlert("Selected", e.SelectedItem.ToString() + " was
selected", "OK");
};*/
}
Untuk menangani kejadian ketika item pada list dipilih, anda dapat menggunakan dua event handler yaitu
ItemTapped dan ItemSelected.
MENAMPILKAN DATA DARI DATA MODEL

Pada contoh berikut dijelaskan cara menampilkan data dari data model yang sudah disiapkan sebelumnya.
Pada solution Bab3 buat folder dengan nama Model, kemudian tambahkan class dengan nama ListItem.cs.
namespace Bab3.Models
{
public class ListItem
{
public string Title { get; set; }
public string Description { get; set; }
}
21
}
Kemudian buat file xaml baru dengan nama BindingToDataModel.xaml, kemudian tambahkan kode xaml
berikut:

x:Class="Bab3.BindingToDataModel">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness">
<OnPlatform.iOS>10,20,10,5</OnPlatform.iOS>
<OnPlatform.Android>10,0,10,5</OnPlatform.Android>
</OnPlatform>
</ContentPage.Padding>
<ListView ItemsSource="{Binding ListItems}" ItemTapped="ListViewItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Title}" Detail="{Binding Description}"
DetailColor="Red" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
Tambahkan kode berikut pada BindingToDataModel.xaml.cs. Class ListViewDataModelViewModel adalah objek

yang akan dibinding kedalam form.
Untuk menambahkan event handler ketika salah satu item yang ada pada ListView dipilih maka tambahkan kode
pada method ListViewItemTapped.
using Xamarin.Forms;
using Bab3.Models;
namespace Bab3
{
public partial class BindingToDataModel : ContentPage
{
public BindingToDataModel()
{
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
{
22
get { return lstItems; }
set {
lstItems = value;
OnPropertyChanged("ListItems");
}
}
}
private async void ListViewItemTapped(object sender, ItemTappedEventArgs e)

{
ListItem item = (ListItem)e.Item;
await DisplayAlert("Tapped", item.Title.ToString() + " was selected",
"OK");
}
}
}
Aplikasi yang sudah dijalankan pada emulator dapat dilihat pada gambar dibawah ini.
MENAMBAHKAN GAMBAR PADA CELL

Project berikut akan mencoba menampilkan listview yang mempunyai elemen text dan image. Untuk itu dapat
digunakan data template yang mempunyai kontrol ImageCell.
Untuk menambahkan gambat yang akan ditampilkan, pada project Android, masukan gambar kedalam folder
Android/Resources/drawable, sedangkan pada IOS masukan gambar kedalam folder Resources.

x:Class="Bab3.ListViewImageCell">
</OnPlatform>
<ListView x:Name="listView" ItemsSource="{Binding ListItems}">
<DataTemplate>
<ImageCell ImageSource="{Binding Source}" Text="{Binding Title}"
Detail="{Binding Description}" />
</DataTemplate>
</ListView>
</ContentPage>
23
Pada folder Model tambahkan class dengan nama ListItem.cs yang memiliki fields sebagai berikut:
{
{
public string Source { get; set; }
}
}
Kemudian tambahkan kode berikut pada file ListViewImageCell.xaml.cs.
using Bab3.Models;
namespace Bab3
{
public partial class ListViewImageCell : ContentPage
{
public ListViewImageCell()
{
BindingContext = new ListViewImageCellViewModel();
listView.ItemTapped += ListView_ItemTapped;
}
private async void ListView_ItemTapped(object sender, ItemTappedEventArgs e)

{
await DisplayAlert("Tapped", item.Title + " was selected", "OK");
}
public class ListViewImageCellViewModel : BindableObject

{
private List<ListItem> listItems;
{
get { return listItems; }
set
{
listItems = value;
}
}
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" }
};
}
}
24
}
}
Pada gambar dibawah ini ditampilkan ListView yang terdiri dari gambar dan teks.
KUSTOMISASI BARIS PADA LIST

Selain menampilkan teks dan gambar pada kontrol ListView yang sudah kita lakukan sebelumnya, maka kita juga
dapat membuat tampilan sendiri sesuai dengan kebutuhan kita. Pada contoh dibawah ini ditunjukan bagaimana
cara menampilkan ListView yang mempunyai baris yang dikustomisasi.
Untuk melakukan kustomisasi pada baris, kita dapat membuat template baris yang dimodifikasi.
Buat page xaml baru dengan nama ListViewCustom.xaml.

x:Class="Bab3.ListViewCustom">
</OnPlatform>
<ListView x:Name="listView" ItemsSource="{Binding ListItems}" RowHeight="80"
BackgroundColor="Black">
<DataTemplate>
<ViewCell>
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal"
Padding="25,10,55,15">
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Vertical">
<Label HorizontalOptions="Start" FontSize="20" FontAttributes="Bold"
TextColor="White" Text="{Binding Title}"/>
TextColor="White" Text="{Binding Description}"/>
</StackLayout>
<Label HorizontalOptions="End" FontSize="25" TextColor="Aqua"
Text="{Binding Price}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView>
</ContentPage>
25
Pada folder Model, tambahkan class dengan nama ListItem.cs, kemudian tambahkan properti berikut ini:
{
{
public decimal Price { get; set; }
}
}
Tambahkan juga kode pada ListViewCustom.xaml.cs sebagai berikut:
using Bab3.Models;
namespace Bab3
{
public partial class ListViewCustom : ContentPage
{
public ListViewCustom()
{
BindingContext = new ListViewCustomViewModel();
listView.ItemTapped += ListView_ItemTapped;
}
private async void ListView_ItemTapped(object sender, ItemTappedEventArgs e)

{
await DisplayAlert("Tapped", item.Title.ToString() + " was selected",
"OK");
}
public class ListViewCustomViewModel : BindableObject

{

{
set
{
listItems = value;
}
}
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" },
26
new ListItem {Title="Ultraball",Description="Ultraball
Yellow",Price="Rp.50.000" }
};
}
}
}
}
Dengan menggunakan komponen ViewCell pada xaml, maka dapat anda lihat bahwa kita dapat menambahkan
kontrol lain sesuai dengan kebutuhan kita untuk menampilkan data pada kontrol ListView.
Tampilan dari aplikasi yang dibuat dapat dilihat pada gambar berikut ini:
MENAMBAHKAN TOMBOL PADA LIST

Untuk kasus yang lebih komplek, kita juga dapat menambahkan kontrol seperti tombol pada ListView. Kita juga
dapat menambahkan event handler yang dapat dipanggil ketika tombol yang dibuat didalam kontrol ListView
tersebut diklik.
Tambahkan xaml page baru dengan nama ListViewButton.xaml.

x:Class="Bab3.ListViewButton">
</OnPlatform>
<StackLayout Orientation="Vertical">
<ListView ItemsSource="{Binding ListItems}" RowHeight="100"
BackgroundColor="Black" HasUnevenRows="True">
<DataTemplate>
<ViewCell>
Padding="5,10,5,15">
<StackLayout HorizontalOptions="Start" Orientation="Vertical">
27
</StackLayout>
<StackLayout HorizontalOptions="EndAndExpand" Orientation="Horizontal"
WidthRequest="260">
<Label HorizontalOptions="Center" FontSize="25" TextColor="Aqua"
Text="{Binding Price}" />
<Button Text="Buy Now" BackgroundColor="Teal" HorizontalOptions="End"
Command="{Binding BuyCommand}"/>
<Button Text="Sell" BackgroundColor="Purple" TextColor="White"
HorizontalOptions="End" Command="{Binding SellCommand}"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView>
</StackLayout>
</ContentPage>
Tambahkan juga kode pada file ListViewButton.xaml.cs. Tambahkan juga class ListItem yang berisi informasi
properti yang akan ditampilkan pada list beserta dengan command-nya.
namespace Bab3
{
public class ListItem : BindableObject
{
private string title;
public string Title

{
get { return title; }
set { title = value;
OnPropertyChanged("Title");
}
}

public string Price { get; set; }
private Command buyCommand;
public Command BuyCommand

{
get { return buyCommand; }
set { buyCommand = value;
OnPropertyChanged("BuyCommand");
}
}
private Command sellCommand;
public Command SellCommand

{
get { return sellCommand; }
set { sellCommand = value;
28
OnPropertyChanged("SellCommand");
}
}
public ListItem()
{
BuyCommand = new Command(BuyRequested);
SellCommand = new Command(SellRequested);
}
void SellRequested()
{
MessagingCenter.Send<ListItem>(this, "SellRequested");
}
void BuyRequested()
{
MessagingCenter.Send<ListItem>(this, "BuyRequested");
}
public class ListViewButtonViewModel : BindableObject

{
readonly Func<string, string, string, Task> displayAlertAction;

{
set
{
listItems = value;
}
}
public ListViewButtonViewModel(Func<string,string,string,Task>
displayAlertAction)
{
this.displayAlertAction = displayAlertAction;
ListItems = new List<ListItem> {
new ListItem {Title = "First", Description="1st item",
Price="Rp.100.00"},
new ListItem {Title = "Second", Description="2nd item",
Price="Rp.200.00"},
new ListItem {Title = "Third", Description="3rd item",
Price="Rp.300.00"}
};
MessagingCenter.Subscribe<ListItem>(this, "BuyRequested",BuyRequested);
MessagingCenter.Subscribe<ListItem>(this, "SellRequested", (sender) =>
{
var data = (ListItem)sender;
data.Title = "Item Sold";
});
29
void BuyRequested(ListItem listItem)
{
displayAlertAction.Invoke("Button", listItem.Title + " was clicked",
"OK");
}
}
public partial class ListViewButton : ContentPage

{
public ListViewButton()
{
BindingContext = new ListViewButtonViewModel(DisplayAlert);
}
}
}
Hasil dari program yang dijalankan pada emulator adalah sebagai berikut:
MENGGUNAKAN CONTEXT ACTION

Context Action adalah tombol berupa bar yang akan muncul ketika pengguna melakukan left-swiped pada iOS
dan long-pressed pada Android.
Tambahkan halaman xaml baru dengan nama ListViewContextAction.xaml, kemudian tambahkan kode berikut:

x:Class="Bab3.ListViewContextAction">
</OnPlatform>
<ListView ItemsSource="{Binding ListItems}" RowHeight="100" BackgroundColor="Black"

HasUnevenRows="True">
<DataTemplate>
<ViewCell>
30
<ViewCell.ContextActions>
<MenuItem Text="More" Command="{Binding MoreCommand}" />
<MenuItem Text="Delete" Command="{Binding DeleteCommand}"
IsDestructive="True" />
</ViewCell.ContextActions>
Padding="5,10,5,15">
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Vertical">
</StackLayout>
<Label HorizontalOptions="End" FontSize="25" TextColor="Aqua"
Text="{Binding Price}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView>
</ContentPage>
Tambahkan kode berikut untuk membinding data yang akan digunakan.
namespace Bab3
{
public partial class ListViewContextAction : ContentPage
{
public ListViewContextAction()
{
BindingContext = new ListViewContextActionViewModel(DisplayAlert);

}
}
public class ListViewContextActionViewModel : BindableObject

{
readonly Func<string, string, string, Task> displayAlertAction;

{
set { listItems = value; OnPropertyChanged("ListItems"); }
}
public ListViewContextActionViewModel(Func<string, string, string, Task>

displayAlertAction)
{
this.displayAlertAction = displayAlertAction;
ListItems = new List<ListItem> {
new ListItem {Title = "First", Description="1st item",
Price="$100.00"},
new ListItem {Title = "Second", Description="2nd item",
Price="$200.00"},
new ListItem {Title = "Third", Description="3rd item",
Price="$300.00"}
};
MessagingCenter.Subscribe<ListItem>(this, "MoreRequested", MoreRequested);
31
MessagingCenter.Subscribe<ListItem>(this, "DeleteRequested",
DeleteRequested);
}
void MoreRequested(ListItem listItem)

{
displayAlertAction.Invoke("More", listItem.Title + " more was clicked",
"OK");
}
void DeleteRequested(ListItem listItem)

{
displayAlertAction.Invoke("Delete", listItem.Title + " delete was
clicked", "OK");
public class ListItem : BindableObject

{
public string Price { get; set; }
private Command moreCommand;
public Command MoreCommand

{
get { return moreCommand; }
set { moreCommand = value; OnPropertyChanged("MoreCommand"); }
}
private Command deleteCommand;

public Command DeleteCommand
{
get { return deleteCommand; }
set { deleteCommand = value; OnPropertyChanged("DeleteCommand"); }
}
public ListItem()
{
MoreCommand = new Command(MoreRequested);
deleteCommand = new Command(DeleteRequested);
}
void MoreRequested()
{
MessagingCenter.Send<ListItem>(this, "MoreRequested");
}
void DeleteRequested()
{
MessagingCenter.Send<ListItem>(this, "DeleteRequested");
}
}
}
}
32
BAB 4 – NAVIGASI
Pada bab ini akan dibahas bagaimana membuat navigasi pada aplikasi Xamarin Form. Navigasi digunakan untuk
memudahkan pengguna berpindah halaman dengan mudah. Fitur untuk navigasi meliputi menu, tap icon,
tombol, tabs, dan list items.
NAVIGATION PATTERN
Ada beberapa pattern yang sering digunakan pada navigasi diantaranya:
• Hierarchical
• Modal
• Drill-down
• Navigation drawer
• Tabs
• Springboard
• Carousel
MENAMBAHKAN NAVIGATION PAGE

Pada contoh yang pertama akan ditunjukan bagaimana cara untuk menambahkan Navigation Page, teknik ini
digunakan untuk memanggil halaman selanjutnya dari halaman pertama.
Tambahkan page xaml baru dengan nama NavigationPage1.xaml

<ContentPage Title="Navigasi Hirarki" xmlns="http://xamarin.com/schemas/2014/forms"
x:Class="Bab4.NavigationPage1">
<ContentPage.Content>
<StackLayout>
<Label Text="Home Page" FontSize="40"></Label>
<Button Text="Go To Second Page" x:Name="btnSecond"></Button>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Tambahkan kode berikut pada App.xaml.cs
public App()
33
{
MainPage = new NavigationPage(new NavigationPage1());

}
Tambahkan kode pada NavigationPage1.xaml.cs. Method Navigation.PushAsync() digunakan untuk

memanggil halaman selanjutnya.
namespace Bab4
{
public partial class NavigationPage1 : ContentPage
{
public NavigationPage1()
{
btnSecond.Clicked += BtnSecond_Clicked;
}
private async void BtnSecond_Clicked(object sender, EventArgs e)

{
await Navigation.PushAsync(new NavigationPage2());

}
}
}
Tambahkan halaman NavigationPage2.xaml.

x:Class="Bab4.NavigationPage2">
<StackLayout>
<Label Text="Second Page" FontSize="40"></Label>
<Button x:Name="btnBack" Text="Back"/>
</StackLayout>
</ContentPage>
Kemudian tambahkan kode pada NavigationPage2.xaml.cs. Method Navigation.PopAsync() digunakan

untuk kembali ke halaman sebelumnya.
namespace Bab4
{
{
public NavigationPage2()
{
btnBack.Clicked += async (sender, e) =>

{
await Navigation.PopAsync(true);
};
}
}
}
34
Tampilan dibawah menunjukan bagaimana cara navigasi antar form, dari form Home Page ke form Second Page.
MEMBUAT DROPDOWN MENU

Pada contoh dibawah ini akan ditunjukan bagaimana menggunakan kontrol dropdown menu untuk navigasi
pada Xamarin Form.
Tambahkan halaman xaml DropdownMenu.xaml

<ContentPage Title="Dropdown menggunakan Toolbar"
xmlns="http://xamarin.com/schemas/2014/forms"
x:Class="Bab4.DropdownMenu">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Home" Order="Secondary" Clicked="Navigate"
CommandParameter="NavigationPage1" />
<ToolbarItem Text="Second" Order="Secondary" Clicked="Navigate"
CommandParameter="NavigationPage2" />
</ContentPage.ToolbarItems>
</ContentPage>
Tambahkan kode berikut pada file DropdownMenu.xaml.cs:
namespace Bab4
{
public partial class DropdownMenu : ContentPage
{
public DropdownMenu()
{
}
protected async void Navigate(object sender, EventArgs args)

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

Type pageType = Type.GetType("Bab4." + type + ", Bab4");
Page page = (Page)Activator.CreateInstance(pageType);
await this.Navigation.PushAsync(page);
}
}
}
Tampilan menu dropdown yang dibuat dapat dilihat pada gambar berikut.
35
MENGGUNAKAN MODAL
Xamarin Form juga mendukung Modal Form. Ada tiga pilihan dalam menggunakan navigasi berbasis Modal yaitu:
• NavigationPage untuk full-page modals.

• Alert untuk notifikasi pengguna.
• Action sheet untuk 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.
Buat halaman ModalPage.xaml.

<ContentPage Title="Contoh Modal" xmlns="http://xamarin.com/schemas/2014/forms"
x:Class="Bab4.ModalPage">
<StackLayout>
<Label Text="First Page" FontSize="40" />
<Button Text="Go to Second Page Modally" Clicked="Navigate" />
</StackLayout>
</ContentPage>
namespace Bab4
{
public partial class ModalPage : ContentPage
{
public ModalPage()
{
}

{
await Navigation.PushModalAsync(new ModalSecondPage(), false);
}
}
}
Untuk halaman yang dipanggil buat ModalSecondPage.xaml

x:Class="Bab4.ModalSecondPage">
<StackLayout>
<Label Text="Second Page" FontSize="40" />
<Button Text="Pop back to First Page" Clicked="Navigate" />
</StackLayout>
36
</ContentPage>
namespace Bab4
{
public partial class ModalSecondPage : ContentPage
{
public ModalSecondPage()
{
}

{
await Navigation.PopModalAsync();
}
}
}
Tampilan modal form dapat dilihat pada gambar berikut.
Pada contoh kedua akan ditunjukan cara penggunaan modal form yang lebih kompleks untuk menampilkan
ListView dan detail berupa modal form.
Buat halaman utama dengan nama MainModalPage.xaml.

x:Class="Bab4.MainModalPage" Title="Contacts">
<OnPlatform x:TypeArguments="Thickness" iOS="0,40,0,0" />
<StackLayout>
<ListView x:Name="listView" ItemSelected="OnItemSelected">
<DataTemplate>
<TextCell Text="{Binding Name}" Detail="{Binding Country}"
DetailColor="Red" />
</DataTemplate>
</ListView>
</StackLayout>
</ContentPage>
Pada solution Bab4, tambahkan class Contact.cs, dan tulis kode berikut:
namespace Bab4
{
public class Contact
{
public string Name { get; set; }
37
public int Age { get; set; }
public string Occupation { get; set; }
public string Country { get; set; }
}
}
Kemudian tambahkan kode berikut pada MainModalPage.xaml.cs.
namespace Bab4
{
public partial class MainModalPage : ContentPage
{
List<Contact> contacts;
public MainModalPage()
{
SetupData();
listView.ItemsSource = contacts;
}
async void OnItemSelected(object sender, SelectedItemChangedEventArgs e)

{
if (listView.SelectedItem != null)
{
var detailPage = new DetailPage();
detailPage.BindingContext = e.SelectedItem as Contact;
listView.SelectedItem = null;
await Navigation.PushModalAsync(detailPage);
}
}
void SetupData()
{
contacts = new List<Contact>();
contacts.Add(new Contact
{
Name = "Erick Kurniawan",
Age = 30,
Occupation = "Trainer",
Country = "Indonesia"
});
{
Name = "Bambang Supeno",
Age = 34,
Occupation = "Developer",
});
{
Name = “Budi Sutejo",
Age = 52,
Occupation = "Project Manager",
});
{
Name = "Cody Cock",
Age = 55,
Occupation = "Frontend Developer",
Country = "United State"
});
38
{
Name = "Tan Thie Tu",
Age = 19,
Occupation = "Junior Developer",
Country = "Vietnam"
});
}
}
}
Untuk menampilkan form modal buat halaman DetailPage.xaml.

x:Class="Bab4.DetailPage">
<OnPlatform x:TypeArguments="Thickness" iOS="0,40,0,0" />
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<StackLayout Orientation="Horizontal">
<Label Text="Name:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Name}" FontSize="Medium" FontAttributes="Bold" />
</StackLayout>
<Label Text="Age:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Age}" FontSize="Medium" FontAttributes="Bold" />
</StackLayout>
<Label Text="Occupation:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Occupation}" FontSize="Medium" FontAttributes="Bold" />
</StackLayout>
<Label Text="Country:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Country}" FontSize="Medium" FontAttributes="Bold" />
</StackLayout>
<Button x:Name="dismissButton" Text="Dismiss" Clicked="OnDismissButtonClicked" />
</StackLayout>
</ContentPage>
Kemudian tambahka juga kode pada halaman DetailPage.xaml.cs.
namespace Bab4
{
public partial class DetailPage : ContentPage
{
public DetailPage()
{
}
async void OnDismissButtonClicked(object sender, EventArgs args)
{
await Navigation.PopModalAsync();
}
}
}
Tampilan contoh modal form dapat dilihat pada gambar berikut.
39
MENGGUNAKAN POPUP
Selain untuk menampilkan halaman baru seperti pada contoh sebelumnya, modal form juga dapat digunakan
untuk membuat popup Alert.
Buat halaman utama dengan nama PopupMainPage.xaml.

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:local="clr-namespace:Bab4;assembly=Bab4"
x:Class="Bab4.PopupMainPage">
<TabbedPage.Children>
<local:AlertPage Title="Alerts" Icon="icon.png" />
<local:ActionSheetPage Title="ActionSheets" Icon="icon.png" />
</TabbedPage.Children>
</TabbedPage>
Tambahkan halaman baru dengan nama AlertPage.xaml.

x:Class="Bab4.AlertPage">
<StackLayout Padding="0,20,0,0">
<Label Text="DisplayAlert" FontSize="Large" HorizontalOptions="Center" />
<Button Text="Alert Simple" Clicked="OnAlertSimpleClicked" />
<Button Text="Alert Yes/No" Clicked="OnAlertYesNoClicked" />
</StackLayout>
</ContentPage>
Tambahkan juga kode untuk file AlertPage.xaml.cs.
namespace Bab4
{
public partial class AlertPage : ContentPage
{
public AlertPage()
{
}
async void OnAlertSimpleClicked(object sender, EventArgs e)
{
await DisplayAlert("Alert", "You have been alerted", "OK");
}
async void OnAlertYesNoClicked(object sender, EventArgs e)
{
40
var answer = await DisplayAlert("Question?", "Would you like to play a
game", "Yes", "No");
}
}
}
Tambahkan halaman beru dengan nama ActionSheetPage.xaml.

x:Class="Bab4.ActionSheetPage">
<Label Text="DisplayActionSheet" FontSize="Large" HorizontalOptions="Center" />
<Button Text="ActionSheet Simple" Clicked="OnActionSheetSimpleClicked" />
<Button Text="ActionSheet Cancel/Delete"
Clicked="OnActionSheetCancelDeleteClicked" />
</StackLayout>
</ContentPage>
Kemudian tambahkan juga kode berikut pada file ActionSheetPage.xaml.cs.
namespace Bab4
{
public partial class ActionSheetPage : ContentPage
{
public ActionSheetPage()
{
}
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");
}
}
}
MENGGUNAKAN DISPLAY ACTION SHEET

Action Sheet dapat digunakan untuk menampilkan modal form yang berisi pilihan yang dapat diisi oleh
pengguna.
41
Buat halaman xaml dengan nama PopupMenu.xaml.

<ContentPage Title="Popup Menu Using ActionSheet"
xmlns="http://xamarin.com/schemas/2014/forms"
x:Class="Bab4.PopupMenu">
<StackLayout>
<Button Clicked="ShowMenu" Text="Show ActionSheet" />
<Label FontSize="20" x:Name="Message" />
</StackLayout>
</ContentPage>
Untuk kodenya sebagai berikut:
namespace Bab4
{
public partial class PopupMenu : ContentPage
{
public PopupMenu()
{
}
protected async void ShowMenu(object sender, EventArgs args)

{
String action = await DisplayActionSheet("Options", "Cancel", null,
"Here", "There", "Everywhere");
Message.Text = "Action is :" + action;
}
}
}
MENGIRIMKAN DATA ANTAR PAGE

Pada aplikasi yang cukup kompleks yang terdiri dari lebih dari satu halaman, biasanya ada kebutuhan untuk
mengirimkan data antar halaman.
42
Untuk mengirimkan data antar halaman, anda dapat menggunakan beberapa macam cara. Cara yang pertama
adalah mengirimkan data lewat parameter yang ada di konstruktor.
Tambahkan kode berikut pada NavigationPage2.xaml.
public NavigationPage2(string param)

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

{
};
}
Dan untuk mengirimkan parameternya lewat konstruktor, tambahkan kode berikut ini:

{
--------
private async void BtnSecond_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new NavigationPage2("Erick Kurniawan"));
}
}
Selain menggunakan parameter pada konstruktor, anda juga dapat juga menggunakan objek
Application.Current.Properties seperti yang ditunjukan pada contoh berikut:
Tambahkan kode ini pada halaman App.cs.
public App()
{
Application.Current.Properties["id"] = "22002321";
MainPage = new NavigationPage(new NavigationPage1());
}
Kemudian untuk menampilkan datanya pada halaman NavigationPage2 tambahkan kode berikut:

{
public NavigationPage2(string param)
{
lblParam.Text = "Nama anda : " + param + "id

"+(string)Application.Current.Properties["id"];

{
};
}
}
43
GLOBAL CLASS
Selain dua cara yang sudah dibahas sebelumnya, anda juga dapat menggunakan Global class yang dapat diakses
dari semua halaman.
Buat class dengan nama Global.cs.
namespace Bab4
{
public class Global
{
private Global()
{
}
private static Global _instance;
public static Global Instance

{
get
{
if (_instance == null)
{
_instance = new Global();
}
return _instance;
}
}
public String myData { get; set; }
}
}
Buat halaman dengan nama GlobalPage1.xaml.

x:Class="Bab4.GlobalPage1">
<StackLayout>
<Label Text="Assigning id = 12345" FontSize="40" />
<Button Text="Go to Second Page" Clicked="Navigate" />
</StackLayout>
</ContentPage>
namespace Bab4
{
public partial class GlobalPage1 : ContentPage
{
public GlobalPage1()
{
Global.Instance.myData = "12345";
}

{
await Navigation.PushAsync(new GlobalPage2());
}
}
44
}
Kemudian tambahkan juga halaman GlobalPage2.xaml.

x:Class="Bab4.GlobalPage2">
<StackLayout>
<Label Text="Persisted id: " FontSize="40" />
<Label Text="{Binding Data}" FontSize="40" />
</StackLayout>
</ContentPage>
Terakhir tambahkan kode pada GlobalPage2.xaml.cs.
public partial class GlobalPage2 : ContentPage

{
public string Data { get; set; }
public GlobalPage2()
{
Data = Global.Instance.myData.ToString();
this.BindingContext = this;
}
}
MENGGUNAKAN MASTER PAGE

Salah satu bentuk navigasi yang banyak digunakan sekarang adalah Master Page. Dengan model navigasi ini
pengguna dapat dengan mudah memilih menu yang disediakan.
Buat halaman baru dengan nama MainPage.xaml.
<?xml version="1.0" encoding="UTF-8"?>

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:local="clr-
namespace:MasterDetailPageNavigation;assembly=MasterDetailPageNavigation"
x:Class="MasterDetailPageNavigation.MainPage">
<MasterDetailPage.Master>
<local:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:ContactsPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Buat class baru dengan nama MasterPageItem.cs.
public class MasterPageItem
45
{
public string IconSource { get; set; }
public Type TargetType { get; set; }
}
Pada MainPage.cs tambahkan kode berikut:
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;
}
}
}
Buat file dengan nama MasterPage.xaml yang berisi list menu yang akan dipilih

x:Class="MasterDetailPageNavigation.MasterPage">
<StackLayout VerticalOptions="FillAndExpand">
<ListView x:Name="listView" VerticalOptions="FillAndExpand"
SeparatorVisibility="None">
<DataTemplate>
<ImageCell Text="{Binding Title}"
ImageSource="{Binding IconSource}" />
</DataTemplate>
</ListView>
</StackLayout>
</ContentPage>
Kode pada MasterPage.cs
public partial class MasterPage : ContentPage

{
public ListView ListView { get { return listView; } }
public MasterPage()
{
var masterPageItems = new List<MasterPageItem> ();

masterPageItems.Add (new MasterPageItem {
46
Title = "Contacts",
IconSource = "contacts.png",
TargetType = typeof(ContactsPage)
});
Title = "TodoList",
IconSource = "todo.png",
TargetType = typeof(TodoListPage)
});
Title = "Reminders",
IconSource = "reminders.png",
TargetType = typeof(ReminderPage)
});
listView.ItemsSource = masterPageItems;
}
}
Untuk bagian halaman detail tambahkan kode berikut pada halaman ContactsPage.xaml.

x:Class="MasterDetailPageNavigation.ContactsPage"
Title="Contacts Page">
<StackLayout>
<Label Text="Contacts data goes here" HorizontalOptions="Center"
</StackLayout>
</ContentPage>
Tambahkan lagi halaman dengan nama ReminderPage.xaml

x:Class="MasterDetailPageNavigation.ReminderPage"
Title="Reminder Page">
<StackLayout>
<Label Text="Reminder data goes here" HorizontalOptions="Center"
</StackLayout>
</ContentPage>
Terakhir tambahkan halaman dengan namaTodoListPage.xaml

x:Class="MasterDetailPageNavigation.TodoListPage"
Title="TodoList Page">
<StackLayout>
<Label Text="Todo list data goes here" HorizontalOptions="Center"
</StackLayout>
47
</ContentPage>
Pada file App.cs tambahkan kode berikut:
public App ()
{
MainPage = new MasterDetailPageNavigation.MainPage();
}
MENGGUNAKAN TAB PAGE

Selain navigasi menggunakan model Master Page, Xamarin Form juga mendukung tampilan Tab Page. Dengan
menggunakan menu Tab Page maka dapat ditampilkan beberapa halaman yang digabungkan menjadi satu
halaman.
Buat halaman dengan nama TabbedPageDemoPage.xaml.

xmlns:local="clr-namespace:TabbedPageDemo;assembly=TabbedPageDemo"
x:Class="TabbedPageDemo.TabbedPageDemoPage">
<TabbedPage.Resources>
<ResourceDictionary>
<local:NonNullToBooleanConverter x:Key="booleanConverter" />
</ResourceDictionary>
</TabbedPage.Resources>
<TabbedPage.ItemTemplate>
<DataTemplate>
<ContentPage Title="{Binding Name}" Icon="monkeyicon.png">
<StackLayout Padding="5, 25">
<Label Text="{Binding Name}"
Font="Bold,Large"
<Image Source="{Binding PhotoUrl}"
WidthRequest="200"
HeightRequest="200" />
<StackLayout Padding="50, 10">
48
<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:"
<Label Text="{Binding Subfamily}"
</StackLayout>
<StackLayout Orientation="Horizontal"
IsVisible="{Binding Tribe,
Converter={StaticResource booleanConverter}}">
<Label Text="Tribe:"
<Label Text="{Binding Tribe}"
</StackLayout>
<Label Text="Genus:"
<Label Text="{Binding Genus}"
</StackLayout>
</StackLayout>
</StackLayout>
</ContentPage>
</DataTemplate>
</TabbedPage.ItemTemplate>
</TabbedPage>
Pada file App.cs tambahkan kode berikut:
public App()
{
MainPage = new TabbedPageDemoPage();
}
Tambahkan kode pada file MonkeyDataModel.cs.
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",
49
Genus = "Pan",
PhotoUrl =
"http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Schimpanse_Zoo_Leipzig.jpg/6
40px-Schimpanse_Zoo_Leipzig.jpg"
},
Name = "Orangutan",
Family = "Hominidae",
Subfamily = "Ponginae",
Genus = "Pongo",
PhotoUrl =
"http://upload.wikimedia.org/wikipedia/commons/b/be/Orang_Utan%2C_Semenggok_Forest_Res
erve%2C_Sarawak%2C_Borneo%2C_Malaysia.JPG"
},
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"
}
};
}
}
Tambahkan juga kode NonNullToBooleanConverter.cs yang digunakan untuk mengkonversi data 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;
}
}
Terakhir tambahkan kode pada file TabbedPageDemoPage.cs.
public TabbedPageDemoPage ()
{
ItemsSource = MonkeyDataModel.All;
}
50
BAB 5 – SQLITE DAN REST SERVICES
Pada bab ini akan dibahas dua topik yaitu bagaimana cara untuk mengakses data yang disimpan pada media
penyimpanan lokal (database lokal) yang menggunakan SQLite dan yang kedua adalah bagaimana cara
pengaksesan data yang disimpan di database server menggunakan REST Web Services.
Untuk contoh REST Web Services yang dibuat menggunakan teknologi ASP.NET Web API dan kemudian dihosting
pada layanan komputasi awan Microsoft Azure.
MENGUNAKAN DATA TEMPLATE

Sebelum masuk ke topik tentang penyimpanan data pada database, kita akan membahas bagaimana cara untuk
menampilkan data yang cukup kompleks pada kontrol ListView. Pada contoh berikut akan ditunjukan bagaimana
cara penggunaan data template.
Pada solution Bab5, tambahkan class Person.cs untuk representasi data:
public class Person

{
public string Name { get; private set; }
public int Age { get; private set; }
public string Location { get; private set; }
public Person (string name, int age, string location)
{
Name = name;
Age = age;
Location = location;
}
public override string ToString ()
{
return Name;
}
}
Kemudian tambahkan halaman utama dengan nama HomePage.xaml.

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-
namespace:DataTemplates;assembly=DataTemplates" x:Class="DataTemplates.HomePage">
<local:WithoutDataTemplatePage />
<local:WithDataTemplatePage />
</TabbedPage>
Tambahkan halaman dengan nama WithoutDataTemplatePage.xaml. Halaman ini digunakan untuk menunjukan
halaman yang menggunakan Data Template, dan halaman yang tidak menggunakan Data Template.
51
x:Class="DataTemplates.WithoutDataTemplatePage" Title="Without a Data Template"
Icon="xaml.png">
<Label Text="ListView without a Data Template" FontAttributes="Bold"
<ListView x:Name="listView" />
</StackLayout>
</ContentPage>
Tambahkan kode berikut pada file WithoutDataTemplatePage.xaml.cs.
public partial class WithoutDataTemplatePage : ContentPage

{
public WithoutDataTemplatePage ()
{
var people = new List<Person> {

new Person ("Steve", 21, "USA"),
new Person ("John", 37, "USA"),
new Person ("Tom", 42, "UK"),
new Person ("Lucas", 29, "Germany"),
new Person ("Tariq", 39, "UK"),
new Person ("Jane", 30, "USA")
};
listView.ItemsSource = people;
}
}
Tambahkan halaman dengan nama WithDataTemplatePage.xaml.

x:Class="DataTemplates.WithDataTemplatePage" Title="With a Data Template"
Icon="xaml.png">
<Label Text="ListView with a Data Template" FontAttributes="Bold"
<ListView x:Name="listView">
<DataTemplate>
<ViewCell>
<Grid>
<ColumnDefinition Width="0.5*" />
<Label Text="{Binding Name}" FontAttributes="Bold" />
<Label Grid.Column="1" Text="{Binding Age}" />
<Label Grid.Column="2" Text="{Binding Location}"
HorizontalTextAlignment="End" />
</Grid>
</ViewCell>
</DataTemplate>
52
</ListView>
</StackLayout>
</ContentPage>
Kemudian terakhir tambahkan kode WithDataTemplatePage.xaml.cs
public partial class WithDataTemplatePage : ContentPage

{
public WithDataTemplatePage()
{

new Person ("Steve", 21, "USA"),
new Person ("John", 37, "USA"),
new Person ("Tom", 42, "UK"),
new Person ("Lucas", 29, "Germany"),
new Person ("Tariq", 39, "UK"),
new Person ("Jane", 30, "USA")
};
}
}
DATA TEMPLATE DENGAN SELECTION

Pada contoh dibawah ini akan dibuat kontrol ListView yang menggunakan Data Template yang mendukung
proses seleksi item yang ditampilkan.
Tambahkan halaman utama dengan nama HomePage.xaml.

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-
namespace:Selector;assembly=Selector" x:Class="Selector.HomePage">
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="validPersonTemplate">
<ViewCell>
<Grid>
53
<Label Text="{Binding Name}" TextColor="Green" FontAttributes="Bold" />
<Label Grid.Column="1" Text="{Binding DateOfBirth, StringFormat='{0:d}'}"
TextColor="Green" />
<Label Grid.Column="2" Text="{Binding Location}" TextColor="Green"
</Grid>
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="invalidPersonTemplate">
<ViewCell>
<Grid>
<Label Text="{Binding Name}" TextColor="Red" FontAttributes="Bold" />
<Label Grid.Column="1" Text="{Binding DateOfBirth, StringFormat='{0:d}'}"
TextColor="Red" />
<Label Grid.Column="2" Text="{Binding Location}" TextColor="Red"
</Grid>
</ViewCell>
</DataTemplate>
<local:PersonDataTemplateSelector x:Key="personDataTemplateSelector"
ValidTemplate="{StaticResource validPersonTemplate}" InvalidTemplate="{StaticResource
invalidPersonTemplate}" />
</ResourceDictionary>
</ContentPage.Resources>
<Label Text="ListView with a DataTemplateSelector" FontAttributes="Bold"
<ListView x:Name="listView" ItemTemplate="{StaticResource
personDataTemplateSelector}" />
</StackLayout>
</ContentPage>
Kemudian tambahkan juga class dengan nama Person.cs untuk representasi data yang akan ditampilkan.
public class Person

{
public string Name { get; private set; }
public DateTime DateOfBirth { get; private set; }
public string Location { get; private set; }
public Person (string name, DateTime dob, string location)
{
Name = name;
DateOfBirth = dob;
Location = location;
}
}
Tambahkan juga class dengan nama PersonDataTemplateSelector.cs.
public class PersonDataTemplateSelector : DataTemplateSelector

{
54
public DataTemplate ValidTemplate { get; set; }
public DataTemplate InvalidTemplate { get; set; }
protected override DataTemplate OnSelectTemplate(object item,

BindableObject container)
{
return ((Person)item).DateOfBirth.Year >= 1980 ? ValidTemplate :
InvalidTemplate;
}
}
Tambahkan kode pada file HomePage.xaml.cs.
public partial class HomePage : ContentPage

{
public HomePage()
{
new Person ("Kath", new DateTime (1985, 11, 20), "France"),
new Person ("Steve", new DateTime (1975, 1, 15), "USA"),
new Person ("Lucas", new DateTime (1988, 2, 5), "Germany"),
new Person ("John", new DateTime (1976, 2, 20), "USA"),
new Person ("Tariq", new DateTime (1987, 1, 10), "UK"),
new Person ("Jane", new DateTime (1982, 8, 30), "USA"),
new Person ("Tom", new DateTime (1977, 3, 10), "UK")
};
}
}
BEKERJA DENGAN SQLITE

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.
Buat Xamarin Form solution dengan nama SampleSQLite. Kemudian tambahkan library SQLite-Net-PCL pada
semua project agar dapat menggunakan SQLite.
Pada project portable SampleSQLite tambahkan interface berikut:
using SQLite.Net;
namespace SampleSQLite
{
public interface ISQLIte
{
55
SQLiteConnection GetConnection();
}
}
Pada project Droid buat class dengan nama SqliteService dan tambahkan kode berikut untuk membuat db sqlite
baru:
using System;
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 = "SQLiteEx.db3";
string documentsPath =
Environment.GetFolderPath(Environment.SpecialFolder.Personal); // Documents folder
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 the database connection
return conn;
}
}
}
Lakukan hal yang sama pada project IOS:
using SampleSQLite;
using SampleSQLite.iOS;
using System;
using System.IO;
[assembly: Dependency(typeof(SqliteService))]
namespace SampleSQLite.iOS
{
public class SqliteService : ISQLIte
{
public SqliteService()
{
}
#region ISQLite implementation
public SQLite.Net.SQLiteConnection GetConnection()
{
var sqliteFilename = "SQLiteEx.db3";
string documentsPath =
Environment.GetFolderPath(Environment.SpecialFolder.Personal); // Documents folder
string libraryPath = Path.Combine(documentsPath, "..", "Library"); //
Library folder
var path = Path.Combine(libraryPath, sqliteFilename);
56
// This is where we copy in the prepopulated database
Console.WriteLine(path);
if (!File.Exists(path))
{
File.Create(path);
}
var plat = new SQLite.Net.Platform.XamarinIOS.SQLitePlatformIOS();

var conn = new SQLite.Net.SQLiteConnection(plat, path);
// Return the database connection

return conn;
}
#endregion
}
}
Pada portable project tambahkan class dengan nama DataAccess:
using SQLite.Net;
using System.Collections.Generic;
{
public class DataAccess
{
SQLiteConnection dbConn;
public DataAccess()
{
dbConn = DependencyService.Get<ISQLIte>().GetConnection();
// create the table(s)
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);
}
}
}
Buat class dengan nama Employee.cs
57
using SQLite.Net.Attributes;
using System;
{
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; }
}
}
Tambahkan juga kode berikut pada file App.cs:
{
public partial class App : Application
{
private static DataAccess dbUtils;
public App()
{
MainPage = new NavigationPage(new ManageEmployee());
}
public static DataAccess DBUtils

{
get
{
if (dbUtils == null)
{
dbUtils = new DataAccess();
}
return dbUtils;
}
}
protected override void OnStart()

{
// Handle when your app starts
}
protected override void OnSleep()

{
// Handle when your app sleeps
}
protected override void OnResume()

{
// Handle when your app resumes
}
}
}
Tambahkan page xaml dengan nama ManageEmployee.
58
x:Class="SampleSQLite.ManageEmployee">
<OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
<StackLayout>
<ListView x:Name="lstData" HasUnevenRows="false" Header="Header Value"
Footer="Footer" ItemSelected="OnSelection" >
<ListView.HeaderTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" BackgroundColor="Blue"
Padding="5,5,5,5">
<Label Text="Name" FontSize="Medium" FontAttributes="Bold"
TextColor="White"/>
<Label Text="Designation" FontSize="Medium" FontAttributes="Bold"
TextColor="White"/>
<Label Text="Department" FontSize="Medium" FontAttributes="Bold"
TextColor="White"/>
</StackLayout>
</DataTemplate>
</ListView.HeaderTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="5,5,5,5">
<Label Text="{Binding EmpName}" FontSize="Medium" />
<Label Text="{Binding Designation}" FontSize="Medium" />
<Label Text="{Binding Department}" FontSize="Medium" />
</StackLayout>
</ViewCell>
</DataTemplate>
<ListView.FooterTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" Padding="5,5,5,5">
<Button Text="Add New Employee" Clicked="OnNewClicked" />
</StackLayout>
</DataTemplate>
</ListView.FooterTemplate>
</ListView>
</StackLayout>
</ContentPage>
Kodenya:
{
public partial class ManageEmployee : ContentPage
{
public ManageEmployee()
{
var vList = App.DBUtils.GetAllEmployees();
lstData.ItemsSource = vList;
}
void OnSelection(object sender, SelectedItemChangedEventArgs e)

{
if (e.SelectedItem == null)
{
59
return;
//ItemSelected is called on deselection,
//which results in SelectedItem being set to null
}
var vSelUser = (Employee)e.SelectedItem;
Navigation.PushAsync(new ShowEmplyee(vSelUser));
}
public void OnNewClicked(object sender, EventArgs args)
{
Navigation.PushAsync(new AddEmployee());
}
}
}
Tambahkan AddEmployee.xaml:

x:Class="SampleSQLite.AddEmployee">
<StackLayout>
<TableView Intent="Settings" BackgroundColor="White">
<TableRoot>
<TableSection Title="Add New Employee">
<EntryCell x:Name="txtEmpName" Label="Employee Name" Keyboard="Text" />
<EntryCell x:Name="txtDesign" Label="Designation" Keyboard="Text" />
<EntryCell x:Name="txtDepartment" Label="Department" Keyboard="Text" />
<EntryCell x:Name="txtQualification" Label="Qualification" Keyboard="Text" />
<ViewCell>
<ContentView Padding="0,0">
<ContentView.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="10,0" WinPhone="0,15,0,0" />
</ContentView.Padding>
<ContentView.Content>
<Button BackgroundColor="#fd6d6d" Text="Save" TextColor="White"
Clicked="OnSaveClicked" />
</ContentView.Content>
</ContentView>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</StackLayout>
</ContentPage>
Kodenya:
{
public partial class AddEmployee : ContentPage
{
public AddEmployee()
{
}
public void OnSaveClicked(object sender, EventArgs args)

{
var vEmployee = new Employee()
60
{
EmpName = txtEmpName.Text,
Department = txtDepartment.Text,
Designation = txtDesign.Text,
Qualification = txtQualification.Text
};
App.DBUtils.SaveEmployee(vEmployee);
Navigation.PushAsync(new ManageEmployee());
}
}
}
Menambahkan page ShowEmployee.xaml

x:Class="SampleSQLite.ShowEmplyee">
<StackLayout>
<Grid>
<RowDefinition Height="*"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
<Label Grid.Row ="0" Grid.Column="0" Grid.ColumnSpan="2" Text="Employee Details" />

<Label Grid.Row ="1" Grid.Column="1" Text="Name" />
<Label Grid.Row="1" Grid.Column="2" Text ="{Binding EmpName}" />
<Label Grid.Row ="2" Grid.Column="1" Text="Designation" />
<Label Grid.Row="2" Grid.Column="2" Text ="{Binding Designation}"/>
<Label Grid.Row ="3" Grid.Column="1" Text="Department" />
<Label Grid.Row="3" Grid.Column="2" Text ="{Binding Department}"/>
<Label Grid.Row ="4" Grid.Column="1" Text="Qualification" />
<Label Grid.Row="4" Grid.Column="2" Text ="{Binding Qualification}" />
<Button Grid.Row ="5" Grid.Column="1" Text="Edit Details"
Clicked="OnEditClicked" />
<Button Grid.Row="5" Grid.Column="2" Text="Delete" Clicked="OnDeleteClicked" />
</Grid>
</StackLayout>
</ContentPage>
Kodenya:
{
public partial class ShowEmplyee : ContentPage
{
Employee mSelEmployee;
public ShowEmplyee(Employee aSelectedEmp)
61
{
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("Confirm", "Are you Sure ?", "Yes",
"No");
if (accepted)
{
App.DBUtils.DeleteEmployee(mSelEmployee);
}
await Navigation.PushAsync(new ManageEmployee());
}
}
}
Tambahkan EditEmployee.xaml

x:Class="SampleSQLite.EditEmployee">
<StackLayout>
<TableView Intent="Settings" BackgroundColor="White">
<TableRoot>
<TableSection Title="Edit Employee">
<EntryCell x:Name="txtEmpName" Label="Employee Name" Text ="{Binding
EmpName}" Keyboard="Text" />
<EntryCell x:Name="txtDesign" Label="Designation" Text ="{Binding
Designation}" Keyboard="Text" />
<EntryCell x:Name="txtDepartment" Label="Department" Text ="{Binding
Department}" Keyboard="Text" />
<EntryCell x:Name="txtQualification" Label="Qualification" Text ="{Binding
Qualification}" Keyboard="Text" />
<ViewCell>
<ContentView Padding="0,0">
<ContentView.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="10,0" WinPhone="0,15,0,0" />
</ContentView.Padding>
<ContentView.Content>
<Button BackgroundColor="#fd6d6d" Text="Save" TextColor="White"
Clicked="OnSaveClicked" />
</ContentView.Content>
</ContentView>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</StackLayout>
</ContentPage>
Kodenya:
62
{
public partial class EditEmployee : ContentPage
{
Employee mSelEmployee;
public EditEmployee(Employee aSelectedEmp)
{
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());
}
}
}
MENGGUNAKAN REST SERVICES

Pada subbab berikut akan dibahas bagaimana cara untuk mengakses data yang ada pada server menggunakan
REST Services.
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.
Untuk mengambil data dari web services, tambahkan library Microsoft.Net.Http dan Json.net berikut
menggunakan Nuget.
63
Pada project buat folder dengan nama Models. Buat class dengan nama TodoItem.cs
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; }
}
}
Tambahkan class dengan nama Constans.cs untuk menyimpan alamat url dari web services.
public static class Constants

{
public static string RestUrl = "http://actservices.azurewebsites.net/api/TodoItem/{0}";
}
Buat infterface dengan nama ITextToSpeech.cs
namespace TodoREST
{
public interface ITextToSpeech
{
void Speak(string text);
}
}
Buat folder dengan nama Data. Tambahkan interface dengan nama IrestService.cs.
using System.Threading.Tasks;
namespace TodoREST
{
public interface IRestService
{
Task<List<TodoItem>> RefreshDataAsync();
64
Task SaveTodoItemAsync(TodoItem item, bool isNewItem);
Task DeleteTodoItemAsync(string id);
}
}
Pada folder Data, tambahkan juga file dengan nama RestServices.cs
using System.Diagnostics;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using Newtonsoft.Json;
namespace TodoREST
{
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(@"ERROR {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)
65
{
response = await client.PostAsync(uriPost, content);
}
else
{
response = await client.PutAsync(uriPut, content);
}
{
Debug.WriteLine(@"TodoItem successfully saved.");
}
}
{
}
}
public async Task DeleteTodoItemAsync(string id)

{
var uri = new Uri(string.Format(Constants.RestUrl, id));
try
{
var response = await client.DeleteAsync(uri);
{
Debug.WriteLine(@"TodoItem successfully deleted.");
}
}
{
}
}
}
}
Pada folder data tambahkan file TodoItemManager.cs
namespace TodoREST
{
public class TodoItemManager
{
IRestService restService;
public TodoItemManager(IRestService service)

{
restService = service;
}
public Task<List<TodoItem>> GetTasksAsync()

{
return restService.RefreshDataAsync();
}
66
public Task SaveTaskAsync(TodoItem item, bool isNewItem = false)
{
return restService.SaveTodoItemAsync(item, isNewItem);
}
public Task DeleteTaskAsync(TodoItem item)

{
return restService.DeleteTodoItemAsync(item.ID);
}
}
}
Buat folder dengan nama Views yang digunakan untuk menyimpan XAML file.
Tambahkan halaman dengan nama TodoListPage.xaml.

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TodoREST.TodoListPage"
Title="Todo">
<ToolbarItem Text="+" Clicked="OnAddItemClicked">
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="FileImageSource"
Android="plus.png" />
</ToolbarItem.Icon>
</ToolbarItem>
<ListView x:Name="listView" ItemSelected="OnItemSelected">
<DataTemplate>
<ViewCell>
<StackLayout Padding="20,0,0,0"
HorizontalOptions="StartAndExpand" Orientation="Horizontal">
<Label Text="{Binding Name}"
VerticalTextAlignment="Center" />
<Image Source="check.png"
IsVisible="{Binding Done}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView>
</ContentPage>
Tambahkan kode TodoListPage.xaml
namespace TodoREST
{
public partial class TodoListPage : ContentPage
{
bool alertShown = false;
public TodoListPage()
{
67
}
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);
}
}
}
Buat halaman TodoItemPage.xaml

x:Class="TodoREST.TodoItemPage"
Title="Todo">
<StackLayout VerticalOptions="StartAndExpand">
<Label Text="Name" />
<Entry x:Name="nameEntry" Text="{Binding Path=Name}"
Placeholder="task name" />
<Label Text="Notes" />
<Entry x:Name="notesEntry" Text="{Binding Path=Notes}" />
<Label Text="Done" />
<Switch x:Name="doneSwitch" IsToggled="{Binding Path=Done}" />
<Button Text="Save" Clicked="OnSaveActivated" />
<Button Text="Delete" Clicked="OnDeleteActivated" />
<Button Text="Cancel" Clicked="OnCancelActivated" />
</StackLayout>
</ContentPage>
Buat kode TodoItemPage.xaml.cs
namespace TodoREST
{
public partial class TodoItemPage : ContentPage
{
bool isNewItem;
public TodoItemPage(bool isNew = false)

{
68
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)

{
await App.TodoManager.DeleteTaskAsync(todoItem);
}
void OnCancelActivated(object sender, EventArgs e)

{
Navigation.PopAsync();
}
void OnSpeakActivated(object sender, EventArgs e)

{
App.Speech.Speak(todoItem.Name + " " + todoItem.Notes);
}
}
}
Terakhir buat halaman utama dengan nama TodoREST.cs
namespace TodoREST
{
public class App : Application
{
public static TodoItemManager TodoManager { get; private set; }
public static ITextToSpeech Speech { get; set; }
public App()
{
TodoManager = new TodoItemManager(new RestService());
MainPage = new NavigationPage(new TodoListPage());
}
--------------------------------------
}
}
69
STUDI KASUS: BARANG
Tambahkan library baru dari Nuget dengan nama RestSharp.
Buat Constant.cs
namespace Bab5
{
{
public static string RestUrl = "http://actservices.azurewebsites.net/";
}
}
Pada folder Model, tambahkan class Kategori.cs.
{
public class Kategori
{
public int KategoriID { get; set; }
public string NamaKategori { get; set; }
}
}
Buat folder Data, kemudian tambahkan class IRestService.cs.
using Bab5.Models;
namespace Bab5.Data
{
public interface IRestService
{
Task<List<Kategori>> RefreshDataAsync();
Task SaveTodoItemAsync(Kategori item, bool isNewItem);
Task DeleteTodoItemAsync(string id);
}
}
Pada folder Data, tambahkan class dengan nama RestService.
using RestSharp.Portable;
using RestSharp.Portable.HttpClient;
70
namespace Bab5.Data
{
public class RestService : IRestService
{
private RestClient _client;
public List<Kategori> Items { get; set; }
public RestService()
{
_client = new RestClient(Constants.RestUrl);
}
public Task DeleteTodoItemAsync(string id)

{
throw new NotImplementedException();
}
public async Task<List<Kategori>> RefreshDataAsync()

{
Items = new List<Kategori>();
var request = new RestRequest("api/Kategori", Method.GET);
var response = await _client.Execute<List<Kategori>>(request);

if (response.Data == null)
throw new Exception("Status: " + response.StatusCode.ToString() + " "
+ response.StatusDescription);
return response.Data;
}
public async Task SaveTodoItemAsync(Kategori item, bool isNewItem)

{
RestRequest request;
if (isNewItem)
{
request = new RestRequest("api/Kategori", Method.POST);
}
else
{
request = new RestRequest("api/Kategori", Method.PUT);
request.AddParameter("id", item.KategoriID, ParameterType.UrlSegment);
}
request.AddBody(item);
var response = await _client.Execute<Kategori>(request);
}
}
}
Pada folder Data, tambahkan class KategoriItemManager.cs.
using Bab5.Models;
namespace Bab5.Data
{
public class KategoriItemManager
{
IRestService restService;
public KategoriItemManager(IRestService service)

{
restService = service;
}
71
public Task<List<Kategori>> GetTasksAsync()
{
return restService.RefreshDataAsync();
}
public Task SaveTaskAsync(Kategori item, bool isNewItem = false)

{
return restService.SaveTodoItemAsync(item, isNewItem);
}
}
}
Buat folder View, kemudian tambahkan halaman KategoriListPage.xaml.

x:Class="Bab5.Views.KategoriListPage">
<ToolbarItem Text="+" x:Name="toolBarAdd">
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="FileImageSource" Android="plus.png" />
</ToolbarItem.Icon>
</ToolbarItem>
<ListView x:Name="listView">
<DataTemplate>
<ViewCell>
<StackLayout Padding="20,0,0,0" HorizontalOptions="StartAndExpand"
Orientation="Horizontal">
<Label Text="{Binding KategoriID}" VerticalTextAlignment="Center" />
<Label Text="{Binding NamaKategori}" VerticalTextAlignment="Center" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView>
</ContentPage>
KategoriListPage.xaml.cs
using Bab5.Models;
namespace Bab5.Views
{
public partial class KategoriListPage : ContentPage
{
//bool alertShown = false;
public KategoriListPage()
{
toolBarAdd.Clicked += ToolBarAdd_Clicked;
listView.ItemSelected += ListView_ItemSelected;
}
72
private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs
e)
{
var kategoriItem = e.SelectedItem as Kategori;
var kategoriPage = new KategoriItemPage();
kategoriPage.BindingContext = kategoriItem;
Navigation.PushAsync(kategoriPage);
}
private void ToolBarAdd_Clicked(object sender, EventArgs e)

{
var kategoriItem = new Kategori();
var kategoriPage = new KategoriItemPage(true);
kategoriPage.BindingContext = kategoriItem;
Navigation.PushAsync(kategoriPage);
}
protected async override void OnAppearing()

{
base.OnAppearing();
listView.ItemsSource = await App.KategoriManager.GetTasksAsync();
}
}
}
Pada folder View, tambahkan class KategoriItemPage.xaml.

x:Class="Bab5.Views.KategoriItemPage" Title="Kategori">
<StackLayout VerticalOptions="StartAndExpand">
<Label Text="Nama Kategori" />
<Entry x:Name="txtKategori" Text="{Binding Path=NamaKategori}" Placeholder="nama
kategori" />
<Button Text="Save" Clicked="OnSaveActivated" />

<Button Text="Delete" />
<Button Text="Cancel" Clicked="OnCancelActivated" />
</StackLayout>
</ContentPage>
KategoriItemPage.xaml.cs
using Bab5.Models;
namespace Bab5.Views
{
public partial class KategoriItemPage : ContentPage
{
bool isNewItem;
public KategoriItemPage(bool isNew=false)
{
isNewItem = isNew;
}
async void OnSaveActivated(object sender, EventArgs e)
73
{
var kategoriItem = (Kategori)BindingContext;
//await DisplayAlert("Keterangan", kategoriItem.NamaKategori, "OK");
await App.KategoriManager.SaveTaskAsync(kategoriItem, isNewItem);
}
void OnCancelActivated(object sender, EventArgs e)

{
Navigation.PopAsync();
}
}
}
Tambahkan pada App.cs
namespace Bab5
{
public partial class App : Application
{
//tambahkan nuget restsharp, Net.Http, dan Bcl async
//membuat global properti

public static KategoriItemManager KategoriManager { get; set; }
public App()
{
KategoriManager = new KategoriItemManager(new RestService());

MainPage = new NavigationPage(new KategoriListPage());
}
protected override void OnStart()

{
// Handle when your app starts
}
protected override void OnSleep()

{
// Handle when your app sleeps
}
protected override void OnResume()

{
// Handle when your app resumes
}
}
}
74
BAB 6 - BEKERJA DENGAN AZURE MOBILE APPS
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.
2. Tekan tombol “Create” untuk membuat layanan Mobile Apps Quickstart.
75
3. Masukan nama services sebagai contoh saya memasukan nama layanan dengan nama
“actualmobileservices”.
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.
76
8. Setelah berhasil membuat layanan tersebut, masuk kedalam menu layanan Mobile App sebagai
berikut. Disana anda dapat melihat berbagai macam fitur yang ditawarkan.
77
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.
11. Untuk melihat daftar kolom yang ada pada table di Easy Table anda dapat memilih pilihan Manage
schema.
12. Anda dapat menambahkan table baru, serta menambahkan kolom yang dibutuhkan.
13. Langkah selanjutnya adalah membuat easy table dengan nama Barang. Kemudian pada table schema,
tambahkan kolom baru yaitu KodeBarang, NamaBarang, Stok, HargaBeli, dan HargaJual.
78
MEMBUAT XAMARIN FORMS PROJECT
1. Buat Xamarin Forms Project dengan nama SampeMobileAzure.
2. Tambahkan package Microsoft Azure Mobile Client pada project.
3. Kemudian pada project portable tambahkan class Barang sebagai representasi dari table Barang yang
ada pada Easy Table di Azure.
using Microsoft.WindowsAzure.MobileServices;
79
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.
80
{
{
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.Linq;
using System.Text;
using Microsoft.WindowsAzure.MobileServices;
using System.Diagnostics;
using System.Collections.ObjectModel;
{
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);
}
}
81
}
}
6. Tambahkan class dengan nama ActivityIndicatorScope.cs. Class ini akan digunakan untuk
menampilkan activity indicator pada saat aplikasi mengambil data dari services.
{
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. Halaman ini digunakan untuk
menampilkan data barang pada kontrol ListView.

x:Class="SampleMobileAzure.BarangPage" Title="List Of Barang">
<ToolbarItem Text="+" Clicked="MenuItem_OnClicked"/>
<Grid>
82
<ActivityIndicator
HorizontalOptions="Center"
VerticalOptions="Center"
IsVisible="False"
IsEnabled="True"
x:Name="syncIndicator"/>
<ListView x:Name="listViewBarang" ItemTapped="ListView_OnItemTapped"
IsPullToRefreshEnabled="True" Refreshing="ListViewBarang_OnRefreshing">
<DataTemplate>
<ViewCell>
<StackLayout HorizontalOptions="StartAndExpand"
Orientation="Horizontal">
<Label FontSize="16" Text="{Binding KodeBarang}" />
<Label FontSize="16" Text="{Binding NamaBarang}" />
<Label FontSize="16" Text="{Binding Stok}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView>
</Grid>
</ContentPage>
8. Kemudian tambahkan kode c#-nya pada BarangPage.xaml.cs.
using Xamarin.Forms.Xaml;
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class BarangPage : ContentPage
{
private BarangManager _barangManager = new BarangManager();
public BarangPage()
{
}
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();
}
}
83
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);
}
{
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.

x:Class="SampleMobileAzure.TambahBarangPage" Title="Tambah Barang">
<Grid x:Name="gvBarang">
<ColumnDefinition Width="150" />
<RowDefinition Height="50"/>
84
<Label Text="Kode Barang :" HorizontalTextAlignment="End"
VerticalTextAlignment="Center" />
<Entry x:Name="txtKodeBarang" Text="{Binding KodeBarang}"
Placeholder="masukan kode barang" Grid.Row="0" Grid.Column="1" />
<Label Text="Nama Barang :" HorizontalTextAlignment="End" Grid.Row="1"

Grid.Column="0" VerticalTextAlignment="Center" />
<Entry x:Name="txtNamaBarang" Text="{Binding NamaBarang}"
Placeholder="masukan nama barang" Grid.Row="1" Grid.Column="1" />
<Label Text="Stok :" HorizontalTextAlignment="End" Grid.Row="2"

<Entry x:Name="txtStok" Text="{Binding Stok, StringFormat='{0:N}'}"
Keyboard="Numeric" Placeholder="masukan stok" Grid.Row="2" Grid.Column="1" />
<Label Text="Harga Beli :" HorizontalTextAlignment="End" Grid.Row="3"

<Entry x:Name="txtHargaBeli" Text="{Binding HargaBeli,
StringFormat='{0:N}'}" Keyboard="Numeric" Placeholder="masukan harga beli"
Grid.Row="3" Grid.Column="1" />
<Label Text="Harga Jual :" HorizontalTextAlignment="End" Grid.Row="4"

<Entry x:Name="txtHargaJual" Text="{Binding HargaJual,
StringFormat='{0:N}'}" Keyboard="Numeric" Placeholder="masukan harga jual"
Grid.Row="4" Grid.Column="1" />
<StackLayout Orientation="Horizontal" Grid.Row="5" Grid.ColumnSpan="2">

<Button x:Name="btnSave" HorizontalOptions="EndAndExpand"
Text="Save" WidthRequest="150" Clicked="BtnSave_OnClicked" />
</StackLayout>
</Grid>
</ContentPage>
10. Kemudian tambahkan kode pada TambahBarangPage.xaml.cs untuk menambah dan mengupdate
data Barang.
using Xamarin.Forms.Xaml;
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class TambahBarangPage : ContentPage
{
private BarangManager _barangManager = new BarangManager();
private bool _isNew = false;
public TambahBarangPage()
{
}
private void ClearAll()

{
foreach (var ctr in gvBarang.Children)
{
if (ctr is Entry)
{
var item = ctr as Entry;
85
item.Text = string.Empty;
}
}
}
public TambahBarangPage(bool isNew)

{
_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. Jalankan aplikasi untuk melihat hasilnya pada Android emulator.
86
87
View publication stats

Pembangunan Cross Platform Mobile App Dengan Xamarin Forms

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pembangunan Cross Platform Mobile App Dengan Xamarin Forms

Diunggah oleh

Hak Cipta:

Format Tersedia

See discussions, stats, and author profiles for this publication at: https://www.researchgate.

Seri Belajar Xamarin: Pembangunan Cross Platform Mobile App dengan

Book · March 2018

M Reza Faisal Erick Kurniawan

SEE PROFILE SEE PROFILE

IT Asset Management View project

Publications View project

The user has requested enhancement of the downloaded file.

Yogyakarta, 2 Maret 2018

Erick Kurniawan & M. Reza Faisal

Daftar Isi ................................................................................................................................................................. 1

APA ITU XAMARIN

• Xamarin for Android

INSTALASI VISUAL STUDIO 2017 DAN XAMARIN

MEMULAI MEMBUAT PROJECT XAMARIN FORM

APPLICATION LIFECYCLE PADA XAMARIN FORMS

XAMARIN FORMS UI (USER INTERFACE)

KOMPONEN UTAMA PADA XAMARIN

MEMBUAT SOLUSI XAMARIN FORM

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

Hasilnya akan dapat dilihat pada tampilan berikut ini:

APPLICATION LIFECYCLE PADA XAMARIN FORM

Contoh 1.1 Menambahkan View dan Layout

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

Kemudian tambahkan event handler ketika tombol btnHello diklik.

var tapGestureRecognizer = new TapGestureRecognizer();

BAB 2 – DESAIN TAMPILAN MENGGUNAKAN LAYOUT

• StackLayout: mengatur kontrol secara horisontal atau vertikal.

Contoh 2.1 Penggunaan StackLayout

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

Contoh 2.2 Penggunaan Absolute Layout

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

Contoh 2.3 Menggunakan Relative Layout

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

Contoh 2.4 Grid Layout

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

INTERAKSI DENGAN KONTROL PADA XAMARIN FORM

• Picker : pop-up untuk memilih nilai dari list.

Contoh 2.5 Menggunakan Kontrol Seleksi

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

Kemudian tambahkan juga kode C# berikut pada halaman SelectionView.xaml.cs

//menambahkan data pada kontrol picker

this.Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5);

BAB 3 – MEMBUAT LIST

BINDING LIST OF STRING

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

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

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

//untuk mengambil nilai item ketika diklik pada baris

//memilih row menggunakan event selected

MENAMPILKAN DATA DARI DATA MODEL

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

Tambahkan kode berikut pada BindingToDataModel.xaml.cs. Class ListViewDataModelViewModel adalah objek

public class ListViewDataModelViewModel : BindableObject

private async void ListViewItemTapped(object sender, ItemTappedEventArgs e)

MENAMBAHKAN GAMBAR PADA CELL

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

Kemudian tambahkan kode berikut pada file ListViewImageCell.xaml.cs.

private async void ListView_ItemTapped(object sender, ItemTappedEventArgs e)

public class ListViewImageCellViewModel : BindableObject

KUSTOMISASI BARIS PADA LIST

Buat page xaml baru dengan nama ListViewCustom.xaml.

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