Pengaksesan RESTful Services dengan Xamarin Forms (Part 2)

Artikel ini adalah lanjutan dari artikel sebelumnya yang dapat diakses pada alamat berikut.

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

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

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TodoREST.TodoListPage" Title="Todo">
	<ContentPage.ToolbarItems>
		<ToolbarItem Text="+" Clicked="OnAddItemClicked">
			<ToolbarItem.Icon>
			<OnPlatform x:TypeArguments="FileImageSource" Android="plus.png" />
			</ToolbarItem.Icon>
		</ToolbarItem>
	</ContentPage.ToolbarItems>
	<ContentPage.Content>
		<ListView x:Name="listView" ItemSelected="OnItemSelected">
			<ListView.ItemTemplate>
				<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.ItemTemplate>
		</ListView>
	</ContentPage.Content>
</ContentPage>

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

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

using Xamarin.Forms;

namespace TodoREST
{
    public partial class TodoListPage : ContentPage
    {
        bool alertShown = false;

        public TodoListPage()
        {
            InitializeComponent();
        }

        protected async override void OnAppearing()
        {
            base.OnAppearing();
            listView.ItemsSource = await App.TodoManager.GetTasksAsync();
        }

        void OnAddItemClicked(object sender, EventArgs e)
        {
            var todoItem = new TodoItem()
            {
                ID = Guid.NewGuid().ToString()
            };
            var todoPage = new TodoItemPage(true);
            todoPage.BindingContext = todoItem;
            Navigation.PushAsync(todoPage);
        }

        void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            var todoItem = e.SelectedItem as TodoItem;
            var todoPage = new TodoItemPage();
            todoPage.BindingContext = todoItem;
            Navigation.PushAsync(todoPage);
        }
    }
} 

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

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

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
			 x:Class="TodoREST.TodoItemPage" 
			 Title="Todo">
	<ContentPage.Content>
		<StackLayout 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.Content>
</ContentPage>

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

using System;
using TodoREST.Models;
using Xamarin.Forms;

namespace TodoREST
{
    public partial class TodoItemPage : ContentPage
    {
        bool isNewItem;

        public TodoItemPage(bool isNew = false)
        {
            InitializeComponent();
            isNewItem = isNew;
        }

        async void OnSaveActivated(object sender, EventArgs e)
        {
            var todoItem = (TodoItem)BindingContext;
            await App.TodoManager.SaveTaskAsync(todoItem, isNewItem);
            await Navigation.PopAsync();
        }

        async void OnDeleteActivated(object sender, EventArgs e)
        {
            var todoItem = (TodoItem)BindingContext;
            await App.TodoManager.DeleteTaskAsync(todoItem);
            await Navigation.PopAsync();
        }

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

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

using TodoREST.Data;
using Xamarin.Forms;
    
public class App : Application
    {
        public static TodoItemManager TodoManager { get; private set; }

        public static ITextToSpeech Speech { get; set; }

