Doc: Update third part of entry-level tutorial

Task-number: QDS-5001
Change-Id: Id1c8dc919f09846a3e7d7b257e9b974f9eeecbda
Reviewed-by: Johanna Vanhatapio <johanna.vanhatapio@qt.io>
Reviewed-by: Brook Cronin <brook.cronin@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: Tanja Remes <tanja.remes@qt.io>

doc/qtdesignstudio/examples/doc/loginui3.qdoc

@@ -37,14 +37,15 @@
 
     \e{Log In UI - States} is the third in a series of tutorials that build
     on each other to illustrate how to use \QDS to create a simple UI with
-    some basic UI components, such as pages, buttons, and entry fields. Part 3
+    some basic UI components, such as pages, buttons, and entry fields. The
-    describes how to use \e states to add a second page to the UI. On the
+    third tutorial in the series describes how to use \e states to add a
-    first page, users can enter a username and password to log in. On the
+    second page to the UI. On the first page, users can enter a username
-    second page, they can register if they do not already have an account.
+    and password to log in. On the second page, they can register if they
+    do not already have an account.
 
     Because the second page will contain most of the same UI components as the
     login page, you will use \e states to show and hide UI components as necessary
-    when a user selects the \uicontrol {Create Account} button.
+    when a user selects the \e {Create Account} button.
 
     These instructions build on:
 
@@ -58,93 +59,82 @@
 
     \section1 Adding UI Components
 
-    You will add another text field for verifying the password that users
+    You will add another entry field for verifying the password that users
-    enter to create an account and a back button for returning to the login
+    enter to create an account. You are already familiar with the tasks in
-    page. You are already familiar with the tasks in this section from Part 1
+    this section from previous parts of the tutorial.
-    and Part 2 of this tutorial.
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
     (\uicontrol {Show Live Preview}) button on the \l {Form Editor}
     toolbar or press \key {Alt+P}.
 
-    To add the text field and a back button needed on the registration page
+    To add the entry field needed on the second page to the \e Screen01
-    to the \e Screen01 component:
+    component:
 
     \list 1
-        \li Open \e {Screen01.ui.qml} in \uicontrol {Form Editor} for editing.
+        \li Double-click \e Screen01.ui.qml in \uicontrol Projects to open it
-        \li Drag-and-drop a \uicontrol {Text Field} from \l Library
+            in \uicontrol {Form Editor}.
-            > \uicontrol Components > \uicontrol {Qt Quick Controls} to
+        \li Drag-and-drop an instance of the EntryField component from
-            \e fieldColumn in \l Navigator.
+            \uicontrol Library > \uicontrol Components >
-        \li In \l Properties, change the ID of the text field to
+            \uicontrol {My Components} to \e fields in \l Navigator.
-            \e verifyPasswordField.
+        \li Select the EntryField instance in \uicontrol Navigator to modify
-        \li In the \uicontrol Geometry group, \uicontrol Size field, set the
+        its ID and text in \uicontrol Properties.
-            width of the field to \e 300 pixels to match the size of the
+        \li In \uicontrol Component > \uicontrol ID, enter
-            existing fields.
+            \e repeatPassword.
-        \li In the \uicontrol Placeholder field, set the placeholder text to
+        \li In \uicontrol {Button Content} > \uicontrol Text, enter
-            \e {Verify password} and mark the text translatable.
+            \e {Repeat Password} and select \uicontrol tr to mark the text
-        \li Drag-and-drop a PushButton component from \uicontrol Library >
+            translatable.
-            \uicontrol Components > \uicontrol {My Components} to the root
-            rectangle in \uicontrol Navigator.
-        \li Select the button in \uicontrol Navigator and change its ID to
-            \e backButton in \uicontrol Properties.
-        \li In the \uicontrol Geometry group, \uicontrol Size field, set the
-            button width to \e 40 pixels to create a small round button.
-        \li In the \uicontrol Text field, enter \e <.
-        \li In the \uicontrol Font group, \uicontrol Size field, set the font
-            size to \e 24 pixels.
-        \li Under \uicontrol Layout, select the \inlineimage icons/anchor-top.png
-            (\uicontrol Top) and \inlineimage icons/anchor-right.png
-            (\uicontrol Right) anchor buttons to anchor \e backButton to
-            the top right corner of its parent with 20- and 10-pixel margins,
-            respectively.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
 
