Click button (with focus) bei pressing Enter/Return

Kieren

Hi,

I'm currently working at Dialog/Form and want to improve the user experience by allowing the user to navigate trough the Dialog whit keys also.

When having the focus on a QML-Button pressing "Space" nicely presses the button like it would look like when using the mice and also fires the "click()-Signal" of the button.
I'm trying to get the same result when the user preses "Return/Enter" but don't know how.

Also it would be nice if the OK-Button is the default if no button has focus and "Return/Enter" is pressed. Just setting the isDefault-Property ("doc":http://doc.qt.io/qt-5/qml-qtquick-controls-button.html#isDefault-prop) to true doesn't to the trick. Might it be that this only some parent Items can handle child-Buttons with isDefault?

I'll be very thankful for any hint.
Really try to get to understand how QML works :)

Cheers,
Kieren

p3c0

Hi,

If you are using "Dialog":http://doc.qt.io/qt-5/qml-qtquick-dialogs-dialog.html, then the default "Ok" button will be pressed when user pressed Enter/Return.
@
Dialog {
id: dialog
visible: true
title: "Dialog"

onAccepted: console.log("Enter clicked")

}
@

Kieren

Hi,

thanks for the replay. I've found QML-Dialog before but wasn't able to get our style (graphics...) on the component.

One of the Dialogs/Forms I'm working at is an option dialog with many (50+) different elements (CheckBoxes, RadioButtons, Comboxes) for example to chose the resolution of the program or activate full-screen mode.

I was able to implement a workaround for the default Return/Enter action when no element that uses the key has focus, by using:
@Keys.onReturnPressed: { doOkButtonAction(); }@
but this still does not visually "click" the button.
Also I still didn't find a way to use Return/Enter to click the focused button as it happens when using Space.

As this only is for the user experience my time left to spent on this issue is quit limited as new features are more important to the project right now, than polishing existing ones (I guess many of you know this problem).

Still if there are any other suggestions I'll be very happy to give them a try.
And again thanks for the Dialog idea! Seeing how others work on things like that is always a good thing, especially as I'm still new to QML and happy to find more "best practice" advice.

Cheers,
Kieren

p3c0

Hmm, then you can always use the ButtonStyle to do it.
eg:
@
property bool isPressed : false

Button {
id: button
focus: true
text: "Click"
onClicked: console.log("ck")

style: ButtonStyle {
    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 25
        border.color: "#888"
        radius: 4
        gradient: Gradient {
            GradientStop { position: 0 ; color: control.pressed || isPressed ? "#ccc" : "#eee" }
            GradientStop { position: 1 ; color: control.pressed || isPressed ? "#aaa" : "#ccc" }
        }
    }
}

Keys.onPressed: if (event.key === Qt.Key_Return) { isPressed = true }
Keys.onReleased: isPressed = false

}
@

Kieren

Hi again,

that should work!

But as it is already working with Space just fine, I was hoping that it is possible to just use the same mechanism.

If there is no better solution till I find time to work on this again, I might just use your approach to get it working :)

Thanks.

Cheers,
Kieren