初心者の目から見たWebixJetフレームワーク。パート1。構成とナビゲーション

シリーズからの以前の記事では、「初心者の目を通してWebix JavaScriptライブラリ」、あなたはWebix UIコンポーネントに基づいてアプリケーションを作成する方法を学びました。この記事では、私は、アーキテクチャとの機能使用して同様のアプリケーションの作成を詳しく見てみたいWebixジェットフレームワークを、だけでなく、 それが与えるものの利点。この記事は、ライブラリコードが直感的で使いやすいため、WebixUIに既に精通している人と初心者の両方に役立ちます。

WebixJetレビュー

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には、WebixUIコンポーネントに基づいてアプリケーションを開発するプロセスを大幅に簡素化するかなり幅広いツールと構成があります。これらについては、WebixJetに関する次の記事で詳しく説明します。