-    \e Screen01 should now look something like this in the \uicontrol Design
+    \e Screen01 should now look something like this in \uicontrol {Form Editor}:
-    mode and live preview:
 
-    \image loginui3-base-state.png "Login page with new UI components"
+    \image loginui3-base-state.jpg "Login page with a Repeat Password field"
 
-    Next, you will add states for the login page and the registration page,
+    Next, you will add states for the login page and the account creation page,
-    where you use the visibility property to hide the password verification
+    where you use the visibility property to hide the repeat password field on
-    field and the back button on the login page and the login button on the
+    the login page and the \e {Create Account} button on the account creation
-    registration page.
+    page.
 
     \section1 Using States to Simulate Page Changes
 
     You will now add \l{Adding States}{states} to the UI to show and hide UI
-    components in the \uicontrol {Form Editor}, depending on the current page:
+    components in \uicontrol {Form Editor}, depending on the current page:
 
     \list 1
         \li In the \l States view, select \uicontrol {Create New State}.
-            \image loginui3-login-state.png "States view"
+        \li Enter \e login as the state name.
-        \li Enter \e loginState as the state name.
+            \image loginui3-login-state.jpg "States view"
-        \li Select \e verifyPasswordField in the \uicontrol Navigator,
+        \li Select \e repeatPassword in \uicontrol Navigator to display its
-            and deselect the \uicontrol Visibility check box in
+            properties in \uicontrol Properties.
-            \uicontrol Properties to hide the verify password field in
+        \li In the \uicontrol Visibility section, deselect the
-            the login state.
+            \uicontrol Visible check box to hide the repeat
+            password field in the login state.
             \image loginui3-visibility.png
-        \li Repeat the above step for \e backButton to hide it, too.
         \li In \uicontrol States, select \inlineimage icons/action-icon.png
-            for \e loginState to open the \uicontrol Actions menu, and then
+            for \e login to open the \uicontrol Actions menu, and then
-            select \uicontrol {Set as Default} to determine that \e loginState
+            select \uicontrol {Set as Default} to determine that the \e login
-            is applied when the application starts.
+            state is applied when the application starts.
         \li With the base state selected, add another state and name it
-            \e registerState. This state should now look identical to the base
+            \e createAccount. This state should now look identical to the base
+            state.
+        \li Select \e createAccount in the \uicontrol Navigator to display its
+            properties in \uicontrol Properties.
+        \li In \uicontrol Visibility, deselect the \uicontrol Visible check box
+            to hide the \e {Create Account} button in the account creation
             state.
-        \li Select \e loginButton in the \uicontrol Navigator, and deselect
-            the \uicontrol Visibility check box in \uicontrol Properties to
-            hide the login button in the registration state.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
 
-    You can now see all the states in the \uicontrol States view. The live
+    You can now see all the states in the \uicontrol States view:
-    preview displays the default state, \e loginState:
 
-    \image loginui3-states.png "States view"
+    \image loginui3-states.jpg "All states in the States view"
+
+    The live preview displays the default state, \e login:
+
+    \image loginui3-login-state-preview.jpg "Preview of the login state"
 
     \section2 Learn More - States
 
@@ -171,9 +161,7 @@
 
     Next, you will create connections to specify that clicking the
     \uicontrol {Create Account} button on the login page triggers a
-    transition to the registration page and that clicking the back
+    transition to the account creation page.
-    button on the registration page triggers a transition to the login
-    page.
 
     \section1 Connecting Buttons to States
 
@@ -183,35 +171,27 @@
     is clicked within the area.
 
     You will now use \l {Connection View} to
-    \l{Connecting Components to Signals}{connect} the clicked signal of
+    \l{Connecting Components to Signals}{connect} the clicked signal of the
-    \e registerButton to \e registerState and that of \e backButton
+    \e createAccount button to \e createAccount state:
-    to \e loginState:
 
     \list 1
         \li Select \uicontrol View > \uicontrol Views >
             \uicontrol {Connection View} to open the \uicontrol Connections tab.
