Pengantar antarmuka pengguna dan data

  • 5 menit

Tech logo.

Misalkan Anda bekerja untuk perusahaan perancang pakaian kustom, dan Anda ingin membuat aplikasi yang membantu pelanggan Anda memilih bahan atau warna favorit mereka. Nama pengguna, daftar warna yang dapat mereka pilih, dan warna favorit yang dipilih adalah semua data. Ini adalah data yang dimasukkan pengguna, dipilih, dan ditinjau melalui berbagai kontrol yang ditampilkan di UI: kotak teks, drop-down, daftar, tombol, dan sebagainya. Semua ini dikendalikan oleh logika aplikasi.

Sebagian besar aplikasi memiliki tiga komponen utama:

  • Antarmuka pengguna (UI): Label, tombol, kotak teks, penggeser, bagan, dan semua kontrol lain yang menyajikan informasi kepada pengguna. Ini juga mencakup kontrol yang memungkinkan pengguna berinteraksi dengan aplikasi dengan memasukkan data, memilih opsi, atau memberikan perintah.
  • Data: Informasi yang sedang digali aplikasi. Untuk aplikasi kalkulator dasar, dapat berupa angka yang saat ini ditampilkan, hasil operasi sebelumnya, atau nilai yang disimpan dalam memori. Untuk permainan, data dapat mencakup status dan posisi pemain dan musuh, tata letak dan perilaku lingkungan, atau properti senjata dan objek lainnya. Untuk aplikasi perusahaan, data dapat menjadi database karyawan, riwayat pesanan, dan sebagainya. Untuk aplikasi perusahaan pakaian dalam contoh kami, data disimpan dalam objek aktual yang mewakili waktu saat ini, atau warna yang ditampilkan UI.
  • Logika: Konstruksi yang berkomunikasi dengan sumber daya eksternal (seperti penyimpanan, database, layanan online, atau aplikasi lain), melakukan operasi pada data, dan memperbarui UI untuk mencerminkan perubahan dalam data. Logika juga menerima input pengguna dari UI, dan bertindak sesuai dengan informasi yang dimasukkan atau perintah yang diberikan. Dalam contoh kami, logika memperbarui jam, membangun daftar warna yang tersedia, dan menyimpan dan mengambil preferensi warna pengguna.

Koneksi antara logika aplikasi dan UI sangat penting. Kerangka kerja seperti SDK Aplikasi Windows, Platform Windows Universal (UWP), dan Windows Presentation Foundation (WPF) telah menggabungkan metode transfer data yang sangat efisien dan serbaguna ke dan dari UI yang disebut pengikatan data.

Dalam modul ini, Anda akan mempelajari cara menggunakan pengikatan data ke:

  • Tampilkan dan perbarui data teks sederhana secara otomatis (menampilkan jam di aplikasi).
  • Perbarui properti C# secara otomatis saat UI menerima input (memasukkan nama pengguna).
  • Secara otomatis mencerminkan perubahan data pada UI (menyapa pengguna, menampilkan jam).
  • Perlihatkan dan edit daftar struktur data yang lebih kompleks (mencantumkan warna yang tersedia dan favorit).

Kami juga akan membahas beberapa praktik terbaik untuk pemisahan UI dan logika yang baik. Memisahkan UI dan logika membantu Anda menguji setiap komponen secara terpisah, dan mengidentifikasi kesalahan dengan lebih mudah. Ini juga sangat mengurangi jumlah kode boilerplate yang harus Anda tulis. Kode boilerplate yang lebih sedikit berarti lebih sedikit kesalahan, lebih sedikit bug, dan lebih banyak waktu untuk fokus pada hal-hal penting yang ingin Anda capai dengan aplikasi Anda.

Prasyarat

Untuk mendapatkan hasil maksimal dari modul ini, Anda harus terbiasa dengan:

  • Membuat proyek UWP atau WPF baru di Visual Studio.
  • Bahasa C#.
  • Konsep dasar markup XAML.
  • Kontrol tata letak XAML dasar, termasuk StackPanel dan Grid.