😨 👩🏼‍🏭 🏟️ El framework Webix Jet a través de los ojos de un principiante. Parte 1. Composición y navegación 🛀🏼 😳 🧒🏼

En los artículos anteriores de la serie “ Biblioteca de JavaScript de Webix a través de los ojos de un principiante ”, aprendió cómo crear una aplicación basada en componentes de interfaz de usuario de Webix. En esta publicación, quiero analizar más de cerca la creación de una aplicación similar utilizando la arquitectura y las capacidades del marco Webix Jet, así como las ventajas que ofrece. El artículo será útil tanto para aquellos que ya están familiarizados con la interfaz de usuario de Webix como para los principiantes, porque el código de la biblioteca es intuitivo y fácil de usar.

Revisión de Webix Jet

Webix — UI . Webix UI . . Webix .

Webix Jet , Model-View. , . . , API, .

Jet- view . . , URL. Webix-jet SPA.

Webix Jet

View

Webix UI Webix Jet API .

. , .

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, - .

URL .

subview .

, . . .

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 &#169;"
};

. , 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 tiene una gama bastante amplia de herramientas y configuraciones que simplifican enormemente el proceso de desarrollo de una aplicación basada en componentes de interfaz de usuario de Webix. Los consideraremos con más detalle en los próximos artículos dedicados a Webix Jet.

El framework Webix Jet a través de los ojos de un principiante. Parte 1. Composición y navegación