In the previous articles from the series “ Webix JavaScript library through the eyes of a beginner ”, you learned how to create an application based on Webix UI components. In this post, I want to take a closer look at creating a similar application using the architecture and capabilities of the Webix Jet framework , as well as what advantages it gives. The article will be useful both for those who are already familiar with Webix UI and for beginners, because the library code is intuitive and easy to use.
Webix Jet Review
Webix — UI . Webix UI . . Webix .
Webix Jet , Model-View. , . . , API, .
Jet- view . . , URL. Webix-jet SPA.
Webix Jet
:
View
. , .
3 :
. .
.
. 3 , . .
:
index.html html
sources/myapp.js
sources/views :
top.js ,
toolbar.js
form.js
films.js
users.js
products.js
sources/models
sources/styles CSS
sources/locales .
. .
subview top.js. Subview - , view. . .
subview import . , toolbar.js top.js.
subview Jet, URL. view . URL `/#!/`.
, URL , :
http://localhost:8080/#!/top - top.js
http://localhost:8080/#!/top/films - top.js films.js ( top.js films.js).
3 subview , URL:
films.js ( http://localhost:8080/#!/top/films )
users.js ( http://localhost:8080/#!/top/users )
products.js ( http://localhost:8080/#!/top/products )
subview URL. , users , URL http://localhost:8080/#!/top/users top.js users.js. .
URL , url-, “” , . URL . Users , , URL .
URL , . URL, - .
, . . .
sources/myapp.js . JetApp, .
css JetApp.
import "./styles/app.css";
import { JetApp } from "webix-jet";
MyApp JetApp. .
debug:true. , . Jet , , debug:true .
start URL : start:"/top/films". top.js films.js.
export default class MyApp extends JetApp{
constructor(config){
const defaults = {
// ,
debug:true,
// URL
start:"/top/films"
};
super({ ...defaults, ...config });
}
}
, .
const app = new MyApp();
render() webix.ready(), HTML .
webix.ready(() => app.render());
. view .
View
view ES6 JetView. Jet .
JetView , view .
config() init(), JetView, .
config().
init().
TopView (top.js)
TopView top.js, , , subview . #!/top/ .
. subview.
JetView ToolbarView.
import { JetView } from "webix-jet";
import ToolbarView from "views/toolbar";
TopView JetView. config() view.
export default class TopView extends JetView{
config(){
//
}
}
, export default, Webix Jet .
config() , . List Webix UI. data id, URL.
const sidebar = {
view:"list",
data:[
{ value:"Dashboard", id:"films" },
{ value:"Users", id:"users" },
{ value:"Products", id:"products" }
]
};
, . , . Template.
const footer = {
template:"The software is provided by <a href='https://webix.com'> webix.com </a>. All rights reserved ©"
};
. , ToolbarView subview.
config(){
const ui = {
rows:[
ToolbarView, // subview
{
cols:[
sidebar,
{ view:"resizer" },
{ $subview:true } // subview
]
},
footer
]
};
return ui;
}
view ui, .
( { $subview:true } ).
, URL (films, users, products) {$subview:true}. , id , , .
URL, JetView this.show(id). id . id URL , show(). URL #!/top/ id. , URL #!/top/{id}.
, Users, this.show("users") URL #!/top/users. { $subview:true } views/users.js .
ToolbarView (toolbar.js)
ToolbarView toolbar.js, subview top.js.
ToolbarView JetView. config() .
, . Webix UI Toolbar, Label Segmented.
export default class TopView extends JetView{
config(){
const toolbar = {
view:"toolbar",
elements:[
{ view:"label", label:"Demo App" },
{
view:"segmented",
options:[
{ id:"en", value:"En" },
{ id:"ru", value:"Ru" }
]
}
]
};
return toolbar;
}
}
subview, URL, #!/top/. 3 :
FilmsView
UsersView
ProductsView.
.
FilmsView (films.js)
. 5 , . subview.
FilmsView films.js, subview top.js. URL: #!/top/films.
FormView form.js, subview.
import FormView from "views/form";
FilmsView JetView. config() view.
Datatable. columns . id. sort. sort:"text", sort:"int". , {content:"textFilter"} {content:"selectFilter"} .
const film_table = {
view:"datatable",
columns:[
{ id:"id", header:""},
{ id:"title", header:["Film title", { content:"textFilter" }], fillspace:true, sort:"text" },
{ id:"year", header:["Released", { content:"selectFilter" }], sort:"int" },
{ id:"votes", header:"Votes", sort:"int" },
{ id:"rating", header:"Rating", sort:"int" }
]
};
. film_table FormView, .
return {
cols:[
film_table,
FormView // subview
]
};
FormView (form.js)
. 4 , “” “”.
FormView form.js. FormView JetView. config() view.
Form. elements .
config(){
const film_form = {
view:"form",
elements:[
{ type:"section", template:"edit films" },
{ view:"text", name:"title", label:"Title" },
{ view:"text", name:"year", label:"Year" },
{ view:"text", name:"rating", label:"Rating" },
{ view:"text", name:"votes", label:"Votes" },
{
cols:[
{ view:"button", value:"Save", css:"webix_primary" },
{ view:"button", value:"Clear", css:"webix_secondary" }
]
},
{}
]
};
return film_form;
}
UsersView (users.js)
, . , , 2 . , . .
UsersView users.js, subview top.js. URL: #!/top/users.
UsersView JetView. config() List, Toolbar Chart.
List. template , , .
const list = {
view:"list",
template:"#name#, #age#, #country#"
};
Toolbar . elements .
const list_toolbar = {
view:"toolbar",
elements:[
//
{ view:"button", value:"Add new person", css:"webix_primary" },
//
{ view:"search" },
//
{ view:"button", value:"Sort asc" },
{ view:"button", value:"Sort desc" }
]
};
Chart. type:"bar", value:"#age#". xAxis yAxis.
const chart = {
view:"chart",
type:"bar",
value:"#age#",
xAxis:{
template:"#name#",
title:"Age"
},
yAxis:{
start:0,
end:100,
step:10
}
};
. list_toolbar, list chart.
return { rows:[list_toolbar, list, chart] };
ProductsView (products.js)
, .
ProductsView products.js, subview top.js. URL: #!/top/products.
ProductsView JetView. config() Treetable. columns . template:"{common.treetable()} #title#", .
config(){
const products_treetable = {
view:"treetable"
columns:[
{ id:"id", header:"" },
{ id:"title", header:"Title", fillspace:true, template:"{common.treetable()} #title#" },
{ id:"price", header:"Price" }
]
};
return products_treetable;
}
. , .
, . , , . view model .
sources/models. , . webix.ajax().
webix.ajax() -. , .
3 subview:
FilmsView
UsersView
ProductsView.
, .
// models/films.js
export function getData(){
return webix.ajax("../../data/film_data.js");
}
3 , . ../../data/.
view getData .
import { getData } from "models/films"; // FilmsView
import { getData } from "models/users"; // UsersView
import { getData } from "models/products"; // ProductsView.
. config() . init() JetView, data- (List, Datatable, Chart) parse().
config(){
...
return {
cols:[
film_table,
FormView
]
};
}
init(view){
const datatable = view.queryView("datatable");
datatable.parse(getData());
}
init() view, , config() . layout . layout (view.queryView("datatable");), .
- getData(), parse() Webix .
, .
Webix Jet . Locale.
sources/myapp.js, .. . plugins, , JetApp.
import { JetApp, plugins } from "webix-jet";
MyApp, plugins.Locale. render().
const app = new MyApp();
app.use(plugins.Locale);
webix.ready(() => app.render());
Locale , sources/locales. en.js ru.js .
// locales/en.js
export default {
Dashboard : "Dashboard",
Users : "Users",
...
}
// locales/ru.js
export default {
Dashboard : "",
Users : "",
...
}
, view .
const _ = this.app.getService("locale")._;
, - . , : _("some text"). , Jet .
, , . , Segmented En Ru. , .
config(){
...
{
view:"segmented",
options:[
{ id:"en", value:"En" },
{ id:"ru", value:"Ru" }
],
click:() => this.toggleLanguage()
}
...
}
toggleLanguage(){
const langs = this.app.getService("locale");
const value = this.getRoot().queryView("segmented").getValue();
langs.setLang(value);
}
- toggleLanguage() ToolbarView. , .
, ( id - "en" "ru") setLang().
this.getRoot(). view, config() - Toolbar. view segmented, .
Webix Jet .
Webix Jet . view, sources/views. sources/models. Locale JetApp.
-, .
Webix Jet has a fairly wide range of tools and configurations that greatly simplify the process of developing an application based on Webix UI components. We will consider them in more detail in the next articles devoted to Webix Jet.