-        \li Select \e registerButton in the \uicontrol Navigator.
+        \li Select \e createAccount in \uicontrol Navigator.
         \li In the \uicontrol Connections tab, select the \inlineimage plus.png
             button to add the action that the \c onClicked signal handler of
-            \e registerButton should apply.
+            \e createAccount should apply.
         \li Double-click the value \uicontrol Action column and select
-            \uicontrol {Change state to registerState} in the drop-down menu.
+            \uicontrol {Change state to createAccount} in the drop-down menu.
-        \li Repeat the steps above to connect \e backButton to \e loginState
+            \image loginui3-connections.png "Connections tab"
-            by selecting \uicontrol {Change state to loginState} in the last
-            step.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
 
-    You can now see the following connections in the \uicontrol Design mode:
-
-    \image loginui3-connections.png "Connections tab"
-
     In the live preview, you can now click the \uicontrol {Create Account}
-    button to go to the registration page and the back button to return to
+    button to go to the account creation page.
-    the login page.
 
-    \image loginui3.gif "Moving between login page and registration page"
+    \image loginui3.gif "Moving between login page and account creation page"
 
 
     \section2 Learn More - Signal and Event Handlers
@@ -220,11 +200,11 @@
     needs to know that the user has clicked on it. In response, the button may
     change color to indicate its state and perform an action.
 
-    A \e {signal-and-handler} mechanism is used, where the \e signal is the
+    To accomplish this, a \e {signal-and-handler} mechanism is used, where the
-    event that is responded to through a \e {signal handler}. When a signal is
+    \e signal is the event that is responded to through a \e {signal handler}.
-    emitted, the corresponding signal handler is invoked. Placing logic, such
+    When a signal is emitted, the corresponding signal handler is invoked.
-    as a script or other operations, in the handler allows the component to
+    Placing logic, such as a script or other operations, in the handler allows
-    respond to the event.
+    the component to respond to the event.
 
     For more information, see \l{Signal and Handler Event System}.
 
@@ -236,6 +216,6 @@
     \l{Lists and Other Data Models}.
 
     To learn how to use a timeline to animate the transition between the login
-    and registration pages, see the next tutorial in the series,
+    and account creation pages, see the next tutorial in the series,
     \l {Log In UI - Timeline}.
 */

doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml

@@ -1,113 +0,0 @@
-
-/****************************************************************************
-**
-** 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 QtQuick.Controls 2.12
-
-Button {
-    id: control
-
-    implicitWidth: Math.max(
-                       buttonBackground ? buttonBackground.implicitWidth : 0,
-                       textItem.implicitWidth + leftPadding + rightPadding)
-    implicitHeight: Math.max(
-                        buttonBackground ? buttonBackground.implicitHeight : 0,
-                        textItem.implicitHeight + topPadding + bottomPadding)
-    leftPadding: 4
-    rightPadding: 4
-
-    text: "My Button"
-
-    background: buttonBackground
-    Rectangle {
-        id: buttonBackground
-        implicitWidth: 100
-        implicitHeight: 40
-        opacity: enabled ? 1 : 0.3
-        radius: 20
-        border.color: "#41cd52"
-    }
-
-    contentItem: textItem
-    Text {
-        id: textItem
-        text: control.text
-
-        opacity: enabled ? 1.0 : 0.3
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-        font.bold: true
-    }
-
-    states: [
-        State {
-            name: "normal"
-            when: !control.down
-
-            PropertyChanges {
-                target: buttonBackground
-                border.color: "#41cd52"
-            }
-        },
-        State {
-            name: "down"
-            when: control.down
-            PropertyChanges {
-                target: textItem
-                color: "#41cd52"
-            }
-
-            PropertyChanges {
-                target: buttonBackground
-                border.color: "#41cd52"
-            }
-        }
-    ]
-}

doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml

@@ -1,10 +1,11 @@
 
+
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
-** This file is part of the examples of the Qt Toolkit.
+** This file is part of the examples of the Qt Design Studio.
 **
 ** $QT_BEGIN_LICENSE:BSD$
 ** Commercial License Usage
@@ -48,160 +49,113 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-import QtQuick 2.10
+import QtQuick
+import QtQuick.Controls
 import loginui3 1.0
-import QtQuick.Controls 2.3
 
 Rectangle {
-    id: root
+    id: rectangle
-    state: "loginState"
     width: Constants.width
     height: Constants.height
-    gradient: Gradient {
-        GradientStop {
-            position: 0.5
-            color: "#ffffff"
-        }
 
-        GradientStop {
+    color: Constants.backgroundColor
-            position: 1
+    state: "login"
-            color: "#41cd52"
-        }
-    }
-
-    PushButton {
-        id: backButton
-        x: 590
-        y: 20
-        width: 40
-        text: "<"
-        font.pixelSize: 24
-        anchors.right: parent.right
-        anchors.rightMargin: 10
-        anchors.top: parent.top
-        anchors.topMargin: 20
-    }
-
-    Text {
-        id: pageTitle
-        x: 258
-        y: 70
-        width: 123
-        height: 40
-        text: qsTr("Qt Account")
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.top: parent.top
-        anchors.topMargin: 70
-        font.pixelSize: 24
-        font.bold: true
-    }
 
     Image {
-        id: logo
+        id: adventurePage
-        x: 10
+        anchors.fill: parent
-        y: 10
+        source: "images/adventurePage.jpg"
-        width: 100
-        height: 100
-        anchors.topMargin: 10
-        anchors.left: parent.left
-        anchors.leftMargin: 10
-        anchors.top: parent.top
-        source: "qt_logo_green_64x64px.png"
         fillMode: Image.PreserveAspectFit
     }
 
-    Connections {
+    Image {
-        target: registerButton
+        id: qt_logo_green_128x128px
-        onClicked: {
+        x: 296
-            root.state = "registerState"
+        anchors.top: parent.top
+        source: "images/qt_logo_green_128x128px.png"
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.topMargin: 40
+        fillMode: Image.PreserveAspectFit
+    }
+    Text {
+        id: tagLine
+        width: 541
+        height: 78
+        color: "#ffffff"
+        text: qsTr("Are you ready to explore?")
+        anchors.top: qt_logo_green_128x128px.bottom
+        font.pixelSize: 50
+        anchors.topMargin: 40
+        anchors.horizontalCenter: parent.horizontalCenter
+        font.family: "Titillium Web ExtraLight"
+    }
+
+    Column {
+        id: fields
+        x: 128
+        anchors.top: tagLine.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.topMargin: 170
+        spacing: 20
+
+        EntryField {
+            id: username
+            text: "Username or Email"
+        }
+
+        EntryField {
+            id: password
+            text: qsTr("Password")
+        }
+
+        EntryField {
+            id: repeatPassword
+            text: "Repeat Password"
         }
     }
 
-    Connections {
+    Column {
-        target: backButton
+        id: buttons
-        onClicked: {
+        x: 102
-            root.state = "loginState"
+        y: 966
+        anchors.bottom: parent.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottomMargin: 100
+        spacing: 20
+
+        PushButton {
+            id: login
+            text: qsTr("Continue")
+        }
+
+        PushButton {
+            id: createAccount
+            text: qsTr("Create Account")
+
+            Connections {
+                target: createAccount
+                onClicked: rectangle.state = "createAccount"
+            }
         }
     }
-
     states: [
         State {
-            name: "loginState"
+            name: "login"
 
             PropertyChanges {
-                target: verifyPasswordField
+                target: repeatPassword
-                visible: false
-            }
-
-            PropertyChanges {
-                target: backButton
                 visible: false
             }
         },
         State {
-            name: "registerState"
+            name: "createAccount"
 
             PropertyChanges {
-                target: loginButton
+                target: createAccount
                 visible: false
             }
         }
     ]
-    Column {
-        id: fieldColumn
-        x: 170
-        y: 200
-        width: 300
-        height: 130
-        spacing: 5
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.top: parent.top
-        anchors.topMargin: 200
-
-        TextField {
-            id: usernameField
-            width: 300
-            placeholderText: qsTr("Username")
-            font.pointSize: 10
-        }
-
-        TextField {
-            id: passwordField
-            width: 300
-            placeholderText: qsTr("Password")
-            font.pointSize: 10
-        }
-
-        TextField {
-            id: verifyPasswordField
-            width: 300
-            visible: true
-            font.pointSize: 10
-            placeholderText: qsTr("Verify password")
-        }
-    }
-
-    Column {
-        id: buttonColumn
-        x: 260
-        y: 345
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 50
-        spacing: 5
-        anchors.horizontalCenter: parent.horizontalCenter
-
-        PushButton {
-            id: loginButton
-            width: 120
-            text: qsTr("Log In")
-        }
-
-        PushButton {
-            id: registerButton
-            width: 120
-            text: qsTr("Create Account")
-        }
-    }
 }
 
 /*##^##

doc/qtdesignstudio/examples/loginui3/imports/loginui3/Constants.qml

@@ -1,76 +1,26 @@
-/****************************************************************************
-**
-** Copyright (C) 2019 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$
-**
-****************************************************************************/
-
 pragma Singleton
