Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Anyone know of a usable ZK keyboard component (for touch screen entry)
with numeric and/or alpabetic entry (like ipad entry)
I have seen one over on google code but no downloads and no activity for a year.
thanks for any pointers
Daniel
Daniel,
You didn't mention which version of ZK you are running but assuming you are at ZK 5 or above, I'd suggest something based on jQuery.
After a very quick search, I found this and this. Since the layouts are CSS based, you could make the keyboard/keypad look however you want.
Maybe one of those will give you some ideas.
HTH,
Todd
Thanks
For those interested I'll try to tell you how far I have got .
I'm making use of the Mottie keyboard linked here
ZK 5.06
Im not a javascript expert so bear with me..
What I was wanting to achieve was that the keyboard would popup when a field (eg login) got focus and then close when data accepted
I could not get this to work as it appears that the ZK mechanism keeps setting focus back to field after 'accept' key pressed so keyboard pops up again
So what I do is set the event opening keyboard to null for field and open it using a button beside the field
The other main issue with ZK is that the field ids are generated.. so we cant do straightforward linking of javascript without knowing field names.
<zk>
<!-- Start of Virtual Keyboard ... -->
<!-- jQuery & jQuery UI + theme (required) -->
<?link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" rel="stylesheet"?>
<?script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"?>
<?script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"?>
<!-- keyboard widget css & script (required) -->
<?link rel="stylesheet" href="/css/keyboard.css"?>
<?script src="/js/jquery.keyboard.js"?>
<!-- keyboard extensions (optional) -->
<?script src="/js/jquery.mousewheel.js"?>
<?script src="/js/touchPad.js"?>
<!-- End of Virtual Keyboard -->
The only one requiring explanation above is the last one (Ive externalised the code so I can use more than once)
function applyAlphaKeyboard(compId, btnuid){
compId = '#' + compId;
jQuery(compId).keyboard({
layout: 'qwerty',
autoAccept : true,
stayOpen : false,
openOn : null,
});
btnuid = '#' + btnuid;
jQuery(btnuid ).click(function(){
$(compId).getkeyboard().reveal();
});
}
As far as I can tell.. what it does is that it initialises the keyboard (the jQuery(compId).keyboard() call) and then sets up the click of the button to reveal that keyboard
jQuery(btnuid ).click(function() ...
The code mentions uuids (the generated ids for the ZK components)
So the code initialisation of the ZK part is as follows ..
<window id="loginwin" border="none" width="100%" height="100%"
use="com.xxx.LoginCtrl">
<attribute name="onCreate">
String jquery = "applyAlphaKeyboard('" + userName.getUuid() + "','"
+ btnKeyboardUser.getUuid() + "');";
Clients.evalJavaScript(jquery);
</attribute>
Within the windows the onCreate event will then call the appropriate client side javascript to initialise the jquery calls
Finally then the ZK components ...
<hbox>
<textbox
id="userName" name="j_username" width="97%">
</textbox>
<button id="btnKeyboardUser"
image="/images/vkeyboard/keyboard.png">
</button>
</hbox>
I hope this helps anyone else looking to develop such a mechanism
And if anyone solves the 'focus' issue so that I can remove the extra button I would be oblidged
Daniel
Asked: 2011-07-19 09:54:10 +0800
Seen: 432 times
Last updated: Feb 12 '12
