Doc: Update Qt Design Studio tutorial part 1

- Explain basic Rectangle, Text, and Image types a
  bit more
- Describe how to add gradients
- Update info about asset handling

Change-Id: Ia23187f647847a16edaab3706f8bf742f09f26b1
Reviewed-by: Brook Cronin <brook.cronin@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

doc/qtdesignstudio/examples/doc/loginui1.qdoc

@@ -58,12 +58,18 @@
         \li Select \uicontrol File > \uicontrol {New File or Project} >
             \uicontrol General > \uicontrol {Qt Quick Application - Empty} >
             \uicontrol Choose.
-        \li In the \uicontrol Name field, enter \e {loginui1}.
+        \li In the \uicontrol Name field, enter the project name: \e {loginui1}.
-        \li In the \uicontrol {Create in} field, enter the path for the project
+            When naming your own projects, keep in mind that they cannot be
-            files
+            easily renamed later.
+        \li In the \uicontrol {Create in} field, enter the path to the folder
+            where you want to store the project files. You can move project
+            folders later without problems.
         \li Select \uicontrol Next (or \uicontrol Continue on \macos) to
             continue to the \uicontrol {Define Project Details} page.
-        \li In the \uicontrol {Screen resolution} field, select \e {640 x 480}.
+        \li In the \uicontrol {Screen resolution} field, select the initial
+            size of the UI. In this example, we use the smallest predefined
+            size, \e {640 x 480}. You can easily change the screen size later
+            in \uicontrol Properties.
         \li Select \uicontrol Finish (or \uicontrol Done on \macos) to create
             the project.
     \endlist
@@ -113,15 +119,22 @@
     For more information about creating a QML file from scratch, see
     \l{First Steps with QML}.
 
-    Next, you will edit the properties of the UI elements to create the main
+    Next, you will edit the values of the properties of the UI elements to
-    page of the UI.
+    create the main page of the UI.
 
     \section1 Creating the Main Page
 
