Kerangka Webix Jet dari sudut pandang pemula. Bagian 1. Komposisi dan navigasi

Di artikel sebelumnya dari seri " Pustaka JavaScript Webix dari sudut pandang seorang pemula ", Anda telah mempelajari cara membuat aplikasi berdasarkan komponen UI Webix. Dalam posting ini, saya ingin melihat lebih dekat cara membuat aplikasi serupa menggunakan arsitektur dan kapabilitas kerangka Webix Jet, serta keuntungan apa yang diberikannya. Artikel ini akan berguna bagi mereka yang sudah terbiasa dengan UI Webix dan untuk pemula, karena kode perpustakaannya intuitif dan mudah digunakan.

Ulasan 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 memiliki alat dan konfigurasi yang cukup luas yang sangat menyederhanakan proses pengembangan aplikasi berdasarkan komponen UI Webix. Kami akan mempertimbangkannya secara lebih rinci di artikel berikutnya yang ditujukan untuk Webix Jet.