Clever Geek Handbook

Le framework Webix Jet à travers les yeux d'un débutant. Partie 1. Composition et navigation

Dans les articles précédents de la série « La bibliothèque JavaScript Webix à travers les yeux d'un débutant », vous avez appris à créer une application basée sur les composants de l'interface utilisateur Webix. Dans cet article, je souhaite examiner de plus près la création d'une application similaire en utilisant l'architecture et les capacités du framework Webix Jet, ainsi que ses avantages. L'article sera utile à la fois pour ceux qui sont déjà familiarisés avec l'interface utilisateur Webix et pour les débutants, car le code de la bibliothèque est intuitif et facile à utiliser.





Examen 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 dispose d'une gamme assez large d'outils et de configurations qui simplifient considérablement le processus de développement d'une application basée sur des composants d'interface utilisateur Webix. Nous les examinerons plus en détail dans les prochains articles consacrés à Webix Jet.







More articles:


All Articles