Global Azure Bootcamp 2017–Yogyakarta

Pada tanggal 22 April 2017, telah diselenggarakan acara Global Azure Bootcamp 2017 – Yogyakarta, yang bertempat di Jogja Digital Valley (JDV).

Acara ini mempunyai tema Cloud for Yogyakarta. Pada acara ini juga dibahas bagaimana cara pengembangan aplikasi mobile menggunakan Xamarin Platform dengan Azure Backend.

Adapun pembicara pada acara ini adalah:

  1. Ridi Ferdiana – Microsoft MVP Visual Studio
  2. Erick Kurniawan – Microsoft MVP Windows Azure

WP_20170422_08_50_22_Pro

WP_20170422_08_59_46_Pro

WP_20170422_09_09_32_Pro

Eventbrite link: https://www.eventbrite.com/e/azure-as-digital-transformation-platform-to-preserve-tourism-and-culture-tickets-33298949053

Posted in Azure App Services, Azure Mobile Services, Cloud & Mobile, Cross Platform Mobile Development, Xamarin Forms | Tagged , , , , | Leave a comment

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

Posted in .NET Tech, Android, C#, Cross Platform Mobile Development, Xamarin Forms | Tagged , , , , | Leave a comment

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

Posted in Android, Azure App Services, Azure Mobile Services, Cross Platform Mobile Development, E-Book Gratis, FREE eBook, Xamarin Forms | Tagged , , , , | Leave a comment

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

Posted in Cross Platform Mobile Development, Xamarin Forms | Tagged , , , | Leave a comment

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

Posted in Cross Platform Mobile Development, Xamarin Forms | Tagged , , | Leave a comment

Xamarin Forms: Mengirimkan Data antar Halaman

Pada blog tutorial ini saya akan membahas bagaimana cara mengirimkan data antar halaman pada Xamarin Forms.

Untuk mengirimkan data antar halaman, anda dapat menggunakan beberapa macam cara. yaitu:

  • Menggunakan Constructor parameter.
  • Menggunakan Object Application.Current.Properties
  • Menggunakan Global Class

Cara yang pertama adalah mengirimkan data lewat parameter yang ada di konstruktor.

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage Title="Navigasi Hirarki" xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Modul4.NavigationPage1">
  <ContentPage.Content>
    <StackLayout>
      <Label Text="Home Page" FontSize="40"></Label>
      <Button Text="Go To Second Page" x:Name="btnSecond"></Button>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

2. Tambahkan kode pada NavigationPage1.xaml.cs. Method Navigation.PushAsync() digunakan untuk memanggil halaman selanjutnya.

    public partial class NavigationPage1 : ContentPage
    {
        public NavigationPage1()
        {
            InitializeComponent();
            btnSecond.Clicked += BtnSecond_Clicked;
        }

        private async void BtnSecond_Clicked(object sender, EventArgs e)
        {
            
            await Navigation.PushAsync(new NavigationPage2());
        }
    }

3. Tambahkan halaman NavigationPage2.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="Bab4.NavigationPage2">
  <ContentPage.Content>
    <StackLayout>
      <Label Text="Second Page" FontSize="40"></Label>
      <Button x:Name="btnBack" Text="Back"/>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

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

    public partial class NavigationPage2 : ContentPage
    {
        public NavigationPage2()
        {
            InitializeComponent();

            
            btnBack.Clicked += async (sender, e) =>
            {
                await Navigation.PopAsync(true);
            };
        }
    }

5. Tambahkan kode berikut pada NavigationPage2.xaml.

        public NavigationPage2(string param)
        {
            InitializeComponent();

            lblParam.Text = "Nama anda : " + param;
            
            btnBack.Clicked += async (sender, e) =>
            {
                await Navigation.PopAsync(true);
            };
        }

6. Dan untuk mengirimkan parameternya lewat konstruktor, tambahkan kode berikut ini:

    public partial class NavigationPage1 : ContentPage
    {
        --------
        private async void BtnSecond_Clicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new NavigationPage2("Erick Kurniawan"));
        }
    }

 

Menggunakan Objek Application.Current.Properties

Selain menggunakan parameter pada konstruktor, anda juga dapat juga menggunakan objek Application.Current.Properties seperti yang ditunjukan pada contoh berikut:

1. Tambahkan kode berikut ini pada halaman App.cs.

        public App()
        {
            InitializeComponent();
            Application.Current.Properties["id"] = "22002321";
            MainPage = new NavigationPage(new NavigationPage1());
        }

2. Kemudian untuk menampilkan datanya pada halaman NavigationPage2 tambahkan kode berikut:

    public partial class NavigationPage2 : ContentPage
    {
        public NavigationPage2(string param)
        {
            InitializeComponent();

            lblParam.Text = "Nama anda : " + param + "id "+(string)Application.Current.Properties["id"];
            
            btnBack.Clicked += async (sender, e) =>
            {
                await Navigation.PopAsync(true);
            };
        }
    }

Global Class

Selain dua cara yang sudah dibahas sebelumnya, anda juga dapat menggunakan Global class yang dapat diakses dari semua halaman.

1. Buat class dengan nama Global.cs.

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

2. Buat halaman dengan nama GlobalPage1.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="Bab4.GlobalPage1">
  <ContentPage.Content>
    <StackLayout>
      <Label Text="Assigning id = 12345" FontSize="40" />
      <Button Text="Go to Second Page" Clicked="Navigate" />
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

