Include a java script keyboard
Added by David Kauderer almost 7 years ago
Hello,
I want to use a Java script onscreen keyboard with my WT application. I already found a nice one here: [[[https://github.com/Mottie/Keyboard]]]
The manual of the keyboard says that I have to place this peace of java script code to the
area of my html page:
@
$(function(){
$('#keyboard').keyboard();
});
@
I didn't find a way to place this peace of code, because I'm neither a java script nor a WT expert.
So any hints would be greatly appreciated.
Best, David
Replies (2)
RE: Include a java script keyboard - Added by David Kauderer almost 7 years ago
For everyone facing the same problem:
- include the needed js and css files
- include the javascript code using doJavaScript method at the respective container you want to use it.
For the above mentioned Keyboard I added the following to the hello WT sample:
@HelloApplication::HelloApplication(const WEnvironment& env)
: WApplication(env)
{
WApplication::instance()->requireJQuery("resources/keyboard/js/jquery-3.2.1.min.js");
WApplication::instance()->require("resources/keyboard/js/jquery.keyboard.js");
WApplication::instance()->require("resources/keyboard/js/jquery.mousewheel.js");
WApplication::instance()->require("resources/keyboard/js/jquery.keyboard.extension-typing.js");
useStyleSheet("resources/keyboard/css/jquery-ui.css");
useStyleSheet("resources/keyboard/css/keyboard.css");
setTitle("Hello world"); // application title
root()->addWidget(new WText("Your name, please ? ")); // show some text
nameEdit_ = new WLineEdit(root()); // allow text input
nameEdit_->addStyleClass("kbd");
//nameEdit_->setFocus(); // give focus
WPushButton *button
= new WPushButton("Greet me.", root()); // create a button
button->setMargin(5, Left); // add 5 pixels margin
root()->addWidget(new WBreak()); // insert a line break
root()->doJavaScript("$(function(){$('.kbd').keyboard();});");
[...]@
I commented out the line
@ nameEdit_->setFocus();@
to avoid the keyboard being directly open when loading the page.
Hope this might help someone in the future.
Best, David
RE: Include a java script keyboard - Added by Mark O'Donovan over 5 years ago
Thanks David, this was extremely useful for me.
Just to warn people that I had an issue with using the preview option on this keyboard when the input element was in a WLayout.
The preview would not appear until I removed the layout.
I also didn't need the following files:
WApplication::instance()->require("resources/keyboard/js/jquery.mousewheel.js");
WApplication::instance()->require("resources/keyboard/js/jquery.keyboard.extension-typing.js");