How to implement an overlay window with a textfield?

Question

1

How to implement an overlay window with a textfield?

asked 2019-06-22 18:26:42 +0300

jsommer
3324 ●97 ●142 ●154

I want to provide an interactive overlay that can be shown in any situation except for the lock screen. I tested successfully the solution approach of @coderus in the following projects:

Unfortunately, the virtual keyboard in not shown for a TextField or TextArea in an overlay. I think this is because of the notification layer, that's maybe above the layer of the keyboard. Here is the related code snipped of the viewhelper.cpp class:

overlayView->create();
QPlatformNativeInterface *native = QGuiApplication::platformNativeInterface();
native->setWindowProperty(overlayView->handle(), QLatin1String("CATEGORY"), "notification");

I also get this warning in the log file. I assume it is caused by the TextArea qml type:

[W] unknown:136 - file:///usr/lib/qt5/qml/Sailfish/Silica/private/TextBase.qml:136: ReferenceError: __silica_applicationwindow_instance is not defined

I found a workaround for a demonstrator, unfortunately not for something, that I could release. Sailfish OS uses something similar for VPN settings. If the system assumes, that the user credentials become invalid, an overlay pop ups to re-enter correct ones. I couldn't find any qml file for this use case. I had a look at /usr/share/jolla-settings/pages/vpn on my developer device. I can find four qml files, which doesn't include that overlay. Maybe it's part of the compiled code? I would welcome any suggestions or even solutions.

By the way, the hierarchy of my overlay is the following:

