Clever Geek Handbook

Estrutura do Webix Jet através dos olhos de um iniciante. Parte 1. Composição e navegação

Nos artigos anteriores da série “ Biblioteca JavaScript Webix através dos olhos de um iniciante ”, você aprendeu como criar um aplicativo baseado em componentes de IU do Webix. Nesta postagem, quero dar uma olhada mais de perto na criação de um aplicativo semelhante usando a arquitetura e os recursos da estrutura do Webix Jet, bem como as vantagens que ela oferece. O artigo será útil para aqueles que já estão familiarizados com a IU do Webix e para iniciantes, porque o código da biblioteca é intuitivo e fácil de usar.





Revisão do 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. 





-, .





.





O Webix Jet possui uma ampla variedade de ferramentas e configurações que simplificam muito o processo de desenvolvimento de um aplicativo baseado em componentes de IU do Webix. Iremos considerá-los com mais detalhes nos próximos artigos dedicados ao Webix Jet.







More articles:


All Articles