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 ketiga
Saya terus mengembangkan fungsionalitas aplikasi yang dibuat menggunakan perpustakaan Webix. Dalam artikel sebelumnya, saya menemukan cara
membuat antarmuka aplikasi dan cara
berinteraksi dengan formulir . Dalam artikel ini, saya mempertimbangkan tugas-tugas berikut:
Pengoperasian widget Daftar dan
Tata Letak telah dijelaskan dalam artikel sebelumnya.
Anda dapat mengunduh
tautan sumber.
Aplikasi yang sudah selesai dapat ditemukan di
sini .
Langkah 1. Membagi proyek menjadi beberapa modul
Untuk menghindari kebingungan dalam kode, lebih dapat diandalkan untuk memecah proyek menjadi modul. Untuk melakukan ini, saya akan membuat file-file berikut dan mentransfer kode widget ke dalamnya:
- header.js - Widget Toolbar ;
- samping.js - Daftar widget;
- table.js - widget Datatable ;
- form.js - form widget;
- footer.js - elemen dengan teks: "Perangkat lunaknya adalah ...".
Dalam file baru, deskripsi konfigurasi widget terjadi dalam variabel ...
const footer = { height: 30, template:"The software is provided by <a href='#'>webix.com</a>. All rights reserved (c)", css:"bottom-link" }
File yang dibuat termasuk dalam file index.html dalam urutan sebagai berikut:
<body> <script src="functions.js"></script> <script src="users_module.js"></script> <script src="products_module.js"></script> <script src="data.js"></script> <script src="header.js"></script> <script src="table.js"></script> <script src="form.js"></script> <script src="aside.js"></script> <script src="footer.js"></script> <script src="script.js"></script> </body>
Modul yang dihasilkan digabungkan dalam file script.js, yang sekarang berisi kode inisialisasi aplikasi yang sederhana dan ringkas.
webix.ui({ rows:[ header, { cols:[ aside, {view: "resizer"}, table, form ] }, footer ] });
Langkah 2. Tab dan beralih di antara mereka
Dalam kasus di mana tidak ada ruang kosong yang cukup pada halaman, atau jika Anda perlu memisahkan konten aplikasi secara tematis, logis untuk menggunakan tab.
Pergantian antar tab dilakukan oleh komponen
Multiview . Komponen ini memungkinkan Anda untuk membuat jumlah tab yang diperlukan dalam aplikasi dan hanya menampilkan satu tab pada titik waktu tertentu.
Kami akan membuat multiview di file selain.js:
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", template:"Users" }, { id:"products", template:"Products" } ] }
Array sel berisi kode untuk tab. Setiap tab perlu ditambahkan dengan id sehingga dapat diakses dan ditampilkan. Sekarang Multiview berisi tiga tab, yang pertama dipindahkan, dibuat sebelum itu, tabel dan formulir.
Dalam file script.js, saya mengganti widget Tabel dan Formulir dengan modul Multi.
webix.ui({ rows:[ header, { cols:[ aside, {view: "resizer"}, multi ] }, footer ] });
Peran sakelar antar tab dimainkan oleh widget
Daftar . Saya perlu tab yang sesuai untuk membuka dengan mengklik elemen-elemennya.
Untuk kenyamanan, saya akan mengatur elemen widget
Daftar ke id yang sama dengan tab multiview.
const aside = { view: "list", id:"mylist", scroll:false, select:true, width:200, css:"list_color", data:[ {value:"Dashboard", id:"dashboard"}, {value:"Users", id:"users"}, {value:"Products", id:"products"} ], on:{ onAfterSelect:function(id){ $$(id).show(); } } }
Ketika Anda mengklik pada elemen dari widget
Daftar ,
onAfterSelect dipicu, di dalam handler di mana kita mendapatkan id dari elemen yang dipilih dan menunjukkan tab dengan nama yang sama, mengaksesnya dengan id - mereka, seperti yang Anda ingat, adalah sama.
Contoh:
Penting!
Tindakan data lebih lanjut akan dilakukan dengan server lokal berjalan.
Langkah 3. Tab "Dashboard" - pengaturan tabel
Hingga saat ini, proyek menggunakan tabel yang bidangnya secara otomatis dihasilkan. Jika Anda ingin menghapus kolom atau menambahkan yang baru, pengaturan tabel digunakan. Untuk melakukan ini, dalam widget
Datatable , properti
autoConfig : true harus diganti dengan array
kolom dengan pengaturan untuk setiap kolom.
const table = { view:"datatable", id:"film_list", scroll:"y", select:true, url:"data/data.js", hover:"myhover", columns:[ { id:"rank", header:"", width:50, css:"rank"}, { id:"title", header:"Film title", fillspace:true}, { id:"year", header:"Released", width:100}, { id:"votes", header:"Votes", width:100}, { id:"rating", header:"Rating", width:100} ] }
- Nilai properti id menunjukkan bidang item data yang akan ditampilkan di kolom ini;
- properti header dalam elemen adalah header kolom;
- semua kolom diatur ke lebar tetap, tetapi yang kedua menggunakan properti fillspace, yang memungkinkan kolom judul untuk mengambil semua ruang kosong.
Pengaturan CSS khusus digunakan dalam tabel: hover diatur untuk garis dan latar belakang diubah di kolom pertama. Semua pengaturan sudah ditentukan sebelumnya dalam file style.css dan Anda hanya perlu memasukkan nama kelas.
Juga, saya memerlukan lebih banyak data untuk tabel, jadi saya akan memuatnya dari data / data.js dengan mengarahkannya menggunakan properti
url .
Hasil:
Langkah 4. Tab “Pengguna” - menggambar daftar dan diagram
Di tab kedua, saya akan membuat daftar dan diagram. Untuk melakukan ini, pada elemen Multiview kedua saya akan menunjukkan nama modul - "pengguna".
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", rows:[users] }, { id:"products", template:"Products" } ] }
Untuk widget itu sendiri, saya akan membuat file
users_module.js baru.
Daftar . Daftar dipahami sebagai widget
Daftar , sebelumnya digunakan ketika membuat menu. Baris daftar harus terdiri dari nama pengguna dan nama negara.
Daftar kode widget:
const users = { rows:[ { view: "list", id:"user_list", select:true, url:"data/users.js", template:"#name# from #country#" }, { template:"Chart" } ] }
Array baris digunakan untuk membagi ruang kerja menjadi dua bagian. Bagian kedua akan digunakan untuk bagan.
Di properti templat, di antara tanda #, bidang ditentukan yang nilainya diambil dari elemen data yang diambil dari file users.js.
Hasil:
Bagan Perpustakaan mendukung jenis
bagan umum: garis, lingkaran, radar, donat, kolom, dll. Semuanya dibuat oleh widget
bagan . Cara grafik akan terlihat mendefinisikan
tipe properti.
Saya akan mengganti
template:”Chart” pengaturan
template:”Chart” dengan kode widget:
const users = { rows:[ { view: "list", id:"user_list", select:true, url:"data/users.js", template:"#name# from #country#" }, { view:"chart", type:"bar", value:"#age#", url:"data/users.js", xAxis:{ template:"#age#", title:"Age" } } ] }
type: "bar" pengaturan type: "bar" mengatur tipe bar grafik;- nama bidang dilewatkan ke nilai, dan itu ditunjukkan harus di `# ... #`. Ini adalah fitur widget Chart;
- pengaturan xAxis menentukan informasi apa yang akan ditampilkan di bawah bagan di sepanjang sumbu X;
- template menunjukkan bahwa di bawah garis grafik akan ada angka usia;
- judul berisi nama grafik -
"Age" .
Hasil menggambar daftar dan bagan:
Langkah 5. Tab "Produk" - tabel pohon
Untuk menginisialisasi komponen ini, saya akan membuat file
products_module.js , dan pada elemen ketiga widget Multiview saya akan menunjukkan nama modul "produk".
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", rows:[users] }, { id:"products", rows:[products] } ] }
Untuk membangun tabel hierarki, gunakan widget
Treetable . Salah satu kolom widget harus berisi templat yang diperlukan -
{common.treetable ()} , kalau tidak kita akan mendapatkan tabel standar alih-alih tampilan hierarki. Template memungkinkan Anda untuk segera menggambar elemen karakteristik:
- ikon aktif untuk menutup / memperluas catatan bersarang;
- ikon file / folder;
- lekukan tergantung pada tingkat entri.
const products = { view:"treetable", scrollX:false, columns:[ { id:"id", header:"", width:50 }, { id:"value", header:"Title", fillspace:true, template:"{common.treetable()} #title#" }, { id:"price", header:"Price", width:200 } ], select:"row", url:"data/products.js" }
Komponen treetable diisi dengan data hierarkis, yang akan saya dapatkan dari file products.js.
Hasil:
Aplikasi yang dihasilkan dapat ditemukan di
sini .
Generalisasi
Selangkah demi selangkah, aplikasi ini dilengkapi dengan fitur-fitur baru. Tahap penting adalah pemisahan kode menjadi modul. Pemisahan membantu menghindari kebingungan dalam kode dan membantu mengatur antarmuka multi-halaman. Sangat menarik untuk mempelajari widget Webix baru dalam bentuk diagram dan daftar tabel yang dapat diedit secara bebas. Semuanya juga sederhana, semuanya juga harmonis.