DEV Community: WebDev_UI

JavaScript Webix library through the eyes of a freshman. Part 2. Dealing with forms.

WebDev_UI — Mon, 09 Mar 2020 08:50:06 +0000

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 JS UI Framework.

Second task

First I should specify the logic of user interaction with the form:

reading and data validating of the form;
clearing the form;
processing buttons clicks;
interactive messages and confirm boxes;
adding form data to the table.

You can download the source code here.

You can see the demo application here.

Step 1. New data addition.

To have an easy to read code and to split the project into orderly blocks, I create the functions.js file.


    <script src="d ata.js"></script>
    <script src="functions.js"></script>
    <script src="script.js"></script>

New data is added to the table with the addItem function. I create it here:

const addItem = () =>{                                                       
    var item_data = $$("film_form").getValues();
    $$("film_list").add(item_data);
}

The id of the element is passed to the method $$ to access the element in the Webix library.

The addItem function works as follows: I take the current data from the form with its getValues method and put it to the item_data variable. Using this data I create a new record in the list with the add method.

To call this function I set the click property to the Button widget with the Add new value.

margin:10,
cols:[
    { view:"button", id:"btn_add", value:"Add new", css:"webix_primary",
    click:addItem},
    { view:"button", id:"btn_clear", value:"Clear"}
 ]

Consequently, the data is added to the table:

Step 2. Form validation. Popup message.

The validation with the validate() method is performed in the addItem function. Besides, I put there the code of the popup message about the successful validation.

The webix.message() function creates a simple message in Webix. The function accepts the text of the message as a parameter.

const addItem = () =>{        
    if($$("film_form").validate()){                                               
        var item_data = $$("film_form").getValues();
        $$("film_list").add(item_data);    
        webix.message("Validation is successful!");
    }
}

Inside the If condition we access the form and call the validate() method. If the check is successful the method returns true and the code runs further. As soon as the data is added to the table, the message "Validation is successful!" shows up.

Popup message:

Now I should create the rules object in the Form widget. I expect it to satisfy the criteria below:

the Title field is not empty;
the Year field is not less than 1970 and more than the current year;
the Rating field is not zero;
the Votes field is more than 1 and less than 1000000.

Afterwards, the validation rules of widget source code is:

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", value:"Add new", 
            css:"webix_primary", click:addItem},
            { view:"button", id:"btn_clear", value:"Clear" }
        ]
    },
    {}
],
rules:{
    title: webix.rules.isNotEmpty,
    rating(value){
        if(webix.rules.isNumber(value)){
            return true;
        }
    },
    votes(value){
        return value < 1000000 && value >= 1;
    },
    year(value){
        return value>=1970 && value <= new Date().getFullYear();
    }
}

The properties of the rules object should correspond to the values of the name: "…" properties of the form elements. The built-in, namely webix.rules.isNotEmpty and webix.rules.isNumber are set in the Title, Rating and Votes fields. In the Year property there is the function which determines the user rules.

The form is validated when all the properties of the Rules object return true. Otherwise, the fields with failed validation are highlighted red.

The result is here:

Step 3. Error notification.

There may be the invalidMessage property in the fields. The text of the error message is its value. The message shows up below the field if the validation is not successful.

Code:

elements:[
    { type:"section", template:"EDIT FILMS"},
    { view:"text", name:"title", label:"Title", 
    invalidMessage:"Must be filled in"},
    { view:"text", name:"year", label:"Year", 
    invalidMessage:"Should be between 1970 and current" },
    { view:"text", name:"rating", label:"Rating", 
    invalidMessage:"Cannot be empty or 0" },
    { view:"text", name:"votes", label:"Votes", 
    invalidMessage:"Must be less than 100000" }, 
    {
        margin:10, cols:[
            { view:"button", id:"btn_add", value:"Add new", 
            css:"webix_primary", click:addItem },
            { view:"button", id:"btn_clear", value:"Clear" }
        ]
    },
    {}
]

Result:

Step 4. Clearing the form.

To clear the form we create the function which is called by clicking on the Clear button. The function first shows a confirmation box.

Confirm box:

I create the clearForm function and write the following code in it:

function clearForm(){
    webix.confirm({
        title:"All data will be lost!",
        text:"Are you sure?"
    }).then( () => {
            $$("film_form").clear();
            $$("film_form").clearValidation();
        }
)};

I use the webix.confirm({…}) method for the confirmation box. The method accepts the object with the text and title properties. If the answer is positive I call two methods in the handler .then: clear() to clear the form fields and clearValidation() to remove the validation marks.

Finally, we should connect the function call with the Clear button.

margin:10, cols:[
    { view:"button", id:"btn_add", value:"Add new", 
    css:"webix_primary", click:addItem},
    { view:"button", id:"btn_clear", value:"Clear",
    click:clearForm}
]

You can see both the code and the demo at https://snippet.webix.com/17w1dodb.

Summary

The form interaction demonstrates only elemental methods. However, it is still visible that Webix suggests a succinct, legible and comprehensive code for the dynamic page. Obviously, the JavaScript code loses in the length.

JavaScript Library for newbies

WebDev_UI — Tue, 18 Feb 2020 15:14:57 +0000

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.