-import QtQuick 2.10
+import QtQuick
 
 QtObject {
-    readonly property int width: 640
+    readonly property int width: 720
-    readonly property int height: 480
+    readonly property int height: 1280
-    readonly property FontLoader mySystemFont: FontLoader { name: "Arial" }
+
+    property alias fontDirectory: directoryFontLoader.fontDirectory
+    property alias relativeFontDirectory: directoryFontLoader.relativeFontDirectory
+
     /* Edit this comment to add your custom font */
-    /* readonly property FontLoader myCustomFont: FontLoader { source: "MyCustomFont.ttf" } */
     readonly property font font: Qt.font({
-                                             family: mySystemFont.name,
+                                             family: Qt.application.font.family,
-                                             pointSize: Qt.application.font.pixelSize
+                                             pixelSize: Qt.application.font.pixelSize
                                          })
     readonly property font largeFont: Qt.font({
-                                                  family: mySystemFont.name,
+                                                  family: Qt.application.font.family,
-                                                  pointSize: Qt.application.font.pixelSize * 1.6
+                                                  pixelSize: Qt.application.font.pixelSize * 1.6
                                               })
+
     readonly property color backgroundColor: "#c2c2c2"
+
+    property DirectoryFontLoader directoryFontLoader: DirectoryFontLoader {
+        id: directoryFontLoader
+    }
 }
-
-
-
-/*##^## Designer {
-    D{i:0;autoSize:true;height:480;width:640}
-}
- ##^##*/

doc/qtdesignstudio/examples/loginui3/imports/loginui3/qmldir

@@ -1 +1,2 @@
 singleton Constants 1.0 Constants.qml
+EventListSimulator 1.0 EventListSimulator.qml

doc/qtdesignstudio/examples/loginui3/loginui3.qml

@@ -1,9 +1,9 @@
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
-** This file is part of the examples of the Qt Toolkit.
+** This file is part of the examples of the Qt Design Studio.
 **
 ** $QT_BEGIN_LICENSE:BSD$
 ** Commercial License Usage
@@ -48,7 +48,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.10
+import QtQuick
 import loginui3 1.0
 
 Item {
@@ -57,11 +57,5 @@ Item {
 
     Screen01 {
     }
+
 }
-
-
-
-/*##^## Designer {
-    D{i:0;autoSize:true;height:480;width:640}
-}
- ##^##*/

doc/qtdesignstudio/examples/loginui3/loginui3.qmlproject

@@ -28,14 +28,20 @@ Project {
         directory: "."
     }
 
+    Files {
+        filter: "*.ttf;*.otf"
+    }
+
     Environment {
         QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
         QT_AUTO_SCREEN_SCALE_FACTOR: "1"
     }
 
+    qt6Project: true
+
     /* List of plugin directories passed to QML runtime */
-    importPaths: [ "imports" ]
+    importPaths: [ "imports", "asset_imports" ]
 
     /* Required for deployment */
-    targetDirectory: "/opt/loginui3"
+    targetDirectory: "/opt/loginui1"
 }

doc/qtdesignstudio/examples/loginui3/qtquickcontrols2.conf

@@ -1,3 +1,2 @@
-; This file can be edited to change the style of the application
+[Controls]
-; Read "Qt Quick Controls 2 Configuration File" for details:
+Style=Default
-; https://doc.qt.io/qt/qtquickcontrols2-configuration.html