Customize QML Virtual Keyboard

Chen, Ping-Hsun edited this page Jan 13, 2014 · 8 revisions
Clone this wiki locally

How to Enable Virtual Keyboard in WebView

SlateKit project comes with a very simple virtual keyboard and several input methods, and the Shell web browser is using it. This page describes the instructions on how to integrate the virtual keyboard and input methods into your QML application, in a single window/view, without the need of im-modules or input method engine like Maliit or IBus.

If you're looking for a real Qt InputModule, here's a cool implementation of QPlatformInputContext by Tomasz Olszak.

Compile and install Fakekey plugin

cd slatekit/IME/fakekey && qmake && make 

This plugin is based on QKeyEvent, if you have X11 dependency you may also check out the libfakekey implementation.

Add keyboard area into QML view

Here's an example (with animation for hide/show):

Item { 
    id: keyboard 
    width: 960
    height: 240 
    state: "hide"
    anchors { horizontalCenter: parent.horizontalCenter; 
        bottom: parent.bottom; bottomMargin: -240 }
    Loader { 
        id: keyboardLoader
        anchors.fill: parent
        source: "English.qml" // the actual implementation of keyboard layout 
    }
    states: [ State { name: "show" }, State { name: "hide" } ]
    transitions: [ 
        Transition {
            from: "show"; to: "hide"
            PropertyAnimation { target: keyboard; properties: "anchors.bottomMargin"; 
                to: "-240"; duration: 150; easing.type: Easing.InOutQuad; }
        },
        Transition {
            from: "hide"; to: "show"
            PropertyAnimation { target: keyboard; properties: "anchors.bottomMargin"; 
                to: "0"; duration: 50; easing.type: Easing.InOutQuad; }
        }
    ]
}

Add user script in WebView

In the main QML file, after import QtWebKit.experimental 1.0:

experimental.userScripts: [Qt.resolvedUrl("inputmethod.js")];
experimental.onMessageReceived: {
    var data = JSON.parse(message.data);
    switch (data.type) {
        case 'input': {
            keyboard.state = data.state;
            break;
        }
    }
}

And inputmethod.js with following content:

window.document.addEventListener('click', (function(e) { 
    if (e.srcElement.tagName === ('INPUT'||'TEXTAREA')) {
        var inputContext = new Object({'type':'input', 'state':'show'})
        navigator.qt.postMessage(JSON.stringify(inputContext))
    }
}), true); 
window.document.addEventListener('focus', (function() { 
    if (e.srcElement.tagName === ('INPUT'||'TEXTAREA')) {
        var inputContext = new Object({'type':'input', 'state':'show'})
        navigator.qt.postMessage(JSON.stringify(inputContext))
    }
}), true);
window.document.addEventListener('blur', (function() {
    var inputContext = new Object({'type':'input', 'state':'hide'})
    navigator.qt.postMessage(JSON.stringify(inputContext))
}), true);

How to Enable Chinese Handwriting / 如何啟用中文手寫

Install Zinnia, Tegaki and plugin / 安裝 Zinnia、Tegaki 及外掛

sudo apt-get install libzinnia-dev tegaki-zinnia-traditional-chinese
cd SlateKit/IME/zinnia && qmake && make 

Screenshot / 運作抓圖

zinnia