PDA

View Full Version : Ext.ux.VirtualKeyboard and its plugin



efattal
12 Sep 2008, 2:02 AM
Hi all,

Here's a component (Ext.ux.VirtualKeyboard) that provides a multilingual virtual keyboard inspired from GreyWyvern's nice one (http://www.greywyvern.com/code/js/keyboard.html).

I adapted the code to create an ExtJS component which can be used in different ways:

As a component
http://efattal.fr/extjs/examples/virtualkeyboard/screenshot1.jpg (http://efattal.fr/extjs/examples/virtualkeyboard/)


Through a plugin (Ext.ux.plugins.VirtualKeyboard) with direct call
http://efattal.fr/extjs/examples/virtualkeyboard/screenshot2.jpg (http://efattal.fr/extjs/examples/virtualkeyboard/)


Through a plugin with indirect call


See the attached example source code for different types of instantiation methods, config options and events

LIVE DEMO HERE (http://efattal.fr/extjs/examples/virtualkeyboard/)

Tested with ext-2.2 and FF2/3, IE6/7, Chrome, Opera, Safari

Hope this can be useful for multilingual projects.

wasp
12 Sep 2008, 5:22 AM
Really good, thank you very much!

NBRed5
12 Sep 2008, 7:12 AM
This is the sort of great user contribution that has made ext so exciting for me.

jay@moduscreate.com
13 Sep 2008, 3:25 AM
Great contribution! One suggestion would be to unlock shift after one click, else it works like a caps lock.

efattal
13 Sep 2008, 11:10 AM
One suggestion would be to unlock shift after one click, else it works like a caps lock.

Thanks for the suggestion. It was a bug and has been corrected (in the attachement and in the demo).

ThorstenSuckow
13 Sep 2008, 3:58 PM
Sweet little gadget! Really nice!

ajaxvador
13 Sep 2008, 4:21 PM
verry nice

sanjshah
14 Sep 2008, 4:11 AM
hey this is very good and looks nice also!

One thing I noticed is you have some text already entered and move to insert some more text inbetween the new text is entered at the end not where the cursor is - is this a bug?

Sanj

efattal
14 Sep 2008, 6:53 AM
One thing I noticed is you have some text already entered and move to insert some more text inbetween the new text is entered at the end not where the cursor is - is this a bug?

You're right. Bug corrected in the current version.

abe.elias
14 Sep 2008, 9:30 AM
excellent work!

wm003
15 Sep 2008, 11:01 PM
B) very nice extension. Thank you very much for sharing!

cmendez21
29 Sep 2008, 2:45 PM
An excellent work..! =D>
gonna try it

Remy
18 Nov 2008, 3:24 AM
Very nice component! I noticed when using IE (7 in this case) and selecting shift in US and UK, the ampersand and "less than" don't render in the keyboard control? Also, spacebar seems to be affected when using shift and doesn't return even after shift has been depressed again. I tried modifying the source to place the unicode version (tested the ampersand) but this didn't appear to work. Fantastic piece of work though and thanks again for sharing!

zhw511006
19 Nov 2008, 4:36 AM
Very nice extension. Thank you very much for sharing!

i22somoa
3 Mar 2009, 2:09 AM
Hi! Sorry for my english, but I'm new using AJAX, and wanted to know how to add the VirtualKeyboard to my GWT proyect.

Thanks!

enpasos
7 Jul 2009, 2:20 PM
Very useful extension!
Does it run on extjs 3?

jdarbyshire
9 Sep 2009, 10:23 PM
As per the following post:
http://www.extjs.com/forum/showthread.php?t=79998

Is this a bug?

This is running on Ext3.

Lmouse
10 Sep 2009, 7:00 PM
An excellent work=D>

Lmouse
10 Sep 2009, 7:12 PM
i dont download, why ?
emil : li6151770@126.com

n3v3rl0v3
29 Sep 2009, 7:14 AM
Can anybody how to use it in my existing form on my website like: login, registration etc??

I tried using i cannot make it work.

From the file i downloaded in zip, i need to put all three divs to show keyboard otherwise it doesnt show any form and keyboard.
<ul>
<li><h2>As a component targeted to an input field:</h2>
<div id="virtualkeyboard-control"></div>
</li>
<li><h2>Through the Ext.ux.plugins.VirtualKeyboard plugin on text fields and textareas:</h2>
<div id="virtualkeyboard-form"></div>
</li>
<li><h2>Through the Ext.ux.plugins.VirtualKeyboard plugin called dynamically (from a button in the status bar for example) :</h2>
<div id="virtualkeyboard-status"></div>
</li>
</ul>
After that, m unable to use it in my existing form : login.php, registration.php. Whenever i use keyboard, it starts filling fields present in already made forms which appear by these divs:
<div id="virtualkeyboard-control">
<div id="virtualkeyboard-form">
<div id="virtualkeyboard-status"></div>

I will be greatful if you can help me to integrate keyboard from this library into my forms (i.e: login, registration etc).

frikazoid
15 Oct 2009, 5:56 AM
Hi all!

Please, can someboby help me make buttons bigger?
I'm doesn't see simple solution. =(

FabriceTerrasson
10 Nov 2009, 3:21 AM
Hi, it's a great plugin, thank you efattal.

I have an issue about translating the button text 'Close' to 'Fermer'. I pinpointed that it is an Ext.Toolbar but cannot reach the particular button text.

http://extjs.efattal.fr/examples/virtualkeyboard/screenshot2.jpg
'Close' close to separator and 'Type accented letters'

FabriceTerrasson
24 Nov 2009, 12:21 AM
Oups, found.
in plugins/Ext.ux.plugins.VirtualKeyboard.js :


this.keyboard.getTBar().add('-', new Ext.Button({
text: this.keyboardConfig.closeButtonText || 'Close',
listeners: {
'click': this.collapseKeyboard,
scope: this
},
scope: this
}));

Hi, it's a great plugin, thank you efattal.

I have an issue about translating the button text 'Close' to 'Fermer'. I pinpointed that it is an Ext.Toolbar but cannot reach the particular button text.

...
'Close' close to separator and 'Type accented letters'

Jazz.Fog
3 Dec 2009, 9:19 AM
Good work!

But, how can i use this plugin with htmlEditor?

trancer
4 May 2010, 12:20 AM
Hello.

Is there a way to make keys on this keyboard bigger? A want to use it for a tablet PC web application. The application will be used in a very busy condition. People will have to quickly recognise the letters on the keyboard.

wm003
4 May 2010, 2:06 AM
Is there a way to make keys on this keyboard bigger?
Should be easily done by modifying virtualkeyboard.css according to your needs

brk11
28 Jun 2010, 8:03 AM
I have problems when I enable languageSelection in ExtJS 3.2.1. First, I have to put readOnly:false in language selection combo to be able to select a new language. But then, when buildKeys function is called on select listener of the combo, I get an error at line 396: "this.Languages[this.language] is undefined".

This is a scope problem, but I don't know how can I solve it!

spizzico7
22 Jul 2010, 2:16 AM
It works on Sencha Touch?

enpasos
7 Aug 2010, 8:22 AM
Is there a way to make the real keyboard act like the virtual keyboard while a particular virtual keyboard is open?
If so the users could switch typing to the real keyboard with using the vitual keyboard as a key binding hint.
Would be very useful! :)

ibnesayeed
11 Aug 2010, 7:32 PM
Is there a way to make the real keyboard act like the virtual keyboard while a particular virtual keyboard is open?
If so the users could switch typing to the real keyboard with using the vitual keyboard as a key binding hint.
Would be very useful! :)

