WebEngine Qt Quick Custom Touch Handle Example

Shows custom touch handles upon touch selection events.

WebEngine Qt Quick Touch Handle Example demonstrates how to use custom touch handles when a touch selection event happens. It shows the minimum amount of code needed to use custom touch handle delegates, and can be used as a basis for further experimentation.

Custom Touch Handle

In main.qml we create the custom touch handle delegate.

                property int itemAction: WebEngineView.Back
                text: webEngineView.action(itemAction).text
                enabled: webEngineView.action(itemAction).enabled
                onClicked: webEngineView.action(itemAction).trigger()
                icon.name: webEngineView.action(itemAction).iconName
                display: AbstractButton.TextUnderIcon
            }

            ToolButton {
                property int itemAction: WebEngineView.Forward
                text: webEngineView.action(itemAction).text
                enabled: webEngineView.action(itemAction).enabled
                onClicked: webEngineView.action(itemAction).trigger()
                icon.name: webEngineView.action(itemAction).iconName
                display: AbstractButton.TextUnderIcon
            }

            ToolButton {
                property int itemAction: webEngineView.loading ? WebEngineView.Stop : WebEngineView.Reload
                text: webEngineView.action(itemAction).text
                enabled: webEngineView.action(itemAction).enabled
                onClicked: webEngineView.action(itemAction).trigger()
                icon.name: webEngineView.action(itemAction).iconName
                display: AbstractButton.TextUnderIcon
            }

            TextField {
                Layout.fillWidth: true
                text: webEngineView.url
                selectByMouse: true
                onEditingFinished: webEngineView.url = text
            }

            Label { text: 'Handle: ' }
            ComboBox {
                model: [ 'Default', 'Circle', 'Square' ]

                onCurrentValueChanged: {
                    if (currentValue == 'Circle')
                        webEngineView.touchHandleDelegate = circleTouchHandle
                    else if (currentValue == 'Square')
                        webEngineView.touchHandleDelegate = rectTouchHandle
                    else
                        webEngineView.touchHandleDelegate = null
                }

                Component.onCompleted: currentIndex = indexOfValue('Square')
            }
        }
    }

QML Code

In main.qml we create the top level window filled by a WebEngineView item loading the Qt Homepage. To display custom touch handles, a QML item should be delegated to WebEngineView::touchHandleDelegate.

The touch handle's position, opacity, and visibility is automatically updated.

Note: If no delegate is provided, Chromium's default touch handles will appear.

Requirements

The example requires a working internet connection to render the Qt Homepage and a touch-enabled input device to trigger touch events. An optional system proxy should be picked up automatically.

Example project @ code.qt.io

© 2023 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.