App Config
An app module is defined as an extension of the JetApp class (OOP inheritance).
In the app file, you will typically include:
stylesheets (any CSS or LESS)
custom widgets
app-level plugins
app-level Webix settings
You can include various parameters into the app configuration. The details are below.
debug
to enable debugging
name
to set the name of the app
router
to change a router
routes
to shorten the app URL
start
to set the start app URL
views
to change view modules names
arbitrary parameters
e.g. access mode, screen size, etc.
Setting the Start URL
The app UI will be rendered from the URL elements from start when you open the app for the first time. 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.
Debugging
You really should enable the debug mode during the development stage. When debug is enabled, error messages are logged into console and a debugger will pause the app on errors. Note that webix.debug({ events: true });
also should be switched on.
You can read more about debugging with Webix in this blog post.
Choosing a Router
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:
Changing View Creation Logic
If you use Webix Jet 3.0+, which is build with Vite, you can use its dynamic import. If you use older versions or your custom Webpack setup, proceed to Using with Webpack.
After switching to Vite (Jet 3.0+), the app configuration requires a custom view loader, defined as a function or a direct assignment of an imported module.
For example, let’s say you have two folders in your project, “views” and “views_custom”, with the following file distribution:
Then you can use multiple patterns in Vite’s import.meta.glob
and provide the correct path to each module in views:
Custom Logic of Creating Views
You can also implement your own logic of view creating. Define views as a function for that:
Beautifying the URL
If you do not want to display some paths, you can replace them with shorter URLs with the help of routes in the app configuration. For instance, you might want to display only the names of subviews in the URL:
Instead of a long URL with subdirectories and parent views, e.g. "/top/area.left.form", the app URL will be displayed as /form.
Note that routes can be used to replaced the whole URL, not segments of the URL.
Various App Parameters
In the app config, for example, you can set the mode in which the app will work:
Later in the code, you can do some actions according to the mode:
this refers to the current instance of a Jet view class [1].
Adding Stylesheets
You can include several stylesheets. When the app will be built, all stylesheets will be compiled into app.css. app.css will be added to /codebase.
Footnotes
[1]:
To read more about how to reference apps and view classes, go to "Referencing views".
[2]:
Beginning from Webix Jet 1.6.
Last updated