Creating Apps

A Webix Jet app is single-page and is divided into views. The application structure consists of the following parts:

• the index.html file that is a start page of the app;

• sources/myapp.js that contains the configuration of the app, you can give any name to this file;

• the sources/views folder that contains elements of the interface;

• the sources/models folder that contains data modules.

An app represents an application or an application module. It is used to group views and modules which implement some specific scenario. Later you will be able to combine separate app modules in high-level apps.

The Syntax of Creation

To create an app:

1. Import the JetApp class, define your app class and extend JetApp.

2. Define the start point, which is the start app URL. App configuration can include other properties like the app name, version, etc.

3. Initialize your app with a class constructor.

4. Call the render() method of JetApp to paint the UI on the page.

5. Wrap it in webix.ready() to ensure that the HTML page is parsed completely before JS starts executing.

// myapp.js
import { JetApp, EmptyRouter, HashRouter } from "webix-jet";

export default class MyApp extends JetApp{
    constructor(config){
        const defaults = {
            router: BUILD_AS_MODULE ? EmptyRouter : HashRouter,
            debug: !PRODUCTION,
            start: "/top/layout"
        };

        super({ ...defaults, ...config });
    }
}

if (!BUILD_AS_MODULE){
    webix.ready(() => new MyApp().render() );   // mandatory!
}

You can open the needed URL and the UI will be rendered from the URL elements. The app splits the URL into parts, finds the corresponding files in the views folder and creates an interface by combining UI modules from those files.

Adding Stylesheets

This is how you can include a stylesheet. You can include several stylesheets (any CSS or LESS). When the app will be built, they all will be compiled into myapp.css that you can link to your index.html page and that will be put in codebase when you build the production files.

//myapp.js
import "./styles/app.css";
import {JetApp, EmptyRouter, HashRouter } from "webix-jet";

export default class MyApp extends JetApp{
    constructor(config){
        const defaults = {
            router: BUILD_AS_MODULE ? EmptyRouter : HashRouter,
            debug: !PRODUCTION,
            start: "/top/layout"
        };

        super({ ...defaults, ...config });
    }
}

if (!BUILD_AS_MODULE){
    webix.ready(() => new MyApp().render() );   // mandatory!
}

App Configuration

In the app configuration, you can set any properties. They will be accessible throughout the app as app.config["nameOfProperty"].

For example, you can set the mode in which the app will work:

// myapp.js
import "./styles/app.css";
import {JetApp, EmptyRouter, HashRouter } from "webix-jet";

export default class MyApp extends JetApp{
    constructor(config){
        const defaults = {
            mode:"readonly",  //application wide configuration
            router: BUILD_AS_MODULE ? EmptyRouter : HashRouter,
            debug: !PRODUCTION,
            start: "/top/layout"
        };

        super({ ...defaults, ...config });
    }
}

if (!BUILD_AS_MODULE){
    webix.ready(() => new MyApp().render() );   // mandatory!
}

Later in the code, you can do some actions according to the mode:

// views/games.js
...
if (this.app.config.mode === "readonly"){
    this.show("limited");
}
...

this refers to the current instance of a Jet view (games, for example) [1].

Routers

Webix Jet has four types of routers. The default router is HashRouter. If you don't want to display the hashbang in the URL, you can change the router to UrlRouter:

// myapp.js
import "./styles/app.css";
import { JetApp, EmptyRouter, UrlRouter } from "webix-jet";

export default class MyApp extends JetApp{
    constructor(config){
        const defaults = {
            router     : BUILD_AS_MODULE ? EmptyRouter : UrlRouter,    // !
            debug     : !PRODUCTION,
            start     : "/top/layout"
        };

        super({ ...defaults, ...config });
    }
}

if (!BUILD_AS_MODULE){
    webix.ready(() => new MyApp().render() );   // mandatory!
}

Further reading

You can read these sections of Part II:

• App Config

• Routers

• JetApp API

• Vite Configuration

• Webpack Configuration

Footnotes

[1]:

You can read more about "Referencing views" and apps.