        public App()
        {
            TodoManager = new TodoItemManager(new RestService());
            MainPage = new NavigationPage(new TodoListPage());
        }
    }

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

image

Xamarin Master Class–Bekraf Dev Day Surabaya

Pada tanggal 3 Sept 2017 telah dilangsungkan acara Bekraf Developer Day 2017 yang berlokasi di Hotel Shangri-La Surabaya.

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

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

Pada acara ini saya diberi kesempatan untuk berbagi ilmu dengan rekan-rekan developer dari seluruh Indonesia untuk membawakan materi Master Class Workshop dengan judul Membangun Aplikasi Multiplatform dengan Xamarin.

16

Bekraf Developer Day 2017–Palembang, Sumsel

Pada tanggal 9 – 10 July 2017 telah dilaksanakan acara Bekraf Developer Day 2017 di Hotel Novotel Palembang, Sumatera Selatan.  

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

Tema acara ini adalah: Membangun Kemandirian Bangsa Melalui Teknologi Digital

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

Situs resmi untuk pendaftaran acara ini dapat diakses pada laman berikut: https://www.dicoding.com/events/706

Pada acara ini saya diberi kesempatan untuk berbagi ilmu dengan rekan-rekan developer dari seluruh Indonesia untuk membawakan materi Master Class Workshop dengan judul Membangun Aplikasi Multiplatform dengan Xamarin.

Berikut ini adalah beberapa dokumentasi dari acara tersebut:

WhatsApp Image 2017-07-13 at 14.08.47(1)WhatsApp Image 2017-07-13 at 14.08.47WhatsApp Image 2017-07-13 at 14.09.52WhatsApp Image 2017-07-13 at 14.09.54

Bekraf Developer Day–Xamarin Master Class

Pada tanggal 9 April 2017 telah dilaksanakan acara BEKRAF Developer Day 2017 – Solo.

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

Tema acara ini adalah: Membangun Kemandirian Bangsa Melalui Digital

Peserta akan mendapatkan update teknis dari para praktisi yang telah sukses dalam pengembangan aplikasi, game, dan Internet of Things yang dikemas dalam sesi inspirasi, workshop/Masterclass, live coding, dan talkshow. 

Saya mendapatkan kesempatan untuk berpartisipasi sebagai narasumber pada kelas Masterclass 01 – Pembuatan Aplikasi Multiplatform dengan Xamarin.

24

1

Free eBook : Pengenalan Xamarin Forms dengan Azure Backend

image

Telah terbit FREE eBook Seri Belajar Xamarin dengan Judul Pengenalan Xamarin Forms dengan Azure Backend. Buku ini ditujukan bagi anda yang ingin belajar untuk mengembangkan aplikasi Mobile Cross-Platform dengan target Android, IOS, dan UWP (Universal Windows Platform) menggunakan tools Visual Studio dan Xamarin Forms.

Ini adalah eBook pertama dari Seri Belajar Xamarin. eBook ini dibagi menjadi dari 6 BAB dan mempunyai ketebalan  80 halaman. Adapun materi pada eBook ini adalah sebagai berikut:

BAB 1 Pengenalan Xamarin Forms.

  • Apa itu Xamarin.
  • Cara Install Xamarin Forms.
  • Memulai Membuat Project Xamarin Form..
  • Menjalankan Aplikasi Android.
  • Menjalankan Aplikasi Xamarin Forms pada IOS. 10
  • Menjalankan Aplikasi Xamarin Forms pada Windows Phone/Windows 8.1/ UWP Win 10

BAB 2. UI (User Interface) pada Xamarin Forms.

  • Application Lifecycle pada Xamarin Forms.
  • Xamarin Forms UI (User Interface)
  • Layout.
  • Penggunaan StackLayout.
  • Contoh Penggunaan Absolute Layout.
  • Menggunakan Relative Layout.
  • Menggunakan GridLayout.
  • Menggunakan Layout dan View sederhana pada Xamarin Form..
  • Kalkulator Sederhana.
  • Cara Membuat APK pada Xamarin Form (versi baru).

BAB 3 Menampilkan Data Pada ListView..

  • Binding Data yang bertipe List Of String.
  • Menampilkan Data bertipe List Of String.
  • Menampilkan Data dari Objek Data Model
  • Menampilkan Gambar pada Cell
  • Kustomisasi Baris pada ListView..

BAB 4 Membangun Backend dengan ASP.NET Web API

  • Membuat Project ASP.NET Web API.
  • Membuat Database.
  • Membuat REST API
  • Melengkapi Program ASP.NET Web API
  • Cek REST Services dengan Fiddler.

BAB 5 – Mengakses REST Services dengan Xamarin Forms.

  • Menggunakan REST Services pada Xamarin Forms.
  • Mengakses REST Services Menggunakan Fiddler.
  • Mengakses REST Services dari Xamarin Forms.

BAB 6 Bekerja dengan Azure Mobile Apps.

