Saya adalah pengembang front-end pemula. Sekarang saya belajar dan berlatih di perusahaan IT Minsk. Mempelajari dasar-dasar web-ui terjadi dengan perpustakaan
Webix JS sebagai
contoh dan saya ingin berbagi pengalaman saya yang sederhana dan menyimpannya sebagai tutorial kecil untuk perpustakaan UI yang menarik ini.
Tugas kedua
Di
tugas terakhir
, saya membuat halaman menggunakan perpustakaan Webix. Dan sekarang saya perlu mengatur logika berikut untuk interaksi pengguna dengan formulir:
Widget utama yang akan digunakan untuk artikel ini adalah
form . Selain itu, dapat dibaca dalam
dokumentasi .
Anda dapat mengunduh
tautan sumber.
Aplikasi demo yang dihasilkan dapat ditemukan di
sini .
Langkah 1. Menambahkan data baru ke tabel.
Untuk kenyamanan membaca kode dan membagi proyek menjadi blok logis, saya akan membuat file functions.js dan menunjukkan path ke sana dalam file index.html. Di dalamnya, saya akan mengatur fungsi yang bertanggung jawab atas perilaku aplikasi.
<body> <script src="data.js"></script> <script src="functions.js"></script> <script src="script.js"></script> </body>
Di file baru, saya membuat fungsi
addItem , yang menambahkan data baru ke tabel:
const addItem = () =>{ var item_data = $$("film_form").getValues(); $$("film_list").add(item_data); }
Untuk mengakses elemen di pustaka Webix, gunakan
metode $$ , di mana id elemen dilewatkan. Dalam kode di atas, formulir diakses menggunakan konstruk
$$("film_form") .
Fungsi addItem berfungsi sebagai berikut: Saya mendapatkan data saat ini dari formulir melalui metode getValues dan menulisnya ke variabel item_data . Menggunakan data ini, saya membuat catatan baru di sheet menggunakan metode add .
Untuk memanggil fungsi ini dengan mengklik
"button" widget dengan nilai
"Add new" saya mengatur properti
klik .
margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear"} ]
Akibatnya, data dari formulir harus ditambahkan ke tabel:
Langkah 2. Validasi formulir. Pesan munculan
Sebelum menambahkan data baru, informasi dari bidang input harus diverifikasi (divalidasi). Validasi dipicu
oleh metode validate () , yang akan saya panggil di dalam fungsi
addItem segera sebelum bekerja dengan data. Saya juga akan memasukkan kode untuk pesan pop-up tentang validasi yang berhasil di sini.
Pesan sederhana di Webix dibuat oleh fungsi
webix.message () , yang menjadikan teks pesan sebagai parameter. Sebuah pesan akan muncul di sudut kanan atas.
const addItem = () =>{ if($$("film_form").validate()){ var item_data = $$("film_form").getValues(); $$("film_list").add(item_data); webix.message("Validation is successful!"); } }
Fungsinya bekerja seperti ini. Di dalam kondisi If , kami mengakses formulir dan memanggil metode validate () . Jika tes berhasil, metode mengembalikan true dan kode dieksekusi lebih lanjut. Setelah menambahkan data ke tabel, fungsi dipanggil dengan pesan - "Validation is successful!" .
Pesan munculan:
Sekarang saya perlu membuat objek
aturan di widget
bentuk . Diperlukan untuk fungsi
validasi () untuk memeriksa informasi dari semua bidang formulir untuk kepatuhan dengan kriteria yang ditentukan.
Ketentuan untuk validasi yang berhasil adalah sebagai berikut:
- Bidang judul tidak boleh kosong;
- Tahun Lapangan tidak boleh kurang dari 1970 dan lebih dari tahun berjalan;
- bidang Peringkat tidak boleh nol;
- Bidang pemilihan harus lebih dari 1 dan kurang dari 1.000.000.
Kemudian, kode sumber widget
bentuk dengan aturan validasi akan seperti ini:
view:"form", id:"film_form", width: 350, elements:[ { type:"section", template:"EDIT FILMS"}, { view:"text", name:"title", label:"Title", invalidMessage:"Must be filled in"}, { view:"text", name:"year", label:"Year", invalidMessage:"Should be between 1970 and current" }, { view:"text", name:"rating", label:"Rating", invalidMessage:"Cannot be empty or 0" }, { view:"text", name:"votes", label:"Votes", invalidMessage:"Must be less than 100000" }, { margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ] }, {} ], rules:{ title: webix.rules.isNotEmpty, rating(value){ if(webix.rules.isNumber(value)){ return true; } }, votes(value){ return value < 1000000 && value >= 1; }, year(value){ return value>=1970 && value <= new Date().getFullYear(); } }
Properti objek aturan harus cocok dengan nilai-nilai
name: "…" properti elemen bentuk.
Aturan yang telah ditetapkan webix.rules.isNotEmpty dan webix.rules.isNumber diatur dalam properti judul, peringkat, dan suara, di tahun ini ada fungsi yang mendefinisikan
aturan pengguna .
Aturan harus mengembalikan true saat sukses dan false on error. Formulir akan melewati validasi ketika semua properti dari objek aturan mengembalikan true. Jika tidak, bidang yang gagal validasi akan disorot dengan warna merah.
Hasil tes:
Langkah 3. Pesan kesalahan
Aturan ditetapkan, sekarang saya perlu mekanisme untuk menampilkan pesan kesalahan untuk memberi tahu pengguna bahwa data yang dimasukkan tidak memenuhi kriteria yang ditentukan. Untuk melakukan ini, Anda bisa menyorot bidang dalam warna merah dan menambahkan pesan kesalahan.
Bidang dapat
mengatur properti
invalidMessage , nilainya adalah teks dengan pesan kesalahan. Pesan ini akan muncul di bawah bidang jika validasi gagal.
Kode:
elements:[ { type:"section", template:"EDIT FILMS"}, { view:"text", name:"title", label:"Title", invalidMessage:"Must be filled in"}, { view:"text", name:"year", label:"Year", invalidMessage:"Should be between 1970 and current" }, { view:"text", name:"rating", label:"Rating", invalidMessage:"Cannot be empty or 0" }, { view:"text", name:"votes", label:"Votes", invalidMessage:"Must be less than 100000" }, { margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ] }, {} ]
Hasil:
Langkah 4. Membersihkan formulir
Untuk menghapus formulir, Anda harus membuat fungsi yang dipanggil oleh tombol
"Clear" . Dia juga bertanggung jawab untuk output dari pesan peringatan, dan dalam hal respon positif, dia akan menghapus data yang dimasukkan dan mengatur ulang indikasi kesalahan.
Pesan peringatan:
Saya akan memanggil fungsi
clearForm dan menulis kode berikut di dalamnya:
function clearForm(){ webix.confirm({ title:"All data will be lost!", text:"Are you sure?" }).then( () => { $$("film_form").clear(); $$("film_form").clearValidation(); } )};
Metode panggilan balik
webback.confirm ({...}) digunakan untuk jendela konfirmasi, yang menerima objek dengan properti berikut:
teks dan
judul . Karena metode ini mengembalikan janji, saya dapat menggunakan pengendali
.then . Jika jawabannya positif, dalam handler .then saya akan memanggil dua metode: clear () - untuk menghapus bidang formulir, dan clearValidation (), yang menghapus label kesalahan validasi.
Tindakan terakhir adalah untuk mengikat panggilan fungsi ke tombol
"Clear" .
margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ]
Kode dan demo dapat dilihat di sini -
snippet.webix.com/17w1dodb .
Generalisasi
Dari sumber itu jelas bahwa kode artikel sebelumnya cukup sederhana, tetapi dengan perkembangan proyek ini secara bertahap menjadi lebih rumit, dan jumlahnya meningkat. Agar tidak tersesat dalam garis kode yang tak terhingga, penting untuk menjaga kemudahan membaca dan kesederhanaan dalam struktur. Contoh berinteraksi dengan formulir hanya menjelaskan metode dasar, tetapi juga jelas dari mereka bahwa untuk memberikan dinamika halaman, webix menawarkan kode kecil, dapat dibaca dan intuitif. Dibandingkan dengan JavaScript murni, volumenya paling tidak dua kali lipat.