View Events and Life Cycle

EventSystem

Event Handling 

• ​​window.onresize
• input.onchange

Events in Webix Apps

dispatch events

handle events

remove handlers

View events

• onItemClick
• onAfterRender

Webix global events

• onClick
• onRotate

Native HTML events

Webix Event Log

    [list@$list3] event:onmouseout  [MouseEvent] webix.js:487
    [list@$list2] event:onitemclick (3) ["5", MouseEvent, div.webix_list_item]
    [list@$list2] event:onbeforeselect (2) ["5", true]
    [list@$list2] event:onbeforeunselect (2) ["7", false]
    [list@$list2] event:onafterunselect ["7"]
    [list@$list2] event:onitemrender [{ id:"7", ...}]
    [list@$list2] event:onitemrender [{id:"5", ...}]
    [list@$list2] event:onselectchange [["5"]]
    [list@$list2] event:onafterselect ["5"]
    [core@undefined] event:onclick  [MouseEvent]

name is case-insensitive

    webix.debug = true;

component | module @ id event name [ ..parameters.. ]

View Events

• EventSystem mixin
• Implemented in all components
• Indicate view processes​
  • mouse actions
  • creation and destruction 
  • data loading and saving
  • data update
  • changing state 

attachEvent

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

on setting

{
    view:"list",
    on:{
        onItemClick:function(id){
            webix.message("Item was clicked "+id);
        }
    }
}

Listening to View Events

1. The moment of handler definition

    webix.ui({  view:"list", id:"mylist" });
    
    $$("mylist").attachEvent("onAfterRender", function(){
        webix.message("List was rendered");
    });

Event will not fire on 1st render

 2. Possibility to remove handler at runtime

 AttachEvent or On?

• attachEvent: yes
• on: no

    webix.ui({  
        view:"list",
        on:{
            onAfterRender:function(){ ... }
        }
    });

Event will fire on 1st render

1. Anonymous function:

    view.attachEvent("onItemClick", function(id){
    	webix.alert(id);
    });

 3. 'String' function

Handler Resolving

var alertId = function(id){ webix.alert(id); }
//or
function alertId(id){ webix.alert(id); });

view.attachEvent("onItemClick", alertId);

2. Named function

//named
view.attachEvent("onItemClick", "alertId");

//anonymous
view.attachEvent("onItemClick","(function(id){ webix.alert(id);})");

* 'serverside'events

Rendering Events

webix.ui({
    view:"datatable",
    autoConfig:true,
    data:grid_data,
    on:{
        onAfterRender: function(){
            webix.message("Datatable was rendered");
        },
        onItemRender: function(id){
            webix.message("Item was rendered "+id);
        }
    }
});

• onAfterRender
• onItemRender

Rendering Events

webix.once()

• onAfterRender

webix.ui({
    view:"datatable",
    autoConfig:true,
    data:grid_data,
    on:{
        onAfterRender: webix.once(function(){
            webix.message("Datatable was rendered");
        })
    }
});

'Rendered and Loaded' Event

ready: function(){ ... }

webix.ui({
    view:"datatable",
    autoConfig:true,
    data:grid_data,
    ready:function(){
       webix.message("Datatable was rendered");
    }
});

• data was parsed
• view can already show this data
• called once

Avoid Recursion

• onChange  ->  view.setValue();
• onAfterSelect  ->  view.select();
• onAfterFilter  ->  view.filter();

    webix.ui({
      rows:[
        { view:"text", label:"Random", on:{
            onChange:function(newv){
            	this.setValue(newv+" "+webix.uid());
            }
        }}
      ]
    });

Avoid Recursion

view.blockEvent

view.unblockEvent

• onChange  ->  view.setValue();
• onAfterSelect  ->  view.select();
• onAfterFilter  ->  view.filter();

webix.ui({
  rows:[
    { view:"text", label:"Random", on:{
    	onChange:function(newv){
          this.blockEvent();
          this.setValue(newv+" "+webix.uid());
          this.unblockEvent();
        }
    }}
  ]
});

Block Actions

• onBeforeDataSend
• onBeforeAdd
• onBeforeSelect

    webix.ui({
      rows:[
        { view:"datatable", data:grid_data, on:{
            onBeforeSelect:function(id){
            	if(id<2) return false;
            }
        }}
      ]
    });

related action

Events and HTML/State

webix.ui({ 
    view:"datatable", select:true,
    on:{
        onItemClick:function(id, e, node){
            node.innerHTML = "Test";
        }
    } 
});

Node can be no longer available

Sometimes you have to wait

