Implementing a split screen for software keyboard
This code example shows how to implement SW keyboard on Symbian^3 and Symbian Anna devices in split screen mode. Without the changes given here the keyboard will open but the UI of the app is hidden; with the changes the underlying app remains visible.
Article Metadata
Code Example
Tested with
Compatibility
Article
Download the sources here: media:splitscreenquick.zip.
Contents |
Project file
Add following libs to your project file under the Symbian section.
symbian {
TARGET.UID3 = 0xE025202D
# FOR ENABLING SPLIT SCREEN VIRTUAL KEYBOARD
LIBS += -lcone -lws32 -lavkon -leikctl -leikcoctl -luiklaf -lform -lfepbase
}Symbian native code
Implement a Qt slot that sets the appropriate flag to the text editor so that the SW keyboard is shown with the real UI controls. Remember to call this slot right after the SW keyboard is shown.
// Required includes and the flag
#ifdef Q_OS_SYMBIAN
#include <aknedsts.h>
#include <coeaui.h>
#include <coemain.h>
#include <w32std.h>
#define EAknEditorFlagEnablePartialScreen 0x200000
#endif
// Qt slot that sets the approriate flag to the text editor.
void SWKeyboardHandler::enableSplitSreen()
{
// The text editor must be open before setting the partial screen flag.
#ifdef Q_OS_SYMBIAN
MCoeFepAwareTextEditor *fte = CCoeEnv::Static()->AppUi()->InputCapabilities().FepAwareTextEditor();
// FepAwareTextEditor() returns 0 if no text editor is present
if (fte)
{
CAknEdwinState *state = STATIC_CAST(CAknEdwinState*, fte->Extension1()->State(KNullUid));
state->SetFlags(state->Flags() | EAknEditorFlagEnablePartialScreen);
}
#endif
}
main.cpp
Connect the signal from QML to enableSplitscreen slot.
// Setup the app to call the code code on up when SW keyboard is shown
QmlApplicationViewer viewer;
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
viewer.setMainQmlFile(QLatin1String("qml/splitscreenquick/main.qml"));
// Contains a slot to set the enable partial screen flag to
// the text editor.
SWKeyboardHandler kbHandler;
// The object that contains the QML root element is retrieved
// from Declarative view.
QObject *rootQml = qobject_cast<QObject*>(viewer.rootObject());
QObject::connect(rootQml, SIGNAL(swKeyboardOpened()),
&kbHandler, SLOT(enableSplitSreen()));
Qt Quick UI
In the QML tell the Qt code to enable the split screen SW keyboard right after the SW keyboard is opened. The following QML code implements a UI that has nice text edit with scrolling capability, scaling for portrait and landscape. The TextEdit is placed on the upper half of the UI so that the SW keyboard won't get on top of the control.
import QtQuick 1.0
Rectangle {
id: main
// Interface for the Qt code.
signal swKeyboardOpened()
width: 360; height: 360
color: "gray"
// Nice border for the text edit.
Rectangle {
anchors {
top: parent.top
bottom: parent.verticalCenter
left: parent.left
right: parent.right
margins: 30
}
border.color: "black"
border.width: 2
color: "white"
radius: 8
clip: true
// Provides scrollability for the text edit.
Flickable {
id: flickable
anchors {
fill: parent
margins: 10
}
contentHeight: textEdit.height
// Used to scroll the flickable so that the cursor
// is visible.
function ensureVisible(r)
{
if (contentX >= r.x)
contentX = r.x;
else if (contentX+width <= r.x+r.width)
contentX = r.x+r.width-width;
if (contentY >= r.y)
contentY = r.y;
else if (contentY+height <= r.y+r.height)
contentY = r.y+r.height-height;
}
// Used to catch mouse clicks that hits to the rectangle
// but not to the text edit, which is quite small at the
// start of the application.
MouseArea {
width: flickable.width; height: flickable.height
onClicked: {
textEdit.focus = true;
textEdit.openSoftwareInputPanel();
}
}
TextEdit {
id: textEdit
width: flickable.width
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
focus: true
text: "Edit me!"
color: "black"
// When the text edit gets the focus, signal is emitted
// to the Qt side, where we will set the special flag to
// open the SW keyboard in split view mode.
onFocusChanged: {
if(focus == true) {
main.swKeyboardOpened();
}
}
// Whenever the cursor is moved scroll the flickable so that
// the cursor is actually visible.
onCursorRectangleChanged: {
flickable.ensureVisible(cursorRectangle)
}
}
}
}
}
Postconditions
The snippet demonstrated how to implement the platform SW keyboard on a split screen mode in a Qt Quick UI.
Contents
Digitalsurgeon - Using only Native Symbian C++
Here is split vkb with only native Symbian: Using_split_screen_keyboard_in_Symbian_Anna_and_beyond
digitalsurgeon 14:35, 1 September 2011 (EEST)
Molbal - Alternative solution
Or, as an alternative solution, insert
Into the main.cpp.
Regardsmolbal 21:46, 20 October 2011 (EEST)
Pipacs - Obsolete?
This article seems to be obsolete with Qt 4.7.4.pipacs 20:50, 5 February 2012 (EET)
Hamishwillee - Hi Pipacs, on Belle, but still relevant on Anna
This is fixed in Belle, but is still relevant in Anna. The split screen means that the app UI is seen on top of the virtual keyboard. Without the specific code (the snippet) the keyboard will open but the UI of the app is hidden and there will blank text area on top of the KB.hamishwillee 02:14, 9 March 2012 (EET)