Creating Views

View Concept

Views are modules for interface elements that should be kept in separate files. This makes the code loosely coupled. If some part of the app is messed up, the rest of it works. Parts of an app can be developed and tested independently. All visual components of the UI are separated from each other and can be reused. All the above said is critical for large and huge apps. Besides, the code looks neater.

All views should be stored in the views folder: one view per file. Views can be defined as ES6 classes that inherit from the JetView class. For example, this is how a view module is defined in views/myview.js:

// views/myview.js
import {JetView} from "webix-jet";

export default class MyView extends JetView{
    config: () => { template:"MyView text" };
}

Views are resolved one by one according to URL chunks in the address bar. The local path to a file has nothing to do with the path in the address bar. You can show the view by opening this path:

index.html#!/myview

Views in Folders

You can also include view files into subfolders to better organize the structure, e.g.:

start.js
details
- index.js // main file in the folder
- form.js
- template.js

To show the main file, reference it as \#!details. To show the files in subfolders, reference them as folder.file, e.g.

\#!details.form
\#!details.template

Subview

Apps created with Webix Jet are single-page. The interface of your app can be constructed from multiple views. Views can be included in other views and are called subviews. They can be either static or dynamic.

Static Subviews

One of the ways to nest a view is to import Jet view class and directly include it into another view. Let's create a new view in bigview.js and include the MyView class into it:

// views/bigview.js
import {JetView} from "webix-jet";
import MyView from "views/myview";

export default class BigView extends JetView{
    config: () => {
        rows:[
            MyView,
            { template:"BigView text" }
        ]
    }
}

You can open the view with this URL:

index.html#!/bigview

Dynamic Subviews

You can embed multiple views that will change according to the URL. Instead of the concrete name of the view class, write { $subview: true }:

// views/bigview.js
import {JetView} from "webix-jet";

export default class BigView extends JetView {
    config: () => {
        rows:[
            { $subview: true },
            { template:"BigView text" }
        ]
    }
}

The next segment of the URL (after bigview) will instruct the app, which view to load as a subview. Based on the URL, the view file will be located, the related view will be loaded, and the corresponding view module will be rendered as a subview. For example:

//load views/myview.js
index.html#!/bigview/myview

//load views/viewa.js
index.html#!/bigview/viewa

//load views/viewb.js
index.html#!/bigview/viewb

View Concept

Views in Folders

Subview

Static Subviews

Dynamic Subviews

Further reading