  • Menambahkan Layanan Azure Mobile App.
  • Membuat Xamarin Forms Project

 

Anda dapat mengunduh eBook Pengenalan Xamarin Forms dengan Azure Backend pada tautan berikut ini. 

 

 

 

Email penulis: erick@actual-training.com
IT Training & Consulting: http://actual-training.com

Xamarin Forms: Bekerja dengan Database Sqlite–Android

Pada blog tutorial kali ini saya akan menjelaskan bagaimana cara untuk bekerja dengan basis data lokal sqlite menggunakan Xamarin Forms untuk target platform Android.

1. Buat Xamarin Form solution dengan nama SampleSQLite.

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

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

image

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

using SQLite.Net;

namespace SampleSQLite
{
    public interface ISQLite
    {
        SQLiteConnection GetConnection();
    }
}

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

using Xamarin.Forms;
using System.IO;
using SQLite.Net;
using SampleSQLite.Droid;

[assembly: Dependency(typeof(SqliteService))]
namespace SampleSQLite.Droid
{
    public class SqliteService : ISQLite
    {
        public SQLiteConnection GetConnection()
        {
            var sqliteFilename = "PegawaiDb.db3";
            string documentPath =
                System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal);

            //menyimpan data di /data/data/[your.package.name]/files
            var path = Path.Combine(documentPath, sqliteFilename);
            //Console.WriteLine(path);
            if (!File.Exists(path))
                File.Create(path);
            var plat = new SQLite.Net.Platform.XamarinAndroid.SQLitePlatformAndroid();
            var conn = new SQLiteConnection(plat, path);
            return conn;
        }
    }
}

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

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

using SQLite.Net.Attributes;
using System;

namespace SampleSQLite
{
    public class Employee
    {
        [PrimaryKey, AutoIncrement]
        public long EmpId { get; set; }
        [NotNull]
        public string EmpName { get; set; }
        public string Designation { get; set; }
        public string Department { get; set; }
        public string Qualification { get; set; }
    }
}

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

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

using SQLite.Net;
using System.Collections.Generic;
using Xamarin.Forms;

namespace SampleSQLite
{
    public class DataAccess
    {
        SQLiteConnection dbConn;
        public DataAccess()
        {
            dbConn = DependencyService.Get<ISQLIte>().GetConnection();
            dbConn.CreateTable<Employee>();
        }

        public List<Employee> GetAllEmployees()
        {
            return dbConn.Query<Employee>("Select * From [Employee]");
        }

        public int SaveEmployee(Employee aEmployee)
        {
            return dbConn.Insert(aEmployee);
        }

        public int DeleteEmployee(Employee aEmployee)
        {
            return dbConn.Delete(aEmployee);
        }

        public int EditEmployee(Employee aEmployee)
        {
            return dbConn.Update(aEmployee);
        }
    }
}

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

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

namespace SampleSQLite
{
    public partial class App : Application
    {
        private static DataAccess dbUtils;
        public App()
        {
            InitializeComponent();
            MainPage = new NavigationPage(new ManageEmployee());
        }

        public static DataAccess DBUtils
        {
            get
            {
                if (dbUtils == null)
                {
                    dbUtils = new DataAccess();
                }
                return dbUtils;
            }
        }
    }
}

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

13. Untuk menampilkan data pegawai, buat halaman xaml baru dengan nama ManageEmployee.xaml. Kemudian tambahkan kode berikut.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SampleSQLite.ManageEmployee">
  <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>
      <ListView.ItemTemplate>
        <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.ItemTemplate>
      <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>

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

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

namespace SampleSQLite
{
    public partial class ManageEmployee : ContentPage
    {
        public ManageEmployee()
        {
            InitializeComponent();
            var vList = App.DBUtils.GetAllEmployees();
            lstData.ItemsSource = vList;
        }