3. Tambahkan kode berikut pada file GlobalPage1.xaml.cs

    public partial class GlobalPage1 : ContentPage
    {
        public GlobalPage1()
        {
            InitializeComponent();
            Global.Instance.myData = "12345";
        }

        protected async void Navigate(object sender, EventArgs args)
        {
            await Navigation.PushAsync(new GlobalPage2());
        }
    }

4. Kemudian tambahkan juga halaman GlobalPage2.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="Bab4.GlobalPage2">
  <ContentPage.Content>
    <StackLayout>
      <Label Text="Persisted id: " FontSize="40" />
      <Label Text="{Binding Data}" FontSize="40" />
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

5. Terakhir tambahkan kode pada GlobalPage2.xaml.cs.

    public partial class GlobalPage2 : ContentPage
    {
        public string Data { get; set; }

        public GlobalPage2()
        {
            InitializeComponent();
            Data = Global.Instance.myData.ToString();
            this.BindingContext = this;
        }
    }

6. Anda dapat menggunakan object static class Global pada setiap halaman Xamarin Forms.

 

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

Posted in Cross Platform Mobile Development, Xamarin Forms | Tagged , | Leave a comment

Modal Form Navigation pada Xamarin Forms

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.

1. Buat halaman xaml baru dengan nama ModalPage.xaml.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage Title="Contoh Modal" xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Bab4.ModalPage">
  <ContentPage.Content>
    <StackLayout>
      <Label Text="First Page" FontSize="40" />
      <Button Text="Go to Second Page Modally" Clicked="Navigate" />
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

2. Tambahkan kode berikut untuk memanggil halaman modal.

    public partial class ModalPage : ContentPage
    {
        public ModalPage()
        {
            InitializeComponent();
        }

        protected async void Navigate(object sender, EventArgs args)
        {
            await Navigation.PushModalAsync(new ModalSecondPage(), false);
        }
    }

3. Untuk halaman yang dipanggil buat halaman xaml baru dengan nama ModalSecondPage.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="Bab4.ModalSecondPage">
  <ContentPage.Content>
    <StackLayout>
      <Label Text="Second Page" FontSize="40" />
      <Button Text="Pop back to First Page" Clicked="Navigate" />
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

4. Kemudian tambahkan kode berikut untuk menutup form modal.

    public partial class ModalSecondPage : ContentPage
    {
        public ModalSecondPage()
        {
            InitializeComponent();
        }

        protected async void Navigate(object sender, EventArgs args)
        {
            await Navigation.PopModalAsync();
        }
    }

5. Tampilan modal form dapat dilihat pada gambar berikut.

image

image

Contoh Kompleks Modal Forms

Pada contoh kedua akan ditunjukan cara penggunaan modal form yang lebih kompleks untuk menampilkan ListView dan detail berupa modal form.

1. Buat halaman utama dengan nama MainModalPage.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="Bab4.MainModalPage" Title="Contacts">
  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness" iOS="0,40,0,0" />
  </ContentPage.Padding>
  <ContentPage.Content>
    <StackLayout>
      <ListView x:Name="listView" ItemSelected="OnItemSelected">
        <ListView.ItemTemplate>
          <DataTemplate>
            <TextCell Text="{Binding Name}" Detail="{Binding Country}" DetailColor="Red" />
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

2. Pada project portable, tambahkan class Contact.cs, dan tulis kode berikut:

    public class Contact
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string Occupation { get; set; }
        public string Country { get; set; }
    }

3. Kemudian tambahkan kode berikut pada MainModalPage.xaml.cs.

    public partial class MainModalPage : ContentPage
    {
        List<Contact> contacts;
        public MainModalPage()
        {
            InitializeComponent();
            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"
            });
            contacts.Add(new Contact
            {
                Name = "Bambang Supeno",
                Age = 34,
                Occupation = "Developer",
                Country = "Indonesia"
            });
            contacts.Add(new Contact
            {
                Name = “Budi Sutejo",
                Age = 52,
                Occupation = "Project Manager",
                Country = "Indonesia"
            });
            contacts.Add(new Contact
            {
                Name = "Cody Cock",
                Age = 55,
                Occupation = "Frontend Developer",
                Country = "United State"
            });
            contacts.Add(new Contact
            {
                Name = "Tan Thie Tu",
                Age = 19,
                Occupation = "Junior Developer",
                Country = "Vietnam"
            });
        }
    }

4. Untuk menampilkan form modal buat halaman DetailPage.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="Bab4.DetailPage">
  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness" iOS="0,40,0,0" />
  </ContentPage.Padding>
  <ContentPage.Content>
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
      <StackLayout Orientation="Horizontal">
        <Label Text="Name:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
        <Label Text="{Binding Name}" FontSize="Medium" FontAttributes="Bold" />
      </StackLayout>
      <StackLayout Orientation="Horizontal">
        <Label Text="Age:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
        <Label Text="{Binding Age}" FontSize="Medium" FontAttributes="Bold" />
      </StackLayout>
      <StackLayout Orientation="Horizontal">
      <Label Text="Occupation:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
        <Label Text="{Binding Occupation}" FontSize="Medium" FontAttributes="Bold" />
      </StackLayout>
      <StackLayout Orientation="Horizontal">
        <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.Content>
</ContentPage>

5. Kemudian tambahka juga kode pada halaman DetailPage.xaml.cs.

    public partial class DetailPage : ContentPage
    {
        public DetailPage()
        {
            InitializeComponent();
        }
        async void OnDismissButtonClicked(object sender, EventArgs args)
        {
            await Navigation.PopModalAsync();
        }
    }

6. Tampilan contoh modal form dapat dilihat pada gambar berikut.

image

image

Posted in Cross Platform Mobile Development, Xamarin Forms | Tagged , , , | Leave a comment