Erick Kurniawan

AppShell di .NET MAUI (Multi-platform App UI) adalah fitur yang memudahkan pengembangan aplikasi dengan menyediakan struktur navigasi yang konsisten dan terintegrasi. Ini adalah bagian dari evolusi Xamarin.Forms ke .NET MAUI, yang dirancang untuk menyederhanakan pembuatan aplikasi lintas platform. AppShell menyediakan cara deklaratif untuk mendefinisikan struktur navigasi aplikasi Anda. Ini memungkinkan Anda untuk mengatur halaman, hierarki, dan rute navigasi dalam satu tempat yang terpusat. Keuntungan menggunakan AppShell meliputi:

1. Deklaratif dan Terstruktur:
   AppShell memungkinkan pengembang mendefinisikan struktur navigasi aplikasi secara deklaratif dalam satu file XML (XAML). Ini mencakup definisi halaman, rute, dan hirarki navigasi, yang membantu menjaga kode tetap terorganisir.
2. Navigasi yang Mudah:
   Dengan AppShell, pengembang dapat dengan mudah mengatur dan mengelola navigasi halaman menggunakan flyout menus, tab bar, dan berbagai rute. Ini mengurangi kerumitan dibandingkan dengan metode navigasi tradisional yang memerlukan penanganan kode yang lebih banyak.
3. Dukungan untuk Flyout dan Tab:
   AppShell mendukung flyout menus (menu samping yang dapat diperluas) dan tab bar, memungkinkan pengembang untuk membuat UI yang kaya dan interaktif dengan lebih sedikit upaya. Ini membantu dalam membangun aplikasi yang lebih intuitif dan mudah dinavigasi.
4. Routing yang Fleksibel:
   AppShell memungkinkan penentuan rute untuk navigasi, yang berarti Anda dapat menentukan cara pengguna berpindah dari satu halaman ke halaman lain. Ini mendukung navigasi berbasis URI, yang membuat rute lebih mudah dibaca dan dikelola.
5. Pengaturan Status Global:
   AppShell dapat mengelola status aplikasi secara global, seperti menyimpan informasi pengguna atau preferensi aplikasi, yang dapat diakses dari berbagai bagian aplikasi.
6. Pemrograman yang Efisien:
   Dengan memisahkan logika navigasi dari logika tampilan, AppShell membantu dalam menjaga pemisahan kepentingan yang lebih baik, yang mengarah pada kode yang lebih bersih dan lebih mudah dikelola.
   
   Dengan menggunakan AppShell, pengembang dapat mempercepat proses pengembangan aplikasi dengan mengurangi kompleksitas dalam mengatur navigasi dan struktur aplikasi. Ini sangat bermanfaat untuk aplikasi dengan struktur navigasi yang kompleks atau ketika pengembang ingin memastikan konsistensi di seluruh platform yang didukung oleh .NET MAUI.

#Lab – Menambahkan Page pada AppShell

1. Pada AppShell.xaml tambahkan xaml berikut untuk mendaftarkan 2 halaman yaitu MainPage dan DetailPage.

<Shell
    x:Class="SampleMAUIApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:SampleMAUIApp"
    Shell.FlyoutBehavior="Flyout"
    Title="SampleMAUIApp">
    <ShellContent  
        Title="Main Page"  
        ContentTemplate="{DataTemplate local:MainPageNav}" />
    <ShellContent  
        Title="Detail Page"  
        ContentTemplate="{DataTemplate local:DetailPageNav}" />
</Shell>

2. Buat halaman MainPageNav.xaml, kemudian tambahkan kode berikut:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SampleMAUIApp.Bab4.MainPageNav"
             Title="MainPageNav">
    <VerticalStackLayout>
        <Entry x:Name="InputEntry" Placeholder="Enter some text" />
        <Button Text="Go to Detail Page" Clicked="OnNavigateButtonClicked" />
    </VerticalStackLayout>
</ContentPage>

3. Buat halaman DetailPageNav.xaml, kemudian tambahkan kode berikut:

  <VerticalStackLayout>
      <Label x:Name="ReceivedTextLabel" Text="Received Text:" FontSize="24" />
  </VerticalStackLayout>

4. Jalankan aplikasi untuk melihat bahwa ada 2 halaman yang ditampilkan ketika Anda memilih menu.

#Lab – AppShell Navigation

1. Untuk menambahkan Navigasi antar halaman, Anda dapat menggunakan Navigation Url.

2. Pada MainPageNav.xaml.cs, tambahkan kode berikut:

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

    private async void OnNavigateButtonClicked(object sender, EventArgs e)
    {
        string parameter = InputEntry.Text;
        await Shell.Current.GoToAsync("///detailpage");
    }
}

3. Kemudian tambahkan juga property routing pada AppShell.xaml.

<ShellContent  Route="detailpage" 
Title="Detail Page"  
        ContentTemplate="{DataTemplate local:Bab4.DetailPageNav}" />

4. Jalankan aplikasi dan tekan tombol Go To Detail Page untuk berpindah ke halaman DetailPageNav.

#Lab – Mengirimkan Parameter Dengan Route

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

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

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

    private async void OnNavigateButtonClicked(object sender, EventArgs e)
    {
        string parameter = InputEntry.Text;
        await Shell.Current.GoToAsync($"///detailpage?text={parameter}");
    }
}

3. Kemudian pada halaman DetailPageNav.xaml.cs tambahkan label untuk menampilkan nilai parameter yang dikirimkan.

[QueryProperty(nameof(ReceivedText), "text")]
public partial class DetailPageNav : ContentPage
{

    public DetailPageNav()
    {
        InitializeComponent();
    }

    private string receivedText;
    public string ReceivedText
    {
        get => receivedText;
        set
        {
            receivedText = Uri.UnescapeDataString(value);
            OnPropertyChanged(nameof(ReceivedText));
            ReceivedTextLabel.Text = $"Received Text: {receivedText}";
        }
    }
}

4. Jalankan aplikasi pada emulator untuk melihat hasilnya.