Project

General

Profile

Forums » Help »

DKInclude a java script keyboard

Added by David Kauderer about 9 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:
@

<script> $(function(){ $('\#keyboard').keyboard(); }); </script>

@

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)

DK RE: Include a java script keyboard - Added by David Kauderer about 9 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

MO RE: Include a java script keyboard - Added by Mark O'Donovan almost 8 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");

    (1-2/2)