Hi there
This is in response to CableGuy's PM for this functionality here. So far the preliminary results are indicating that its working...at page level.
The original js is here. Download the js files and add the necessary link to this js in BuildPage.
I must admit this is some nifty piece of work, its very impressive actually.
Capturing keyboard input with this lib can happen at html page level and within an element. So far Ive managed to get this to work at page level. I will continue the rest later, bushed.
Step 1: Create the ABMComponent
Project > Add New Module > Class Module > ABM Custom Component
Type in the class name in the prompt and continue.
We want to be able to add the combinations that we will capture and return an event in b4j. To do that we will use b4j_raiseevent. We define a list to store all our combo definitions, call this javacalls.
We want to trap the shift control key, so we define this as a constant, it will help us to refer back to it later..
This component is not a page element, what we can do is create a hidden div and then add it to R1C1 on our page. This is just fishing anyway.
We want to be able to trap a couple of combination keys so, rather lets define a simple method to do so.
This we later, define it as a self referencing sub so that we can chain our calls to it.
So when calling this method, you just specify the key to trap e.g. a. In our connect page for example, we have initialized this as...
After having defined mashkpress in Class_Globals as
This is defined in Class_Globals because we want to trap the events from it within the scope of the page, remember above, when each combo key press is done, the control must return what was pressed. This is done with..
so if 'shift a' is pressed, the returned key combination should be ...
As a demo, we want to show the returned combinations in a label of our page, so a label is defined in class_globals as
In ConnectPage we also add this label.
This basically means that when we press shift+a, shift+b and shift+z, these should be trapped and something should be done. To do this, we define the event trapper in the page.
Remember: In BuildPage add
Ta!
Upcoming: Linking keyboard input to an html element.
This is in response to CableGuy's PM for this functionality here. So far the preliminary results are indicating that its working...at page level.
The original js is here. Download the js files and add the necessary link to this js in BuildPage.
I must admit this is some nifty piece of work, its very impressive actually.
Capturing keyboard input with this lib can happen at html page level and within an element. So far Ive managed to get this to work at page level. I will continue the rest later, bushed.
Step 1: Create the ABMComponent
Project > Add New Module > Class Module > ABM Custom Component
Type in the class name in the prompt and continue.
We want to be able to add the combinations that we will capture and return an event in b4j. To do that we will use b4j_raiseevent. We define a list to store all our combo definitions, call this javacalls.
We want to trap the shift control key, so we define this as a constant, it will help us to refer back to it later..
B4X:
Public const MashKeyPressShift As String = "shift"This component is not a page element, what we can do is create a hidden div and then add it to R1C1 on our page. This is just fishing anyway.
B4X:
'build the component, lets just add an empty div that we hide
Sub ABMComp_Build(InternalPage As ABMPage, internalID As String) As String
Return $"<div id="${compid}" style="display:none"></div>"$
End SubWe want to be able to trap a couple of combination keys so, rather lets define a simple method to do so.
B4X:
'add a simple combo like shift+a
private Sub AddSimple(ctlKey As String, key As String)
Dim strComb As String = $"${ctlKey} ${key}"$
Dim script As String = $"${compid}listener.simple_combo("${strComb}", function() {
b4j_raiseEvent('${compid}_keypress', {'value':'${strComb}'});
});"$
JavaCalls.Add(script)
End SubThis we later, define it as a self referencing sub so that we can chain our calls to it.
B4X:
'add a combination that uses shift
Sub AddShiftPlus(key As String) As MashKeyPress
AddSimple(MashKeyPressShift,key)
Return Me
End Sub
B4X:
'add a combination that uses shift
Sub AddShiftPlus(key As String) As MashKeyPress
AddSimple(MashKeyPressShift,key)
Return Me
End SubSo when calling this method, you just specify the key to trap e.g. a. In our connect page for example, we have initialized this as...
B4X:
mashkpress.Initialize(page,"mashkpress")
mashkpress.AddShiftPlus("a").AddShiftPlus("b").AddShiftPlus("z")
page.Cell(1,1).AddComponent(mashkpress.ABMComp)After having defined mashkpress in Class_Globals as
B4X:
Public mashkpress As MashKeyPressThis is defined in Class_Globals because we want to trap the events from it within the scope of the page, remember above, when each combo key press is done, the control must return what was pressed. This is done with..
B4X:
b4j_raiseEvent('${compid}_keypress', {'value':'${strComb}'});so if 'shift a' is pressed, the returned key combination should be ...
As a demo, we want to show the returned combinations in a label of our page, so a label is defined in class_globals as
B4X:
Private lblKeyPress As ABMLabelIn ConnectPage we also add this label.
B4X:
lblKeyPress.Initialize(page,"lblKeyPress","Key Press Values",ABM.SIZE_PARAGRAPH,False,"")
page.Cell(2,1).AddComponent(lblKeyPress)This basically means that when we press shift+a, shift+b and shift+z, these should be trapped and something should be done. To do this, we define the event trapper in the page.
B4X:
'a keypress has been done
Sub mashkpress_keypress(value As Map)
'read the keypress done
Dim kp As String = value.Get("value")
lblKeyPress.Text = kp
lblKeyPress.refresh
select case kp
case "shift a"
do this
case "shift b"
do that
case "shift z"
back to then
end select
End SubRemember: In BuildPage add
B4X:
page.AddExtraJavaScriptFile("custom/keypress-2.1.5.min.js")Ta!
Upcoming: Linking keyboard input to an html element.
Last edited:
