Dieser Artikel richtet sich an diejenigen, die ihre Zeit schätzen und nicht viele Monate mit einer sorgfältigen Untersuchung nativer Webentwicklungstechnologien verbringen möchten. Es ist sicherlich nützlich, sie zu kennen und zu verstehen, aber in der modernen Welt entwickeln sich die Technologien so schnell, dass es keine leichte Aufgabe ist, alle Feinheiten im Auge zu behalten. Um nicht die Talmuds langweiliger Dokumente zu verschwenden, die sich morgen ändern werden, können Sie vorgefertigte Lösungen verwenden.
Eine der besten Lösungen bietet uns das Webix- Team an . Wir werden uns in diesem Artikel die Bibliothek der UI-Komponenten ansehen.
Aus GrĂĽnden der Ăśbersichtlichkeit erstellen wir eine eigene Anwendung fĂĽr die Suche und Buchung von Flugtickets. Die Sommerferienzeit steht vor der TĂĽr, daher ist diese Wahl aktueller denn je.
Den Code der fertigen Bewerbung finden Sie hier .
Ein wenig ĂĽber Webix und seine Funktionen
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(); //
}
In diesem Artikel haben wir detailliert beschrieben, wie Sie eine Anwendung mit Webix erstellen. Wir haben gelernt, wie Sie Layouts erstellen und UI-Komponenten mithilfe der JSON-Syntax beschreiben. Wir haben indirekt einige der Methoden angesprochen, mit denen Sie mit Daten arbeiten können. Wie Sie sehen können, sind die Komponenten und Methoden intuitiv und einfach zu bedienen. Tatsächlich ist dies nur ein kleiner Bruchteil von allem, was die Bibliothek uns zu bieten hat. Für eine detailliertere Bekanntschaft können Sie die Dokumentation besuchen , die eine detaillierte Beschreibung aller Möglichkeiten mit anschaulichen Beispielen enthält.