Intermediate

Structuring a Big Application

While building a big app interface, there are two options you can choose from:

using Webix Jet
creating custom code by following basic recommendations

Easy Apps Building with Webix Jet

There is a convenient and simple for understanding and developing micro-framework Webix Jet. It allows building very flexible and reliable complex web applications with little effort. To get the details on the use of the micro-framework, read the full guide on Webix Jet.

Basic recommendations on custom app construction

The rest of the article tells about logic-based app structuring and shows how to divide the application code into semantic blocks, which enhances its readability and simplifies editing of code, including the addition of some new functionality.

For better understanding, please study the following articles:

Here everything is about logic, structure and optimized coding. The basic principles are:

store big code snippets in variables;
put apart application design and inner functionality.

For samples, please look through the demo applications provided with this library.

Construction Methods

The two main functions to construct the application are as follows:

webix.ui() - the object constructor that creates a new instance of the specified view. Must be used anyway.
webix.ready() - optional - a handler that is called just after the page has been completely parsed. The alternative to the onload() method and onDocumentReady event.

In short, it look like this:

webix.ready(function(){
    webix.ui({
        view:"list", ... //any component including "layout"
    });
});

Inside the webix.ui constructor you define the layout of your app, divide it into rows and columns and place UI component into it. Details here

Putting Apart Logic and Design

Design here means the type of layout (Layout, Multiview, Accordion) as well as the UI components you've chosen for your application and the controls you insert into them.

Logic here means any functions you attach to the components and controls as well as those establishing links between components.

For clear code it's recommended to store logic and design separately in variables (let's call them logic and ui_scheme), or in case of really big apps - in separate files.

A three-file application might include:

an index.html file that contains:
- standard HTML markup with head and body sections;
- library scripts included into the document head;
- the webix.ready function with the webix.ui constructor in the script part of the document body;
- links to the ui and logic JavaScript files (see below);
- links to CSS files and those storing inline JSON and XML data;
an app.js file that contains all the components included into the ui_scheme variable (any name can be used);
a logic.js file with all the functions you need to build a fully interactive app. All of them are stored in the logic variable (again, the variable name is to your choice).

You can store the whole application in one and the same index file, but the division of the script into logic and design sections is a must. Just put components in the ui_scheme variable and functions into the logic variable.

webix.ready Function - "index.html" File Contents

HTML for such a file looks like this:

<!DOCTYPE html>
  <head>
    <!--library files-->
    <link rel="stylesheet" href="../webix.css" type="text/css" 
        media="screen" charset="utf-8">
    <script src="../webix.js" type="text/javascript" charset="utf-8"></script>
 
    <!--application files-->
    <script type="text/javascript" src='./logic.js'></script>
    <script type="text/javascript" src='./app.js'></script> 
 
    <link rel="stylesheet" type="text/css" href="./styles.css">
  </head>
 
  <body>
    <script>     ... place for your app
    </script>
  </body>
</html>

The app is placed into the body of the document embraced by script tags. Everything lies within the webix.ready function:

webix.ready(function(){
    webix.ui(ui_scheme); 
    logic.init(); // reference to the logic section 
 });

If there are any dates in your app, define common formatting methods for them right here.
If you have components that are beyond the application layout (e.g. a popup window called on a button click), put it into another webix.ui() constructor right here.

webix.ready(function(){
    webix.ui(ui_scheme); 
    webix.ui(ui_window);
    logic.init(); // reference to the logic section 
    webix.i18n.parseFormatDate = webix.Date.strToDate("%m/%d/%Y");
});

The layout, as well as other components, is placed inside the webix.ui() constructor. In the snippet above, we've created two variables - ui_scheme and ui_window - and put them inside the constructor to store these components.

Design Section - "app.js" File Contents

The variables above are declared outside the webix.ui constructor, either in the same file within the webix.ready function, or (better) in a separate app.js file.

The names that you give to the variables shouldn't be too long.

var ui_scheme = {
    rows:[grid, footer],
    maxWidth:800
};

Grid and footer are variables declared separately and placed into the two-row layout. This is a rather simple application.

It's recommended that components with options (tabbar, toolbar), forms, non-visible dataCollections should be included into the main app in the form of variables declared beforehand.

Any component or several connected components can be stored in the variable that is later on included into the main layout variable (here:ui_scheme) that is placed into the webix.ui constructor.

Logic Section - "logic.js" File Contents

A logic block is stored in a logic variable declared either in a separate logic.js file (better), or somewhere outside the webix.ui constructor but within the webix.ready function.

The logic block includes definitions of functions called during initialization of a component and other functions used in the application.

The init() function includes:

all the events attached to the components (except for those attached to them within their bodies). See Event Handling for better understanding.
links between components. Read more in the article on binding and syncing.

var logic = {
    init: function(){
        // ties between views
        $$("form1").bind($$("datatable1"));
        $$("datatable1").sync($$("list1"));
 
        // built-in functions
        $$("list1").attachEvent("onAfterSelect", function(id){
            $$("datatable1").select(id);
        });
 
        // custom functions
        $$("datatable1").attachEvent("onItemClick", logic.delete_row); 
    }
}

For custom functions attached either within the component/control body or within the init block (see above) use the following reference:

logic.function_name // since they are placed into the "logic" var

Outside the initialization block, you should define all the custom functions attached to the components of the application, either in the init block or within their bodies:

delete_row: function(){
    $$("datatable1").remove(id);
}

Other Possibilities

Sometimes the variable that stores the structure of main layout (ui_scheme) is included into the init function of the logic block and the whole script in the index file contains just a line:

ui.html

logic.init();

logic.js

var logic = {
    init:function(){
        webix.ui(ui_scheme); 
        // some additional logic defined outside the init block (if needed)
        logic.init_filtering();
    }
}

It goes without saying that a long list of custom styles is taken out into a separate file that is included into an index file with the help of a link in its head section (together with library styles).

Images for the application as well as custom icons (except for built-in ones) are stored in a separate folder, as a rule, in the same directory as the index file or somewhere nearby.