-    You will now change the properties of the \l Rectangle type to turn the UI
+    You will now change the values of the properties of the \l Rectangle
-    background white and those of the \l Text type to change the text and to use
+    component to add a gradient to the UI background and those of the
-    a larger font size. In addition, you will use the \l Image type to add the
+    \l Text component to set the title text in a larger strong font. In
-    Qt logo to the page.
+    addition, you will import an image as an asset and add it to the page.
+
+    To be able to use an image in the UI, you must add it to your project
+    in the \uicontrol Assets tab of \uicontrol Library. Click
+    \l {https://doc.qt.io/qtdesignstudio/images/used-in-examples/loginui1/qt_logo_green_64x64px.png}
+    {here} to open the Qt logo in a browser and save it as a file on your
+    computer. The image is only used for decoration, so you can also use
+    any other image or just leave it out.
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
@@ -142,25 +155,35 @@
        \li Select \e Rectangle in the \uicontrol Navigator view to display its
             properties in \uicontrol Properties.
         \li In the \uicontrol Color field, select the
-            \inlineimage icons/action-icon-binding.png
+            \inlineimage icon_color_gradient.png
-            (\uicontrol Actions) menu, and then select \uicontrol Reset to
+            (\uicontrol Gradient) button to add a linear gradient to the
-            reset the rectangle background to the default color, white.
+            screen background. In this example, the color changes from
-        \li Select \e Text in \uicontrol Navigator.
+            white to green (#41cd52), with a stop point set at position 0.5.
-        \li In the \uicontrol id field, enter the id \e pageTitle.
+            You can use your favorite colors or select a predefined gradient
-        \li In the \uicontrol Text field, enter \e {Qt Account}.
+            in the \uicontrol {Gradient Picker}.
-        \li In the \uicontrol Font group, \uicontrol Size field, set the font
+            \image loginui1-background-gradient.png "Rectangle color properties"
-            size to \e 24 pixels.
+        \li Select \e Text in \uicontrol Navigator to display its properties in
-        \li Drag and drop an \l Image type from \uicontrol Library >
+            \uicontrol Properties.
-            \uicontrol {QML Types} > \uicontrol {Qt Quick Basic} to the
+            \image loginui1-text-properties.png "Text properties"
-            top-left corner of the rectangle.
+            \list a
+                \li In the \uicontrol id field, enter the id \e pageTitle,
+                    so that you can easily find the title component in
+                    \uicontrol Navigator and other \QDS views.
+                \li In the \uicontrol Text field, enter the page title:
+                    \e {Qt Account}.
+                \li In the \uicontrol Font group, \uicontrol Size field,
+                    set the font size of the title: \e 24 pixels.
+                \li In the \uicontrol {Font style} field, select the
+                    \uicontrol B button to use a strong font.
+            \endlist
+        \li Drag and drop the Qt logo from the \uicontrol Assets tab of
+            \uicontrol Library to the top-left corner of the rectangle.
+            \image loginui1-library-assets.png "Library view Assets tab"
+            \QDS automatically creates a component of the \l Image type
+            for you with the path to the image file set as the value of
+            the \uicontrol Source field in \uicontrol Properties.
+            \image loginui1-image-properties.png "Image properties"
         \li In the \uicontrol id field, change the id of the image to \e logo.
-        \li In the \uicontrol Source field, select the \inlineimage browse-button.png
-            (\uicontrol Browse) button to locate the Qt logo image file. Click
-            \l {https://doc.qt.io/qtdesignstudio/images/used-in-examples/loginui1/qt_logo_green_64x64px.png}
-            {here} to open the Qt logo in a browser and save it as a file in the
-            folder where you created the project. The image is only used for
-            decoration, so you can also use any other image or just leave it
-            out.
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
@@ -189,9 +212,53 @@
     types, and they will be listed under \uicontrol {My QML Components}.
     This section is only visible if you have created custom QML components.
 
-    For more information about the \l Rectangle and \l Image types used in this
+    The \l [QtQuick] {Rectangle}, \l Text, and \l Image types used in this example are
-    example, see \l{Use Case - Visual Elements In QML}. For descriptions of all
+    based on the \l Item type. It is the base type for all visual elements,
-    QML types, see \l{All QML Types} in the Qt reference documentation.
+    with implementation of basic functions and properties, such as type
+    name, ID, position, size, and visibility.
+
+    For more information, see \l{Use Case - Visual Elements In QML}. For
+    descriptions of all QML types, see \l{All QML Types} in the Qt reference
+    documentation.
+
+    \section3 Regtangle Properties
+
+    The basic \l [QtQuick] {Rectangle} QML type is used for drawing shapes
+    with 4 sides and 4 corners. You can fill rectangles either with a solid
+    fill color or a gradient. You can specify the border color separately.
+    By setting the value of the radius property, you can create shapes with
+    rounded corners.
+
+    If you want to specify the radius of each corner separately, you can
+    use the \l Rectangle type from the Qt Quick Studio Components module
+    instead of the basic rectangle type. It is available in the
+    \uicontrol {Studio Components} tab of \uicontrol Library.
+
+    \section3 Text Properties
+
+    The \l Text type is used for adding static text to the UI, such as titles
+    and labels. You can select the font to use and specify extensive properties
+    for each text item, such as size in points or pixels, weight, style, and
+    spacing.
+
+    To display custom fonts in the list of available fonts in
+    \uicontrol Properties, add them in the \uicontrol Assets
+    tab of \uicontrol Library.
+
+    If you want to create a label with a background, use the \l Label type
+    from the Qt Quick Controls module instead of the Text type.
+
+    \section3 Image Properties
+
+    The \l Image type is used for adding images to the UI in several supported
+    formats, including bitmap formats such as PNG and JPEG and vector graphics
+    formats such as SVG. You must add the images to your project in the
+    \uicontrol Assets tab of \uicontrol Library to be able to use them in
+    designs.
+
+    If you need to display animated images, use the \l {AnimatedImage}
+    {Animated Image} type, also available in the \uicontrol {Qt Quick - Basic}
+    tab of \uicontrol Library.
 
     \section1 Creating a Push Button
 
@@ -201,9 +268,11 @@
     drag and drop it to \uicontrol {Form Editor} and modify its properties
     in \uicontrol Properties to change its appearance and functionality.
 
-    If you find that you cannot use the wizard template to create the kind of
+    If you find that you cannot use the wizard template nor the ready-made
-    push button that you want, you can create your button from scratch using
+    button controls available in the \uicontrol {Qt Quick Controls 2} tab
-    basic QML types. For more information, see \l {Creating Buttons} and
+    in \uicontrol Library to create the kind of push button that you want,
+    you can create your button from scratch using basic QML types. For more
+    information, see \l {Creating Buttons} and
     \l {Creating Scalable Buttons and Borders}.
 
     To create a push button:
@@ -212,7 +281,8 @@
         \li Select \uicontrol File > \uicontrol {New File or Project} >
             \uicontrol {Files and Classes} > \uicontrol {Qt Quick Controls} >
             \uicontrol {Custom Button} > \uicontrol Choose.
-        \li In the \uicontrol {Component name} field, enter \e {PushButton}.
+        \li In the \uicontrol {Component name} field, enter a name for your
+            button type: \e {PushButton}.
         \li Select \uicontrol Finish (or \uicontrol Done on \macos) to create
             the button.
     \endlist
@@ -269,24 +339,22 @@
             properties in the \uicontrol Properties view.
         \li In the \uicontrol Color field, select
             \inlineimage icons/action-icon.png
-            (\uicontrol Actions) > \uicontrol {Set Binding} and set the
+            (\uicontrol Actions) > \uicontrol Reset to reset the button
-            button background color to \e #41cd52.
+            background color to the default color, white.
-        \li Press \key Enter or select \uicontrol OK to save the new value.
+        \li In the \uicontrol {Border Color} field, select \uicontrol Actions >
+            \uicontrol {Set Binding} to use the gradient color (\e #41cd52) as
+            the border color. You can also use the color picker to change the
+            color.
             \image loginui1-binding-editor.png "Binding Editor"
-        \omit
+        \li Press \key Enter or select \uicontrol OK to save the new value.
-        \li In the \uicontrol {Border Color} field, set the button
+        \li In the \uicontrol Radius field, enter 20 to give the button
-            border color to \e #21be2b. You could also use the color picker
-            to change the button color.
-        \li In the \uicontrol Radius field, enter 6 to give the button
             rounded corners.
-        \endomit
         \li Select the text item in \uicontrol Navigator to display its
             properties in \uicontrol Properties.
-        \li In the \uicontrol {Text color} field, set the button text
+        \li In the \uicontrol {Font style} field, select the \uicontrol B button
-            color to white (\e #ffffff).
+            to use the strong font.
         \li In the \uicontrol States view, select the \e down state to set the
-            button text color to white and the background color to a darker
+            button text color to the same green as the border.
-            shade of green (\e #21be2b).
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
@@ -327,7 +395,7 @@
             to open it in \uicontrol {Form Editor}.
         \li Drag and drop two instances of the PushButton type from
             \uicontrol Library to \uicontrol {Form Editor}.
-            \image loginui1-library.png "Library view"
+            \image loginui1-library.png "My QML Components tab of Library view"
         \li Select one of the buttons in \uicontrol Navigator to modify
             its id and text label in \uicontrol Properties.
         \li In the \uicontrol Id field, enter \e loginButton.

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

@@ -1,33 +1,75 @@
-import QtQuick 2.10
+
+/****************************************************************************
+**
+** Copyright (C) 2020 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.Templates 2.1 as T
 import loginui1 1.0
 
 T.Button {
     id: control
+    width: 100
+    height: 40
 
     font: Constants.font
     implicitWidth: Math.max(
-                       background ? background.implicitWidth : 0,
+                       buttonBackground ? buttonBackground.implicitWidth : 0,
-                       contentItem.implicitWidth + leftPadding + rightPadding)
+                       textItem.implicitWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(
-                        background ? background.implicitHeight : 0,
+                        buttonBackground ? buttonBackground.implicitHeight : 0,
-                        contentItem.implicitHeight + topPadding + bottomPadding)
+                        textItem.implicitHeight + topPadding + bottomPadding)
     leftPadding: 4
     rightPadding: 4
 
     text: "My Button"
 
     background: buttonBackground
-    Rectangle {
-        id: buttonBackground
-        color: "#41cd52"
-        implicitWidth: 100
-        implicitHeight: 40
-        opacity: enabled ? 1 : 0.3
-        border.color: "gray"
-        border.width: 1
-        radius: 2
-    }
 
     contentItem: textItem
     Text {
@@ -35,12 +77,24 @@ T.Button {
         text: control.text
 
         opacity: enabled ? 1.0 : 0.3
-        color: "#fdfdfd"
+        color: "#020202"
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
+        font.bold: true
         elide: Text.ElideRight
     }
 
+    Rectangle {
+        id: buttonBackground
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        border.color: "#41cd52"
+        border.width: 1
+        anchors.fill: parent
+        radius: 20
+    }
+
     states: [
         State {
             name: "normal"
@@ -54,12 +108,12 @@ T.Button {
             when: control.down
             PropertyChanges {
                 target: textItem
-                color: "#fdfdfd"
+                color: "#41cd52"
             }
             PropertyChanges {
                 target: buttonBackground
-                color: "#21be2b"
+                color: "#ffffff"
-                border.color: "black"
+                border.color: "#41cd52"
             }
         }
     ]

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

@@ -1,46 +1,109 @@
-import QtQuick 2.12
+
+/****************************************************************************
+**
+** Copyright (C) 2019 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 loginui1 1.0
+import QtQuick.Studio.Components 1.0
+import QtQuick.Controls 2.15
 
 Rectangle {
-    width: Constants.width
+    color: "#ffffff"
-    height: Constants.height
+    gradient: Gradient {
-    color: "#fdfdfd"
+        GradientStop {
+            position: 0.5
+            color: "#ffffff"
+        }
+
+        GradientStop {
+            position: 1
+            color: "#41cd52"
+        }
+    }
 
     Text {
         id: pageTitle
+        x: 273
+        y: 33
         text: qsTr("Qt Account")
         font.pixelSize: 24
-        anchors.verticalCenterOffset: -153
+        font.bold: true
-        anchors.horizontalCenterOffset: 1
+        font.weight: Font.ExtraBold
+        anchors.verticalCenterOffset: -180
+        anchors.horizontalCenterOffset: 0
         anchors.centerIn: parent
         font.family: Constants.font.family
     }
 
     Image {
         id: logo
-        x: 13
+        x: 8
-        y: 0
+        y: 19
-        width: 100
-        height: 100
         source: "qt_logo_green_64x64px.png"
         fillMode: Image.PreserveAspectFit
     }
 
     PushButton {
         id: loginButton
-        x: 262
+        x: 260
-        y: 343
+        y: 352
         width: 120
         height: 40
-        text: qsTr("Log In")
+        text: "Log In"
     }
 
     PushButton {
         id: registerButton
-        x: 262
+        x: 260
-        y: 389
+        y: 398
         width: 120
         height: 40
-        text: qsTr("Create Account")
+        text: "Create Account"
     }
 }

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

@@ -2,8 +2,8 @@ pragma Singleton
 import QtQuick 2.10
 
 QtObject {
-    readonly property int width: 640
+    readonly property int width: 1280
-    readonly property int height: 480
+    readonly property int height: 720
 
     readonly property FontLoader mySystemFont: FontLoader { name: "Arial" }
 

doc/qtdesignstudio/examples/loginui1/loginui1.qml

@@ -1,3 +1,53 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.12
 import loginui1 1.0