About Erick Kurniawan

IT Trainer, Consultant, & Microsoft Azure MVP Actual Training (http://actual-training.com)

Xamarin Shell: Fitur Search Pada Shell

1. Untuk membuat halaman yang memiliki fitur search, tambahkan halaman baru dengan nama ContohSearch.

2. Kemudian pada project buat folder dengan nama Data dan Controls.

3. Folder Data digunakan untuk menambahkan list untuk data dummy. Pada folder Data tambahkan file dengan nama MonkeyData.cs

public static IList<Animal> Monkeys { get; private set; }

        static MonkeyData()
        {
            Monkeys = new List<Animal>();

            Monkeys.Add(new Animal
            {
                Name = "Baboon",
                Location = "Africa & Asia",
                Details = "Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
            });

            Monkeys.Add(new Animal
            {
                Name = "Capuchin Monkey",
                Location = "Central & South America",
                Details = "The capuchin monkeys are New World monkeys of the subfamily Cebinae. Prior to 2011, the subfamily contained only a single genus, Cebus.",
                ImageUrl = " https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
            });
}}

4. Kemudian tambahkan juga folder Controls, kemudian tambahkan file dengan nama MonkeySearchHandler.cs. file ini digunakan untuk menangani mekanisme search.

    public class MonkeySearchHandler : SearchHandler
    {
        protected override void OnQueryChanged(string oldValue, string newValue)
        {
            base.OnQueryChanged(oldValue, newValue);

            if (string.IsNullOrWhiteSpace(newValue))
            {
                ItemsSource = null;
            }
            else
            {
                ItemsSource = MonkeyData.Monkeys
                    .Where(monkey => monkey.Name.ToLower().Contains(newValue.ToLower()))
                    .ToList<Animal>();
            }
        }

        protected override async void OnItemSelected(object item)
        {
            base.OnItemSelected(item);
            await Task.Delay(1000);
           await Shell.Current.GoToAsync($"monkeydetails?name={((Animal)item).Name}");        }
    }

5. Pada ContohSearch tambahkan kode xaml berikut ini:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage mc:Ignorable="d"
             x:Class="Latihan1.Bab4.ContohSearch"
             xmlns:controls="clr-namespace:Latihan1.Controls"
             xmlns:data="clr-namespace:Latihan1.Data"
             Title="Monkey">
    <Shell.SearchHandler>
        <controls:MonkeySearchHandler Placeholder="Enter search term"
                                      ShowsResults="true"
                                      DisplayMemberName="Name" />
    </Shell.SearchHandler>
    <CollectionView Margin="20"
                    ItemsSource="{x:Static data:MonkeyData.Monkeys}"
                    ItemTemplate="{StaticResource AnimalTemplate}"
                    SelectionMode="Single"
                    SelectionChanged="OnCollectionViewSelectionChanged" />
</ContentPage>

6. Kemudian tambahkan kode pada method OnCollectionViewSelectionChanged.

        async void OnCollectionViewSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            try
            {
                string monkeyName = (e.CurrentSelection.FirstOrDefault() as Animal).Name;
                await Shell.Current.GoToAsync($"monkeydetails?name={monkeyName}");
            }
            catch (Exception ex)
            {

                await DisplayAlert("Error", $"{ex.InnerException.Message}","OK");
            }
            
        }

7. Karena ketika kita memilih salah satu item akan dibuka halaman details, maka tambahkan halaman baru dengan nama DetailSearch.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 
             x:Class="Latihan1.Bab4.DetailSearch" Title="Monkey Detail">
    <ScrollView>
        <StackLayout Margin="20">
            <Label Text="{Binding Name}" 
                   HorizontalOptions="Center" />
            <Label Text="{Binding Location}" 
                   FontAttributes="Italic" 
                   HorizontalOptions="Center" />
            <Image Source="{Binding ImageUrl}" 
                   HeightRequest="200" 
                   WidthRequest="200" 
                   HorizontalOptions="CenterAndExpand" />
            <Label Text="{Binding Details}"/>
        </StackLayout>
    </ScrollView>
</ContentPage>

