Beginner

Start Coding with Webix

Working with the Webix library you should go through typical development stages that include setting goals and understanding the requirements, choosing components and designing the app to foresee the result and finish it all with the coding itself, which is merely a technical side.

Setting the Goal

At this stage you should determine the app's functionality and evaluate the means of achieving this goal. You should clearly see the purpose of your future app and try to imagine all possible features it may need to meet the requirements.

Preparing Workspace

At this stage you define all the properties of your app and its components, play with event handlers and apply methods for your app to dance in the hands of users. You can check the state of your app in the real time just as you've put the last bracket/brace/colon after the code piece.

The lib package you download from the site includes two versions - debug and standard one. Debug version helps control the app during the development stage while standard script version goes for ready-made products. Both scripts are identical in terms of component building yet webix_debug.js version includes a number of handy debugging tools. Read more about the bonuses of the debug version.

All the coding can be done in any text editor that is capable of syntax highlighting (just for convenience sake) and save the code to desired format (js, html, php, xml etc.).

Including Webix files into the app

At the initial stage, you need to include Webix library files into your document. It's recommended to use HTML5 doctype. There are several possible ways, read the Webix Installation Guide article for details.

Designing

Here you think about the app's layout, its look-and-feel, build color scheme and, of course, select all the components for it. You should already decide how the components would be related to each other. Building App Architecture article will help you position components and make you acquainted with layout types the library offers.

Further on, there are a number of data-presenting components and special features like toolbar, menu and calendar that would breathe life into your app and make it dynamically change to implement all the functions you wish it to perform.

The library is supplied with a rich set of samples to show you how the components look and perform in reality. So you won't regret having spent some time studying them.

So, there comes time for creativity, so put on your thinking cap and pass to coding.

Main Principles of Coding with Webix

All the components inherit from the base view component and are embedded into it to appear in the output. So, the most frequent piece of code you are going to write is

webix.ui({
    view:"...",// specifies the component name you want to create
    id:"...",
    //other parameters
});

..or

var table = new webix.ui({ //any var name will do
    view:"...",
    id:"...",
    //other parameters
});

Working with Component ID

Why is ID so important? Because it's the element you can refer to in order to call component methods (including the one that attaches a handler to an inner event):

//attaches handler to inner event
$$("component_id").attachEvent("onSomethingHappens", do_something(){...});
//forces repainting
$$("component_id").refresh();

Methods can be call directly from the component object:

var table = new webix.ui({...});
//or
table.attachEvent("onSomethingHappens", do_something(){...});
table.refresh();

However, if you don't specify the ID, it will be automatically generated with the "$component_name1" pattern for each instance of a component.

Auto Generated ID

webix.ui({
    view:"list",
    //config options
});
 
$$("$list1").select(5); // $list1 is an auto-generated ID

Related sample:  Auto-Generated ID

Still, referring to the components by specifying the auto-generated ID is not safe as it may change in case a new instance of one and the same component is added to the application.

Getting Component ID at Runtime

At any moment you can get the component ID (either custom or auto-generated one) through its configuration:

var id = table.config.id;

and use it for calling methods:

$$(id).refresh();

HTML Containers

You can set position, style and dimensions of the needed components with the help of JavaScript only (study Layout and Sizing Components articles) or place them into HTML containers to take the task to CSS.

To achieve this, make up an HTML-layout, set ID to div elements and set this ID as the value of the component's container parameter.

<body>
    <div id="dataA" style="width:500px;height:150px;"></div>
    <div id="dataB" style="width:500px;height:300px;"></div>
    <script>
        webix.ui({
            view:"dataview",
            id:"mydataview1",
            container:"dataA",
            ...
        });
 
        webix.ui({
            view:"dataview",
            id:"mydataview2",
            container:"dataB",
            ...
        });
    </script>         
</body>

Code Optimization

Sometimes it is recommended to take some parts of an app to separate variables and include them into the webix.ui() command. It makes it easy to track mistakes and read the code later on.

var simple_config1 = ...;
var simple_config2 = ...;
var simple_config3 = ...;
 
webix.ui({
    rows:[
        simple_config1,
        simple_config2,
        simple_config3,
    ]
})

In case of a really big app with lots of components, controls and functions refer to the Structuring a Big App article to learn all nuances of code optimization.

Read more about HTML templates here.

For further information please study Common Tasks and Event Handling articles.

Back to top