Interaction with Users

.. in Webix Apps

View Events

properties
- what do they look like?
methods
- what do they do?
events
- what happens?

View Events

view events
- onItemClick for button, list
- onAfterRender for all components
'global' Webix events
- onClick
- onRotate
native HTML events
- window.onresize
- input.onchange

Docs: https://docs.webix.com/desktop__event_handling.html

Handling View Events

1) attachEvent(name, handler)

https://snippet.webix.com/6xdaszer

$$("mylist").attachEvent("onItemClick", function(){
    webix.message("Item was clicked");
});

2) on property in configuration

{
    view:"list",
    data:[ "Start", "Data", "Profile" ],
    on:{
        onItemClick:function(id){
            webix.message("Item was clicked "+id);
        }
    }
}

3) click property in configuration (for controls)

{ view:"button", value:"Click me", click:function(){
        webix.message("Button was clicked");
}}

* Event names are case-insensitive

* 'this' keyword within handler function points to the view, which event is handled

attachEvent or on?

1) The moment of handler definition

attachEvent --> AFTER view creation
on --> BEFORE view creation

webix.ui({
    view:"list",
    id:"mylist",
    data:[ "Start", "Data", "Profile" ]
});

$$("mylist").attachEvent("onAfterRender", function(){
    webix.message("List was rendered");
});

Result: event will not fire on 1st render

Try it: https://snippet.webix.com/kvdnjtmd

2) Possibility to remove handler at runtime

attachEvent: handler can be detached
on: handler cannot be removed until view is destroyed

Handling Webix Global Events

Just webix.attachEvent

webix.attachEvent("onClick", function(){
  webix.message("Mouse click detected");
});

Handling HTML Events

webix.event (node, event, handler);

webix.event(window, "resize", function(){
  webix.message("Window was resized");
});

event names come without on- prefix
webix.event is cross-browser. It calls
- node.addEventListener for normal browsers
- node.attachEvent for IE8

webix.event(document.getElementById("test"), "click", function(){
    webix.message("Test div was clicked");
});

webix.event($$("mylist").getNode(), "click", function(){
    webix.message("List was clicked");
});

https://snippet.webix.com/45ngsbot

Removing Event Handlers

var event2 = webix.event(window, "resize", function(){
  webix.message("Window was resized");
});

webix.eventRemove(event2);

var event1 = $$("mylist").attachEvent("onItemClick", function(){
    webix.message("Item was clicked");
});

$$("mylist").detachEvent(event1);

Try it: https://snippet.webix.com/wyqaxn3a

attachEvent() --> detachEvent()

webix.event() --> webix.eventRemove()