webix.ui({
    view:"list", 
    select:true,
    on:{
        onItemClick:function(id){
            webix.message(this.getSelectedId());
        }
    }
});

Events and HTML/State

webix.ui({ 
    view:"datatable", select:true,
    on:{
        onItemClick:function(id, e, node){
            node.innerHTML = "Test";
        }
    } 
});

Node can be no longer available

Sometimes you have to wait

webix.ui({
    view:"list", 
    select:true,
    on:{
        onItemClick:function(id){
            webix.delay(function(){
                 webix.message(this.getSelectedId());
            }, this);
        }
    }
});

webix.delay()

Clicks Events

click setting

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

onItemClick event 

CSS-based clicks

{ view:"list", on:{
    onItemClick:function(id){
        webix.message("Item was clicked "+id);
    }
}}

{ view:"list", template:"<span class='webix_icon fa-user'></span>#value#", 
    onClick:{
        webix_icon:function(e, id){
            webix.message("Item icon was clicked "+id);
            return false;
        }
    }
}

Mouse Events

clicks 

webix.protoUI({
    name:"search",
    on_click:{
        "webix_input_icon":function(e){
            this.callEvent("onSearchIconClick", [e]);
        }
    }
}, webix.ui.text);

dblclick

{ view:"list", on:{
    onItemDblClick:function(id){
        webix.message("Item was dblclicked "+id);
    }
}}

config.onClick || view.on_click

config.onDblClick || view.on_dblclick

Mouse Events

right click

var list = webix.ui({ view:"list", onContext:{}});
var menu = webix.ui({ view:"contextmenu"});

menu.attachTo(list);

list.attachEvent("onBeforeContextMenu", function(){});
list.attachEvent("onAfterContextMenu", function(){});

mouse movements

webix.protoUI({
    name:"mytemplate",
    //on_mouse_move:true
}, webix.MouseEvents, webix.ui.template);

webix.ui({
    view:"mytemplate", autoheight:true, 
    onMouseMove:{},
    on:{
        onMouseMoving:function(){},
        onMouseOut:function(){}
    }
});

config.onContext || view.on_context

config.onMouseMove || view.on_mouse_move

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

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

attachEvent()  

config.on  

Removing View Event Handlers

Text

detachEvent()

no way till view destruction :(

$$("mylist").attachEvent("onItemClick", function(id, e , node){
    console.log("Item was clicked: "+id);
});

$$("mylist").callEvent("onItemClick", [5]);
//Item was clicked: 5

view.callEvent(name, arguments);  

Calling View Events

• Calling view built-in events

• Calling custom events

$$("mylist").attachEvent("onAfterSelect", function(id){
    if(this.getIndexById(id) === 0){
        var item = this.getItem(id);
        $$("mylist").callEvent("onTopItemSelected", [item]);
    }
});

$$("mylist").attachEvent("onTopItemSelected", function(item){
    console.log(item);
});

webix.attachEvent

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

Webix Global Events

webix.detachEvent

• global events related to environment processes
• not associated with any particular view

    webix.detachEvent(eventId);

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

HTML Events

• cross-browser helper
• event names come without on- prefix

    webix.event(window, "resize", function(){
      webix.message("Window was resized");
    }, {
        bind:$$("list"),
        capture:true //false by default,
        id:"eventName"
    });

Basic

Extra 

Handling HTML Events

Removing event handlers

    webix.eventRemove(eventId);

Dispatching (Emulating) HTML events 

    webix.html.triggerEvent(document.getElementById("test"), "click", "MouseEvents");

Adding event handlers

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

Focus and Keyboard

• onFocus
• onBlur
• webix.onFocusChange

• onKeyPress
• onEditorKeyPress
• onTimedKeyPress

• webix.UIManager.addHotKey()

//adding a hotkey
webix.UIManager.addHotKey("Ctrl+Space", function() { ... });
 
//removing all hotkeys under the name
webix.UIManager.removeHotKey("Ctrl+Space");

View Life Cycle

• DOM ready

• Added to DOM

• Inner elemens added to DOM

fully or patrially

datatable, dataview, list

• Actions performed

DOM changes

• Destroyed

by user, on unload

webix.ready(function(){ ... });

onAterRender, view.config.ready

view.$init, view.$ready

View Destruction

How

What happens

• removeView()
• close()

• destroys and resizes neighbors
• destroys and removes HTML artefacts

• destroys child views
• destroyes related popups
• removes pointers to HTML and data
• removes focus 
• removes from webix.ui.views

• destructor()

Final Destruction

• window.unload
• views are destroyed
• events detached and removed