Properti dan Binding

Salah satu tugas paling umum ketika mengembangkan aplikasi dengan GUI adalah menyinkronkan antarmuka pengguna dan data. Sebagai contoh, misalnya saja Anda menggunakan fitur pengembangan konvensional guna membuat aplikasi web untuk menjelajahi dan mengedit record pelanggan. Tanpa App Maker, Anda harus mengembangkan cara agar UI aplikasi dan record database tetap tersinkronisasi dengan cara berikut:

  1. Perbarui setiap elemen UI yang menampilkan data saat record berikutnya dalam database diminta.

  2. Tambahkan pemroses perubahan ke semua elemen UI untuk memastikan bahwa perubahan pengguna tercermin dalam record pelanggan.

  3. Perbarui record pelanggan saat ini untuk menerima data baru.

Ada banyak boilerplate yang harus ditulis dan dikelola, yang tentunya merupakan hal yang rumit jika Anda adalah seorang programmer, dan yang mungkin menjadi kendala utama jika Anda bukanlah seorang programmer.

Dengan App Maker, alih-alih menulis semua boilerplate, Anda dapat menggunakan binding untuk menunjukkan bahwa properti pada record pelanggan dan properti widget harus tetap sinkron. Dan itu semua bisa Anda lakukan dalam antarmuka visual yang mudah digunakan. App Maker akan melakukan semua pekerjaan tersebut untuk Anda.

Selain contoh penggunaan umum ini, binding App Maker dapat melakukan lebih banyak hal daripada sekadar menyinkronkan elemen UI dengan nilai yang mendasarinya. Anda dapat menggunakan binding App Maker untuk menyinkronkan dua properti App Maker, seperti email pengguna yang login saat ini dan parameter kueri sumber data. Bahkan, karena hampir semua hal di App Maker memiliki binding, seperti model, sumber data, widget, dan skrip, Anda juga dapat menggunakan binding di berbagai properti App Maker.

Properti

Dalam pengertian sederhana, properti merupakan nilai bernama dari suatu objek App Maker. Anda dapat memperoleh dan menetapkan nilai properti di App Maker, dan sebagian besar objek App Maker memiliki properti yang dapat diakses dari bagian aplikasi Anda.

Anda dapat menetapkan properti dengan beberapa cara:

  • di UI App Maker—saat Anda menetapkan nama widget
  • melalui binding—ketika satu properti berubah untuk mencerminkan perubahan dari properti lain
  • dalam skrip—Anda dapat menetapkan properti dengan JavaScript

Anda dapat mengakses berbagai properti seperti:

  • kolom dalam record database
  • alamat email untuk pengguna yang login saat ini
  • atribut widget seperti posisi, nama, atau nilai

Bahkan, properti dapat ditemukan di seluruh bagian App Maker, yang biasanya di Editor Properti:

dan pemilih binding:

Objek

Mari kita bahas lebih jauh mengenai properti melalui objek. Objek adalah "sesuatu" yang menyusun App Maker serta aplikasi App Maker, dan hampir semua yang ada di App Maker adalah objek. Lantas apa kegunaannya? Objek merupakan widget yang menyusun UI, record yang mewakili data Anda, objek sumber data yang membaca dan menulis data untuk Anda, dan lain-lain. Bahkan aplikasi Anda sendiri pun merupakan objek.

Misalnya, widget Area Teks merupakan objek App Maker dengan beberapa properti, termasuk nama dan label. Record data adalah objek aplikasi yang memiliki properti yang Anda tentukan, seperti record pelanggan dengan properti nama.

Jenis

Semua properti App Maker memiliki jenis data, yang berarti properti tersebut hanya menerima jenis nilai tertentu, seperti angka atau string. Ada banyak properti dengan jenis sederhana seperti string, angka, atau boolean, tetapi ada juga sejumlah properti dengan jenis yang kompleks. Sebagai contoh, properti induk dari widget juga merupakan widget, dan oleh karena itu pula diketik sebagai Widget.

Lokasi

App Maker menggunakan notasi lokasi untuk merujuk pada properti saat merujuknya dalam bentuk binding atau skrip. Misalnya, objek model data bernama Person dengan properti bernama Name, akan dirujuk sebagai Person.Name.

Belum ditentukan

