Artikel ini ditujukan bagi mereka yang menghargai waktu mereka dan tidak ingin menghabiskan waktu berbulan-bulan untuk mempelajari teknologi pengembangan web asli secara teliti. Memang berguna untuk mengetahui dan memahaminya, tetapi di dunia modern teknologi berkembang begitu pesat sehingga melacak semua kehalusan bukanlah tugas yang mudah. Agar tidak menyia-nyiakan dokumen membosankan yang akan berubah besok, Anda dapat menggunakan solusi yang sudah jadi.
Salah satu solusi terbaik ditawarkan kepada kami oleh tim Webix . Kami akan melihat pustaka komponen UI mereka di artikel ini.
Untuk kejelasan, kami akan membuat aplikasi kami sendiri untuk mencari dan memesan tiket pesawat. Musim liburan musim panas sudah dekat, jadi pilihan ini lebih relevan dari sebelumnya.
Kode aplikasi yang sudah selesai dapat ditemukan di sini .
Sedikit tentang Webix dan kemampuannya
Webix UI — JavaScript , . UI , , , Report Manager, . , . , , , , . . .
UI
. , , . .
, , , ( webix-). , zip-. . “license.txt”, “readme.txt” “whatsnew.txt”, , . , “samples” , Webix UI.
“codebase”, , : “webix.js” “webix.css”. , Webix- , index.html :
<!DOCTYPE html>
<html>
<head>
<title>Webix Booking</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="codebase/webix.css">
<script type="text/javascript" src="codebase/webix.js"></script>
</head>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>
<script>...</script>, .
, . CDN. :
<link rel="stylesheet" type="text/css" href="http://cdn.webix.com/edge/webix.css">
<script type="text/javascript" src="http://cdn.webix.com/edge/webix.js"></script>
Webix.
Webix- webix.ui(). , HTML . webix.ready(function(){}). :
webix.ready(function(){
webix.ui({
/* */
});
});
index.html , Booking . .
Booking
:
-
.
, index.html. , . , .
, JSON. .
, rows cols, , . , .
2 . rows:
webix.ui({
rows: [
{ template:"Row One" },
{ template:"Row Two" }
]
});
:
template:"Row One" , HTML-.
. 2 :
.
2 . , . cols:
webix.ui({
rows: [
{ template:"Toolbar", height:50},
{
cols:[
{ template:"Search Form" },
{ template:"Data Table" }
]
}
]
});
:
, . . , 2 . , , CSS width height.
2 . , . , ? : , , . , spacer, . , “ ”, .
cols. , cols rows . . Webix type:
webix.ui({
rows: [
{ template:"Toolbar", height:50 },
{
type:"clean", // -
cols:[
{ template:"Order Form" },
{}
]
}
]
});
:
. . , Webix . multiview .
cells id. , , , , , .
:
webix.ui({
rows:[
{ template:"Toolbar", height:50 },
{
cells:[
{
id:"flight_search",
cols:[
{template:"Search Form"},
{template:"Data Table"},
]
},
{
id:"flight_booking",
type:"clean",
cols:[
{template:"Order Form"},
{},
]
}
]
}
]
});
, . .
— . . .
toolbar.js :
const toolbar = { view:"toolbar" };
, , .
, view. toolbar. :
{
view:"toolbar"
css:"webix_dark", //
cols:[
{
id:"label", // id
view:"label",
label:"Flight Search", //
}
]
}
, rows cols. label cols toolbar.
id . . , .
. , toolbar.js index.html rows {template:“Toolbar”} :
webix.ui({
rows: [
toolbar,
{
cells:[
...
]
}
]
});
:
. . 2 :
.
.
. , .
<form>, . . .
Webix . .
search_form.js form:
const search_form = { view:form };
, . elements:
{
view:form,
...
elements:[
{ /* */ },
{ /* */ },
...
]
...
}
, elements. , json . , Webix .
, . , . . . “One Way” “Return”. . . , “Reset” “Search”. :
.
, . radio:
{
view:"radio",
label:"Trip",
name:"trip_type",
value:1,
options:[
{ id:1, value:"One-Way" },
{ id:2, value:"Return" }
]
}
options. , label, , , name. , value .
, . combo:
{
view:"combo",
id:"from",
clear:"replace",
...
placeholder:"Select departure point",
options:cities_data
}
, . placeholder. , . , , , . clear replace. , , , ( ).
. . options . Webix. , URL, .
, , . Webix , DataCollection. URL, . . ./data/cities.json. :
const cities_data = new webix.DataCollection({
url:"./data/cities.json"
});
.
. , , , .
— - . . . , datepicker:
{
view:"datepicker",
name:"departure_date",
...
format:"%d %M %Y"
}
, . , , . format.
, hidden. “Return”, .
, , . , . . counter. . , . min, 1 (, ). :
{ view:"counter", name:"tickets", label:"Tickets", min:1 }
. , .
“Search” “Reset”. button. value, css. , . "webix_primary" “Search”. .
:
{
cols:[
{ view:"button", value:"Reset" },
{ view:"button", value:"Search", css:"webix_primary" }
]
}
. - ? , , search_form.js index.html. search_form, :
[
toolbar,
{
cells:[
{
id:"flight_search",
cols:[
search_form,
{ template:"Data Table" }
]
}, ...
]
},
]
:
, “Search” . , .
Webix . , , PDF Excel. , , , .
datatable.js datatable:
const flight_table = {
view:"datatable",
url:flights_data
};
. ./data/flights_data.json. Webix , , , . .
url. flights_data .
, . , Webix autoConfig. true, .
, . , . .
columns:
columns:[
{ /* */ },
{ /* */ },
...
]
, id, , .
, - — “”. header.
, , . , Webix . format.
, . , . .
.
, "2021-03-26". , — ( ). , JS Date . scheme ( id) Date :
scheme:{
$init:function(obj){
obj.date = webix.Date.strToDate("%Y-%m-%d")(obj.date);
}
}
“Date” , . . . . format webix.i18n.longDateFormatStr. Date format 26 March 2021. .
, , . , . — ? . id - value, id . id, collection.
, , cities_data. , 1 .
, collection cities_data id, . - . .
. , , “Search” ( , ). ? , . ?
, . . , .
.
(10, 100 ), . . , - , .
const search_bar = { view:"search" };
“”.
, . :
[
toolbar,
{
cells:[
{
id:"flight_search",
cols:[
search_form,
{
rows:{
search_bar,
flight_table
}
}
]
}, ...
]
},
]
-. :
. . . “Book” . :
, , form :
const order_form = {
view:"form",
elements:[
...
]
};
.
. , .
text :
elements:[
{ view:"text", name:"first_name", …, invalidMessage:"First Name can not be empty" },
{ view:"text", name:"last_name", …, invalidMessage:"Last Name can not be empty" },
{ view:"text", name:"email", …, invalidMessage:"Incorrect email address" },
...
]
. — , , . , . ? , .
Webix rules . , , , , , , . , , ( name) rules:
{
elements:[ … ],
rules:{
first_name:webix.rules.isNotEmpty, //
last_name:webix.rules.isNotEmpty,
email:webix.rules.isEmail // email
}
}
, . , . . , , , .
Webix invalidMessage. , :
{ ..., invalidMessage:"First Name can not be empty", ... }
, Webix . , UI , - .
“Book” . , . 2 ( ), . .
counter. , , . . , :
{ view:"counter", id:"tickets_counter", name:"tickets", label:"Tickets", min:1 }
, , , . , , . , .
2 “Checked-in Baggage” “Food” , , . checkbox:
[
{ view:"checkbox", name:"baggage", label:"Checked-in Baggage", checkValue:15 },
{ view:"checkbox", name:"food", label:"Food", checkValue:10 }
]
checkValue . 15 10 .
. “Economy” “Business”. radio:
{
view:"radio", name:"class", label:"Class",
options:[
{ id:1, value:"Economy" },
{ id:2, value:"Business" }
]
}
“Economy” , “Business” . , .
— . . . label:
{ view:"label", id:"order_price" }
“Book” . . .
“Go Back” “Make Order”
- . . “Go Back” “Make Order” button:
{
cols:[
{ view:"button", value:"Go Back" },
{ view:"button", value:"Make Order" }
]
}
. , :
[
toolbar,
{
cells:[
{...},
{
id:"flight_booking",
type:"clean",
cols:[
order_form,
{}
]
}
]
}
]
:
. .
Webix UI. . . , , . , Webix .
, “One-Way”, , “Return”, . ? , . . on, . :
{
view:"radio",
...
on:{
onChange:function(newv){
if(newv == 2){
$$("return_date").show(); //
}else{
$$("return_date").hide(); //
}
}
}
}
. show() hide(), . $$(id) , id .
. , . ? , . , . .
, , , . :
...
{
options:cities_data,
on:{
onShow:function(v){
optionsData("from","to");
}
}
}
on, . onShow. optionsData(), , . :
function optionsData(first_id, second_id){
const options = $$(first_id).getList(); //
const exception = $$(second_id).getValue(); //
options.filter(obj => obj.id != exception); //
}
Combo, getList() getValue(). , — . filter() ( getValue).
“Reset” “Search”.
“Search”
, “Search” . , . . :
function lookForFlights(){
const vals = $$("search_form").getValues(); //
const table = $$("flight_table"); //
table.filter(function(obj){ /* */ });
}
Webix , . getValues(), . filter(), . , , , . , JS.
, , . click:
{ view:"button", value:"Search", ... click: lookForFlights }
“Reset”
, , , . , “Reset”.
:
function resetForm(){
const form = $$("search_form");
form.clear(); //
form.setValues({trip_type:1}); //
$$("flight_table").filter(); //
}
clear(), . ( ) . setValues(). , .
filter() , . , , . . . . , , :
{ view:"button", value:"Reset", ... click:resetForm }
. .
, , .
, , . :
function searchFlight(){
//
const value = $$("search").getValue().toLowerCase();
const table = $$("flight_table");
//
const res = table.find(function(obj){ /* */ });
table.clearCss("marker", true); //
for(let i = 0; i < res.length; i++){
table.addCss(res[i].id, "marker", true); // css marker
}
table.refresh(); //
}
getValue() . find(), . , , css “marker” ( css ). , refresh(), css .
onTimedKeyPress, . on. :
{
view:"search",
id:"search",
...
on:{
onTimedKeyPress:function(){ //
searchFlight(); //
},
onChange:function(){ // “”
if(!this.getValue()){
$$("flight_table").clearCss("marker"); //
}
}
}
}
, onChange. “”, clear, .
, .
, “Book”, . , .
.
“Book” . , , multiview. cells, id:
cells:[
{
id:"flight_search", ...
},
{
id:"flight_booking", ...
}
]
multiview show() , . $$(id). id :
$$("flight_booking").show(); //
. :
function bookFlight(id){
…
//
const required_tickets = $$("search_form").getValues().tickets;
//
const available_places = flight_table.getItem(id).places;
//
$$("tickets_counter").define("max", available_places);
//
$$("flight_booking_form").setValues({
//
tickets:required_tickets <= available_places ? required_tickets : available_places,
//
price:flight_table.getItem(id).price,
// ""
class:1
});
$$("flight_booking").show(); //
...
}
, , .
, getItem(). , “Book”. . id .
, , . . define() refresh().
define() , refresh() :
$$("label").define("label", "Flight Booking"); //
$$("label").refresh(); //
“Book”. , “webix_button” . Webix onClick, , css :
{
columns:[ … ],
onClick:{
"webix_button":function(e,id){
bookFlight(id);
}
}
}
.
“Book” . , . , . .
“Book” . . . , on, onChange ( ) onValues ( “Book”):
on:{
onChange:function(){
orderPrice(this.getValues());
},
onValues:function(){
orderPrice(this.getValues());
}
}
:
function orderPrice(vals){
//
const tickets = vals.tickets;
//
const price = vals.price*1*vals.class*tickets;
//
const baggage = vals.baggage * tickets;
//
const food = vals.food * tickets;
//
const total = price+baggage+food;
//
$$("order_price").setValue(total+"$");
}
- getValues(), “Price” setValue(). setValues(), , setValue() , .
. , .
, “Make Order”. , , :
function makeOrder(){
const order_form = $$("flight_booking_form"); //
if(order_form.validate()){ //
webix.alert({ //
title: "Order",
text: "We will send you an information to confirm your Order"
}).then(function(){
goBack(); //
});
}
}
validate(). , rules. , true. false, , . , invalidMessage.
. , Webix . webix.alert(), , “OK” ( goBack()):
webix.alert({
title: "Order is successfull",
text: "We will send you an information to confirm your Order"
}).then(function(){
goBack();
});
goBack() “Go Back”. clearValidation(), , :
function goBack(){
const order_form = $$("flight_booking_form"); //
const label = $$("label"); //
order_form.clearValidation(); //
label.define("label", "Flight Search"); //
label.refresh(); //
$$("flight_search").show(); //
}
Pada artikel ini, kami telah menjelaskan cara membuat aplikasi menggunakan Webix. Kami belajar cara membuat tata letak dan mendeskripsikan komponen UI menggunakan sintaks json. Kami secara tidak langsung menyentuh beberapa metode yang memungkinkan Anda bekerja dengan data. Seperti yang Anda lihat, komponen dan metodenya intuitif dan mudah digunakan. Faktanya, ini hanya sebagian kecil dari semua yang ditawarkan perpustakaan kepada kita. Untuk kenalan yang lebih detail, Anda dapat membuka dokumentasi , yang berisi deskripsi mendetail tentang semua kemungkinan dengan contoh ilustratif.