From fbdec8ce21291b19eb810b6c63a42d1afc50ee67 Mon Sep 17 00:00:00 2001 From: Leena Miettinen Date: Fri, 23 Apr 2021 16:37:09 +0200 Subject: Doc: Add docs for SimpleKeyboard example Fixes: QDS-4140 Change-Id: Icf1da91512848881914ac4c44e47ecc6e5bc3903 Reviewed-by: Thomas Hartmann --- doc/qtdesignstudio/config/qtdesignstudio.qdocconf | 1 + .../examples/SimpleKeyboard/SimpleKeyboard.qml | 118 +++++++++++++++++++++ .../SimpleKeyboard/SimpleKeyboard.qmlproject | 45 ++++++++ .../doc/images/simplekeyboard-component.png | Bin 0 -> 31760 bytes .../doc/images/simplekeyboard-project-details.png | Bin 0 -> 10858 bytes .../examples/doc/images/simplekeyboard.png | Bin 0 -> 16825 bytes .../examples/doc/simplekeyboard.qdoc | 66 ++++++++++++ 7 files changed, 230 insertions(+) create mode 100644 doc/qtdesignstudio/examples/SimpleKeyboard/SimpleKeyboard.qml create mode 100644 doc/qtdesignstudio/examples/SimpleKeyboard/SimpleKeyboard.qmlproject create mode 100644 doc/qtdesignstudio/examples/doc/images/simplekeyboard-component.png create mode 100644 doc/qtdesignstudio/examples/doc/images/simplekeyboard-project-details.png create mode 100644 doc/qtdesignstudio/examples/doc/images/simplekeyboard.png create mode 100644 doc/qtdesignstudio/examples/doc/simplekeyboard.qdoc diff --git a/doc/qtdesignstudio/config/qtdesignstudio.qdocconf b/doc/qtdesignstudio/config/qtdesignstudio.qdocconf index 5e710b4e67..587dd583b4 100644 --- a/doc/qtdesignstudio/config/qtdesignstudio.qdocconf +++ b/doc/qtdesignstudio/config/qtdesignstudio.qdocconf @@ -90,6 +90,7 @@ depends += qtwidgets \ qtsensors \ qttestlib \ qtuitools \ + qtvirtualkeyboard \ qtxml include(../../config/macros.qdocconf) diff --git a/doc/qtdesignstudio/examples/SimpleKeyboard/SimpleKeyboard.qml b/doc/qtdesignstudio/examples/SimpleKeyboard/SimpleKeyboard.qml new file mode 100644 index 0000000000..b38438d35c --- /dev/null +++ b/doc/qtdesignstudio/examples/SimpleKeyboard/SimpleKeyboard.qml @@ -0,0 +1,118 @@ +/**************************************************************************** +** +** Copyright (C) 2021 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $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 2.15 +import SimpleKeyboard 1.0 +import QtQuick.VirtualKeyboard 2.15 +import QtQuick.Window 2.2 + +Window { + id: window + width: Constants.width + height: Constants.height + Item { + id: cornerItem + x: 0 + y: 0 + } + + property int activeFocusItemBottom : activeFocusItem == null ? 0 : Math.min(height, cornerItem.mapFromItem(activeFocusItem, 0, activeFocusItem.height).y + 50) + + Swiper { + id: view + width: window.width + height: window.height + y: !inputPanel.active ? 0 : Math.min(0, window.height - inputPanel.height - activeFocusItemBottom) + Behavior on y { + NumberAnimation { + duration: 250 + easing.type: Easing.InOutQuad + } + } + } + + Rectangle { + id: inputPanelBackground + anchors.left: parent.left + anchors.right: parent.right + anchors.top: inputPanel.top + anchors.bottom: inputPanel.bottom + color: "black" + } + + InputPanel { + id: inputPanel + x: window.width/2 - width/2 + y: window.height + width: Math.min(window.width, window.height) + + states: State { + name: "visible" + when: inputPanel.active + PropertyChanges { + target: inputPanel + y: window.height - inputPanel.height + } + } + transitions: Transition { + from: "" + to: "visible" + reversible: true + ParallelAnimation { + NumberAnimation { + properties: "y" + duration: 250 + easing.type: Easing.InOutQuad + } + } + } + } +} + diff --git a/doc/qtdesignstudio/examples/SimpleKeyboard/SimpleKeyboard.qmlproject b/doc/qtdesignstudio/examples/SimpleKeyboard/SimpleKeyboard.qmlproject new file mode 100644 index 0000000000..eeabdb75f7 --- /dev/null +++ b/doc/qtdesignstudio/examples/SimpleKeyboard/SimpleKeyboard.qmlproject @@ -0,0 +1,45 @@ +import QmlProject 1.1 + +Project { + mainFile: "SimpleKeyboard.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + + JavaScriptFiles { + directory: "." + } + + ImageFiles { + directory: "." + } + + Files { + filter: "*.conf" + files: ["qtquickcontrols2.conf"] + } + + Files { + filter: "qmldir" + directory: "." + } + + Files { + filter: "*.ttf;*.otf" + } + + Environment { + QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf" + QT_AUTO_SCREEN_SCALE_FACTOR: "1" + QT_IM_MODULE: "qtvirtualkeyboard" + QT_VIRTUALKEYBOARD_DESKTOP_DISABLE: 1 + } + + /* List of plugin directories passed to QML runtime */ + importPaths: [ "imports", "asset_imports" ] + + /* Required for deployment */ + targetDirectory: "/opt/SimpleKeyboard" +} diff --git a/doc/qtdesignstudio/examples/doc/images/simplekeyboard-component.png b/doc/qtdesignstudio/examples/doc/images/simplekeyboard-component.png new file mode 100644 index 0000000000..6812258453 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/simplekeyboard-component.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/simplekeyboard-project-details.png b/doc/qtdesignstudio/examples/doc/images/simplekeyboard-project-details.png new file mode 100644 index 0000000000..9a797d1fef Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/simplekeyboard-project-details.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/simplekeyboard.png b/doc/qtdesignstudio/examples/doc/images/simplekeyboard.png new file mode 100644 index 0000000000..1faf1dad9a Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/simplekeyboard.png differ diff --git a/doc/qtdesignstudio/examples/doc/simplekeyboard.qdoc b/doc/qtdesignstudio/examples/doc/simplekeyboard.qdoc new file mode 100644 index 0000000000..ab63deab97 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/simplekeyboard.qdoc @@ -0,0 +1,66 @@ +/**************************************************************************** +** +** Copyright (C) 2021 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** 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. +** +****************************************************************************/ + +/*! + \example SimpleKeyboard + \ingroup studioexamples + \brief Illustrates how to use a virtual keyboard in an application. + + \title Simple Keyboard + + \e {Simple Keyboard} provides a virtual keyboard for entering + text into several text fields. It uses functionality from the + \l{Qt Virtual Keyboard} module. + + \image simplekeyboard.png "Virtual keyboard opening from a text input field" + + The virtual keyboard is automatically displayed when users start entering + text into \l{Text Edit} or \l{Text Input} components. For more information + about using it, see \l{User Guide}{Virtual Keyboard: User Guide}. + + To test the virtual keyboard, you need to select the \inlineimage run_small.png + (\uicontrol Run) button to run the example on the desktop or a device. + The keyboard is not available during preview. + + \section1 Using a Virtual Keyboard + + First, we create an empty project, as described in \l {Creating Projects}. + For the purposes of this example, we call the project \e SimpleKeyboard. + We can use the default settings for other options, but we need to select + the \uicontrol {Use Qt Virtual Keyboard} check box on the + \uicontrol {Define Project Details} page. + + \image simplekeyboard-project-details.png "SimpleKeyboard project details" + + The project wizard template adds the Qt Quick Virtual Keyboard module + to the project and creates a component based on \l InputPanel in + \e SimpleKeyboard.qml. + + \image simplekeyboard-component.png "SimpleKeyboard component" + + We then create a tabbed UI that contains fields for entering text, among + other things. The virtual keyboard is automatically enabled for the text + edit and text input controls. +*/ -- cgit v1.2.3