My career in front-end developing has just started. Currently, I am on a trial period in one of the IT companies in Minsk. I am exploring the subtleties of the web-ui development on the basis of the JS Webix library. Sure enough I am glad to share my modest experience and to save it as a guideline of this curious UI library.
In this part, I deal with the following:
- splitting the project into modules;
- tabs and switching between them;
- setting up a table;
- drawing a list and a chart;
- creating a tree table.
The source code is here.
The finished application is here.
Step 1. Splitting the project into modules
To make things clearer it is better to split the project into modules. I create the following files and transfer the widget code to them:
- header.js-the Toolbar widget;
- aside.js-the List widget;
- table.js- the Datatable widget;
- form.js- the Form widget;
- footer.js - the element with text: “The software is ...".
In new files I put widget configurations into variables, e.g.:
The created files are included in the index.html file in the following order:
The script.js file now contains a simple application initialization code.
Step 2. Tabs and switching between them
The Multiview component performs switching. I create it in the aside.js file:
The tab code is in the cells array. Each tab needs an id. Multiview contains three tabs, the first of which contains the table and the form that were created earlier.
In the script.js file I replace the Table and the Form widgets with the Multi module.
The List widget acts as a switch between tabs. I set to the List widget elements the same id as the Multiview tabs.
When you click on an element of the List widget, the onAfterSelect event is triggered. Inside its handler, we get the id of the selected element and show the corresponding tab referring to it by id.
Example:
Attention!
Further actions with data will be performed with the local server running.
Step 3. Dashboard tab-table settings
To delete a column or add a new one, the property autoConfig:true in the Datatable widget should be replaced with the columns array with settings for each column.
- the value of the id property shows the data item field 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 column with the fillspace property allows the title column to take up all the available space.
All settings of the table are predefined in the style.css file and we only need to insert the class name.
I add more data for the table from the data/data.js specifying the path to it using the url property.
Result:
Step 4. The tab “Users" - drawing a list and a chart
In the second tab I will create a list and a chart. To do this, in the second Multiview element I will specify the name of the module as “users”.
I will create a new users_module.js file for the widgets.
List. List refers to the List widget, which was previously used when creating the menu. The list rows must contain user names and country names.
List widget code:
The rows array is used to divide the workspace into two parts. The second one will be used for the diagram.
In the template property, there is a field between the # characters. The value of the field is taken from the data element that is loaded from the users.js file.
Result:
Chart. The library supports common chart types, all of which are created with the Chart widget with the type property.
I replace the setting template:"Chart" with the widget code:
- setting type: "bar" sets the linear chart type;
- the field name is passed to value, and it must be specified in `#...#`;
- the xAxis setting indicates the information shown on the X axis.
- template shows that there are age numbers below the chart lines;
- title contains the name of the chart, which is "Age".
Result of drawing the list and the chart:
Step 5. The tab “Products” - tree table
To initialize this component, I will create the products_module.js file. In the third element of the Multiview widget, I will specify the name of the module as "products".
The Treetable widget is used to build a tree table. One of the widget columns should contain a template {common.treetable ()}, not to get a standard table instead of a tree table. The template allows you to immediately draw specific elements:
- an active icon to expand/collapse enclosed records;
- file/folder icons;
- indents depending on the record level.
The treetable component is filled with hierarchical data that I get from the products.js file.
Result:
You can find the finished application here.
Summary.
The most important thing is to divide the code into modules. It helped to avoid confusion in the code, and to organize a multi-page interface. It was exciting to explore new Webix widgets in the form of charts and freely editable lists of tables.
Top comments (0)