Pengantar antarmuka pengguna dan data

Selesai

Logo teknologi.

Misalkan Anda bekerja untuk perusahaan perancang pakaian kustom dan Anda ingin membuat aplikasi yang memungkinkan pelanggan Anda memilih bahan atau warna favorit mereka. Nama pengguna, daftar warna yang dapat mereka pilih, dan warna favorit yang mereka pilih adalah semua data. Ini adalah data yang dimasukkan, dipilih, dan ditinjau pengguna melalui banyak 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 di kerjakan 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 menjadi status dan posisi pemain dan musuh, tata letak dan perilaku lingkungan, atau sifat senjata dan benda 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, servi├žos 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, menyusun 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, Universelle Windows-Plattform (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 untuk:

  • 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 baru di Visual Studio.
  • Bahasa C#.
  • Konsep dasar XAML.
  • Konsep dasar tata letak XAML, termasuk StackPanel dan Grid.