Nilai lokasi dan properti bisa jadi belum ditentukan. Hal ini berbeda dengan nilai null. Contoh properti yang belum ditentukan adalah properti relasi record yang belum dimuat. Lokasi seperti datasource.item.Name belum ditentukan jika properti terakhirnya (Name) belum ditentukan, atau jika ada bagiannya seperti datasource atau item belum ditentukan atau bernilai null. Secara umum, App Maker memperlakukan nilai yang belum ditentukan seperti null. Namun, widget input akan menjadi nonaktif jika nilainya ditetapkan ke belum ditentukan. Misalnya, Anda dapat menggunakan skrip berikut untuk menghapus nilai kotak teks dan menonaktifkannya:

textBox.value = undefined;

Contoh skenario

Contoh ini menggambarkan dua properti kompleks — Person dan Address. Setiap properti tersebut adalah Jenis khusus yang mungkin Anda tentukan dalam model yang Anda buat. Properti tersebut bukan merupakan jenis App Maker bawaan.

Orang
Nama PropertiJenis
Namestring
Ageangka
AddressAlamat
Alamat
Nama PropertiJenis
Streetstring
Citystring
Zipstring

Karena properti Address dari Orang adalah berjenis Alamat, Anda dapat menggunakan notasi lokasi untuk merujuk pada lokasi seseorang dengan Person.Address.City.

Binding

Binding adalah mekanisme untuk menyinkronkan dua properti. Sebagai pembuat App Maker, Anda akan sering menyatakan bahwa Anda menginginkan dua properti—seperti nilai input teks dan kolom record—terikat, dan App Maker akan otomatis menjaga agar kedua properti tersebut tetap sinkron: jika salah satu properti berubah, properti yang lain akan ditetapkan.

Semua properti di App Maker dapat diamati, artinya pemrosesan perubahan pada properti dapat dilakukan. Saat binding dilakukan antara dua properti, binding memproses, atau mengamati, perubahan di setiap properti, dan jika salah satu properti berubah, properti yang lainnya akan diubah.

Contoh binding yang umum di App Maker adalah mengikat nilai input teks dengan properti item sumber data. Binding ini dapat dilakukan dengan menggunakan editor properti App Maker, tetapi jika kita ingin menuliskan pernyataan bindingnya, akan terlihat seperti ini:

@widget.text <-> @datasource.item.MyField

Konverter jenis untuk nilai terikat

Properti memiliki jenis dan nilai. Nilai itu sendiri juga memiliki jenis, yang harus cocok dengan nilai propertinya. Misalnya, properti Name untuk widget adalah jenis string, jadi nilai namanya adalah string dan tidak dapat diperlakukan sebagai bilangan bulat.

Jika Anda ingin mengikat dua properti, properti tersebut harus memiliki jenis yang sama, atau nilainya harus dapat dikonversi dari satu jenis ke jenis lainnya. Tindakan ini disebut konversi jenis.

Misalnya, jika Anda memberi nilai "6" untuk properti Name pada widget, nilai "6" ini diperlakukan sebagai string, bukan angka. Anda dapat mengikat properti ini ke properti lain yang memilki jenis bilangan bulat, dan konverter jenis bawaan App Maker mencoba mengonversi jenis nilai di antara kedua properti ini.

App Maker menyertakan banyak konversi jenis bawaan, sehingga sebagian besar binding dapat berfungsi dengan baik. Konverter berfungsi di kedua arah, dan akan melakukan upaya terbaik untuk mengonversi nilai dari satu jenis ke jenis lain.

DariKeKondisi
stringangkaHanya jika dari dapat diuraikan sebagai angka.
stringbooleanHanya jika dari bernilai "true" atau "false" (Peka huruf besar kecil).
stringtanggalHanya jika dari adalah tanggal dalam format YYYY-MM-DD.
angkabooleanNol dikonversi menjadi false dan nilai lainnya menjadi true
Array<A>Array<B>Selama A dan B kompatibel.

Transformer

Terkadang, Anda mungkin ingin mengikat dua properti dengan beberapa konversi data kustom di antara properti tersebut. Misalnya, Anda mungkin ingin mengikat kolom dalam record dengan kolom teks di UI, tetapi Anda ingin agar spasi pada input pengguna dihapus sebelum disimpan dalam database. Atau, Anda mungkin ingin mengonversi tanggal menjadi string menggunakan pola tanggal yang berbeda dari pola yang digunakan oleh konversi jenis App Maker default. Dengan transformer, Anda dapat menentukan perubahan pada lokasi properti. Setiap transformer mengambil nilai input serta menghasilkan nilai output, dan sebagian besar transformer juga dapat mengambil nilai output dan mengonversinya kembali menjadi nilai input. Transformasi ini dapat dirangkai bersama. Misalnya, untuk menghapus spasi dari input dan output untuk lokasi string, Anda dapat mengikat properti value kolom teks dengan kolom Name dari record sumber data:

