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.
Erick Kurniawan 