Use Qt Quick Controls 2 in the basic example

- Replace custom text input types with corresponding
  Qt Quick Controls 2 types.
- Replace custom scrollbar with ScrollBar from Qt Quick Controls 2.
- Only build the basic example if Qt Quick Controls 2 is available.
- Update the documentation and its screenshot.

Change-Id: Ib2559595d4a589bb228450bc08be5ab6fbc69b91
Reviewed-by: Jarkko Koivikko <jarkko.koivikko@code-q.fi>
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
Reviewed-by: Topi Reiniö <topi.reinio@qt.io>

11 files changed, 75 insertions, 265 deletions

diff --git a/examples/virtualkeyboard/basic/Basic.qml b/examples/virtualkeyboard/basic/Basic.qml
index c8b9ad41..158a7826 100644
--- a/examples/virtualkeyboard/basic/Basic.qml
+++ b/examples/virtualkeyboard/basic/Basic.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2018 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Virtual Keyboard module of the Qt Toolkit.
@@ -27,7 +27,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.10
+import QtQuick.Controls 2.3
 import QtQuick.VirtualKeyboard 2.1
 import "content"
 
@@ -36,21 +37,23 @@ Rectangle {
     height: 720
     color: "#F6F6F6"
 
+    // Only set with CONFIG+=disable-desktop.
+    property bool handwritingInputPanelActive: false
+
     Flickable {
         id: flickable
-
-        property real scrollMarginVertical: 20
-
         anchors.fill: parent
         contentWidth: content.width
         contentHeight: content.height
         interactive: contentHeight > height
         flickableDirection: Flickable.VerticalFlick
-        children: ScrollBar {}
+
+        property real scrollMarginVertical: 20
+
+        ScrollBar.vertical: ScrollBar {}
 
         MouseArea  {
             id: content
-
             width: flickable.width
             height: textEditors.height + 24
 
@@ -59,10 +62,11 @@ Rectangle {
             Column {
                 id: textEditors
                 spacing: 15
-                x: 12; y: 12
+                x: 12
+                y: 12
                 width: parent.width - 26
 
-                Text {
+                Label {
                     color: "#565758"
                     text: "Tap fields to enter text"
                     anchors.horizontalCenter: parent.horizontalCenter
@@ -70,74 +74,73 @@ Rectangle {
                 }
                 TextField {
                     width: parent.width
-                    previewText: "One line field"
+                    placeholderText: "One line field"
                     enterKeyAction: EnterKeyAction.Next
-                    onEnterKeyClicked: passwordField.focus = true
+                    onAccepted: passwordField.focus = true
                 }
                 TextField {
                     id: passwordField
-
                     width: parent.width
                     echoMode: TextInput.Password
-                    previewText: "Password field"
+                    placeholderText: "Password field"
                     inputMethodHints: Qt.ImhNoAutoUppercase | Qt.ImhPreferLowercase | Qt.ImhSensitiveData | Qt.ImhNoPredictiveText
                     enterKeyAction: EnterKeyAction.Next
-                    onEnterKeyClicked: upperCaseField.focus = true
+                    onAccepted: upperCaseField.focus = true
                 }
                 TextField {
                     id: upperCaseField
-
                     width: parent.width
-                    previewText: "Upper case field"
+                    placeholderText: "Upper case field"
                     inputMethodHints: Qt.ImhUppercaseOnly
                     enterKeyAction: EnterKeyAction.Next
-                    onEnterKeyClicked: lowerCaseField.focus = true
+                    onAccepted: lowerCaseField.focus = true
                 }
                 TextField {
                     id: lowerCaseField
-
                     width: parent.width
-                    previewText: "Lower case field"
+                    placeholderText: "Lower case field"
                     inputMethodHints: Qt.ImhLowercaseOnly
                     enterKeyAction: EnterKeyAction.Next
-                    onEnterKeyClicked: phoneNumberField.focus = true
+                    onAccepted: phoneNumberField.focus = true
                 }
                 TextField {
                     id: phoneNumberField
-
                     validator: RegExpValidator { regExp: /^[0-9\+\-\#\*\ ]{6,}$/ }
                     width: parent.width
-                    previewText: "Phone number field"
+                    placeholderText: "Phone number field"
                     inputMethodHints: Qt.ImhDialableCharactersOnly
                     enterKeyAction: EnterKeyAction.Next
-                    onEnterKeyClicked: formattedNumberField.focus = true
+                    onAccepted: formattedNumberField.focus = true
                 }
                 TextField {
                     id: formattedNumberField
-
                     width: parent.width
-                    previewText: "Formatted number field"
+                    placeholderText: "Formatted number field"
                     inputMethodHints: Qt.ImhFormattedNumbersOnly
                     enterKeyAction: EnterKeyAction.Next
-                    onEnterKeyClicked: digitsField.focus = true
+                    onAccepted: digitsField.focus = true
                 }
                 TextField {
                     id: digitsField
-
                     width: parent.width
-                    previewText: "Digits only field"
+                    placeholderText: "Digits only field"
                     inputMethodHints: Qt.ImhDigitsOnly
                     enterKeyAction: EnterKeyAction.Next
-                    onEnterKeyClicked: textArea.focus = true
+                    onAccepted: textArea.focus = true
                 }
                 TextArea {
                     id: textArea
-
                     width: parent.width
-                    previewText: "Multiple lines field"
+                    placeholderText: "Multiple line field"
                     height: Math.max(206, implicitHeight)
                 }
             }
         }
     }
+
+    // Hide the text fields' cursors when fullscreen handwriting is active.
+    MouseArea {
+        anchors.fill: parent
+        visible: handwritingInputPanelActive
+    }
 }
diff --git a/examples/virtualkeyboard/basic/basic-b2qt.qml b/examples/virtualkeyboard/basic/basic-b2qt.qml
index 7df2a0f6..59c64b86 100644
--- a/examples/virtualkeyboard/basic/basic-b2qt.qml
+++ b/examples/virtualkeyboard/basic/basic-b2qt.qml
@@ -49,6 +49,7 @@ Item {
             anchors.top: parent.top
             anchors.right: parent.right
             anchors.bottom: inputPanel.top
+            handwritingInputPanelActive: handwritingInputPanel.active
         }
 
         /*  Handwriting input panel for full screen handwriting input.
diff --git a/examples/virtualkeyboard/basic/basic.pro b/examples/virtualkeyboard/basic/basic.pro
index b91df554..27ad4141 100644
--- a/examples/virtualkeyboard/basic/basic.pro
+++ b/examples/virtualkeyboard/basic/basic.pro
@@ -19,9 +19,7 @@ OTHER_FILES += \
     basic-b2qt.qml \
     content/AutoScroller.qml \
     content/HandwritingModeButton.qml \
-    content/ScrollBar.qml \
     content/TextArea.qml \
-    content/TextBase.qml \
     content/TextField.qml \
 
 disable-xcb {
diff --git a/examples/virtualkeyboard/basic/content/ScrollBar.qml b/examples/virtualkeyboard/basic/content/ScrollBar.qml
deleted file mode 100644
index db0e47b3..00000000
--- a/examples/virtualkeyboard/basic/content/ScrollBar.qml
+++ /dev/null
@@ -1,55 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2016 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the Qt Virtual Keyboard module of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:GPL$
-** 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 General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3 or (at your option) any later version
-** approved by the KDE Free Qt Foundation. The licenses are as published by
-** the Free Software Foundation and appearing in the file LICENSE.GPL3
-** included in the packaging of this file. Please review the following
-** information to ensure the GNU General Public License requirements will
-** be met: https://www.gnu.org/licenses/gpl-3.0.html.
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Item {
-    property var scrollArea: parent
-
-    width: 6
-    opacity: scrollArea && scrollArea.movingVertically ? 1.0 : 0.0
-    visible: scrollArea && scrollArea.contentHeight >= scrollArea.height
-    anchors { right: parent.right; top: parent.top; bottom: parent.bottom; margins: 2 }
-
-    Behavior on opacity { NumberAnimation { properties: "opacity"; duration: 600 } }
-
-    function size() {
-        var nh = scrollArea.visibleArea.heightRatio * height
-        var ny = scrollArea.visibleArea.yPosition * height
-        return ny > 3 ? Math.min(nh, Math.ceil(height - 3 - ny)) : nh + ny
-    }
-    Rectangle {
-        x: 1
-        y: scrollArea ? Math.max(2, scrollArea.visibleArea.yPosition * parent.height) : 0
-        height: scrollArea ? size() : 0
-        width: parent.width - 2
-        color: Qt.rgba(1.0, 1.0, 1.0, 0.5)
-        radius: 1
-    }
-}
diff --git a/examples/virtualkeyboard/basic/content/TextArea.qml b/examples/virtualkeyboard/basic/content/TextArea.qml
index b9233710..d8ce44a2 100644
--- a/examples/virtualkeyboard/basic/content/TextArea.qml
+++ b/examples/virtualkeyboard/basic/content/TextArea.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2018 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Virtual Keyboard module of the Qt Toolkit.
@@ -27,50 +27,23 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
-import QtQuick.VirtualKeyboard 2.1
+import QtQuick 2.10
+import QtQuick.Controls 2.3 as Controls
+import QtQuick.VirtualKeyboard 2.3
 
-TextBase {
-    id: textArea
+Controls.TextArea {
+    id: control
+    color: "#2B2C2E"
+    selectionColor: Qt.rgba(0.0, 0.0, 0.0, 0.15)
+    selectedTextColor: color
+    font.pixelSize: Qt.application.font.pixelSize * 2
 
-    property alias color: textEdit.color
-    property alias text: textEdit.text
-    property alias textWidth: textEdit.width
-    property alias readOnly: textEdit.readOnly
-    property alias inputMethodHints: textEdit.inputMethodHints
+    property int enterKeyAction: EnterKeyAction.None
+    readonly property bool enterKeyEnabled: enterKeyAction === EnterKeyAction.None || text.length > 0 || inputMethodComposing
 
-    editor: textEdit
-
-    Repeater {
-        model: Math.floor((parent.height - 30) / editor.cursorRectangle.height)
-        Rectangle {
-            x: 8
-            y: (index+1)*editor.cursorRectangle.height+6
-            height: 1; width: textArea.width-24
-            color: "#D6D6D6"
-        }
-    }
-    MouseArea {
-        anchors.fill: parent
-        onClicked: textEdit.forceActiveFocus()
-    }
-    TextEdit {
-        id: textEdit
-
-        EnterKeyAction.actionId: textArea.enterKeyAction
-        EnterKeyAction.label: textArea.enterKeyText
-        EnterKeyAction.enabled: textArea.enterKeyEnabled
-
-        y: 6
-        focus: true
-        color: "#2B2C2E"
-        wrapMode: TextEdit.Wrap
-        cursorVisible: activeFocus
-        height: Math.max(implicitHeight, 60)
-        font.pixelSize: textArea.fontPixelSize
-        selectionColor: Qt.rgba(0, 0, 0, 0.15)
-        selectedTextColor: color
-        selectByMouse: true
-        anchors { left: parent.left; right: parent.right; margins: 12 }
+    background: Rectangle {
+        color: "#FFFFFF"
+        border.width: 1
+        border.color: control.activeFocus ? "#5CAA15" : "#BDBEBF"
     }
 }
diff --git a/examples/virtualkeyboard/basic/content/TextBase.qml b/examples/virtualkeyboard/basic/content/TextBase.qml
deleted file mode 100644
index c8fe8168..00000000
--- a/examples/virtualkeyboard/basic/content/TextBase.qml
+++ /dev/null
@@ -1,72 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2016 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the Qt Virtual Keyboard module of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:GPL$
-** 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 General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3 or (at your option) any later version
-** approved by the KDE Free Qt Foundation. The licenses are as published by
-** the Free Software Foundation and appearing in the file LICENSE.GPL3
-** included in the packaging of this file. Please review the following
-** information to ensure the GNU General Public License requirements will
-** be met: https://www.gnu.org/licenses/gpl-3.0.html.
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-import QtQuick.VirtualKeyboard 2.1
-
-FocusScope {
-    id: textBase
-
-    property var editor
-    property bool previewTextActive: !editor.activeFocus && text.length === 0
-    property int fontPixelSize: 32
-    property string previewText
-    property int enterKeyAction: EnterKeyAction.None
-    property string enterKeyText
-    property bool enterKeyEnabled: enterKeyAction === EnterKeyAction.None || editor.text.length > 0 || editor.inputMethodComposing
-
-    implicitHeight: editor.height + 12
-
-    signal enterKeyClicked
-
-    Keys.onReleased: {
-        if (event.key === Qt.Key_Return)
-            enterKeyClicked()
-    }
-
-    Rectangle {
-        // background
-        radius: 5.0
-        anchors.fill: parent
-        color: "#FFFFFF"
-        border { width: 1; color: editor.activeFocus ? "#5CAA15" : "#BDBEBF" }
-    }
-    Text {
-        id: previewText
-
-        y: 8
-        clip: true
-        color: "#a0a1a2"
-        visible: previewTextActive
-        text: textBase.previewText
-        font.pixelSize: 28
-        anchors { left: parent.left; right: parent.right; margins: 12 }
-
-    }
-}
diff --git a/examples/virtualkeyboard/basic/content/TextField.qml b/examples/virtualkeyboard/basic/content/TextField.qml
index 7817f3bd..0a6d80ef 100644
--- a/examples/virtualkeyboard/basic/content/TextField.qml
+++ b/examples/virtualkeyboard/basic/content/TextField.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2018 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Virtual Keyboard module of the Qt Toolkit.
@@ -27,59 +27,23 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
-import QtQuick.VirtualKeyboard 2.1
+import QtQuick 2.10
+import QtQuick.Controls 2.3 as Controls
+import QtQuick.VirtualKeyboard 2.3
 
-TextBase {
-    id: textField
+Controls.TextField {
+    id: control
+    color: "#2B2C2E"
+    selectionColor: Qt.rgba(0.0, 0.0, 0.0, 0.15)
+    selectedTextColor: color
+    font.pixelSize: Qt.application.font.pixelSize * 2
 
-    property alias color: textInput.color
-    property alias text: textInput.text
-    property alias textWidth: textInput.width
-    property alias readOnly: textInput.readOnly
-    property alias inputMethodHints: textInput.inputMethodHints
-    property alias validator: textInput.validator
-    property alias echoMode: textInput.echoMode
-    property int passwordMaskDelay: 1000
+    property int enterKeyAction: EnterKeyAction.None
+    readonly property bool enterKeyEnabled: enterKeyAction === EnterKeyAction.None || text.length > 0 || inputMethodComposing
 
-    editor: textInput
-
-    Flickable {
-        id: flickable
-
-        x: 12
-        clip: true
-        width: parent.width-24
-        height: parent.height
-        flickableDirection: Flickable.HorizontalFlick
-        interactive: contentWidth - 4 > width
-
-        contentWidth: textInput.width+2
-        contentHeight: textInput.height
-        TextInput {
-            id: textInput
-
-            EnterKeyAction.actionId: textField.enterKeyAction
-            EnterKeyAction.label: textField.enterKeyText
-            EnterKeyAction.enabled: textField.enterKeyEnabled
-
-            y: 6
-            focus: true
-            color: "#2B2C2E"
-            cursorVisible: activeFocus
-            passwordCharacter: "\u2022"
-            font.pixelSize: textField.fontPixelSize
-            selectionColor: Qt.rgba(0.0, 0.0, 0.0, 0.15)
-            selectedTextColor: color
-            selectByMouse: true
-            width: Math.max(flickable.width, implicitWidth)-2
-
-            Binding {
-                target: textInput
-                property: "passwordMaskDelay"
-                value: textField.passwordMaskDelay
-                when: textInput.hasOwnProperty("passwordMaskDelay")
-            }
-        }
+    background: Rectangle {
+        color: "#FFFFFF"
+        border.width: 1
+        border.color: control.activeFocus ? "#5CAA15" : "#BDBEBF"
     }
 }
diff --git a/examples/virtualkeyboard/basic/demo.qrc b/examples/virtualkeyboard/basic/demo.qrc
index 5bcafc71..52706522 100644
--- a/examples/virtualkeyboard/basic/demo.qrc
+++ b/examples/virtualkeyboard/basic/demo.qrc
@@ -1,9 +1,7 @@
 <RCC>
     <qresource prefix="/">
         <file>content/AutoScroller.qml</file>
-        <file>content/ScrollBar.qml</file>
         <file>content/TextArea.qml</file>
-        <file>content/TextBase.qml</file>
         <file>content/TextField.qml</file>
         <file>content/HandwritingModeButton.qml</file>
         <file>content/FloatingButton_Active.svg</file>
diff --git a/examples/virtualkeyboard/virtualkeyboard.pro b/examples/virtualkeyboard/virtualkeyboard.pro
index 3ea78202..8d129b25 100644
--- a/examples/virtualkeyboard/virtualkeyboard.pro
+++ b/examples/virtualkeyboard/virtualkeyboard.pro
@@ -1,3 +1,3 @@
 TEMPLATE = subdirs
-SUBDIRS += \
-    basic
+
+qtHaveModule(quickcontrols2): SUBDIRS += basic
diff --git a/src/virtualkeyboard/doc/images/basic-example.png b/src/virtualkeyboard/doc/images/basic-example.png
index 7401c168..6f46bb30 100644
--- a/src/virtualkeyboard/doc/images/basic-example.png
+++ b/src/virtualkeyboard/doc/images/basic-example.png
diff --git a/src/virtualkeyboard/doc/src/qtvirtualkeyboard-examples.qdoc b/src/virtualkeyboard/doc/src/qtvirtualkeyboard-examples.qdoc
index ef2bf69f..2313ce41 100644
--- a/src/virtualkeyboard/doc/src/qtvirtualkeyboard-examples.qdoc
+++ b/src/virtualkeyboard/doc/src/qtvirtualkeyboard-examples.qdoc
@@ -40,8 +40,8 @@
     \ingroup qtvirtualkeyboard-examples
     \image basic-example.png
 
-    The example has two implementations: one for the desktop
-    platforms and another for the embedded platforms. The former version
+    The example has two implementations: one for desktop
+    platforms and another for embedded platforms. The former version
     enables text input into several text fields using the virtual keyboard,
     whereas the latter version uses the same UI but with a custom virtual
     keyboard InputPanel. The following snippet from
@@ -74,10 +74,10 @@
     \skipto /^\}$/
     \printuntil }
 
-    The TextField and TextArea are inherited from the TextBase custom type,
-    which has \c enterKeyEnabled, \c enterKeyText, and \c enterKeyAction
-    properties. The TextField and TextArea instances in the snippet can
-    set these properties to change the default behavior.
+    The TextField and TextArea controls extend the respective
+    \l {Qt Quick Controls 2} types with \c enterKeyEnabled and
+    \c enterKeyAction properties. The TextField and TextArea instances in the
+    snippet can set these properties to change the default behavior.
 
     \include examples-run.qdocinc
 */