Keyboard Sample

This sample app demonstrates a simple technique for managing your screen layout while taking into account whether the virtual keyboard is displayed or not, automatically handling landscape or portrait mode, and dealing with size differences between different BB10 devices (e.g. PlayBook or Dev Alpha).

Features Demonstrated

1. bbpy.app.Application "keyboardChanged" signal
2. QML module BlackBerryPy's KeyboardProxy component
3. use of anchoring to adjust positioning of other elements as the keyboard visibility and size changes

When the keyboard visibility or size changes, the Qt "blackberry" plugin reports the changes through the desktop widget's desktopResized signal and a change in the reported availableGeometry. The bbpy.Application object reports this via a keyboardChange signal. If you "import BlackBerryPy 0.9" and add a KeyboardProxy component to your root element, you can use this component's size and position to tell your layout what portion of the screen is used by the keyboard. The simplest technique is to anchor the bottom of some other component to the top of the KeyboardProxy:

import QtQuick 1.1
import BlackBerryPy 0.9

Rectangle {
    KeyboardProxy { id: kb }
    Rectangle {
        color: kb.visible ? "red" : "blue"
        anchors.top: parent.top
        anchors.bottom: kb.top
        margins: 10
        width: parent.width
    }
}

With the above code, you should see a blue rectangle filling most of the screen when the keyboard is not visible. When you make the keyboard appear (bottom-left corner swipe into the screen area) the rectangle turns red and adjusts itself to fit the available space. The 10-pixel margin is used to show a gap above the top of the keyboard to prove that it is really adjusting and not merely being overlaid by the keyboard.

Get It

You can find the code in the KeyboardSample/ folder of the repository, and a signed .bar file on our downloads page.

Disclaimer: We're new to PySide. We're new to Qt. We're new to QML. The PlayBook Qt port is still a work in progress. This is one of our first samples. Be gentle. ;-)

Seriously, the code almost certainly is not yet a good demonstration of how one should actually do some of these things. It looked so useful, however, that we couldn't hold it back just to protect our own egos. And hey, it's open source! Contributions are welcome...