I am a beginner front-end developer. Now I am studying and training in a Minsk IT company. I’m learning the basics of web-ui using the Webix JS library as an example and I want to share my modest experience and save it as a small tutorial for this interesting UI library.Third task
I continue to develop the functionality of the application created using the Webix library. In past articles, I figured out how to create an application interface and how to interact with the form . In this article, I consider the following tasks:The operation of List and Layout widgets has been described in previous articles.You can download the source link .The finished application can be found here .Step 1. Dividing the project into modules
To avoid confusion in the code, it is more reliable to break the project into modules. To do this, I will create the following files and transfer the widget code into them:- header.js - Toolbar widget ;
- aside.js - List widget ;
- table.js - widget Datatable ;
- form.js - widget the Form ;
- footer.js - an element with the text: “The software is ...”.
In new files, the description of widget configurations occurs in a variable ...const footer = {
height: 30,
template:"The software is provided by <a href='#'>webix.com</a>. All rights reserved (c)",
css:"bottom-link"
}
The created files are included in the index.html file in the following order:<body>
<script src="functions.js"></script>
<script src="users_module.js"></script>
<script src="products_module.js"></script>
<script src="data.js"></script>
<script src="header.js"></script>
<script src="table.js"></script>
<script src="form.js"></script>
<script src="aside.js"></script>
<script src="footer.js"></script>
<script src="script.js"></script>
</body>
The resulting modules are combined in a script.js file, which now contains a simple and concise application initialization code.webix.ui({
rows:[
header,
{
cols:[
aside, {view: "resizer"}, table, form
]
},
footer
]
});
Step 2. Tabs and switching between them
In cases where there is not enough free space on the page, or if you need to thematically separate the contents of the application, it is logical to use tabs.Switching between tabs is carried out by the Multiview component . This component allows you to create the necessary number of tabs in the application and displays only one at a certain point in time.We will create a multiview in the aside.js file:const multi = {
view: "multiview",
cells:[
{ id:"dashboard", cols:[table, form ] },
{ id:"users", template:"Users" },
{ id:"products", template:"Products" }
]
}
The cells array contains the code for the tabs. Each tab needs to be added with an id so that it can be accessed and displayed. Now Multiview contains three tabs, the first of which is moved, the table and form created before that, are created.In the script.js file, I replace the Table and Form widgets with the Multi module.webix.ui({
rows:[
header,
{
cols:[
aside, {view: "resizer"}, multi
]
},
footer
]
});
The role of the switch between tabs is played by the List widget . I need the corresponding tab to open by clicking on its elements.For convenience, I will set the elements of the List widget to the same id as the multiview tabs.const aside = {
view: "list",
id:"mylist",
scroll:false,
select:true,
width:200,
css:"list_color",
data:[
{value:"Dashboard", id:"dashboard"},
{value:"Users", id:"users"},
{value:"Products", id:"products"}
],
on:{
onAfterSelect:function(id){
$$(id).show();
}
}
}
When you click on an element of the List widget, onAfterSelect is triggered , inside the handler of which we get the id of the selected element and show the tab of the same name, accessing it by id - they, as you remember, are the same.Example:
Important!
Further data actions will be carried out with the local server running.
Step 3. “Dashboard” tab - table setup
Up to this point, the project used a table whose fields were automatically generated. In the case when you want to delete a column or add a new one, the table settings are used. To do this, in the Datatable widget, the autoConfig : true property must be replaced with the columns array with the settings for each column.const table = {
view:"datatable",
id:"film_list",
scroll:"y",
select:true,
url:"data/data.js",
hover:"myhover",
columns:[
{ id:"rank", header:"", width:50, css:"rank"},
{ id:"title", header:"Film title", fillspace:true},
{ id:"year", header:"Released", width:100},
{ id:"votes", header:"Votes", width:100},
{ id:"rating", header:"Rating", width:100}
]
}
- The id property value indicates the field of the data item that will be displayed in this column;
- the header property in the element is the column header;
- all columns are set to a fixed width, but the second of them uses the fillspace property, which allows the title column to take up all the free space.
Custom CSS settings are used in the table: hover is set for the lines and the background is changed in the first column. All settings are predefined in the style.css file and you just need to insert the class name.Also, I need more data for the table, so I’ll load them from data / data.js by pointing to it using the url property .Result:
Step 4. “Users” tab - drawing a list and diagram
In the second tab, I will create a list and a diagram. To do this, in the second Multiview element I will indicate the name of the module - “users”.const multi = {
view: "multiview",
cells:[
{ id:"dashboard", cols:[table, form ] },
{ id:"users", rows:[users] },
{ id:"products", template:"Products" }
]
}
For the widgets themselves, I will create a new users_module.js file .List . A list is understood as a List widget ; earlier it was used when creating the menu. List lines must consist of usernames and country names.List widget code:const users = {
rows:[
{
view: "list",
id:"user_list",
select:true,
url:"data/users.js",
template:"#name# from #country#"
},
{
template:"Chart"
}
]
}
The rows array is used to split the workspace into two parts. The second part will be used for the chart.In the template property, between the # signs, a field is specified whose value is taken from the data item that is loaded from the users.js file.Result:
Chart . The library supports common chart types : line, circle, radar, donut, column, etc. All of them are created by the chart widget . The way the chart will look defines the type property .I will replace the setting template:”Chart”with the widget code:const users = {
rows:[
{
view: "list",
id:"user_list",
select:true,
url:"data/users.js",
template:"#name# from #country#"
},
{
view:"chart",
type:"bar",
value:"#age#",
url:"data/users.js",
xAxis:{
template:"#age#",
title:"Age"
}
}
]
}
- The setting
type: "bar"defines the line type of the chart; - the name of the field is passed in value, and it is indicated necessarily in `# ... #`. This is a feature of the Chart widget;
- the xAxis setting determines what information will be displayed below the chart along the X axis;
- template indicates that under the chart lines there will be digits of age;
- title contains the title of the chart
"Age".
The result of drawing the list and chart:
Step 5. “Products” tab - tree table
To initialize this component, I will create the products_module.js file , and in the third element of the Multiview widget I will indicate the name of the module “products”.const multi = {
view: "multiview",
cells:[
{ id:"dashboard", cols:[table, form ] },
{ id:"users", rows:[users] },
{ id:"products", rows:[products] }
]
}
To build a tree table, use the Treetable widget . One of the widget columns must contain the required template - {common.treetable ()} , otherwise we will get a standard table instead of a tree view . The template allows you to immediately draw characteristic elements:- active icon to collapse / expand nested records;
- file / folder icons;
- indentation depending on the level of entries.
const products = {
view:"treetable",
scrollX:false,
columns:[
{ id:"id", header:"", width:50 },
{ id:"value", header:"Title", fillspace:true,
template:"{common.treetable()} #title#" },
{ id:"price", header:"Price", width:200 }
],
select:"row",
url:"data/products.js"
}
The treetable component is populated with hierarchical data, which I will get from the products.js file.Result:
The resulting application can be found here .Generalization
Step by step, the application is complemented by new features. An important stage was the separation of the code into modules. Separation helped to avoid confusion in the code and helped organize a multi-page interface. It was interesting to learn new Webix widgets in the form of diagrams and freely editable lists and tables. Everything was also simple, everything is also harmonious.