Este artículo está dirigido a quienes valoran su tiempo y no quieren dedicar muchos meses a un estudio meticuloso de las tecnologías nativas de desarrollo web. Ciertamente es útil conocerlos y comprenderlos, pero en el mundo moderno las tecnologías se están desarrollando tan rápidamente que hacer un seguimiento de todas las sutilezas no es una tarea fácil. Para no desperdiciar el talmud de documentos aburridos que cambiarán mañana, puede usar soluciones listas para usar.
El equipo de Webix nos ofrece una de las mejores soluciones . Veremos su biblioteca de componentes de interfaz de usuario en este artículo.
Para mayor claridad, crearemos nuestra propia aplicación para buscar y reservar billetes de avión. La temporada de vacaciones de verano está a la vuelta de la esquina, por lo que esta elección es más relevante que nunca.
El código de la aplicación finalizada se puede encontrar aquí .
Un poco sobre Webix y sus capacidades
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(); //
}
En este artículo, hemos detallado cómo crear una aplicación usando Webix. Aprendimos a crear diseños y describir los componentes de la interfaz de usuario utilizando la sintaxis json. De manera indirecta, mencionamos algunos de los métodos que le permiten trabajar con datos. Como puede ver, los componentes y métodos son intuitivos y fáciles de usar. De hecho, esto es solo una pequeña fracción de todo lo que la biblioteca tiene para ofrecernos. Para un conocimiento más detallado, puede ir a la documentación , que contiene una descripción detallada de todas las posibilidades con ejemplos ilustrativos.