config.on --> no way till view destruction :(

Any questions?

Interactive Dialogs

Window
Popup

webix.alert
webix.confirm
webix.prompt
webix.message

Messages

webix.alert

    webix.message({
        text:"Please, fill in the form",
        type:"error",
        expire:-1
    });

    webix.message("Please, fill in the form");

    webix.alert("Please, fill in the form");

    webix.alert({
        text: "Please, fill in the form",
        title:"Attention"
    }).then(function(){
         /* some actions */
    });

webix.message

Confirmation Dialog

webix.confirm

    
    webix.confirm("Form is incomplete. Continue?");

    webix.confirm({
        title:"Form is incomplete",
        text:"Do you still want to continue?"
    }).then(
        function(){
            webix.message("Confirmed");
        }, 
        function(){
            webix.message("Rejected");
        }
    );

https://snippet.webix.com/516bey90

Prompt Dialog

webix.prompt

    
    webix.prompt("Please, enter you age..");

    webix.prompt({
      	title: "Hi, bro",
      	text: "Please enter your name..",
      	ok: "Submit",
      	input:{
          required:true
        }
    }).then(
      	function(result){
          webix.message("Nice to meet you, "+result+"!");
      	},
      	function(){
          webix.message("See you next time :("); 
      	}
    );

https://snippet.webix.com/9a8ros3d

Windows and Popups

    webix.ui({
        view:"window",
        id:"mywindow",
        height:250,
        width:300,
        position:"center",
        move:true,
        head:"My window",
        body:{
            template:"Some text"
        }
    }).show();

https://snippet.webix.com/ehbofg5m

    var win = webix.ui({
        view:"window", id:"mywindow"
    });

    win.show();
    //or
    $$("mywindow").show();

Windows and Popups

    webix.ui({
        view:"window",
        id:"mywindow",
        move:true,
        position:"center",
        head:{
            cols:[
                {},
                { view:"icon", icon:"wxi-close" }
            ]
        },
        body:{
            view:"datatable",
            autoConfig:true,
            autoheight:true,
            autowidth:true,
            data:[]
        }
    });


    $$("mywindow").show();

    //near some HTML element
    $$("mywindow").show(node);


    $$("mywindow").hide();

Show window

Hide window

Close window


    $$("mywindow").close();

https://snippet.webix.com/37uym1x8

Getting User Data: Form

What does this form consist of?

{ 
    view:"form",
    width:280,
    elements:[ // rows 
        { type:"section", template:"Edit films"},
        { view:"text", label:"Title"},
        { view:"text", label:"Year"},
        { view:"text", label:"Rating"},
        { view:"text", label:"Votes"},
        { cols:[
            {view:"button", css:"webix_primary", 
                value:"Add new"},
            {view:"button", value:"Clear"}
        ]},
        {}
    ]
}

What other form elements can we use?

Form Elements

getValue() and setValue() methods
name property in configuration (you need to provide it)

To become form element, view needs:

    { 
        view:"form",
        elements:[
            { type:"section", template:"Edit films" },
            { view:"text", label:"Title", name:"title" },
            { view:"text", label:"Year", name:"year" },
            { view:"text", label:"Rating", name:"rating" },
            { cols:[
               { view:"button", css:"webix_primary", value:"Add new" },
               { view:"button", value:"Clear" }
            ]},
            {}
        ]
    }

Magic of Element Name

accessing controls via form.elements

{ 
  view:"form",
  id:"myform",  
  elements:[
    { view:"text", label:"Title", name:"title" },
    { view:"text", label:"Year", name:"year" },
    { view:"text", label:"Rating", name:"rating" }
  ]
}

var titleInput = $$("myform").elements.title;
titleInput.setValue("");

form setValues() and getValues() methods

$$("myform").setValues({
    title:"My favourite film",
    year:"2000",
    rating:"125478"
});

can be validated within form

https://snippet.webix.com/sknbajvp

Form Values

form can store any json

{ 
    view:"form",
    id:"myform",  
    elements:[
        { view:"text", label:"Title", name:"title" },
        { view:"text", label:"Year", name:"year" },
        { view:"text", label:"Rating", name:"rating" }
    ]
}

$$("myform").setValues({
    title:"My Firm",
    year:"2000",
    notes:"Watch next week"
});

console.log($$("myform").getValues());

/*
{
    title:"My Firm",
    year:"2000",
    notes:"Watch next week"
}
*/

Form API

clear removes values from all elements

$$("myform").clear();

getFormView() of an element returns Form instance

var titleInput = $$("myform").elements.title;
var form = titleInput.getFormView();

setValues/getValues work with values

elementsConfig sets common settings for elements

{
    view:"form",
    id:"myform",
    elements:[
        { view:"text", label:"Title", name:"title" },
        { view:"text", label:"Year", name:"year" }
    ],
    elementsConfig:{
        labelPosition:"top"
    }
}

Form Events

onChange for elements

* can be set via elementsConfig

{
    view:"form",
    elements:[
        { view:"text", label:"Title", name:"title", on:{
            onChange:function(newv, oldv){
                webix.message(newv);
            }
        }},
        { view:"text", label:"Year", name:"year"}
    ]
}

https://snippet.webix.com/emshq907

onChange for Form

{ view:"form", on:{
     onChange:function(newv, oldv){
       webix.message(newv);
     }
}}

Form Validation

{ 
    view:"form", id:"myform",  
    elements:[
        {view:"text", label:"Title", name:"title"},
        {view:"text", label:"Year", name:"year"}
    ],
    rules:{
        title:webix.rules.isNotEmpty,
        year:function(value){
            return value>2000;
        }
    }
}

validation rules are defined via form rules property
- rules keys --> elements names
- validation function must return true or false
validation starts when form validate() method is called

var result = $$("myform").validate();
//true or false

https://snippet.webix.com/odke82ha

Invalid form: how to tell the user?

{ 
    view:"form",
    on:{
        onValidationError:function(){
            webix.message({text:"Data is incorrect", type:"error"});
        }
    }
}

Use form events to show alert messages:
- onValidationSuccess
- onValidationError

2. Define invalidMessage for contol

is visible only after validation

https://snippet.webix.com/mqyrsyh8

Form with Data Component

var values = $$("myform").getValues(); 
//{ title:"Some", year:"1994"}

https://snippet.webix.com/u3nsuxnf

var small_film_set = [
  { id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},
  { id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2}
];

webix.ui({
    view:"datatable", id:"mydata", autoConfig:true,
    data:small_film_set
});

Form values:

Component data:

Why not add more?

$$("mydata").add(values);

Useful Links

Webix Topics:

Task for practice: click here

Follow-up text: click here