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

Advertisements

About Erick Kurniawan

IT Trainer, Consultant, & Microsoft Azure MVP Actual Training (http://actual-training.com)
This entry was posted in Cross Platform Mobile Development, Xamarin, Xamarin Forms and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s