        void OnSelection(object sender, SelectedItemChangedEventArgs e)
        {
            if (e.SelectedItem == null)
            {
                return;
            }
            var vSelUser = (Employee)e.SelectedItem;
            Navigation.PushAsync(new ShowEmplyee(vSelUser));
        }

        public void OnNewClicked(object sender, EventArgs args)
        {
            Navigation.PushAsync(new AddEmployee());
        }
    }
}

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

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SampleSQLite.AddEmployee">
  <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>

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

using Xamarin.Forms;

namespace SampleSQLite
{
    public partial class AddEmployee : ContentPage
    {
        public AddEmployee()
        {
            InitializeComponent();
        }

        public void OnSaveClicked(object sender, EventArgs args)
        {
            var vEmployee = new Employee()
            {
                EmpName = txtEmpName.Text,
                Department = txtDepartment.Text,
                Designation = txtDesign.Text,
                Qualification = txtQualification.Text
            };
            App.DBUtils.SaveEmployee(vEmployee);
            Navigation.PushAsync(new ManageEmployee());
        }
    }
}

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SampleSQLite.ShowEmplyee">
  <StackLayout>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
      </Grid.RowDefinitions>

      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="10"/>
      </Grid.ColumnDefinitions>

   <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>

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

namespace SampleSQLite
{
    public partial class ShowEmplyee : ContentPage
    {
        Employee mSelEmployee;
        public ShowEmplyee(Employee aSelectedEmp)
        {
            InitializeComponent();
            mSelEmployee = aSelectedEmp;
            BindingContext = mSelEmployee;
        }

        public void OnEditClicked(object sender, EventArgs args)
        {
            Navigation.PushAsync(new EditEmployee(mSelEmployee));
        }
        public async void OnDeleteClicked(object sender, EventArgs args)
        {
            bool accepted = await DisplayAlert("Konfirmasi", "Apakah anda yakin untuk mendelete data ?", "Yes", "No");
            if (accepted)
            {
                App.DBUtils.DeleteEmployee(mSelEmployee);
            }
            await Navigation.PushAsync(new ManageEmployee());
        }
    }
}

21. Terakhir tambahkan halaman xaml untuk mengedit data dengan nama EditEmployee.xaml. Kemudian tambahkan kode berikut:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SampleSQLite.EditEmployee">
  <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>

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

namespace SampleSQLite
{
    public partial class EditEmployee : ContentPage
    {
        Employee mSelEmployee;
        public EditEmployee(Employee aSelectedEmp)
        {
            InitializeComponent();
            mSelEmployee = aSelectedEmp;
            BindingContext = mSelEmployee;
        }

        public void OnSaveClicked(object sender, EventArgs args)
        {
            mSelEmployee.EmpName = txtEmpName.Text;
            mSelEmployee.Department = txtDepartment.Text;
            mSelEmployee.Designation = txtDesign.Text;
            mSelEmployee.Qualification = txtQualification.Text;
            App.DBUtils.EditEmployee(mSelEmployee);
            Navigation.PushAsync(new ManageEmployee());
        }
    }
}

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

imageimage

Xamarin Forms: Menggunakan Master Page

Salah satu bentuk navigasi yang banyak digunakan pada aplikasi mobile adalah Master Page. Dengan model navigasi ini pengguna dapat dengan mudah memilih menu yang disediakan di bagian kiri halaman dan menampilkan konten pada bagian utama.

Xamarin Forms sudah menyediakan template khusus yang dapat digunakan jika anda ingin mengimplementasikan jenis navigasi ini, berikut adalah langkah-langkah untuk membuat navigasi dalam bentuk Master Page pada Xamarin Forms.