8. Kemudian pada folder ViewModels tambahkan class dengan nama MonkeyDetailViewModel, kemudian tambahkan kode berikut ini:

    [QueryProperty("MonkeyName", "name")]
    public class MonkeyDetailViewModel : INotifyPropertyChanged
    {
        public string MonkeyName
        {
            set
            {
                Animal monkey = MonkeyData.Monkeys.FirstOrDefault(m => m.Name == Uri.UnescapeDataString(value));

                if (monkey != null)
                {
                    Name = monkey.Name;
                    Location = monkey.Location;
                    Details = monkey.Details;
                    ImageUrl = monkey.ImageUrl;
                    OnPropertyChanged("Name");
                    OnPropertyChanged("Location");
                    OnPropertyChanged("Details");
                    OnPropertyChanged("ImageUrl");
                }
            }
        }

        public string Name { get; set; }
        public string Location { get; private set; }
        public string Details { get; private set; }
        public string ImageUrl { get; private set; }

        #region INotifyPropertyChanged

        public event PropertyChangedEventHandler PropertyChanged;

        void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        #endregion
    }

9. Tambahkan route untuk ke halaman detail pada AppShell.cs

   Routing.RegisterRoute("monkeylist", typeof(ContohSearch));
   Routing.RegisterRoute("monkeydetails", typeof(DetailSearch));

10. Kemudian jalankan aplikasinya, dan pilih menu navigasi Monkey List.

image

11. Ketikan keyword yang diinginkan, setelah dipilih maka akan ditampilkan halaman detail.

image

Xamarin Shell: Mengirimkan Parameter Dengan Route

Pada tutorial kali ini akan dibahas bagaimana cara mengirimkan parameter menggunakan fitur route yang ada pada Xamarin Shell.

1. Selain menggunakan route untuk navigasi, anda juga dapat mengirimkan nilai via navigasi dengan cara berikut:

2. Pada halaman BindingListString yang sudah anda buat sebelumnya, tambahkan kode berikut untuk mengirimkan nilai.

        private async void btnImageCell_Clicked(object sender, EventArgs e)
        {
            var nama = "Erick";
            await Shell.Current.GoToAsync($"//imagecell?nama={nama}");
        }

3. Kemudian pada halaman ListViewImageCell tambahkan label untuk menampilkan nilai parameter yang dikirimkan.

        <StackLayout>
            <Button x:Name="btnImageCell" 
                    Text="Ke Halaman Image Cell" Clicked="btnImageCell_Clicked" />
            <ListView x:Name="listView" />
        </StackLayout>

4. Kemudian tambahkan attribute berikut untuk mengambil nilai parameter:

    [QueryProperty("Nama","nama")]
    public partial class ListViewImageCell : ContentPage

5. Kemudian tambahkan property untuk mengambil data.

        public string Nama
        {
            set
            {
                lblPar.Text = Uri.UnescapeDataString(value);
            }
        }

image

Xamarin Shell: Shell Navigation

Xamarin Shell mempunyai URI-based navigation yang menggunakan mekanisme routes sehingga kita dapat berpindah navigasi tanpa harus mengikuti mekanisme navigasi hirarki standard.

1. Pada aplikasi yang sudah kita buat sebelumnya, tambahkan code behind sebagai berikut:

        public AppShell()
        {
            InitializeComponent();
            Routing.RegisterRoute("liststring", typeof(BindingListString));
            Routing.RegisterRoute("imagecell", typeof(ListViewImageCell));
            Routing.RegisterRoute("datamodel", typeof(BindingToDataModel));
            Routing.RegisterRoute("customlist", typeof(ListViewCustom));
        }

2. Kemudian pada bagian xaml tambahkan route berikut ini:

    <FlyoutItem Title="List Sample"
                FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Tab Menu">
            <ShellContent Title="Binding List" Route="liststring">
                <views:BindingListString/>
            </ShellContent>
            <ShellContent Title="Image Cell" Route="imagecell">
                <views:ListViewImageCell />
            </ShellContent>
        </Tab>
        <ShellContent Title="Binding List String" Route="liststring">
            <views:BindingListString />
        </ShellContent>
        <ShellContent Title="Binding Data Model" Route="datamodel">
            <views:BindingToDataModel />
        </ShellContent>
        <ShellContent Title="Custom ListView" Route="customlist">
            <views:ListViewCustom />
        </ShellContent>
    </FlyoutItem>

