From 828ee197647a7462c10243c0261e7bced9bbcb65 Mon Sep 17 00:00:00 2001 From: Balazs Egedi Date: Fri, 18 Feb 2022 13:04:19 +0100 Subject: Quick: Add support for replacing touch handles with delegates Task-number: QTBUG-85043 Change-Id: I1c87aff352e07eb309d5ba8747b9e50a191d478e Reviewed-by: Michal Klocek --- examples/webenginequick/CMakeLists.txt | 1 + .../customtouchhandle/CMakeLists.txt | 45 +++++++ .../customtouchhandle/customtouchhandle.pro | 10 ++ .../doc/images/customtouchhandle.jpg | Bin 0 -> 47646 bytes .../doc/src/customtouchhandle.qdoc | 66 ++++++++++ examples/webenginequick/customtouchhandle/main.cpp | 66 ++++++++++ examples/webenginequick/customtouchhandle/main.qml | 143 +++++++++++++++++++++ examples/webenginequick/customtouchhandle/qml.qrc | 5 + examples/webenginequick/webenginequick.pro | 1 + 9 files changed, 337 insertions(+) create mode 100644 examples/webenginequick/customtouchhandle/CMakeLists.txt create mode 100644 examples/webenginequick/customtouchhandle/customtouchhandle.pro create mode 100644 examples/webenginequick/customtouchhandle/doc/images/customtouchhandle.jpg create mode 100644 examples/webenginequick/customtouchhandle/doc/src/customtouchhandle.qdoc create mode 100644 examples/webenginequick/customtouchhandle/main.cpp create mode 100644 examples/webenginequick/customtouchhandle/main.qml create mode 100644 examples/webenginequick/customtouchhandle/qml.qrc (limited to 'examples') diff --git a/examples/webenginequick/CMakeLists.txt b/examples/webenginequick/CMakeLists.txt index 8105b6c9a..dc42b3dfe 100644 --- a/examples/webenginequick/CMakeLists.txt +++ b/examples/webenginequick/CMakeLists.txt @@ -1,4 +1,5 @@ qt_internal_add_example(customdialogs) +qt_internal_add_example(customtouchhandle) qt_internal_add_example(lifecycle) qt_internal_add_example(minimal) qt_internal_add_example(quicknanobrowser) diff --git a/examples/webenginequick/customtouchhandle/CMakeLists.txt b/examples/webenginequick/customtouchhandle/CMakeLists.txt new file mode 100644 index 000000000..5062e5d53 --- /dev/null +++ b/examples/webenginequick/customtouchhandle/CMakeLists.txt @@ -0,0 +1,45 @@ +cmake_minimum_required(VERSION 3.16) +project(customtouchhandle LANGUAGES CXX) + +set(CMAKE_AUTOMOC ON) + +if(NOT DEFINED INSTALL_EXAMPLESDIR) + set(INSTALL_EXAMPLESDIR "examples") +endif() + +set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/webenginequick/customtouchhandle") + +find_package(Qt6 COMPONENTS Core Gui WebEngineQuick) + +qt_add_executable(customtouchhandle + main.cpp +) + +set_target_properties(customtouchhandle PROPERTIES + WIN32_EXECUTABLE TRUE + MACOSX_BUNDLE TRUE +) + +target_link_libraries(customtouchhandle PUBLIC + Qt::Core + Qt::Gui + Qt::WebEngineQuick +) + +# Resources: +set(qml_resource_files + "main.qml" +) + +qt6_add_resources(customtouchhandle "qml" + PREFIX + "/" + FILES + ${qml_resource_files} +) + +install(TARGETS customtouchhandle + RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}" + BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}" + LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}" +) diff --git a/examples/webenginequick/customtouchhandle/customtouchhandle.pro b/examples/webenginequick/customtouchhandle/customtouchhandle.pro new file mode 100644 index 000000000..a74ef3146 --- /dev/null +++ b/examples/webenginequick/customtouchhandle/customtouchhandle.pro @@ -0,0 +1,10 @@ +TEMPLATE = app + +QT += webenginequick + +SOURCES += main.cpp + +RESOURCES += qml.qrc + +target.path = $$[QT_INSTALL_EXAMPLES]/webenginequick/customtouchhandle +INSTALLS += target diff --git a/examples/webenginequick/customtouchhandle/doc/images/customtouchhandle.jpg b/examples/webenginequick/customtouchhandle/doc/images/customtouchhandle.jpg new file mode 100644 index 000000000..bd65c083d Binary files /dev/null and b/examples/webenginequick/customtouchhandle/doc/images/customtouchhandle.jpg differ diff --git a/examples/webenginequick/customtouchhandle/doc/src/customtouchhandle.qdoc b/examples/webenginequick/customtouchhandle/doc/src/customtouchhandle.qdoc new file mode 100644 index 000000000..5b39e7973 --- /dev/null +++ b/examples/webenginequick/customtouchhandle/doc/src/customtouchhandle.qdoc @@ -0,0 +1,66 @@ +/**************************************************************************** +** +** Copyright (C) 2022 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \example webenginequick/customtouchhandle + \title WebEngine Qt Quick Custom Touch Handle Example + \ingroup webengine-examples + \brief Shows custom touch handles upon touch selection events. + + \image customtouchhandle.jpg + + \e {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. + + \section1 Custom Touch Handle + + In \c main.qml we create the custom touch handle delegate. + + \quotefromfile webenginequick/customtouchhandle/main.qml + \skipto WebEngineView + \printuntil /^\ {4}\}/ + + \section1 QML Code + + In \c main.qml we create the top level window filled by a + \l{WebEngineView} item loading the \l{Qt Homepage}. + To display custom touch handles, a QML item should be delegated to + \l{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. + + \section1 Requirements + + The example requires a working internet connection to render the + \l{Qt Homepage} and a touch-enabled input device to trigger touch + events. + An optional system proxy should be picked up automatically. +*/ diff --git a/examples/webenginequick/customtouchhandle/main.cpp b/examples/webenginequick/customtouchhandle/main.cpp new file mode 100644 index 000000000..2739e1ad0 --- /dev/null +++ b/examples/webenginequick/customtouchhandle/main.cpp @@ -0,0 +1,66 @@ +/**************************************************************************** +** +** Copyright (C) 2022 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#include +#include +#include + +int main(int argc, char *argv[]) +{ + QCoreApplication::setOrganizationName("QtExamples"); + QCoreApplication::setAttribute(Qt::AA_ShareOpenGLContexts); + QtWebEngineQuick::initialize(); + QGuiApplication app(argc, argv); + + QQmlApplicationEngine engine; + engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); + + return app.exec(); +} diff --git a/examples/webenginequick/customtouchhandle/main.qml b/examples/webenginequick/customtouchhandle/main.qml new file mode 100644 index 000000000..478b59a0e --- /dev/null +++ b/examples/webenginequick/customtouchhandle/main.qml @@ -0,0 +1,143 @@ +/**************************************************************************** +** +** Copyright (C) 2022 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick +import QtQuick.Window +import QtWebEngine +import QtQuick.Layouts +import QtQuick.Controls + +ApplicationWindow { + width: 1024 + height: 750 + visible: true + header: ToolBar { + RowLayout { + anchors.fill: parent + + ToolButton { + 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') + } + } + } + + Component { + id: circleTouchHandle + Rectangle { + color: "blue" + border.color: "black" + border.width: 2 + radius: 50 + } + } + + Component { + id: rectTouchHandle + Rectangle { + border.color: "black" + border.width: 2 + radius: 2 + onVisibleChanged: if (visible) { color = 'yellow'; cAnim.restart(); } + ColorAnimation on color { id: cAnim; to: 'red'; duration: 1000 } + } + } + + WebEngineView { + anchors.fill: parent + id: webEngineView + url: "https://www.qt.io" + } +} diff --git a/examples/webenginequick/customtouchhandle/qml.qrc b/examples/webenginequick/customtouchhandle/qml.qrc new file mode 100644 index 000000000..5f6483ac3 --- /dev/null +++ b/examples/webenginequick/customtouchhandle/qml.qrc @@ -0,0 +1,5 @@ + + + main.qml + + diff --git a/examples/webenginequick/webenginequick.pro b/examples/webenginequick/webenginequick.pro index 058868395..edf4315a0 100644 --- a/examples/webenginequick/webenginequick.pro +++ b/examples/webenginequick/webenginequick.pro @@ -2,6 +2,7 @@ TEMPLATE=subdirs SUBDIRS += \ customdialogs \ + customtouchhandle \ minimal \ quicknanobrowser \ webengineaction -- cgit v1.2.3