Doc: Update all LoginUI tutorials

Update all LoginUI tutorials and the documentation for them.

Task-number: QDS-5915
Change-Id: I5a2665ca08ae3d167dfb5e937ee36c96f42ccd9a
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>

doc/qtdesignstudio/examples/doc/loginui1.qdoc

@@ -41,6 +41,9 @@
     project and a button UI control, and how to modify the files generated by
     the wizard templates to wireframe the UI.
 
+    You can donwnload the completed project from
+    \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui1}{here}.
+
     The \e {Learn More} sections provide additional information about the
     tasks performed by the wizards and about other basic tasks and concepts.
 
@@ -54,24 +57,19 @@
     To create a project:
 
     \list 1
-        \li Select \uicontrol File > \uicontrol {New Project} >
+        \li Select \uicontrol File > \uicontrol {New Project}.
-            \uicontrol General > \uicontrol {Qt Quick Application - Empty} >
+        \li In the \uicontrol Presets tab, select \uicontrol General >
-            \uicontrol Choose.
+        \uicontrol {Empty}.
-        \li In the \uicontrol Name field, enter the project name: \e {loginui1}.
+        \li In the \uicontrol Details tab:
-            When naming your own projects, keep in mind that they cannot be
+            \list
-            easily renamed later.
+                \li Enter \e Loginui1 as the name for the project. Keep in mind
-        \li In the \uicontrol {Create in} field, enter the path to the folder
+                that projects cannot be easily renamed later.
-            where you want to store the project files. You can move project
+                \li Select the path for the project files. You can move project
-            folders later without problems.
+                folders later.
-        \li Select \uicontrol Next (or \uicontrol Continue on \macos) to
+                \li Set \uicontrol Width to 720 and \uicontrol Height to 1280.
-            continue to the \uicontrol {Define Project Details} page.
+                You can change the screen size later in \l Properties.
-        \li In the \uicontrol {Screen resolution} field, select the initial
+            \endlist
-            size of the UI. In this tutorial, we use the predefined size
+        \li Select \uicontrol Create to create the project.
-            \e {720 x 1280 (HD)} (portrait) instead of the default size
-            (landscape). You can easily change the screen size later in
-            \l Properties.
-        \li Select \uicontrol Finish (or \uicontrol Done on \macos) to create
-            the project.
     \endlist
 
     Your project should now look something like this in the \uicontrol Design
@@ -92,7 +90,7 @@
     \section2 Learn More - Projects and Files
 
     \QDS creates a set of boilerplate files and folders that you need to create
-    a UI. The files are listed in the \l Projects view.
+    a UI. The files are listed in the \l{File System} view.
 
     \image loginui1-project-files.png
 
@@ -112,6 +110,9 @@
             Specifically, if you export and import designs using \QB, your main
             file is most likely called something else. For more information,
             see \l {Exporting from Design Tools}.
+        \li The \e CMakeLists.txt project configuration file allowing you to
+            share your project as a fully working C++ application with
+            developers.
         \li The \e {qtquickcontrols2.conf} file specifies the selected
             \l {Styling Qt Quick Controls}{UI style} and some style-specific
             arguments.
@@ -230,7 +231,7 @@
     adds the following \e import statements to the UI files (.ui.qml) that it
     creates:
 
-    \quotefromfile loginui1/Screen01.ui.qml
+    \quotefromfile Loginui1/Content/Screen01.ui.qml
     \skipto import
     \printuntil Controls
 
@@ -333,7 +334,7 @@
     To be able to use the functionality of the Button control, the wizard template
     adds the following \e import statements to the \e EntryField.ui.qml file:
 
-    \quotefromfile loginui1/EntryField.ui.qml
+    \quotefromfile Loginui1/Content/EntryField.ui.qml
     \skipto import
     \printuntil Controls
 
@@ -364,7 +365,7 @@
             to \e 100, to match the width of the tag line.
         \li In the \uicontrol Control section, deselect the \uicontrol Hover
             check box because we don't want the hover effect for the button.
