Membandingkan UI berbasis peristiwa dengan UI terikat data

  • 6 menit

Antarmuka pengguna berbasis peristiwa (UI) dirancang di sekitar peristiwa yang diekspos kontrol. Peristiwa ini dapat dikaitkan dengan kode penanganan aktivitas yang dipanggil saat peristiwa dipicu. Misalnya, Anda memiliki tombol yang saat diklik melakukan operasi jangka panjang. Penanganan aktivitas yang ditetapkan ke Clicked peristiwa dapat memulai operasi lalu mengatur properti tombol IsEnabled ke false, mencegah tombol diklik lagi saat operasi sedang berjalan.

UI terikat data menggunakan pengikatan data untuk menyajikan dan berinteraksi dengan data. Properti kontrol terikat ke properti objek data, dan pengikatan tersebut dapat mendeteksi perubahan dalam properti. Menggunakan contoh sebelumnya, pertimbangkan tombol yang melakukan operasi jangka panjang. Alih-alih menonaktifkan tombol di code-behind, IsEnabled properti terikat ke properti objek IsBusy data. Setiap kali objek data menjadi "sibuk" status tombol yang diaktifkan secara otomatis diubah agar cocok.

Pro dan kontra dalam menggunakan peristiwa dan kode di belakang

Menggunakan penanganan aktivitas kontrol dengan code-behind adalah cara cepat dan nyaman untuk merancang logika aplikasi untuk UI Anda. Anda menggunakan kode untuk memanggil layanan untuk mendapatkan data, melakukan operasi pada data tersebut, dan berinteraksi dengan kontrol di halaman. Kode digunakan untuk menjaga UI dan data tetap sinkron.

Pertimbangkan contoh aplikasi layanan cuaca. Fragmen XAML berikut berisi tombol UI sederhana yang dipilih pengguna untuk mendapatkan data terbaru dan memperbarui UI dengan kelembaban.

<VerticalStackLayout Margin="10">
    <HorizontalStackLayout Spacing="20">
        <Label Text="Postal Code:" VerticalOptions="Center" />
        <Entry x:Name="PostalCode" WidthRequest="100" />
        <Button x:Name="RefreshWeatherButton" Text="Refresh" WidthRequest="200" Clicked="RefreshWeatherButton_Clicked" />
    </HorizontalStackLayout>
    <Label x:Name="Humidity" Text="Humidity: ?" />
</VerticalStackLayout>

Screenshot of a .NET MAUI app that has an entry control for a postal code, a button with the text refresh. Under those two controls is a label that represents the humidity.

Ada tiga kontrol bernama dalam contoh ini:

  • Entry kontrol bernama PostalCode.
  • Button kontrol bernama RefreshWeatherButton.
  • Label kontrol bernama Kelembaban.

memiliki RefreshWeatherButton penanganan aktivitas yang dideklarasikan untuk peristiwa tersebut Clicked . Ketika tombol diklik, penanganan aktivitas meminta layanan cuaca untuk prakiraan cuaca terbaru, menggunakan data yang dimasukkan dalam PostalCode kontrol entri, dan mengatur Humidity teks label ke kelembaban saat ini.

private void RefreshWeatherButton_Clicked(object sender, EventArgs e)
{
    WeatherService.Location = PostalCode.Text;
    WeatherService.Refresh();
    Humidity.Text = $"Humidity: {WeatherService.Humidity}";
}

Dalam penanganan aktivitas yang satu ini, tiga kontrol digabungkan erat satu sama lain dan data melalui kode di belakang.

Desain ini berfungsi dengan baik untuk UI kecil, tetapi segera setelah UI menjadi kompleks, mempertahankan kode yang digabungkan erat di belakang dapat menjadi masalah. Jika Anda menghapus atau mengubah kontrol, Anda harus membersihkan kode apa pun menggunakan kontrol UI tersebut, yang dapat menyertakan penanganan aktivitas. Jika Anda memutuskan untuk mendesain ulang UI, Anda akan memiliki banyak kode untuk direfaktor juga. Dan ketika struktur data pendukung berubah, Anda harus menyelami kode setiap UI agar tetap sinkron.

Pengikatan data membantu

