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"});
        }
    }
}
  1. 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

1-2. Webix Basics. Interaction with Users.

By ihelga

Made with Slides.com

1-2. Webix Basics. Interaction with Users.

How to handle events in Webix, use windows to interact with users, gather form data via forms.

  • 802

More from ihelga

  • 2-4. Processing Data with Webix Widgets
    ihelga
    240
  • 1-5. Webix Basics. Collections and Server Side
    ihelga
    645
  • 3-2. Webix Jet: Interaction
    ihelga
    673