Reading time: 4 minutes
You might be wondering what’s new in the country of Webix Jet since the glorious victory on September, 26 last year. There have been a number of feature updates during these 4 months. Webix Jet 1.3, the latest version at the moment, includes the seventh plugin urlParam for treating URL segments as parameters, new getParam / setParam API for accessing and setting URL parameters, TypeScript support and the optional path parameter for the Locale plugin.
Let’s recap the history of updates in each version of Webix Jet 1.x:
Webix Jet 1.0 – September 26, 2017
Webix Jet 1.0 is a major update from version 0.5. These are the main features of the version:
- Views and app modules are defined as ES6 classes. You can also use other features of ES6, such as arrows.
export default class ToolbarView extends JetView {
config(){
return {
view:"toolbar", elements:[
{
view:"button", value:"Demos", click: () => {
this.show("demos");
}
}
]
};
}
}
- Webpack is used as a module bundler.
- You can choose among four routers to define the URL of the app: a hashbang URL, a plain URL, a non-displayed URL, or a non-storable URL.
- Five new plugins replaced helper modules from the older version.
import {JetApp, plugins} from "webix-jet";
const app = new JetApp({
start:"/top/start"
});
app.use(plugins.Locale);
app.render();
Webix Jet 1.1 – December 6, 2017
Since this version was released, the following features have been made possible:
- this.ui can be used to initialize both Webix widgets and JetView classes.
import {JetView} from "webix-jet";
import WindowsView from "views/window";
export default class TopView extends JetView {
init(){
this.win = this.ui(WindowsView);
}
}
Where WindowsView is a class with a Webix popup inside:
import {JetView} from "webix-jet";
export default class WindowsView extends JetView {
config(){
return {
view:"popup",
body:{ template:"Window contents" }
};
}
}
- “!” can be removed from the hash URL. Use the routerPrefix property in the app config for that.
var app = new JetApp({
start:"/demo/details",
routerPrefix:"
}).render();
- A view class can return a promise from the config method.
config() {
return webix.ajax("server/data.php").then(function(data){
data = data.json();
return {
view:"chart",
series:[
{ value:"#sales#", color:data[0].color},
{ value:"#sales2#", color:data[1].color}
]
}
});
}
}
- HashRouter supports config.routes. Set this property in the app config to make the URL shorter and prettier.
import {JetView} from "webix-jet";
const app = new JetApp({
start: "/top/about",
routes: {
"/hi" : "/top/about", //load ‘/top/about’, but display ‘/hi’ as the URL
"/form" : "/top/area.left.form",
"/list" : "/top/area.list",
}
});
- views in the app config can define string-to-string mapping. Use views to define your view creating logic. This property can be set as an object or a function.
import {JetApp} from "webix-jet";
const app = new JetApp({
start: "/top/start",
views: {
"start" : "area.list" // load ‘/views/area/list.js’ if the URL segment is ‘start’
}
}).render();
Webix Jet 1.2 – December 12, 2017
This version includes more improvements and additions.
- The show and getSubView APIs are updated.
- show returns a promise that will be resolved when view is really shown:
view:"button", value:"Show data", click: () => {
this.show("data").then(webix.message("ready"));
}
}
- getSubView allows you to get a child Jet View object:
view:"button", value:"Load 'data'", click: () => {
this.getSubView().loadData();
}
}
- this.ui allows you to define a custom HTML parent. Pass an optional container parameter to the method with the ID of the container.
import SubView from "views/sub";
export default class TopView extends JetView {
config(){
return { template:"Top view" };
}
init(){
this.sub = this.ui(SubView,{container:"here"});
}
}
Where SubView is a Jet view like this:
template:"Subview in an HTML container"
};
export default SubView;
Webix Jet 1.3 – January 11, 2018
These are the updates that you will get with the latest version.
- It is possible to create Webix Jet apps in TypeScript.
- New API:
Use the getParam() method of the JetView class to get URL parameters.
import {JetView} from "webix-jet";
export default class sub extends JetView {
config(){
return {
view:"template"
};
}
urlChange(view){
var id = this.getParam("id", true);
view.setHTML("id="+id);
}
}
Apply the setParam() method of the JetView class to set URL parameters.
import {JetView} from "webix-jet";
export default class TopView extends JetView {
config(){
return {
rows:[
{ view:"segmented", options:["full", "brief"], on:{
onChange: function(){
this.$scope.setParam("mode", this.getValue(), true);
}
}}
]
};
}
}
Use getUrl() to return a parsed URL object.
import {JetView} from "webix-jet";
export default class SomeView extends JetView{
config(){
return {
view:"button", value:"Show URL", click: () => {
var url = this.getUrl(); //URL as an array of segments
console.log(url[0].page); //"some"
}
};
}
}
- The UrlParam plugin has been added. It allows using the URL fragments as parameters. They become accessible via the getParam(name) method of Jet views and are correctly weeded out of the URL.
import {JetView,plugins} from "webix-jet";
export default class SomeView() extends JetView{
...
init(){
this.use(plugins.UrlParam, ["id"])
// now when loading /some/23/details
var id = this.getParam("id");//id === 23
}
}
All the Future Versions
…are yet to come, so stay tuned. You can get new versions via npm and from the CDN. The Webix Jet gitbook now includes the What’s new page that displays major features of each version of the framework.
