QmlDesigner: Improve the UI tutorial

Change the arrangement of texts,
update images

Fixes: QDS-7761
Change-Id: I63447ce34a72e2a2df7c18053276ba1362386c00
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>

3 files changed, 161 insertions, 149 deletions

diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.jpg b/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.jpg
index 999959b20b..4dc8e4e910 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.jpg
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.jpg
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-project.png b/doc/qtdesignstudio/examples/doc/images/loginui1-project.png
index 93ca7c6c8c..28984175b9 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui1-project.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-project.png
diff --git a/doc/qtdesignstudio/examples/doc/loginui1.qdoc b/doc/qtdesignstudio/examples/doc/loginui1.qdoc
index c9739bdb2a..718f919f0e 100644
--- a/doc/qtdesignstudio/examples/doc/loginui1.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui1.qdoc
@@ -30,23 +30,18 @@
 
     \title Log In UI - Components
     \brief Illustrates how to use wizard templates to create a simple UI
-    wireframe that contains a text label, images, and push buttons.
+    that contains a text label, images, and push buttons.
 
     \image loginui1.jpg
 
-    \e{Log In UI - Components} is the first 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 fields. The first tutorial
-    in the series describes how to use the \QDS wizard templates to create a
-    project and a button UI control, and how to modify the files generated by
-    the wizard templates to wireframe the UI.
+    \e{Log In UI - Components} is the first tutorial in a series of tutorials
+    that describes how to use the \QDS wizard templates to create a project and
+    a button UI control, and how to modify the files generated by the wizard
+    templates to design 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.
-
     \section1 Creating the UI Project
 
     For the purposes of this tutorial, you will use the empty wizard template.
@@ -69,6 +64,7 @@
                 \li Set \uicontrol Width to 720 and \uicontrol Height to 1280.
                 You can change the screen size later in \l Properties.
             \endlist
+
         \li Select \uicontrol Create to create the project.
     \endlist
 
@@ -79,7 +75,7 @@
 
     The wizard constructs the \e Screen01 \l{glossary-component}{component}
     using instances of a \l{basic-rectangle}{Rectangle} component that forms
-    the background and a \l Text component that displays some text.
+    the background, a \l Button, and a \l Text component that displays some text.
 
     \note The visibility of views depends on the selected workspace,
     so your \QDS might look somewhat different from the above image.
@@ -87,53 +83,14 @@
     in the \uicontrol Design mode. For more information about moving
     views around, see \l {Managing Workspaces}.
 
-    \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{File System} view.
-
-    \image loginui1-project-files.png
-
-    \list
-        \li The \e {loginui1.qmlproject} project file defines that all
-            component, JavaScript, and image files in the project folder belong
-            to the project. Therefore, you do not need to individually list new
-            files when you add them to the project.
-        \li The \e {loginui1.qml} file defines the functionality of
-            the UI. For the time being, it does not do anything.
-        \li The \e {Screen01.ui.qml} file is a custom component created by
-            the wizard template. For more information, see \l {UI Files}.
-
-            By default, this is the main file in the project, but you can
-            change that in the .qmlproject file. While the custom component
-            is a good starting point for new users, you don't have to use it.
-            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.
-        \li The \e imports folder contains \e {Constants.qml} and
-            \e {DirectoryFontLoader.qml} files that specify a font loader
-            and a \e qmldir module definition file that declares the Constant
-            component. For more information, see
-            \l {Module Definition qmldir Files}. The \e EventListModel.qml and
-            \e EventListSimulator.qml files are not used in this example, so
-            you can ignore them for now.
-    \endlist
+    You should remove this \l Button for now from the UI
+    to have a clean workspace. You'll add this later in the course of the tutorial.
+    Then you shall know how to modify and adjust it as you need.
 
-    \l{UI Files}{UI files} define a hierarchy of components with a
-    highly-readable, structured layout. Every UI file consists of two parts:
-    an imports section and an component declaration section. The components and
-    functionality most common to UIs are provided in the \c QtQuick import. You
-    can view the code of a \e .ui.qml file in the \l{Code} view.
+    To remove this Button, just select it and press \key {Backspace}.
 
     Next, you will edit the values of the properties of the component instances
     to create the main page of the UI.
