Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Workaround to hide VKB in QML apps (Known Issue)

From Wiki
Jump to: navigation, search
gnuton (Talk | contribs)
(Gnuton - - C++ Solution)
gnuton (Talk | contribs)
(Gnuton - - Pure QML Solution)
Line 29: Line 29:
 
In this page we will talk about how to work around this, and which solutions are available.
 
In this page we will talk about how to work around this, and which solutions are available.
  
 +
[[Category:Qt]][[Category:Qt Mobility]]
 
== Pure QML Solution ==
 
== Pure QML Solution ==
Many and many times you could have heard that to get around this problem you should use closeSoftwareInputPanel QML method. Well, here is an example which shows you how to use it.
+
Many and many times you could have heard that to get around this problem you should use [http://doc.qt.nokia.com/4.7-snapshot/qml-textinput.html#closeSoftwareInputPanel-method closeSoftwareInputPanel] QML method. Well, here is an example which shows you how to use it.
 
The example below is the implementation of this fix inside a simple QML app made up by a root Rectangle element and a textedit. The virtual keyboard is shown when the textedit is clicked, but the virtual keyboard is not hidden when the user taps outside.
 
The example below is the implementation of this fix inside a simple QML app made up by a root Rectangle element and a textedit. The virtual keyboard is shown when the textedit is clicked, but the virtual keyboard is not hidden when the user taps outside.
 
The main problem here is related to the focus. Tapping outside the textedit element is not enough to change the focus and close the VKB, so we have to add some code to fulfill these duties.
 
The main problem here is related to the focus. Tapping outside the textedit element is not enough to change the focus and close the VKB, so we have to add some code to fulfill these duties.
Line 72: Line 73:
 
</code>
 
</code>
  
[[Category:Qt]][[Category:Qt Mobility]]
 
 
== MeeGo Components are not affected! ==
 
== MeeGo Components are not affected! ==
 
While this bug affects plain QML apps, MeeGo component based apps are not affected by this bug at all! So if possibl you should use the Meego elements set instead of the standard QML ones.
 
While this bug affects plain QML apps, MeeGo component based apps are not affected by this bug at all! So if possibl you should use the Meego elements set instead of the standard QML ones.
 
The only one drawback here is the compatibility with Symbian set. In fact, if your target is to run the app both on Symbian and MeeGo polatforms then the solution shown before is the right way to go.
 
The only one drawback here is the compatibility with Symbian set. In fact, if your target is to run the app both on Symbian and MeeGo polatforms then the solution shown before is the right way to go.

Revision as of 10:16, 28 October 2011

This article explains how to close the virtual keyboard in pure QML apps

Article Metadata
Article
Created: ()
Last edited: gnuton (28 Oct 2011)

Introduction

Pure QML application on Harmattan suffer of a bug which is quite annoying. The bug I'm talking about is related to the Virtual Keyboard (VKB). Basically when a QML element able to listen for key events receives the focus, a virtual keyboard shows up and user can enter the text in the element by tapping on the keyboard itself. When user finished to insert text and tap outside the element, the previous element doesn't actually lose the focus and the keyboard is not closed automatically going against the logic way of usage and against the Harmattan guide lines. This is not just annoying, but mess up the vocabulary other than the usability.

In this page we will talk about how to work around this, and which solutions are available.

Pure QML Solution

Many and many times you could have heard that to get around this problem you should use closeSoftwareInputPanel QML method. Well, here is an example which shows you how to use it. The example below is the implementation of this fix inside a simple QML app made up by a root Rectangle element and a textedit. The virtual keyboard is shown when the textedit is clicked, but the virtual keyboard is not hidden when the user taps outside. The main problem here is related to the focus. Tapping outside the textedit element is not enough to change the focus and close the VKB, so we have to add some code to fulfill these duties. The fix is implemented basically in two parts.

  • MouseArea - a big and transparent to events Mousarea overlays the entire application. This allows us to give the focus to the clicked item
  • onActiveFocusChanged slot inside the any element able to receive text input. This slot actually close the VKB

The rest of example is pretty simple and the complete code can be seen in the block of code below.

import QtQuick 1.0
Rectangle {
id: root
width: 800
height: 600
focus: true
Rectangle {
width: 360
height: 360
color: "cyan"
TextEdit {
id: mText
anchors.fill: parent
onActiveFocusChanged: {
if (!mText.activeFocus) mText.closeSoftwareInputPanel();
}
}
}
MouseArea {
anchors.fill: parent
onPressed: {
// Let the mousePress events go to below items
mouse.accepted = false;
// Clicked item below the MouseArea gets the focus
var selectedItem = root.childAt(mouse.x, mouse.y);
if (!selectedItem) selectedItem = root;
selectedItem.focus = true;
}
}
}

MeeGo Components are not affected!

While this bug affects plain QML apps, MeeGo component based apps are not affected by this bug at all! So if possibl you should use the Meego elements set instead of the standard QML ones. The only one drawback here is the compatibility with Symbian set. In fact, if your target is to run the app both on Symbian and MeeGo polatforms then the solution shown before is the right way to go.

121 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×