I am a junior web developer, starting my career right now. Frankly speaking I am not a very helpful employee at the moment. Most of the time I study. Recently I have spent part of my free time studying the UI library Webix to improve my skills.
Arguements for:
- Quick interface creation
- Design-ready prototyping
- Proven UI practices
Arguements against:
- Limits of the declarative method of development
- Difficulties with deep customisation
- Licensing issues
- Integration issues
I am convinced that the exploration of the new tool will come in handy in my career. I would like to learn your opinion on that.
Webix UI. First glance.
I am not going to deepen in the reasons for choosing this library. I took into consideration the following triggers:
- Regular release of new versions and updates
- Full documentation
- Technical suppor
- Materials for self-study
- Simplicity of exploration
To tell the truth I experienced a WOW effect. Only several rows of the code create a ready-made application with the default content and nice design. 60+ widgets with many features are available in the GPL version.
I will try to figure out if it is really so cool in practice.
Learning Webix - Task 1
I should create the web UI like the one on the screenshot below.
Luckily Webix provides built-in CSS styles and default Material Design skin.
Setting up working environment
All I need is the following files: (index.html; script.js; data.js; style.css).
The style.css may be skipped.
Next I should inject the Webix library. I used the direct links to the Webix CDN files of the GPL version.
My index.html file:
<script type=”text/javascript” src=”http://cdn.webix.com/edge/webix.js"></script>
<link rel=”stylesheet” type=”text/css” href=”http://cdn.webix.com/edge/webix.css">
The script.js file uses the data included in the data.js file.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://cdn.webix.com/edge/webix.js">
</script>
<link rel="stylesheet" type="text/css"
href="http://cdn.webix.com/edge/webix.css">
<link rel="stylesheet" href="style.css">
<title>My first page</title>
</head>
<body>
<script src="ata.js"></script>
<script src="script.js"></script>
</body>
</html>
I put data content into the data.js file.
let small_film_set = [
{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1, category:"Thriller"},
{ id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2, category:"Crime"},
{ id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0, rank:3, category:"Crime"},
{ id:4, title:"The Good, the Bad and the Ugly", year:1966, votes:213030, rating:8.9, rank:4, category:"Western"},
{ id:5, title:"Pulp fiction", year:1994, votes:533848, rating:8.9, rank:5, category:"Crime"},
{ id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6, category:"Western"}
];
App layout
I need 3 rows array. (Header / Main / Footer).
webix.ui({
rows:[
{template:"Header"},
{template:"Main"},
{template:"Footer"}
]
});
And I need three columns in Main part (List / table / Form).
webix.ui({
rows:[
{template:"Header"},
{cols:[
{template:"List"},
{template:"Table"},
{template:"Form"}
]},
{template:"Footer"}
]
});
Header
I have to create the Toolbar and the icon in the header row.
view:"toolbar",
css:"webix_dark",
cols:[
{ view:"label", label:"My app"},
{},
{height: 40, type:"icon", icon:"wxi-user", view:"button", label:"Profile",
width:100, css:"webix_transparent"}
]
I create three columns with the cols array.
- The view:”label” creates static text and the label property shows the text title.
- Spacer.
- view:”button”. ( width and height set the button size).
Type:”icon” and icon:”wxi-user” provide me with the icon from the list.
The CSS class “webix_transparent” makes my button transparent.
List widget
The List Widget is used to create the left-side menu. I will make it clickable with the select:true property, plus I will customize the style with the help of css:”list_color” class.
I change the template:”List” with the following:
{
view: "list",
id:"mylist",
scroll:false,
select:true,
width:200,
css:"list_color",
data:[
{value:"Dashboard",},
{value:"Users"},
{value:"Products"},
{value:"Location"}
]
},
{view: "resizer"},
{template:"Table"},
{template:"Form"}
Now I have to disable the scroll with the scroll:false.
The length of the list and its values are set with the data array .
To define custom styles we write the following:
.list_color{
background-color: #EEEEEE;
font-weight: 500;
}
.list_color .webix_selected{
background-color: #dddfe2;
}
To change the background color I have to specify the default element class after the title of our class. After that I use .list_color{…} to set up the background color I need.
{ view:”resizer”} is the draggable border between the List widget and the Table column.
And here is the result:
Table and external data-source
I keep data in the data.js file. Now I need to inject this data in a form of a table instead of template:”Table” line.
view:"datatable",
id:"film_list",
scroll:"y",
autoConfig: true,
data:small_film_set
This is how is works:
- view:”datatable” - creates a table;
- autoConfig:true - configures the columns based on the small_film_set;
- small_film_set - array defines the beginning;
- data:smal_film_set - shows the pathway to this array;
- scroll:”y” - removes the horizontal scroll preserving the vertical one.
Result:
Form
I create the Form Widget with the view:”form” line. According to my task I need input fields and the buttons located in the elements:[ ] array.
Now I replace the template:”Table” line with:
view:"form",
id:'film_form',
width: 350,
elements:[
{ type:"section", template:"EDIT FILMS"},
{ view:"text", name:"title", label:"Title" },
{ view:"text", name:"year", label:"Year" },
{ view:"text", name:"rating", label:"Rating" },
{ view:"text", name:"votes", label:"Votes" },
{
margin:10,
cols:[
{ view:"button", id:"btn_add", minWidth:65, value:"Add new",
css:"webix_primary", click:addItem},
{ view:"button", id:"btn_clear", minWidth:65, value:"Clear",
click:clearForm}
]
},
{}
]
Result:
Finalization
Now I need the footer.
I replace the template:”Footer” line with:
cols:[
{
height: 30,
template:"The software is provided by <a href='#'>webix.com</a>. All
rights reserved (c)",
css:"center_text"
}
]
As you can see from the code, the template property allows setting HTML-tags alongside with the text. To center the text I use the “center_text” css-class.
Summary
At the moment I understand that the exploration of the library basis takes much time. I haven't received a "magical effect" of saving time so far, but I have to admit that most of the UI/UX job is done by the Webix itself and I am not distracted with trifle things.
I am planning to continue the exploration of this library and I would like to learn the opinion of more experienced developers on my career perspectives.
Top comments (0)