-
     \section1 Creating the Main Page
 
     You will now change the values of the properties of the \l Text component
@@ -145,9 +102,9 @@
     You can download the logo and the background image from here:
 
     \list
-        \li \l{https://doc.qt.io/qtdesignstudio/images/used-in-examples/loginui1/images/qt_logo_green_128x128px.png}
+        \li \l{https://git.qt.io/public-demos/qtdesign-studio/-/blob/master/tutorial%20projects/Loginui1/content/images/qt_logo_green_128x128px.png}
             {qt_logo_green_128x128px.png}
-        \li \l{https://doc.qt.io/qtdesignstudio/images/used-in-examples/loginui1/images/adventurePage.jpg}
+        \li \l{https://git.qt.io/public-demos/qtdesign-studio/-/blob/master/tutorial%20projects/Loginui1/content/images/adventurePage.jpg}
             {Background image} (\e adventurePage.jpg)
 
             Photo by \l{https://unsplash.com/photos/a2MgJdG6UvE}
@@ -161,7 +118,8 @@
     To add the assets:
     \list 1
         \li Select \uicontrol Assets > \inlineimage icons/plus.png
-            .
+        (Select \uicontrol View > \uicontrol Views > \uicontrol Assets to enable it,
+            if you can't find it).
         \li Select the asset files, and then select \uicontrol Open.
         \li Select the location where the files will be saved in the
             \uicontrol {Add Resources} dialog.
@@ -180,8 +138,8 @@
     To modify the \e Screen01 component in the \uicontrol {2D} view:
 
     \list 1
-        \li Drag-and-drop the background image from \uicontrol Assets to the
-            rectangle in \l Navigator.
+        \li Drag-and-drop the background image (1) from \uicontrol Assets to the
+            \l{basic-rectangle}{Rectangle} (2) in \l Navigator.
             \image loginui1-library-assets.jpg "Assets view"
         \li \QDS automatically creates an instance of the \l{Images}{Image}
             component for you with the path to the image file set as the
@@ -189,7 +147,7 @@
             \image loginui1-image-properties.png "Image properties"
         \li Drag-and-drop the Qt logo from \uicontrol Assets to the rectangle
             in \uicontrol Navigator and move it to the top-center of the
-            background image in \uicontrol the {2D} view.
+            background image in the \uicontrol {2D} view.
         \li Select \e Text in \uicontrol Navigator and drag it below the logo
             in the \uicontrol {2D} view. If the text is hidden behind the
             background, select \inlineimage icons/navigator-arrowdown.png
@@ -204,8 +162,8 @@
                     line: \e {Are you ready to explore?}.
                     \image loginui1-text-properties.png "Text properties"
                 \li In \uicontrol Font, select \e {Titillium Web ExtraLight}.
-                \li In \uicontrol Size, set the font size of the tag line to
-                    \e 50 pixels (\uicontrol px).
+                \li In \uicontrol Size, first select the scale to pixels  (\uicontrol px),
+                then set font size of the tag line to \e 50 (\uicontrol px).
                 \li In \uicontrol {Text color}, set the text color to white
                     (\e #ffffff).
             \endlist
@@ -219,74 +177,6 @@
     \image loginui1-main-page.jpg "Modified UI in the Design mode"
 
     You can resize the preview dialog to display the whole screen.
-
-    \section2 Learn More - Components
-
-    \QDS provides preset \l{glossary-component}{components} for creating
-    UIs, including components for creating and animating visual components,
-    receiving user input, and creating data models and views.
-
-    To be able to use the functionality of preset components, the wizard template
-    adds the following \e import statements to the UI files (.ui.qml) that it
-    creates:
-
-    \quotefromfile Loginui1/content/Screen01.ui.qml
-    \skipto import
-    \printuntil Controls
-
-    You can view the import statements in the \uicontrol {Code} view.
-
-    The \l Components view lists the components in each module that are
-    supported by \QDS. You can use the basic components to create your own
-    components, and they will be listed in \uicontrol {My Components}.
-    This section is only visible if you have created custom components.
-
-    The \l {basic-rectangle}{Rectangle}, \l Text, and \l {Images}{Image}
-    components used in this tutorial are based on the \l Item component.
-    It is the base component for all visual elements, with implementation
-    of basic functions and properties, such as component type, ID, position,
-    size, and visibility.
-
-    For more information, see \l{Use Case - Visual Elements In QML}. For
-    descriptions of all components, see \l{All QML Types} in the Qt reference
-    documentation.
-
-    \section3 Regtangle Properties
-
-    The default \l {basic-rectangle}{Rectangle} component is used for drawing
-    shapes with four sides and four 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{studio-rectangle}{Rectangle} component from the
-    \uicontrol {Qt Quick Studio Components} module instead of the basic rectangle
-    component. It is available in \uicontrol Components
-    > \uicontrol {Qt Quick Studio Components}.
-
-    \section3 Text Properties
-
-    The \l Text component 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 component, such as size in points or pixels,
-    weight, style, and spacing.
-
-    If you want to create a label with a background, use the \l Label component
-    from the \uicontrol {Qt Quick Controls} module instead of the Text component.
-
-    \section3 Image Properties
-
-    The \l {Images}{Image} component 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. To add an image to \uicontrol Assets, select
-    \inlineimage icons/plus.png
-    , and then select the image file.
-
-    If you need to display animated images, use the \l {Animated Image}
-    component, also available in \uicontrol Components >
-    \uicontrol {Default Components} > \uicontrol Basic.
-
     \section1 Creating a Push Button
 
     You can use another wizard template to create a push button and to add it to
@@ -320,21 +210,9 @@
 
     \image loginui1-button.png "Button in the Design mode."
 
-    \section2 Learn More - UI Controls
-
-    The \e {Custom Button} wizard template creates a button component
-    based on the \l {Button} control in the \l {Qt Quick Controls} module. It
-    is a push-button control that can be pushed or clicked by the user. Buttons
-    are normally used to perform an action or to answer a question. The
-    properties and functionality inherited from the Button component enable
-    you to set text, display an icon, react to mouse clicks, and so on.
-
-    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/content/EntryField.ui.qml
-    \skipto import
-    \printuntil Controls
+    \note To open the \uicontrol States view, select it from
+    \uicontrol View > \uicontrol Views > \uicontrol States, if
+    it is not available by default.
 
     Next, you will change the appearance of the EntryField component by
     modifying its properties.
@@ -375,8 +253,8 @@
             properties in \uicontrol Properties.
         \li In \uicontrol Character > \uicontrol Font, select
             \e {Titillium Web ExtraLight}.
-        \li In \uicontrol Size, set the font size to \e 34 pixels
-            (\uicontrol px).
+        \li In \uicontrol Size, first select the scale to pixels  (\uicontrol px),
+                then set font size to \e 34 (\uicontrol px).
         \li In \uicontrol {Text color}, set the text color to white
             (\e #ffffff).
         \li In \uicontrol {Alignment H}, select the \uicontrol Left button to
@@ -396,6 +274,10 @@
 
     \image loginui1-entry-field-styled.jpg "Modified button in the 2D view"
 
+    \note Do not edit the the value of \uicontrol Text in the \uicontrol Character
+    property, because this will break the connection, and later you won't be able
+    to change the text in \uicontrol {Button Content} > \uicontrol Text.
+
     Next, you will add instances of the \e EntryField component to the
     \e Screen01 component and modify their properties.
 
@@ -459,7 +341,8 @@
             its properties in \uicontrol Properties.
         \li In \uicontrol Character > \uicontrol Font, select
             \e {Titillium Web ExtraLight}.
-        \li In \uicontrol Size, set the font size to \e 34 pixels.
+        \li In \uicontrol Size, first select the scale to pixels  (\uicontrol px),
+                then set font size to \e 34 (\uicontrol px).
         \li In \uicontrol {Text color}, set the text color to \e #41cd52.
         \li In the \uicontrol States view, select the \e normal state and repeat
             the changes, as necessary.
@@ -503,7 +386,136 @@
 
     \image loginui1-ready.jpg "The finished UI in the 2D view"
 
-    \section2 Learn More - Component IDs
+    \section1 Learn More
+    The \e {Learn More} sections provide additional information about the
+    tasks performed by the wizards and about other basic tasks and concepts.
+
+    \section2 Projects and Files
+        \QDS creates a set of files and folders that you need to create
+        a UI. The files are listed in the \l{File System} view.
+
+        \image loginui1-project-files.png
+        \list
+            \li The \e {loginui1.qmlproject} project file defines that all
+                component, JavaScript, and image files in the project folder belong
+                to the project. Therefore, you do not need to individually list new
+                files when you add them to the project.
+            \li The \e {loginui1.qml} file defines the functionality of
+                the UI. For the time being, it does not do anything.
+            \li The \e {Screen01.ui.qml} file is a custom component created by
+                the wizard template. For more information, see \l {UI Files}.
+
+                By default, this is the main file in the project, but you can
+                change that in the .qmlproject file. While the custom component
+                is a good starting point for new users, you don't have to use it.
+                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.
+            \li The \e imports folder contains \e {Constants.qml} and
+                \e {DirectoryFontLoader.qml} files that specify a font loader
+                and a \e qmldir module definition file that declares the Constant
+                component. For more information, see
+                \l {Module Definition qmldir Files}. The \e EventListModel.qml and
+                \e EventListSimulator.qml files are not used in this example, so
+                you can ignore them for now.
+        \endlist
+        \l{UI Files}{UI files} define a hierarchy of components with a
+        highly-readable, structured layout. Every UI file consists of two parts:
+        an imports section and an component declaration section. The components and
+        functionality most common to UIs are provided in the \c QtQuick import. You
+        can view the code of a \e .ui.qml file in the \l{Code} view.
+
+
+    \section2 Components
+
+        \QDS provides preset \l{glossary-component}{components} for creating
+        UIs, including components for creating and animating visual components,
+        receiving user input, and creating data models and views.
+
+        To be able to use the functionality of preset components, the wizard template
+        adds the following \e import statements to the UI files (.ui.qml) that it
+        creates:
+
+        \quotefromfile Loginui1/content/Screen01.ui.qml
+        \skipto import
+        \printuntil Controls
+
+        You can view the import statements in the \uicontrol {Code} view.
+
+        The \l Components view lists the components in each module that are
+        supported by \QDS. You can use the basic components to create your own
+        components, and they will be listed in \uicontrol {My Components}.
+        This section is only visible if you have created custom components.
+
+        The \l {basic-rectangle}{Rectangle}, \l Text, and \l {Images}{Image}
+        components used in this tutorial are based on the \l Item component.
+        It is the base component for all visual elements, with implementation
+        of basic functions and properties, such as component type, ID, position,
+        size, and visibility.
+
+        For more information, see \l{Use Case - Visual Elements In QML}. For
+        descriptions of all components, see \l{All QML Types} in the Qt reference
+        documentation.
+
+    \section3 Regtangle Properties
+
+        The default \l {basic-rectangle}{Rectangle} component is used for drawing
+        shapes with four sides and four 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{studio-rectangle}{Rectangle} component from the
+        \uicontrol {Qt Quick Studio Components} module instead of the basic rectangle
+        component. It is available in \uicontrol Components
+        > \uicontrol {Qt Quick Studio Components}.
+
+    \section3 Text Properties
+
+        The \l Text component 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 component, such as size in points or pixels,
+        weight, style, and spacing.
+
+        If you want to create a label with a background, use the \l Label component
+        from the \uicontrol {Qt Quick Controls} module instead of the Text component.
+
+    \section3 Image Properties
+
+        The \l {Images}{Image} component 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. To add an image to \uicontrol Assets, select
+        \inlineimage icons/plus.png
+        , and then select the image file.
+
+        If you need to display animated images, use the \l {Animated Image}
+        component, also available in \uicontrol Components >
+        \uicontrol {Default Components} > \uicontrol Basic.
+
+    \section2 UI Controls
+
+        The \e {Custom Button} wizard template creates a button component
+        based on the \l {Button} control in the \l {Qt Quick Controls} module. It
+        is a push-button control that can be pushed or clicked by the user. Buttons
+        are normally used to perform an action or to answer a question. The
+        properties and functionality inherited from the Button component enable
+        you to set text, display an icon, react to mouse clicks, and so on.
+
+        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/content/EntryField.ui.qml
+        \skipto import
+        \printuntil Controls
+
+    \section2 Component IDs
 
     Each component and each instance of a component has an \e ID that uniquely
     identifies it and enables other components' properties to be bound to it.