  1. Buat Project Xamarin Forms baru, kemudian tambahkan kode berikut pada halaman MainPage.xaml.
<?xml version="1.0" encoding="UTF-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" 
				  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
				  xmlns:local="clr-namespace:Modul4;assembly=Modul4"
				  x:Class="Modul4.MainPage">
  <MasterDetailPage.Master>
  	<local:MasterPage x:Name="masterPage" />
  </MasterDetailPage.Master>
	<MasterDetailPage.Detail>
		<NavigationPage>
			<x:Arguments>
				<local:ContactsPage />
			</x:Arguments>
		</NavigationPage>
	</MasterDetailPage.Detail>
</MasterDetailPage> 

2. Pada project portable, tambahkan class baru dengan nama MasterPageItem.cs. Class ini digunakan untuk merepresentasikan isi dari menu.

	public class MasterPageItem
	{
		public string Title { get; set; }
		public string IconSource { get; set; }
		public Type TargetType { get; set; }
	}

3. Pada halaman 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;
			}
		}
	}

4. Buat file dengan nama MasterPage.xaml yang berisi list menu yang akan dipilih

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
			 x:Class="MasterDetailPageNavigation.MasterPage"
			 Padding="0,40,0,0"
			 Icon="icon.png"
			 Title="Personal Organiser">
	<ContentPage.Content>
		<StackLayout VerticalOptions="FillAndExpand">
			<ListView x:Name="listView" VerticalOptions="FillAndExpand" SeparatorVisibility="None">
				<ListView.ItemTemplate>
					<DataTemplate>
						<ImageCell Text="{Binding Title}" ImageSource="{Binding IconSource}" />
					</DataTemplate>
				</ListView.ItemTemplate>
			</ListView>
		</StackLayout>
	</ContentPage.Content>
</ContentPage>

5. Tambahkan kode berikut pada file MasterPage.cs

	public partial class MasterPage : ContentPage
	{
		public ListView ListView { get { return listView; } }

		public MasterPage()
		{
			InitializeComponent();

			var masterPageItems = new List<MasterPageItem> ();
			masterPageItems.Add (new MasterPageItem {
				Title = "Contacts",
				IconSource = "contacts.png",
				TargetType = typeof(ContactsPage)
			});
			masterPageItems.Add (new MasterPageItem {
				Title = "TodoList",
				IconSource = "todo.png",
				TargetType = typeof(TodoListPage)
			});
			masterPageItems.Add (new MasterPageItem {
				Title = "Reminders",
				IconSource = "reminders.png",
				TargetType = typeof(ReminderPage)
			});

			listView.ItemsSource = masterPageItems;
		}
	}

6. Untuk bagian halaman detail tambahkan kode berikut pada halaman ContactsPage.xaml.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
			 x:Class="MasterDetailPageNavigation.ContactsPage"
			 Title="Contacts Page">
	<ContentPage.Content>
		<StackLayout>
			<Label Text="Contacts data goes here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
		</StackLayout>
	</ContentPage.Content>
</ContentPage>

7. Tambahkan lagi halaman dengan nama ReminderPage.xaml.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
			 x:Class="MasterDetailPageNavigation.ReminderPage"
			 Title="Reminder Page">
	<ContentPage.Content>
		<StackLayout>
			<Label Text="Reminder data goes here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
		</StackLayout>
	</ContentPage.Content>
</ContentPage>

8. Terakhir tambahkan halaman dengan nama TodoListPage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
			 x:Class="MasterDetailPageNavigation.TodoListPage"
			 Title="TodoList Page">
	<ContentPage.Content>
		<StackLayout>
			<Label Text="Todo list data goes here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
		</StackLayout>
	</ContentPage.Content>
</ContentPage>

9. Pada file App.cs tambahkan kode berikut:

	public App ()
	{
			MainPage = new MasterDetailPageNavigation.MainPage();
	}

10. Hasilnya dapat dilihat pada gambar berikut ini:

imageimage

Untuk diskusi dan pertanyaan, anda dapat mengirimkan email ke: erick@actual-training.com