3. Pada halaman BindingListString yang sudah dibuat sebelumnya tambahkan tmbol untuk navigasi halaman.

        <StackLayout>
            <Button x:Name="btnImageCell" 
                    Text="Ke Halaman Image Cell" Clicked="btnImageCell_Clicked" />
            <ListView x:Name="listView" />
        </StackLayout>

4. Untuk navigasi dengan menggunakan route yang sudah dibuat, anda dapat menambahkan perintah berikut ini:

        private async void btnImageCell_Clicked(object sender, EventArgs e)
        {
            await Shell.Current.GoToAsync("imagecell");
        }

image

Xamarin Shell: Menggunakan Shell Pada Xamarin Forms

Xamarin.Forms 4.0 memperkenalkan fitur-fitur baru yang luar biasa untuk membantu merampingkan pengembangan saat membangun aplikasi mobile yang cantik dengan C #. Penekanan utama adalah Xamarin.Forms Shell baru, yang berupaya mengurangi kerumitan membangun aplikasi mobile dengan menyediakan fitur arsitektur aplikasi mendasar. Seperti hierarki visual, navigasi, routing berbasis URI, dan penanganan pencarian terintegrasi.

Pada tutorial ini anda akan melihat betapa mudahnya memasang fitur shell pada aplikasi Xamarin. Bentuk Shell dengan berbagai jenis skema navigasi dan cara menavigasi ke sub-halaman.

1. Untuk membuat shell dari awal, anda dapat membuat project baru kemudian pilih template untuk membuat shell seperti gambar dibawah ini.

image

2. Namun jika anda sudah memiliki project Xamarin Forms, maka anda dapat menambahkan Shell dengan cara menambahkan halaman xaml yang diturunkan dari class Shell.

3. Pada Xamarin Forms project tambahkan xaml baru dengan nama AppShell.xaml

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Latihan1.AppShell">
</Shell>

4. Kemudian pada code behind tambahkan kode sebagai berikut:

    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }
    }

5. Kemudian pada App class tambahkan kode berikut ini untuk membuka shell pertama kali.

        public App()
        {
            InitializeComponent();
            MainPage = new AppShell();
        }

6. Untuk menambahkan menu anda dapat menggunakan FlyoutItem atau menggunakan TabBar.

7. Untuk menampilkan menu yang dapat di slide di sebelah kiri, anda dapat menggunakan flyout item. Kodenya adalah sebagai berikut:

<Shell ---------
       xmlns:views="clr-namespace:Latihan1.Bab3">
    <FlyoutItem Title="List Sample"
                FlyoutDisplayOptions="AsMultipleItems">

        <ShellContent Title="Binding List String">
            <views:BindingListString />
        </ShellContent>
        <ShellContent Title="Binding Data Model">
            <views:BindingToDataModel />
        </ShellContent>

        <ShellContent Title="Custom ListView">
            <views:ListViewCustom />
        </ShellContent>
    </FlyoutItem>
</Shell>

8. Tampilannya dapat dilihat sebagai berikut:

image

9. Menu yang ditmbahkan bisa juga berupa tab.

    <FlyoutItem Title="List Sample"
                FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Tab Menu">
            <ShellContent Title="Binding List">
                <views:BindingListString/>
            </ShellContent>
            <ShellContent Title="Image Cell">
                <views:ListViewImageCell />
            </ShellContent>
        </Tab>
        <ShellContent Title="Binding List String">
            <views:BindingListString />
        </ShellContent>
        <ShellContent Title="Binding Data Model">
            <views:BindingToDataModel />
        </ShellContent>

        <ShellContent Title="Custom ListView">
            <views:ListViewCustom />
        </ShellContent>
    </FlyoutItem>

10. Anda dapat melihat tampilannya sebagai berikut:

image