I needed this feature and I have done it by some monkey patching. I also did some language specific changes like support for RTL languages etc. Once I will be satisfied with the changes I made, I will release it for sure.

enpasos
11 Aug 2010, 9:41 PM
I needed this feature and I have done it by some monkey patching. I also did some language specific changes like support for RTL languages etc. Once I will be satisfied with the changes I made, I will release it for sure.

Great! I am looking very much forward to it :)

Nitro
9 Sep 2010, 11:48 PM
I have problems when I enable languageSelection in ExtJS 3.2.1. First, I have to put readOnly:false in language selection combo to be able to select a new language. But then, when buildKeys function is called on select listener of the combo, I get an error at line 396: "this.Languages[this.language] is undefined".

This is a scope problem, but I don't know how can I solve it!

At the this.language = ... line change


'select': function(combo, record) {
this.language = combo.value;
this.buildKeys();
},


Voila, language selection under 3.2.1 works again.

Gordon25
4 May 2012, 5:15 AM
How to port the code into GXT ?

thx !

sgrandhi
16 Aug 2012, 5:36 AM
I am trying to use the plugin with EXTJS4 in IE8. It looks like the problem is with z-index. I am not sure how to fix the problem. Has anyone faced this problem? If so, what is the solution?

Note: The plugin seems to work fine in FF & Chrome.

siddha.bhagwan
26 Aug 2013, 11:25 PM
I have downloaded this plugin zip, and tried to run at my end. What I did is given below:
1) Put virtualkeyboard folder in extjs-4.1.
2) Include Ext.ux.VirtualKeyboard.js, Ext.ux.plugins.VirtualKeyboard.js and virtualkeyboard.css in jsp which is loading whole application.

Problem 1 : I get error Uncaught TypeError: Object #<Object> has no method 'reg' at
Ext.reg('virtualkeyboard', Ext.ux.VirtualKeyboard) in
Ext.ux.VirtualKeyboard.js file


3) Make on view as given below:
Ext.define(
'SAP.view.VirtualKeyBoard',
{
extend : 'Ext.form.Panel',
alias : 'widget.virtualkeyboard',
itemId : 'virtualKeyBoard',
initComponent : function() {
Ext.apply(this, {
items : this.buildItems()
});
this.callParent(arguments);
},...................
in this there is one button with listener
click: function(){
plugin.expand();}
on click that button there while debugging i found that
in file "Ext.ux.plugins.VirtualKeyboard.js" expand method "this.activeTarget" is coming undefined
expand: function(){
if(this.activeTarget){
this.activeTarget.expandKeyboard();
}

Please help