feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

QmlDesigner: Improve the UI tutorial

Browse Source 
Change the arrangement of texts,
update images

Fixes: QDS-7761
Change-Id: I63447ce34a72e2a2df7c18053276ba1362386c00
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
This commit is contained in:
Pranta Dastider
2022-10-04 12:08:11 +02:00
committed by Pranta Ghosh Dastider
parent a902729b35
commit 0645a8aef3
3 changed files with 161 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 67 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-project.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 34 KiB

310
doc/qtdesignstudio/examples/doc/loginui1.qdoc
View File

@@ -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
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.
\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
\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.