Beginner

Introduction to Webix

Step 1. Including the Library

  • Create a simple HTML page. Specify HTML5 doctype for it.
  • Install Webix for your future app. There can be several ways. Check them all in the Webix Installation Guide article.

Step 2. UI Initialization

The apps are to be placed between the script tags. The components you create are initialized inside the view.

Just a clean page

webix.ui({
  // components
});

Here you should be aware of the following:

  • to ensure that your code is executed after the page is fully loaded, you can make use of the webix.ready(function(){ ....}), which is our alternative to the onDocumentReady event;
webix.ready(function(){
  webix.ui({
      ....
  });
});

Next we'll declare base elements, create the app layout and finally nest it with UI components.

Step 3. Creating App Layout

At this step we'll specify an HTML container for the app with the following properties:

<style>
#app_here{
  width:1000px; height:400px; margin:20px;
}
</style> ... <div id="app_here"></div>

Then we'll create a layout structure which will be put into the above created container:

  • a layout with 2 rows
  • the second row will contain one more layout with 3 columns
webix.ui({
  container:"app_here",
  view:"layout", // optional
    rows:[
      {...},
        { view:"layout", // optional
         cols:[
           {...},
           {...},
           {...}
        ]}      
    ]   
});

As the value of the container property the id of HTML element should be specified.
Note that you can easily omit the view:"layout" lines and start setting rows and columns at once.

Step 4. Adding Widgets

Now we can insert some components into the layout view.

We'll put a template that will serve as the application's header into the first row.

webix.ui({
  container:"app_here",
    rows:[
      { view:"template", type:"header", template:"My App!"},
        { cols:[
           {...},
           {...},
           {...}
        ]}      
    ]   
});
  • you can easily omit the view:"template" definition;
  • the "header" type of template is used to set headers for layout rows/columns;

Step 5. Configuring Widgets

It's high time to place components into the second row. The 3 columns of the second row will be occupied by Tree and DataTable components and a resizer line between them:

webix.ui({
    container:"app_here",
    rows:[
        { type:"header", template:"My App!" },
        { cols:[
            { view:"tree", id:"mytree", gravity:0.3, select:true, data:tree_data },
            { view:"resizer" },
            { view:"datatable", id:"mydatatable", autoConfig:true, data:small_film_set}
        ]}
    ]
});

Let's look at the above code in detail:

  • one of the key properties of any component and any item is its ID, the unique string or number that helps us refer to the object. ID should be specified if you are going to work with this component/item later as all functions are applied and events are attached to the component through its ID;
  • the gravity parameter sets relative size proportions for the elements within the common parent container;
  • the select property enables item selection in the tree;
  • the data parameter defines the data source for the component;

We use JSON in the sample, so the items of the tree_data dataset look like this:

[
  { id: "1", type: "folder", value: "Music", 
    css:"folder_music", data:[..child items..]},
    ...
]

The grid_data dataset includes data items in the next mode:

[
  { id:1, title:"The Shawshank Redemption", year:1994, 
    votes:678790, rating:9.2, rank:1},
    ...
]
  • the autoConfig property creates columns of datatable on the basis of data properties. Headers of columns are based on property names in dataset.

Step 6. Establishing Interaction between Widgets

At the last step we'll illustrate the usage of ids. In order to refer to a component the following structure should be used - $$("id").

We will use the Tree method open to open the tree branches and the DataTable method select to select the first item of the datatable.

webix.ui({
    container:"app_here",
    rows:[
        { type:"header", template:"My App!" },
        { cols:[
            { view:"tree", id:"mytree", gravity:0.3, select:true, data:tree_data },
            { view:"resizer" },
            { view:"datatable", id:"mydatatable", autoConfig:true, data:grid_data }
        ]}
    ]
});
 
$$("mytree").open(1);
$$("mytree").open(2);
 
$$("mydatatable").select(1);

The ready app is presented in the following picture:

You can check the live demo and play with code by the following link https://webix.com/snippet/eadf0190

See also:

Back to top