Item {
    id: root
    ...
    Rectangle {
        id: panel
        ...
        SilicaFlickable {
            ...
            Column {
                ...
                TextField {
                    ...
               }
          }
     }
}

I could also use a TextAres, but the behaviour is the same.

edit retag flag offensive close delete

Comments

The same problem was found in quickbar when implementing the search functionality(keyboard not displayed from notification layer); as a text box couldnt be used, the way it was solved was to present a spinner with the alphabet from which the user could pick letters. Im not sure it being "just" a matter of layers, tho, as notification layers do not expect to have (text) input (iirc somewhere in the open lipstick codebase it's mentioned) - but I might have understood it wrong :)

tortoisedoc ( 2019-06-22 20:23:41 +0300 )edit

Did you have a look at the files in /usr/share/lipstick-jolla-home-qt5/connectivity? I think the files for WLan and VPN settings popups are there, but I don't know, if that can help you.

KuroNeko ( 2019-06-22 22:05:03 +0300 )edit

@KuroNeco Great idea. Here is, what I found. Jolla seems to be making some effort to display this dialog.

The VpnAgent.qml is a SystemWindow, that is defined for the system UI of Sailfish OS. The SystemWindow itself is a FocusScope, a standard QtQuick type to support keyboard input:

Focus scopes assist in keyboard focus handling when building reusable QML components. All the details are covered in the keyboard focus documentation.

The VpnAgent.qml seems like quite a hack with a fake window:

property alias __silica_applicationwindow_instance: fakeApplicationWindow

Item {
    id: fakeApplicationWindow
    // suppresses warnings by context menu
    function _undim() {}
    function _dimScreen() {}
}

Furthermore the VpnAgent.qml contains a lot of propretiary stuff:

import QtQuick 2.0
import Sailfish.Silica 1.0
import Sailfish.Lipstick 1.0
import com.jolla.lipstick 0.1
import org.nemomobile.lipstick 0.1
import "../systemwindow"
import "../main"

At least, the element contains a SystemDialogLayout and a SilicaFlicable

SystemDialogLayout {
    id: dialogLayout

    contentHeight: content.height
    bottomPadding: 0
    onDismiss: vpnDialog.closeDialog(false)
}

SilicaFlickable {
    id: content
    ...

}

I tried a different, easy aprroach to show a Window, that is pure QtQuick QML type. Surprisingly, I get the following error:

[W] unknown:648 - file:///usr/share/Volla/qml/overlay.qml:648:5: Window is not a type 
         Window { 
         ^

Sailfish apps should be able to use basic QML types, shouldn't they?

jsommer ( 2019-06-23 15:41:03 +0300 )edit

The same problem was found in quickbar when implementing the search functionality(keyboard not displayed from notification layer); as a text box couldnt be used, the way it was solved was to present a spinner with the alphabet from which the user could pick letters. Im not sure it being "just" a matter of layers, tho, as notification layers do not expect to have (text) input (iirc somewhere in the open lipstick codebase it's mentioned) - but I might have understood it wrong :)
tortoisedoc ( 2019-06-22 20:23:41 +0300 )edit
Did you have a look at the files in /usr/share/lipstick-jolla-home-qt5/connectivity? I think the files for WLan and VPN settings popups are there, but I don't know, if that can help you.
KuroNeko ( 2019-06-22 22:05:03 +0300 )edit
@KuroNeco Great idea. Here is, what I found. Jolla seems to be making some effort to display this dialog.
The VpnAgent.qml is a SystemWindow, that is defined for the system UI of Sailfish OS. The SystemWindow itself is a FocusScope, a standard QtQuick type to support keyboard input:
Focus scopes assist in keyboard focus handling when building reusable QML components. All the details are covered in the keyboard focus documentation.
The VpnAgent.qml seems like quite a hack with a fake window:
property alias __silica_applicationwindow_instance: fakeApplicationWindow Item { id: fakeApplicationWindow // suppresses warnings by context menu function _undim() {} function _dimScreen() {} }
Furthermore the VpnAgent.qml contains a lot of propretiary stuff:
import QtQuick 2.0 import Sailfish.Silica 1.0 import Sailfish.Lipstick 1.0 import com.jolla.lipstick 0.1 import org.nemomobile.lipstick 0.1 import "../systemwindow" import "../main"
At least, the element contains a SystemDialogLayout and a SilicaFlicable
SystemDialogLayout { id: dialogLayout contentHeight: content.height bottomPadding: 0 onDismiss: vpnDialog.closeDialog(false) } SilicaFlickable { id: content ...
}
I tried a different, easy aprroach to show a Window, that is pure QtQuick QML type. Surprisingly, I get the following error:
[W] unknown:648 - file:///usr/share/Volla/qml/overlay.qml:648:5: Window is not a type Window { ^
Sailfish apps should be able to use basic QML types, shouldn't they?
jsommer ( 2019-06-23 15:41:03 +0300 )edit

Answer 1

0

answered 2019-06-22 20:29:25 +0300

coderus

22985 ●253 ●337 ●370

https://coderus.openrepos...

updated 2019-06-22 20:36:28 +0300

Try to use SystemDialogWindow from Sailfish.Lipstick 1.0 as root item

Also yet to use different layer for overlay, dialog for example

edit flag offensive delete publish link

Comments

Is this available from outside lipstick itself / "normal" apps?

tortoisedoc ( 2019-06-22 20:33:22 +0300 )edit

I reply to myself; it is usable, but doesnt bring up the keyboard. No cookie, what an emotional rollercoaster! :| . The zooming on the text field works however (this on the NOTIFICATION layer)

tortoisedoc ( 2019-06-22 20:45:42 +0300 )edit

@coderus @tortoisedoc Thanks for your great support even at the weekend. Choosing the layer "dialog" has solved the problem.

I also checked to use SystemDialogWindow but this caused an error:

[W] unknown:26 - file:///usr/share/MyApp/qml/overlay.qml:26:27: Unable to assign SystemDialogWindow to QQuickItem

This is not surprising, because the overlay is defined as a QQuickView in the header of the ViewHelper class. Because I was curious I checked to replace this definition, but I got the same error. Anyway. I have a solution for my requirement.

jsommer ( 2019-06-23 15:37:04 +0300 )edit

Answer 2

2

answered 2019-06-23 15:39:47 +0300

jsommer
3324 ●97 ●142 ●154

updated 2019-06-23 17:35:42 +0300

This is my solution. I modified one line of code in the viewhelper.cpp file:

overlayView->create();
QPlatformNativeInterface *native = QGuiApplication::platformNativeInterface();
native->setWindowProperty(overlayView->handle(), QLatin1String("CATEGORY"), "dialog");

Thanks to the community.

Edt:

I'm afraid I was happy too soon. The consequence of the dialog level is that when starting the overlays all apps are deactivated and mouse control is no longer possible. The cover grid remains in a slightly minimized view.

With the notification layer I was able to control the mourse region to open the dialog analogous to the screenshot app mentioned above, without disturbing the interaction with the system.

It might be possible to use the overlay to call a system dialog defined in a separate QML file. I'll check this.

edit flag offensive delete publish link

Comments

very nice!

coderus ( 2019-06-23 15:43:58 +0300 )edit

Dialogs still pose as full screen iirc tho. So you won't be able to control the touches.

tortoisedoc ( 2019-06-23 23:02:02 +0300 )edit

How to implement an overlay window with a textfield?

Comments

2 Answers

Comments

Comments

Question tools

Stats

Related questions

How to implement an overlay window with a textfield?

Comments

2 Answers

Comments

Comments

Question tools

Public thread

Stats

Related questions