Pengikatan data dapat diimplementasikan dalam XAML atau kode, tetapi jauh lebih umum di XAML di mana mereka membantu mengurangi ukuran file code-behind. Dengan mengganti kode prosedural di penanganan aktivitas dengan kode deklaratif atau markup, aplikasi disederhanakan dan diklarifikasi. Karena pengikatan tidak memerlukan kode di belakang, Anda dapat dengan mudah membuat, mengubah, atau mendesain ulang UI agar sesuai dengan cara yang Anda inginkan untuk menyajikan data.

Mari kita ambil contoh yang sama seperti di bagian sebelumnya, tetapi perbarui untuk menggunakan pengikatan data:

<VerticalStackLayout Margin="10">
    <HorizontalStackLayout Spacing="20">
        <Label Text="Postal Code:" VerticalOptions="Center" />
        <Entry Text="{Binding Location, Mode=OneWayToSource}" WidthRequest="100" />
        <Button Text="Refresh" Command="{Binding RefreshWeather}" WidthRequest="200" />
    </HorizontalStackLayout>
    <Label Text="{Binding Humidity}" />
</VerticalStackLayout>

Anda dapat melihat properti yang terikat data, mereka menggunakan sintaks {Binding ...} ekstensi XAML untuk nilai properti. Jangan khawatir tentang spesifikasinya, yang tercakup nanti dalam modul ini.

Tiga kontrol yang sama dideklarasikan dalam XAML, tetapi tidak satu pun dinamai, karena nama tidak diperlukan:

  • Entry Kontrol:

    Properti kontrol Text ini terikat ke properti bernama Location.

  • Button Kontrol:

    Properti tombol Command terikat ke properti bernama RefreshWeather. Command adalah properti pada tombol yang memanggil kode saat tombol ditekan. Ini adalah alternatif untuk Clicked peristiwa yang digunakan dalam pengikatan data.

  • Label Kontrol:

    Properti ini Text terikat ke properti bernama Humidity.

Dalam antarmuka pengguna sederhana ini, semua kode di belakang dihilangkan. Menghapus semua kode di belakang bukanlah titik pengikatan data, meskipun biasanya memungkinkan. Kode-belakang masih memiliki tempatnya. Berapa banyak pengikatan data yang Anda terapkan terserah Anda.

Sekarang UI digabungkan secara longgar ke objek data. Mengapa digabungkan secara longgar alih-alih digabungkan erat? Karena cara pengikatan dievaluasi. Setiap kontrol memiliki BindingContext properti . Jika konteks tidak diatur, konteks kontrol induk digunakan, dan sebagainya, hingga akar XAML dievaluasi. Saat pengikatan dievaluasi, instans objek konteks diperiksa untuk properti yang diperlukan, seperti pengikatan kontrol Text label ke properti konteks Humidity . Jika Humidity tidak ada pada konteks, tidak ada yang terjadi.

Karena UI digabungkan secara longgar, Anda dapat mendesain ulang UI tanpa khawatir melanggar kode. Namun, Anda dapat memutuskan fungsionalitas. Misalnya, Anda dapat menghapus tombol dan aplikasi masih mengkompilasi dan menjalankan, tetapi Anda tidak memiliki cara untuk menyegarkan cuaca. Di sisi lain, Anda dapat mengganti Entry kontrol dan Button dengan kontrol tunggal SearchBar . Kontrol ini memungkinkan Anda memasukkan teks dan memanggil perintah.

<SearchBar Text="{Binding Location, Mode=OneWayToSource}" SearchCommand="{Binding RefreshWeather}" />

Seperti yang Anda lihat, menggunakan pengikatan data dalam desain UI Anda dapat membantu Anda berevolusi dan mengubah UI Anda tanpa banyak pekerjaan. Ini membuat UI tetap disinkronkan dengan data secara otomatis dan logika aplikasi dipisahkan dari UI.

Uji pengetahuan Anda

1.

Manakah dari pernyataan berikut yang menjelaskan bagaimana pengikatan data meningkatkan UI?

2.

Dalam aplikasi yang mengambil cuaca terbaru, kontrol label yang mewakili suhu terikat ke objek data. Ketika pengguna menekan tombol "Dapatkan Cuaca", memicu Clicked peristiwa, apa yang akan dilakukan kode penanganan aktivitas untuk memperbarui UI?