Hi everyone,
I've developed a custom class which extends the KONtx.element.Container class, it has a couple of buttons inside and it has a function to intercept the keyboard event (such as up, down, left, right...) to make the buttons inside blurred or focused according. Here is the code of the class (stub code only):
CODE
var MyClass = new KONtx.Class({
ClassName: 'MyClass',
Extends: KONtx.element.Container,
config: {
},
initialize: function() {
this.parent();
this.button1 = new KONtx.element.Button({
// code to define the button
}).appendTo(this);
this.button2 = new KONtx.element.Button({
// code to define the button
}).appendTo(this);
this.button3 = new KONtx.element.Button({
// code to define the button
}).appendTo(this);
this._onKeyPress.subscribeTo(KONtx.application, 'onWidgetKeyPress', this);
},
_isFocused: function() {
return this.element.hasFocus
|| this.button1.element.hasFocus
|| this.button2.element.hasFocus
|| this.button3.element.hasFocus;
},
_onKeyPress: function(event) {
if (this.visible && this._isFocused()) {
var keyCode = event.payload.keyCode;
var eventHandled = false;
switch (keyCode) {
case KONtx.utility.KeyHandler.map.RIGHT:
// Code to handle the event
eventHandled = true;
break;
case KONtx.utility.KeyHandler.map.LEFT:
// Code to handle the event
eventHandled = true;
break;
case KONtx.utility.KeyHandler.map.UP:
// Code to handle the event
eventHandled = true;
break;
case KONtx.utility.KeyHandler.map.DOWN:
// Code to handle the event
eventHandled = true;
break;
default:
break;
}
if (eventHandled) { // Only cancel the event which is handled by this container
event.stopPropagation();
event.preventDefault();
}
}
}
});
As you can see from the above code snippet, I have to intercept the keyboard event from the KONtx.application object globally. If I have 2 instances of this class on the screen, I have to make sure that only one instance is handle the keyboard events by checking if the instance itself is focused or one of its children UI element is focused. I think this keyboard event intercepting mechanism is *not* elegant, but I'm still using it, because it's the only way I know so far.
My question is: "Is there any way to make a container element to automatically handle the keyboard event when itself or one of its child elements is focused and don't intercept the keyboard events when both itself and its child elements are not focused?"
I'm really new to KONtx! So any advices are welcome!
Tinh