-        \li Select the button background in \uicontrol Navigator to display its
+        \li Select \e buttonBackground in \uicontrol Navigator to display its
             properties in \uicontrol Properties.
         \li In \uicontrol Rectangle > \uicontrol {Fill color}, set the color to
             transparent light gray (\e #28e7e7e7) in \uicontrol Hex. You can
@@ -372,7 +373,7 @@
         \li In \uicontrol {Border Color}, select white (\e #ffffff).
         \li In \uicontrol Radius, enter \e 50 to give the button
             rounded corners.
-        \li Select the text component in \uicontrol Navigator to display its
+        \li Select \e textItem in \uicontrol Navigator to display its
             properties in \uicontrol Properties.
         \li In \uicontrol Character > \uicontrol Font, select
             \e {Titillium Web ExtraLight}.
@@ -382,7 +383,7 @@
             (\e #ffffff).
         \li In \uicontrol {Alignment H}, select the \uicontrol Left button to
             align the text horizontally to the left.
-        \li In the \uicontrol Padding section > \uicontrol Horizontal >
+        \li In \uicontrol Padding > \uicontrol Horizontal >
             \uicontrol Left, set the padding in the field between background
             border and text to \e 50.
             \image loginui1-text-properties-button.png "Text properties"
@@ -450,13 +451,13 @@
             to \e 100.
         \li In the \uicontrol Control section, deselect the \uicontrol Hover
             check box because we don't want the hover effect for the button.
-        \li Select the button background in \uicontrol Navigator to display its
+        \li Select \e buttonBackground in \uicontrol Navigator to display its
             properties in \uicontrol Properties.
         \li In \uicontrol Rectangle > \uicontrol {Border color}, select the
             green used in the logo (\e #41cd52).
         \li In \uicontrol Radius, enter \e 50 to give the button rounded
             corners.
-        \li Select the the text component in \uicontrol Navigator to display
+        \li Select \e textItem in \uicontrol Navigator to display
             its properties in \uicontrol Properties.
         \li In \uicontrol Character > \uicontrol Font, select
             \e {Titillium Web ExtraLight}.

doc/qtdesignstudio/examples/doc/loginui2.qdoc

@@ -24,7 +24,7 @@
 ****************************************************************************/
 
 /*!
-    \example loginui2
+    \example Loginui2
     \ingroup gstutorials
     \previouspage {Log In UI - Components}
     \nextpage {Log In UI - States}
@@ -45,7 +45,12 @@
     their proper places when you resize the UI on the desktop or on devices
     with different screen sizes, you will use anchors and positioners.
 
-    These instructions build on \l {Log In UI - Components}.
+    The starting point for this tutorial is the completed
+    \l{Log In UI - Components} project. You can download the project from
+    \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui1}{here}.
+
+    Additionally, you can download the completed project of this tutorial from
+    \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui2}{here}.
 
     The \e {Learn More} sections provide additional information about the
     task at hand.
@@ -79,6 +84,9 @@
             anchor button to anchor \e adventurePage to its
             parent in the \uicontrol Target field. This attaches the background
             image to the rectangle on all sides.
+            Note: Selecting the anchor button should automatically select the
+            four buttons on the left side of it. If it doesn't, refresh
+            \uicontrol{Form Editor}.
             \image loginui2-layout.png "Layout properties"
         \li Select \e qt_logo_green_128x128px in \l Navigator.
         \li In \uicontrol Properties > \uicontrol Layout, select the

doc/qtdesignstudio/examples/doc/loginui3.qdoc

@@ -46,12 +46,12 @@
     login page, you will use \e states to show and hide UI components as necessary
     when a user selects the \e {Create Account} button.
 
-    These instructions build on:
+    The starting point for this tutorial is the completed
+    \l{Log In UI - Positioning} project. You can download the project from
+    \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui2}{here}.
 
-    \list
+    Additionally, you can download the completed project of this tutorial from
-        \li \l {Log In UI - Components}
+    \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui3}{here}.
-        \li \l {Log In UI - Positioning}
-    \endlist
 
     The \e {Learn More} sections provide additional information relevant to the
     task at hand.

doc/qtdesignstudio/examples/doc/loginui4.qdoc

@@ -46,13 +46,13 @@
     \l{Creating Timeline Animations}{timeline animations} that you bind
     to states.
 
-    These instructions build on:
+    The starting point for this tutorial is the completed
+    \l{Log In UI - States} project. You can download the project from
+    \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui3}{here}.
+
+    Additionally, you can download the completed project of this tutorial from
+    \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui4}{here}.
 
-    \list
-        \li \l {Log In UI - Components}
-        \li \l {Log In UI - Positioning}
-        \li \l {Log In UI - States}
-    \endlist
 
     The \e {Learn More} sections provide additional information relevant to the
     task at hand.
@@ -94,7 +94,7 @@
         \li Select \inlineimage icons/navigator-arrowup.png
             to move \e username below \e tagLine in \uicontrol Navigator
             to preserve the \l{Arranging Components}{component hierarchy}.
-        \li Repeat for \e password and \e repeatPassword.
+        \li Repeat step 3 and 4 for \e password and \e repeatPassword.
         \li Select \e fields in \uicontrol Navigator and press \key Delete to
             delete it.
         \li Select \e username in \uicontrol Navigator to display its properties
@@ -196,8 +196,8 @@
             to save your changes.
     \endlist
 
-    When you move the playhead along the timeline, you can see how the login
+    When you move the playhead along the timeline, you can see how the create
-    button fades out while the repeat password field fades in.
+    account button fades out while the repeat password field fades in.
 
     You will now animate the top anchor margin of the repeat password field
     to make it appear to slide down from the password field.
@@ -219,7 +219,7 @@
             frame 0, and select the record button for the \e anchors.topMargin
             property of \e repeatPassword.
         \li In the field next to the property, set a negative value for the
-            top anchor margin, -40, to place \e repeatPassword on top of
+            top anchor margin, -100, to place \e repeatPassword on top of
             \e password.
         \li Move the playhead to frame 1000 and change the top anchor margin
             to 20, so that, combined with the change in the \uicontrol Opacity
@@ -312,7 +312,7 @@
     the following \e import statement to the UI files where it uses the
     components:
 
-    \quotefromfile loginui4/Screen01.ui.qml
+    \quotefromfile Loginui4/Content/Screen01.ui.qml
     \skipto QtQuick.Timeline
     \printuntil 1.0
 

doc/qtdesignstudio/examples/loginui1/content/EntryField.ui.qml

@@ -1,8 +1,6 @@
-
-
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2022 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the examples of the Qt Design Studio.
@@ -49,6 +47,7 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
+
 import QtQuick 2.15
 import QtQuick.Controls 2.12
 
@@ -100,13 +99,16 @@ Button {
             when: !control.down
 
             PropertyChanges {
-                target: textItem
+                target: buttonBackground
-                font.family: "Titillium Web ExtraLight"
+                color: "#00000000"
+                border.color: "#ffffff"
             }
 
             PropertyChanges {
-                target: buttonBackground
+                target: textItem
-                color: "#28e7e7e7"
+                color: "#ffffff"
+                font.pixelSize: 34
+                font.family: "Titillium Web ExtraLight"
             }
         },
         State {
@@ -115,12 +117,14 @@ Button {
             PropertyChanges {
                 target: textItem
                 color: "#ffffff"
+                border.color: "#ffffff"
+                font.family: "Titillium Web ExtraLight"
             }
 
             PropertyChanges {
                 target: buttonBackground
-                color: "#e7e7e7"
+                color: "#28e7e7e7"
-                border.color: "#ffffff"
+                border.color: "#00000000"
             }
         }
     ]

doc/qtdesignstudio/examples/loginui1/content/PushButton.ui.qml

@@ -1,8 +1,6 @@
-
-
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2022 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the examples of the Qt Design Studio.
@@ -49,6 +47,7 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
+
 import QtQuick 2.15
 import QtQuick.Controls 2.12
 
@@ -68,6 +67,7 @@ Button {
 
     text: "My Button"
     hoverEnabled: false
+    enabled: true
 
     background: buttonBackground
     Rectangle {
@@ -83,6 +83,8 @@ Button {
     contentItem: textItem
     Text {
         id: textItem
+        width: 500
+        height: 100
         text: control.text
         font.pixelSize: 34
 
@@ -101,6 +103,14 @@ Button {
             PropertyChanges {
                 target: buttonBackground
                 color: "#00000000"
+                border.color: "#41cd52"
+            }
+
+            PropertyChanges {
+                target: textItem
+                color: "#41cd52"
+                font.pixelSize: 34
+                font.family: "Titillium Web ExtraLight"
             }
         },
         State {
@@ -108,20 +118,17 @@ Button {
             when: control.down
             PropertyChanges {
                 target: textItem
-                color: "#ffffff"
+                color: "#41cd52"
+                border.color: "#41cd52"
+                font.pixelSize: 34
+                font.family: "Titillium Web ExtraLight"
             }
 
             PropertyChanges {
                 target: buttonBackground
                 color: "#41cd52"
-                border.color: "#00000000"
+                border.color: "#41cd52"
             }
         }
     ]
 }
-
-/*##^##
-Designer {
-    D{i:0;height:100;width:500}
-}
-##^##*/

doc/qtdesignstudio/examples/loginui1/content/Screen01.ui.qml

@@ -1,8 +1,6 @@
-
-
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2022 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the examples of the Qt Design Studio.
@@ -49,9 +47,10 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
+
 import QtQuick
 import QtQuick.Controls
-import loginui1 1.0
+import Loginui1
 
 Rectangle {
     width: Constants.width
@@ -70,47 +69,44 @@ Rectangle {
     Image {
         id: qt_logo_green_128x128px
         x: 296
-        y: 40
+        y: 0
         source: "images/qt_logo_green_128x128px.png"
         fillMode: Image.PreserveAspectFit
     }
     Text {
-        id: tagLine
-        width: 541
-        height: 78
         color: "#ffffff"
         text: qsTr("Are you ready to explore?")
         font.pixelSize: 50
         font.family: "Titillium Web ExtraLight"
-        anchors.verticalCenterOffset: -391
+        anchors.verticalCenterOffset: -430
-        anchors.horizontalCenterOffset: 18
+        anchors.horizontalCenterOffset: 0
         anchors.centerIn: parent
     }
 
     EntryField {
         id: username
-        x: 128
+        x: 110
         y: 470
-        text: "Username or Email"
+        text: qsTr("Username or Email")
     }
 
     EntryField {
         id: password
-        x: 128
+        x: 110
         y: 590
         text: qsTr("Password")
     }
 
     PushButton {
         id: login
-        x: 102
+        x: 101
-        y: 966
+        y: 944
         text: qsTr("Continue")
     }
 
     PushButton {
-        id: createAccount
+        id: creteAccount
-        x: 102
+        x: 101
         y: 1088
         text: qsTr("Create Account")
     }
@@ -118,7 +114,7 @@ Rectangle {
 
 /*##^##
 Designer {
-    D{i:0;formeditorZoom:0.33}
+    D{i:0;formeditorZoom:0.5}D{i:1}D{i:2}D{i:3}D{i:4}D{i:5}D{i:6}D{i:7}
 }
 ##^##*/
 

doc/qtdesignstudio/examples/loginui1/imports/loginui1/EventListModel.qml

@@ -0,0 +1,41 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $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
+
+ListModel {
+    id: eventListModel
+
+    ListElement {
+        eventId: "enterPressed"
+        eventDescription: "Emitted when pressing the enter button"
+        shortcut: "Return"
+        parameters: "Enter"
+    }
+}

doc/qtdesignstudio/examples/loginui1/imports/loginui1/EventListSimulator.qml

@@ -0,0 +1,51 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $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
+import QtQuick.Studio.EventSimulator 1.0
+import QtQuick.Studio.EventSystem 1.0
+
+QtObject {
+    id: simulator
+    property bool active: true
+
+    property Timer __timer: Timer {
+        id: timer
+        interval: 100
+        onTriggered: {
+            EventSimulator.show()
+        }
+    }
+
+    Component.onCompleted: {
+        EventSystem.init(Qt.resolvedUrl("EventListModel.qml"))
+        if (simulator.active)
+            timer.start()
+    }
+}

doc/qtdesignstudio/examples/loginui1/imports/loginui1/qmldir

@@ -1,2 +1,6 @@
+Module Loginui1
 singleton Constants 1.0 Constants.qml
 EventListSimulator 1.0 EventListSimulator.qml
+EventListModel 1.0 EventListModel.qml
+DirectoryFontLoader 1.0 DirectoryFontLoader.qml
+

doc/qtdesignstudio/examples/loginui1/loginui1.qml

@@ -1,61 +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
-import loginui1 1.0
-
-Item {
-    width: Constants.width
-    height: Constants.height
-
-    Screen01 {
-    }
-
-}

doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject

@@ -1,21 +1,69 @@
-/* File generated by Qt Creator */
+/****************************************************************************
+**
+** 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 QmlProject 1.1
+import QmlProject
 
 Project {
-    mainFile: "loginui1.qml"
+    mainFile: "content/App.qml"
 
     /* Include .qml, .js, and image files from current directory and subdirectories */
     QmlFiles {
-        directory: "."
+        directory: "content"
     }
 
     JavaScriptFiles {
-        directory: "."
+        directory: "content"
     }
 
     ImageFiles {
-        directory: "."
+        directory: "content"
     }
 
     Files {
@@ -32,9 +80,34 @@ Project {
         filter: "*.ttf;*.otf"
     }
 
+    Files {
+        filter: "*.wav;*.mp3"
+    }
+
+    Files {
+        filter: "*.mp4"
+    }
+
+    Files {
+        filter: "*.glsl;*.glslv;*.glslf;*.vsh;*.fsh;*.vert;*.frag"
+    }
+
+    Files {
+        filter: "*.mesh"
+        directory: "asset_imports"
+    }
+
     Environment {
         QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
         QT_AUTO_SCREEN_SCALE_FACTOR: "1"
+        QT_LOGGING_RULES: "qt.qml.connections=false"
+        QT_ENABLE_HIGHDPI_SCALING: "0"
+        /* Useful for debugging
+       QSG_VISUALIZE=batches
+       QSG_VISUALIZE=clip
+       QSG_VISUALIZE=changes
+       QSG_VISUALIZE=overdraw
+       */
     }
 
     qt6Project: true
@@ -43,5 +116,10 @@ Project {
     importPaths: [ "imports", "asset_imports" ]
 
     /* Required for deployment */
-    targetDirectory: "/opt/loginui1"
+    targetDirectory: "/opt/Loginui1"
+
+    qdsVersion: "3.0"
+
+    /* If any modules the project imports require widgets (e.g. QtCharts), widgetApp must be true */
+    widgetApp: true
 }

doc/qtdesignstudio/examples/loginui1/qtquickcontrols2.conf

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

doc/qtdesignstudio/examples/loginui1/src/app_environment.h

@@ -1,6 +1,11 @@
+/*
+ * This file is automatically generated by Qt Design Studio.
+ * Do not change.
+*/
+
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2022 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the examples of the Qt Design Studio.
@@ -48,14 +53,12 @@
 **
 ****************************************************************************/
 
-import QtQuick
+#include <QGuiApplication>
-import loginui4 1.0
-
-Item {
-    width: Constants.width
-    height: Constants.height
-
-    Screen01 {
-    }
 
+void set_qt_environment()
+{
+    qputenv("QT_AUTO_SCREEN_SCALE_FACTOR", "1");
+    qputenv("QT_ENABLE_HIGHDPI_SCALING", "0");
+    qputenv("QT_LOGGING_RULES", "qt.qml.connections=false");
+    qputenv("QT_QUICK_CONTROLS_CONF", ":/qtquickcontrols2.conf");
 }

doc/qtdesignstudio/examples/loginui1/src/import_qml_plugins.h

@@ -0,0 +1,9 @@
+/*
+ * This file is automatically generated by Qt Design Studio.
+ * Do not change.
+*/
+
+#include <QtQml/qqmlextensionplugin.h>
+
+Q_IMPORT_QML_PLUGIN(contentPlugin)
+Q_IMPORT_QML_PLUGIN(Loginui1Plugin)

doc/qtdesignstudio/examples/loginui1/src/main.cpp

@@ -0,0 +1,62 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $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$
+**
+****************************************************************************/
+
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+#include "app_environment.h"
+#include "import_qml_plugins.h"
+
+int main(int argc, char *argv[])
+{
+    set_qt_environment();
+
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    const QUrl url(u"qrc:Main/main.qml"_qs);
+    QObject::connect(
+                &engine, &QQmlApplicationEngine::objectCreated, &app,
+                [url](QObject *obj, const QUrl &objUrl) {
+        if (!obj && url == objUrl)
+            QCoreApplication::exit(-1);
+    },
+    Qt::QueuedConnection);
+
+    engine.addImportPath(QCoreApplication::applicationDirPath() + "/qml");
+    engine.addImportPath(":/");
+
+    engine.load(url);
+
+    if (engine.rootObjects().isEmpty()) {
+        return -1;
+    }
+
+    return app.exec();
+}

doc/qtdesignstudio/examples/loginui2/Loginui2.qmlproject

@@ -0,0 +1,75 @@
+import QmlProject
+
+Project {
+    mainFile: "content/App.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "content"
+    }
+
+    JavaScriptFiles {
+        directory: "content"
+    }
+
+    ImageFiles {
+        directory: "content"
+    }
+
+    Files {
+        filter: "*.conf"
+        files: ["qtquickcontrols2.conf"]
+    }
+
+    Files {
+        filter: "qmldir"
+        directory: "."
+    }
+
+    Files {
+        filter: "*.ttf;*.otf"
+    }
+
+    Files {
+        filter: "*.wav;*.mp3"
+    }
+
+    Files {
+        filter: "*.mp4"
+    }
+
+    Files {
+        filter: "*.glsl;*.glslv;*.glslf;*.vsh;*.fsh;*.vert;*.frag"
+    }
+
+    Files {
+        filter: "*.mesh"
+        directory: "asset_imports"
+    }
+
+    Environment {
+        QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
+        QT_AUTO_SCREEN_SCALE_FACTOR: "1"
+        QT_LOGGING_RULES: "qt.qml.connections=false"
+        QT_ENABLE_HIGHDPI_SCALING: "0"
+        /* Useful for debugging
+       QSG_VISUALIZE=batches
+       QSG_VISUALIZE=clip
+       QSG_VISUALIZE=changes
+       QSG_VISUALIZE=overdraw
+       */
+    }
+
+    qt6Project: true
+
+    /* List of plugin directories passed to QML runtime */
+    importPaths: [ "imports", "asset_imports" ]
+
+    /* Required for deployment */
+    targetDirectory: "/opt/Loginui1"
+
+    qdsVersion: "3.0"
+
+    /* If any modules the project imports require widgets (e.g. QtCharts), widgetApp must be true */
+    widgetApp: true
+}

doc/qtdesignstudio/examples/loginui2/content/Screen01.ui.qml

@@ -1,8 +1,6 @@
-
-
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2022 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the examples of the Qt Design Studio.
@@ -49,9 +47,10 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
+
 import QtQuick
 import QtQuick.Controls
-import loginui2 1.0
+import Loginui1
 
 Rectangle {
     id: rectangle
@@ -69,7 +68,6 @@ Rectangle {
 
     Image {
         id: qt_logo_green_128x128px
-        x: 296
         anchors.top: parent.top
         source: "images/qt_logo_green_128x128px.png"
         anchors.horizontalCenter: parent.horizontalCenter
@@ -78,8 +76,6 @@ Rectangle {
     }
     Text {
         id: tagLine
-        width: 541
-        height: 78
         color: "#ffffff"
         text: qsTr("Are you ready to explore?")
         anchors.top: qt_logo_green_128x128px.bottom
@@ -87,11 +83,11 @@ Rectangle {
         anchors.topMargin: 40
         anchors.horizontalCenter: parent.horizontalCenter
         font.family: "Titillium Web ExtraLight"
+        anchors.horizontalCenterOffset: 0
     }
 
     Column {
         id: fields
-        x: 128
         anchors.top: tagLine.bottom
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.topMargin: 170
@@ -99,7 +95,7 @@ Rectangle {
 
         EntryField {
             id: username
-            text: "Username or Email"
+            text: qsTr("Username or Email")
         }
 
         EntryField {
@@ -110,11 +106,10 @@ Rectangle {
 
     Column {
         id: buttons
-        x: 102
+        y: 944
-        y: 966
         anchors.bottom: parent.bottom
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottomMargin: 100
+        anchors.bottomMargin: 50
         spacing: 20
 
         PushButton {
@@ -123,7 +118,7 @@ Rectangle {
         }
 
         PushButton {
-            id: createAccount
+            id: creteAccount
             text: qsTr("Create Account")
         }
     }
@@ -131,7 +126,7 @@ Rectangle {
 
 /*##^##
 Designer {
-    D{i:0;formeditorZoom:0.5}D{i:1}D{i:2}D{i:4}
+    D{i:0;formeditorZoom:0.66}D{i:1}D{i:2}D{i:3}D{i:5}D{i:6}D{i:4}D{i:8}D{i:9}D{i:7}
 }
 ##^##*/
 

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

@@ -1,26 +0,0 @@
-pragma Singleton
-import QtQuick
-
-QtObject {
-    readonly property int width: 720
-    readonly property int height: 1280
-
-    property alias fontDirectory: directoryFontLoader.fontDirectory
-    property alias relativeFontDirectory: directoryFontLoader.relativeFontDirectory
-
-    /* Edit this comment to add your custom font */
-    readonly property font font: Qt.font({
-                                             family: Qt.application.font.family,
-                                             pixelSize: Qt.application.font.pixelSize
-                                         })
-    readonly property font largeFont: Qt.font({
-                                                  family: Qt.application.font.family,
-                                                  pixelSize: Qt.application.font.pixelSize * 1.6
-                                              })
-
-    readonly property color backgroundColor: "#c2c2c2"
-
-    property DirectoryFontLoader directoryFontLoader: DirectoryFontLoader {
-        id: directoryFontLoader
-    }
-}

doc/qtdesignstudio/examples/loginui2/imports/loginui2/qmldir

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

doc/qtdesignstudio/examples/loginui2/loginui2.qml

@@ -1,61 +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
-import loginui2 1.0
-
-Item {
-    width: Constants.width
-    height: Constants.height
-
-    Screen01 {
-    }
-
-}

doc/qtdesignstudio/examples/loginui2/loginui2.qmlproject

@@ -1,47 +0,0 @@
-/* File generated by Qt Creator */
-
-import QmlProject 1.1
-
-Project {
-    mainFile: "loginui2.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"
-    }
-
-    qt6Project: true
-
-    /* List of plugin directories passed to QML runtime */
-    importPaths: [ "imports", "asset_imports" ]
-
-    /* Required for deployment */
-    targetDirectory: "/opt/loginui1"
-}

doc/qtdesignstudio/examples/loginui2/qtquickcontrols2.conf

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

doc/qtdesignstudio/examples/loginui3/Loginui3.qmlproject

@@ -0,0 +1,75 @@
+import QmlProject
+
+Project {
+    mainFile: "content/App.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "content"
+    }
+
+    JavaScriptFiles {
+        directory: "content"
+    }
+
+    ImageFiles {
+        directory: "content"
+    }
+
+    Files {
+        filter: "*.conf"
+        files: ["qtquickcontrols2.conf"]
+    }
+
+    Files {
+        filter: "qmldir"
+        directory: "."
+    }
+
+    Files {
+        filter: "*.ttf;*.otf"
+    }
+
+    Files {
+        filter: "*.wav;*.mp3"
+    }
+
+    Files {
+        filter: "*.mp4"
+    }
+
+    Files {
+        filter: "*.glsl;*.glslv;*.glslf;*.vsh;*.fsh;*.vert;*.frag"
+    }
+
+    Files {
+        filter: "*.mesh"
+        directory: "asset_imports"
+    }
+
+    Environment {
+        QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
+        QT_AUTO_SCREEN_SCALE_FACTOR: "1"
+        QT_LOGGING_RULES: "qt.qml.connections=false"
+        QT_ENABLE_HIGHDPI_SCALING: "0"
+        /* Useful for debugging
+       QSG_VISUALIZE=batches
+       QSG_VISUALIZE=clip
+       QSG_VISUALIZE=changes
+       QSG_VISUALIZE=overdraw
+       */
+    }
+
+    qt6Project: true
+
+    /* List of plugin directories passed to QML runtime */
+    importPaths: [ "imports", "asset_imports" ]
+
+    /* Required for deployment */
+    targetDirectory: "/opt/Loginui1"
+
+    qdsVersion: "3.0"
+
+    /* If any modules the project imports require widgets (e.g. QtCharts), widgetApp must be true */
+    widgetApp: true
+}

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

@@ -1,8 +1,6 @@
-
-
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2022 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the examples of the Qt Design Studio.
@@ -49,9 +47,10 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
+
 import QtQuick
 import QtQuick.Controls
-import loginui3 1.0
+import Loginui1
 
 Rectangle {
     id: rectangle
@@ -70,7 +69,6 @@ Rectangle {
 
     Image {
         id: qt_logo_green_128x128px
-        x: 296
         anchors.top: parent.top
         source: "images/qt_logo_green_128x128px.png"
         anchors.horizontalCenter: parent.horizontalCenter
@@ -79,8 +77,6 @@ Rectangle {
     }
     Text {
         id: tagLine
-        width: 541
-        height: 78
         color: "#ffffff"
         text: qsTr("Are you ready to explore?")
         anchors.top: qt_logo_green_128x128px.bottom
@@ -88,11 +84,11 @@ Rectangle {
         anchors.topMargin: 40
         anchors.horizontalCenter: parent.horizontalCenter
         font.family: "Titillium Web ExtraLight"
+        anchors.horizontalCenterOffset: 0
     }
 
     Column {
         id: fields
-        x: 128
         anchors.top: tagLine.bottom
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.topMargin: 170
@@ -100,7 +96,7 @@ Rectangle {
 
         EntryField {
             id: username
-            text: "Username or Email"
+            text: qsTr("Username or Email")
         }
 
         EntryField {
@@ -110,17 +106,16 @@ Rectangle {
 
         EntryField {
             id: repeatPassword
-            text: "Repeat Password"
+            text: qsTr("Repeat Password")
         }
     }
 
     Column {
         id: buttons
-        x: 102
+        y: 944
-        y: 966
         anchors.bottom: parent.bottom
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottomMargin: 100
+        anchors.bottomMargin: 50
         spacing: 20
 
         PushButton {
@@ -160,7 +155,8 @@ Rectangle {
 
 /*##^##
 Designer {
-    D{i:0;formeditorZoom:0.5}
+    D{i:0;formeditorZoom:0.5}D{i:1}D{i:2}D{i:3}D{i:5}D{i:6}D{i:7}D{i:4}D{i:9}D{i:11}D{i:10}
+D{i:8}
 }
 ##^##*/
 

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

@@ -1,26 +0,0 @@
-pragma Singleton
-import QtQuick
-
-QtObject {
-    readonly property int width: 720
-    readonly property int height: 1280
-
-    property alias fontDirectory: directoryFontLoader.fontDirectory
-    property alias relativeFontDirectory: directoryFontLoader.relativeFontDirectory
-
-    /* Edit this comment to add your custom font */
-    readonly property font font: Qt.font({
-                                             family: Qt.application.font.family,
-                                             pixelSize: Qt.application.font.pixelSize
-                                         })
-    readonly property font largeFont: Qt.font({
-                                                  family: Qt.application.font.family,
-                                                  pixelSize: Qt.application.font.pixelSize * 1.6
-                                              })
-
-    readonly property color backgroundColor: "#c2c2c2"
-
-    property DirectoryFontLoader directoryFontLoader: DirectoryFontLoader {
-        id: directoryFontLoader
-    }
-}

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

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

doc/qtdesignstudio/examples/loginui3/loginui3.qml

@@ -1,61 +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
-import loginui3 1.0
-
-Item {
-    width: Constants.width
-    height: Constants.height
-
-    Screen01 {
-    }
-
-}

doc/qtdesignstudio/examples/loginui3/loginui3.qmlproject

@@ -1,47 +0,0 @@
-/* File generated by Qt Creator */
-
-import QmlProject 1.1
-
-Project {
-    mainFile: "loginui3.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"
-    }
-
-    qt6Project: true
-
-    /* List of plugin directories passed to QML runtime */
-    importPaths: [ "imports", "asset_imports" ]
-
-    /* Required for deployment */
-    targetDirectory: "/opt/loginui1"
-}

doc/qtdesignstudio/examples/loginui3/qtquickcontrols2.conf

@@ -1,2 +0,0 @@
-[Controls]
-Style=Default

doc/qtdesignstudio/examples/loginui4/Loginui4.qmlproject

@@ -0,0 +1,75 @@
+import QmlProject
+
+Project {
+    mainFile: "content/App.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "content"
+    }
+
+    JavaScriptFiles {
+        directory: "content"
+    }
+
+    ImageFiles {
+        directory: "content"
+    }
+
+    Files {
+        filter: "*.conf"
+        files: ["qtquickcontrols2.conf"]
+    }
+
+    Files {
+        filter: "qmldir"
+        directory: "."
+    }
+
+    Files {
+        filter: "*.ttf;*.otf"
+    }
+
+    Files {
+        filter: "*.wav;*.mp3"
+    }
+
+    Files {
+        filter: "*.mp4"
+    }
+
+    Files {
+        filter: "*.glsl;*.glslv;*.glslf;*.vsh;*.fsh;*.vert;*.frag"
+    }
+
+    Files {
+        filter: "*.mesh"
+        directory: "asset_imports"
+    }
+
+    Environment {
+        QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
+        QT_AUTO_SCREEN_SCALE_FACTOR: "1"
+        QT_LOGGING_RULES: "qt.qml.connections=false"
+        QT_ENABLE_HIGHDPI_SCALING: "0"
+        /* Useful for debugging
+       QSG_VISUALIZE=batches
+       QSG_VISUALIZE=clip
+       QSG_VISUALIZE=changes
+       QSG_VISUALIZE=overdraw
+       */
+    }
+
+    qt6Project: true
+
+    /* List of plugin directories passed to QML runtime */
+    importPaths: [ "imports", "asset_imports" ]
+
+    /* Required for deployment */
+    targetDirectory: "/opt/Loginui1"
+
+    qdsVersion: "3.0"
+
+    /* If any modules the project imports require widgets (e.g. QtCharts), widgetApp must be true */
+    widgetApp: true
+}

doc/qtdesignstudio/examples/loginui4/content/Screen01.ui.qml

@@ -1,57 +1,6 @@
-
-
-/****************************************************************************
-**
-** 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
 import QtQuick.Controls
-import loginui4 1.0
+import Loginui1
 import QtQuick.Timeline 1.0
 
 Rectangle {
@@ -71,7 +20,6 @@ Rectangle {
 
     Image {
         id: qt_logo_green_128x128px
-        x: 296
         anchors.top: parent.top
         source: "images/qt_logo_green_128x128px.png"
         anchors.horizontalCenter: parent.horizontalCenter
@@ -80,8 +28,6 @@ Rectangle {
     }
     Text {
         id: tagLine
-        width: 541
-        height: 78
         color: "#ffffff"
         text: qsTr("Are you ready to explore?")
         anchors.top: qt_logo_green_128x128px.bottom
@@ -89,30 +35,29 @@ Rectangle {
         anchors.topMargin: 40
         anchors.horizontalCenter: parent.horizontalCenter
         font.family: "Titillium Web ExtraLight"
+        anchors.horizontalCenterOffset: 0
     }
 
     EntryField {
         id: username
-        x: 110
+        text: qsTr("Username or Email")
-        text: "Username or Email"
         anchors.top: tagLine.bottom
-        anchors.topMargin: 170
         anchors.horizontalCenter: parent.horizontalCenter
+        anchors.topMargin: 170
     }
 
     EntryField {
         id: password
-        x: 110
         text: qsTr("Password")
         anchors.top: username.bottom
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.topMargin: 20
+        anchors.topMargin: 21
     }
 
     EntryField {
         id: repeatPassword
-        x: 110
+        opacity: 0
-        text: "Repeat Password"
+        text: qsTr("Repeat Password")
         anchors.top: password.bottom
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.topMargin: 20
@@ -120,11 +65,10 @@ Rectangle {
 
     Column {
         id: buttons
-        x: 102
+        y: 944
-        y: 966
         anchors.bottom: parent.bottom
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottomMargin: 100
+        anchors.bottomMargin: 50
         spacing: 20
 
         PushButton {
@@ -148,70 +92,68 @@ Rectangle {
         animations: [
             TimelineAnimation {
                 id: toCreateAccountState
+                duration: 1000
                 running: false
                 loops: 1
-                duration: 1000
                 to: 1000
                 from: 0
             }
         ]
         endFrame: 1000
-        startFrame: 0
         enabled: true
+        startFrame: 0
 
         KeyframeGroup {
             target: repeatPassword
             property: "opacity"
-
             Keyframe {
-                frame: 0
                 value: 0
+                frame: 0
             }
 
             Keyframe {
-                frame: 999
                 value: 1
+                frame: 1000
             }
         }
 
         KeyframeGroup {
             target: createAccount
             property: "opacity"
+            Keyframe {
+                value: 1
+                frame: 0
+            }
 
             Keyframe {
-                frame: 1000
                 value: 0
+                frame: 1000
             }
         }
 
         KeyframeGroup {
             target: repeatPassword
             property: "anchors.topMargin"
-
             Keyframe {
+                value: -100
                 frame: 0
-                value: -40
             }
 
             Keyframe {
-                easing.bezierCurve: [0.39,0.575,0.565,1,1,1]
+                value: -100
-                frame: 999
+                frame: 4
+            }
+
+            Keyframe {
+                easing.bezierCurve: [0.39, 0.575, 0.565, 1, 1, 1]
                 value: 20
+                frame: 999
             }
         }
     }
     states: [
         State {
             name: "login"
-
-            PropertyChanges {
-                target: timeline
-                enabled: true
-            }
-
-            PropertyChanges {
-                target: toCreateAccountState
-            }
         },
         State {
             name: "createAccount"
@@ -231,6 +173,8 @@ Rectangle {
 
 /*##^##
 Designer {
-    D{i:0;formeditorZoom:0.5}D{i:6}D{i:9}D{i:11}
+    D{i:0;formeditorZoom:0.5}D{i:1}D{i:2}D{i:3}D{i:4}D{i:5}D{i:6}D{i:8}D{i:10}D{i:9}D{i:7}
+D{i:11}
 }
 ##^##*/
+

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

@@ -1,26 +0,0 @@
-pragma Singleton
-import QtQuick
-
-QtObject {
-    readonly property int width: 720
-    readonly property int height: 1280
-
-    property alias fontDirectory: directoryFontLoader.fontDirectory
-    property alias relativeFontDirectory: directoryFontLoader.relativeFontDirectory
-
-    /* Edit this comment to add your custom font */
-    readonly property font font: Qt.font({
-                                             family: Qt.application.font.family,
-                                             pixelSize: Qt.application.font.pixelSize
-                                         })
-    readonly property font largeFont: Qt.font({
-                                                  family: Qt.application.font.family,
-                                                  pixelSize: Qt.application.font.pixelSize * 1.6
-                                              })
-
-    readonly property color backgroundColor: "#c2c2c2"
-
-    property DirectoryFontLoader directoryFontLoader: DirectoryFontLoader {
-        id: directoryFontLoader
-    }
-}

doc/qtdesignstudio/examples/loginui4/imports/loginui4/qmldir

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

doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject

@@ -1,47 +0,0 @@
-/* File generated by Qt Creator */
-
-import QmlProject 1.1
-
-Project {
-    mainFile: "loginui4.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"
-    }
-
-    qt6Project: true
-
-    /* List of plugin directories passed to QML runtime */
-    importPaths: [ "imports", "asset_imports" ]
-
-    /* Required for deployment */
-    targetDirectory: "/opt/loginui4"
-}

doc/qtdesignstudio/examples/loginui4/qtquickcontrols2.conf

@@ -1,2 +0,0 @@
-[Controls]
-Style=Default