Custom keyboard tricks in SailfishOS

@Custom Keyboard

This is a collection of custom keyboard components, helpers, instructions, 
tips and tricks to help custom keyboard creation for SailfishOS and Jolla Phone.

CustomAccentedKey.qml

// Copyright (C) 2013 Jolla Ltd.
// Contact: Pekka Vuorela <pekka.vuorela@jollamobile.com>
// fixed _accentedText picker: Kaacz <kaa@iol.cz>
// Renamed for RPM by Janne Edelman, Twitter: @JanneEdelman

import QtQuick 2.0
import Sailfish.Silica 1.0
import com.jolla.keyboard 1.0
import ".."

CharacterKey {
    property string deadKeyAccents
    property string deadKeyAccentsShifted
    property string _deadKeyAccents: keyboard.isShifted ? deadKeyAccentsShifted : deadKeyAccents
    property int _deadAccentIndex: keyboard.deadKeyAccent !== "" ? _deadKeyAccents.indexOf(keyboard.deadKeyAccent) : -1

    /* original code - i don't know what is mean .. but not work for both type of definition in deadKeyAccents
     * property string _accentedText: _deadAccentIndex > -1 && !keyboard.inSymView ? _deadKeyAccents.substr(_deadAccentIndex*2+1, 1) : ""
     *
     * code for definition  deadKeyAccents: "´éˇě"
     * property string _accentedText: _deadAccentIndex > -1 && !keyboard.inSymView ? _deadKeyAccents.substr(_deadAccentIndex+1, 1) : ""
     *
     *  code for definition  deadKeyAccents: "´ˇéě"
     */
    property string _accentedText: _deadAccentIndex > -1 && !keyboard.inSymView ? _deadKeyAccents.substr((_deadKeyAccents.length/2)+_deadAccentIndex, 1) : ""
    
    useBoldFont: _deadAccentIndex > -1
    keyType: _accentedText !== "" ? KeyType.PopupKey : KeyType.CharacterKey
    _keyText: _accentedText !== "" ? _accentedText
                                   : attributes.inSymView && symView.length > 0 ? (attributes.inSymView2 ? symView2 : symView)
                                                                                : (attributes.isShifted ? captionShifted : caption)
}

CustomArrowKey.qml

/* Copyright (c) 2014 Janne Edelman <janne.edelman@gmail.com>
 * Copyright (C) 2012-2013 Jolla Ltd.
 * All rights reserved.
 * 
 * Redistribution and use in source and binary forms, with or without modification,
 * are permitted provided that the following conditions are met:
 *
 * Redistributions of source code must retain the above copyright notice, this list
 * of conditions and the following disclaimer.
 * Redistributions in binary form must reproduce the above copyright notice, this list
 * of conditions and the following disclaimer in the documentation and/or other materials
 * provided with the distribution.
 * Neither the name of Nokia Corporation nor the names of its contributors may be
 * used to endorse or promote products derived from this software without specific
 * prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL
 * THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
 * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
 * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

import QtQuick 2.0
import com.meego.maliitquick 1.0
import Sailfish.Silica 1.0
/*   Modify import below to meet your keyboard custom file location.
 *   Default import expects this file to be located in
 *
 *       /usr/share/maliit/plugins/com/jolla/custom_XX
 *
 *   where XX is language code or name of your keyboard
 */
import ".."

FunctionKey {
    property string direction
    property int arrowKeyWidth: 52
    icon.source: ((direction === "up") ? "image://theme/icon-l-up"
               :  (direction === "down") ? "image://theme/icon-l-down"
               :  (direction === "left") ? "image://theme/icon-l-left"
               :  (direction === "right") ? "image://theme/icon-l-right" : "") + (pressed ? ("?" + Theme.highlightColor) : "")
    repeat: true
    key: Qt.Key_unknown
    width: arrowKeyWidth
    
    onPressedChanged: {
	if(pressed) {
	    arrowKeyPress()
	    if(repeat) {
		autorepeatTimer.interval = 800
		autorepeatTimer.start()
	    }
	} else {
	    autorepeatTimer.stop();
	}
    }

    Timer {
        id: autorepeatTimer
        repeat: true

        onTriggered: {
            interval = 80
            if (pressed) {
                arrowKeyPress()
            } else {
                stop()
            }
        }
    }
    
    function arrowKeyPress() {
	switch(direction) {
            case "up":
            MInputMethodQuick.sendKey(Qt.Key_Up, 0, "", Maliit.KeyClick)
            break
            case "down":
            MInputMethodQuick.sendKey(Qt.Key_Down, 0, "", Maliit.KeyClick)
            break
            case "left":
            MInputMethodQuick.sendKey(Qt.Key_Left, 0, "", Maliit.KeyClick)
            break
            case "right":
            MInputMethodQuick.sendKey(Qt.Key_Right, 0, "", Maliit.KeyClick)
            break;
            default:
            break;
        }
    }
}

CustomDeadKey.qml

// Copyright (C) 2013 Jolla Ltd.
// Contact: Pekka Vuorela <pekka.vuorela@jollamobile.com>
// Added rectangle for special key recognition: Kaacz <kaa@iol.cz>
// Renamed for RPM by Janne Edelman, Twitter: @JanneEdelman

import QtQuick 2.0
import Sailfish.Silica 1.0
import com.jolla.keyboard 1.0
import com.meego.maliitquick 1.0
import ".."

CharacterKey {
    id: deadKey2

    property int _charactersWhenPressed
    property bool _quickPicking

    keyType: !keyboard.inSymView ? KeyType.DeadKey : KeyType.CharacterKey
    useBoldFont: keyboard.deadKeyAccent === text
    showPopper: keyType === KeyType.CharacterKey

    Rectangle {
      color: parent.pressed ? Theme.highlightBackgroundColor : Theme.primaryColor
      opacity: parent.pressed ? 0.6 : 0.07
      radius: geometry.keyRadius
      anchors.fill: parent
      anchors.margins: Theme.paddingMedium
      visible: !keyboard.inSymView
    }

    onPressedChanged: {
        if (pressed
             && !keyboard.inSymView
             && keyboard.deadKeyAccent !== text
             && keyboard.lastInitialKey === deadKey) {
            keyboard.deadKeyAccent = text
            _quickPicking = true
        } else {
            _quickPicking = false
        }

        _charactersWhenPressed = keyboard.characterKeyCounter
    }

    onClicked: {
        if (keyboard.characterKeyCounter > _charactersWhenPressed) {
            keyboard.deadKeyAccent = ""
            keyboard.updatePopper()
        } else if (!_quickPicking) {
            if (keyboard.deadKeyAccent !== text && !keyboard.inSymView) {
                keyboard.deadKeyAccent = text
            } else {
                keyboard.deadKeyAccent = ""
            }
        }
    }
}

Disable autocaps and preedit

If you want to hack autocaps and preedit off in your custom keyboard that can be done easily with few lines in layout QML file:
Code:

KeyboardLayout {
    type: "custom"  // enables possibility to use own InputHandler, disables autocaps and text prediction
    Component.onCompleted: {
        keyboard.autocaps = false                    // disables autocaps
        MInputMethodQuick.predictionEnabled = false  // disables text prediction
    }
...
}