@value <-> @datasource.item.Name#trim()

Atau, Anda dapat menentukan tanggal kustom pada format string saat mengikat properti value kolom teks dengan timestamp kolom tanggal di database:

@value <--> @datasource.item.TimeStamp#formatDate('yyyy/MM/dd HH:mm:ss');

Transformer dapat dirangkai bersama:

@value <-> @datasource.item.Name#nullToEmpty()#trim()

Anda dapat menemukan daftar semua transformer bawaan di sini.

Transformer juga dapat diterapkan pada elemen array daripada array itu sendiri. Misalnya, jika Anda mengisi properti name widget Drop-down dengan item dari suatu proyeksi. Sintaksnya akan sama, tetapi menggunakan dua tanda pagar, bukan satu tanda pagar.

@names <-> @datasources.items..TimeStamp##formatDate('yyyy/MM/dd HH:mm:ss')

Properti level atas dalam binding

Saat mengikat properti objek (seperti nama widget), gunakan pemilih binding untuk melihat properti yang tersedia. App Maker akan otomatis menyesuaikan properti yang tersedia bergantung pada objek asal yang Anda ikat. Tindakan ini menyederhanakan proses binding pada properti umum tertentu. Misalnya, jika Anda mengikat nilai untuk widget Tombol, pemilih binding otomatis menetapkan ke properti datasource.item widget secara default, yang biasanya berisi kolom model.

Namun, Anda mungkin ingin mengikat widget atau objek lain dengan sesuatu selain saran yang disediakan secara otomatis di pemilih binding. Untuk melakukan hal tersebut, sebaiknya Anda memahami dua kategori umum properti yang dapat dilihat saat mengikat objek dalam aplikasi Anda.

Properti yang tersedia secara global

Anda dapat melakukan binding ke properti mana pun pada aplikasi Anda. Properti ini umumnya diakses melalui objek app. Saat melakukan binding, semua properti objek app akan dikategorikan, dan diekspos untuk proses binding. Lihat dokumentasi API objek aplikasi untuk mengetahui dokumentasi mendetail dari semua properti.

Properti yang tersedia untuk widget

Widget dapat diikat dengan semua properti objek app, dan dengan dua properti tambahan:

  • widget—widget itu sendiri.
  • datasource—sumber data untuk widget, yang merupakan objek paling umum untuk diikat dengan widget. Sumber data ini juga tersedia sebagai @widget.datasource, tetapi untuk memudahkan, datasource ditampilkan pada pemilih binding di editor UI.

Ekspresi Binding

Terkadang tidak cukup untuk mengikat dua properti bersamaan secara langsung. Dengan menggunakan ekspresi dalam editor binding di UI App Maker, Anda dapat menggabungkan binding dan JavaScript untuk mengubah nilai pada properti yang Anda ikat. App Maker akan mengevaluasi ekspresi setiap kali salah satu properti yang digunakan dalam ekspresi mengalami perubahan. Catatan: tindakan ini membuat binding satu arah.

Sebagai contoh, misalnya saja Anda memiliki tombol Hapus bernama MyDeleteButton dan ingin membuat binding sehingga tombol dinonaktifkan jika tidak ada record dalam database yang akan dihapus. Namun, tidak ada properti untuk mewakili konsep tersebut secara langsung. Ada properti enabled dan properti @datasource.item, dan kita tahu bahwa jika tidak ada item, nilai itemnya adalah null. Jadi, dengan informasi tersebut, kita dapat membuat binding ini:

@widget.enabled <-> @datasource.item != null

dan tombol tersebut hanya akan diaktifkan saat ada record.

Referensi Tambahan

Untuk mengetahui informasi selengkapnya tentang cara membuat ekspresi binding, lihat Ekspresi Binding dan Pembuatan Skrip Klien. Untuk mengetahui informasi tentang semua properti dan metode yang tersedia untuk widget dan objek klien, lihat API Widget dan API Klien.