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

Doc: Add missing steps to tutorials

Browse Source 
Streamline terminology and make some other changes
according to reviewer comments.

Change-Id: Ice84bd55fcb0ed549693c5c471827efc10a627d5
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Leena Miettinen
2020-10-28 13:02:26 +01:00
parent 03191936c4
commit 31b792a72f
6 changed files with 44 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 55 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB

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

@@ -35,19 +35,19 @@
\image loginui1.png
\e{Log In UI - Part 1} is the first in a series of examples that build on
\e{Log In UI - Part 1} 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. Part 1 describes
how to use \QDS wizard templates to create a Qt Quick project and a button
UI control, and how to modify the files generated by the wizard templates
to design your own UI.
how to use the \QDS wizard templates to create a Qt Quick project and a
button UI control, and how to modify the files generated by the wizard
templates to design your own UI.
The \e {Learn Qt Quick} sections provide additional information about the
tasks performed by the wizards and about the basics of QML and Qt Quick.
\section1 Creating the UI Project
For the purposes of this example, you will use the empty wizard template.
For the purposes of this tutorial, you will use the empty wizard template.
Wizard templates are available also for creating UIs that are optimized for
mobile platforms and for launcher applications. For more information about
the options you have, see \l {Creating Projects}.
@@ -67,7 +67,7 @@
\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 the initial
size of the UI. In this example, we use the smallest predefined
size of the UI. In this tutorial, 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
@@ -81,6 +81,12 @@
The UI is built using a \l Rectangle QML type that forms the background and
a \l Text type 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.
To open hidden views, select \uicontrol View > \uicontrol Views
in the Design mode. For more information about moving views around,
see \l {Managing Workspaces}.
\section2 Learn Qt Quick - Projects and Files
\QDS creates a set of boilerplate files and folders that you need to create
@@ -107,7 +113,7 @@
information, see \l {Module Definition qmldir Files}. In addition,
the \e QtQuick subfolder contains the Studio components and effects
QML types. You can ignore the subfolder for now, because it is not
used in this example.
used in this tutorial.
\endlist
QML files define a hierarchy of objects with a highly-readable, structured
@@ -145,15 +151,11 @@
be open in the Design mode. If it is not, you can double-click it in the
\uicontrol Projects view to open it.
\note The visibility of views depends on the selected workspace. To open
hidden views, select \uicontrol View > \uicontrol Views in the Design
mode. For more information, see \l {Managing Workspaces}.
To modify \e Screen01.ui.qml in \uicontrol {Form Editor}:
\list 1
\li Select \e Rectangle in the \uicontrol Navigator view to display its
properties in \uicontrol Properties.
properties in the \uicontrol Properties view.
\li In the \uicontrol Color field, select the
\inlineimage icon_color_gradient.png
(\uicontrol {Linear Gradient}) button to add a linear gradient to
@@ -210,12 +212,14 @@
\skipto import
\printuntil loginui1 1.0
You can view the import statements in the \uicontrol {Text Editor} view.
The \uicontrol Library view lists the QML types in each Qt module that are
supported by \QDS. You can use the basic types to create your own QML
types, and they will be listed under \uicontrol {My QML Components}.
This section is only visible if you have created custom QML components.
The \l [QtQuick] {Rectangle}, \l Text, and \l Image types used in this example are
The \l [QtQuick] {Rectangle}, \l Text, and \l Image types used in this tutorial are
based on the \l Item type. It is the base type for all visual elements,
with implementation of basic functions and properties, such as type
name, ID, position, size, and visibility.
@@ -227,8 +231,8 @@
\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.
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.
@@ -278,7 +282,7 @@
information, see \l {Creating Buttons} and
\l {Creating Scalable Buttons and Borders}.
To create a push button:
To create a push button by using the wizard template:
\list 1
\li Select \uicontrol File > \uicontrol {New File or Project} >
@@ -331,15 +335,19 @@
make the changes apply to all the button instances, you must make them in
the \e PushButton.ui.qml file.
The Custom Button wizard template adds a \e down state to change the button
background and text color when the button is clicked. You will now change
the colors in both states.
The Custom Button wizard template adds a \e normal state and a \e down state
to change the button background and text color when the button is clicked.
You will now change the colors in all states. When you make changes to the
button in the \e base state, they are automatically applied to the other
states. However, the property values that have been explicitly changed in
the \e down state are not changed automatically and you have to change them
separately in that state.
To change the button properties:
To change the button property values:
\list 1
\li Select the button background in \uicontrol Navigator to display its
properties in the \uicontrol Properties view.
properties in \uicontrol Properties.
\li In the \uicontrol Color field, select
\inlineimage icons/action-icon.png
(\uicontrol Actions) > \uicontrol Reset to reset the button
@@ -352,8 +360,13 @@
\li Press \key Enter or select \uicontrol OK to save the new value.
\li In the \uicontrol Radius field, enter 20 to give the button
rounded corners.
\li In the \uicontrol States view, select the \e down state and modify
the background and border color as above.
\li Select the text item in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In the \uicontrol {Text Color} field, select \uicontrol Actions >
\uicontrol Reset to reset the text color to the default color,
black.
\li In the \uicontrol {Font style} field, select the \uicontrol B button
to use the strong font.
\li In the \uicontrol States view, select the \e down state to set the
@@ -369,7 +382,7 @@
\section2 Learn Qt Quick - Property Bindings
An object's property can be assigned a static value which stays constant
until it is explicitly assigned a new value. In this example, the color
until it is explicitly assigned a new value. In this tutorial, the color
values you set in \uicontrol {Binding Editor} are static.
However, to make the fullest use of QML and its built-in support for dynamic
@@ -412,9 +425,9 @@
\li When an element is selected, selection handles are displayed in its
corners and on its sides. Use the selection handles to resize the
buttons so that the text fits comfortably on the button background.
In this example, the button width is set to 120 pixels.
In this tutorial, the button width is set to 120 pixels.
\li Move the cursor on the selected button to make the selection icon
appear. You can now drag the button to another position in the
appear. You can now drag the button to another position in
\uicontrol {Form Editor}. Use the guidelines to align the buttons
below the page title:
\image loginui1-align-buttons.png

6
doc/qtdesignstudio/examples/doc/loginui2.qdoc
View File

@@ -36,7 +36,7 @@
\image loginui2.png "Log In UI"
\e{Log In UI - Part 2} is the second in a series of examples that build
\e{Log In UI - Part 2} is the second in a series of tutorials that build
on each other to illustrate how to use \QDS to create a simple UI with
some basic UI components, such as pages, buttons, and entry fields. Part 2
describes how to position the UI components on pages to create a scalable
@@ -56,7 +56,7 @@
First, you will \l {Setting Anchors and Margins}{anchor} the static page
elements, logo image (\e logo) and page title (\e pageTitle), to the page.
When you created the project using the new project wizard template
in Part 1 of this example, the wizard template anchored \e pageTitle to the
in Part 1 of this tutorial, the wizard template anchored \e pageTitle to the
vertical and horizontal center of the page. Therefore, you will only
need to replace the vertical anchor of \e pageTitle with a top anchor
to align it with \e logo on the page.
@@ -203,6 +203,6 @@
\l{Positioning Items}.
To learn how to add a second page and move to it from the main page, see
the next example in the series, \l {Log In UI - Part 3}.
the next tutorial in the series, \l {Log In UI - Part 3}.
*/

6
doc/qtdesignstudio/examples/doc/loginui3.qdoc
View File

@@ -35,7 +35,7 @@
\image loginui3.gif "Log In UI"
\e{Log In UI - Part 3} is the third in a series of examples that build
\e{Log In UI - Part 3} is the third in a series of tutorials that build
on each other to illustrate how to use \QDS to create a simple UI with
some basic UI components, such as pages, buttons, and entry fields. Part 3
describes how to use \e states to add a second page to the UI. On the
@@ -61,7 +61,7 @@
You will add another text field for verifying the password that users
enter to create an account and a back button for returning to the login
page. You are already familiar with the tasks in this section from Part 1
and Part 2 of this example.
and Part 2 of this tutorial.
To preview the changes that you make to the UI while you make
them, select the \inlineimage live_preview.png
@@ -238,6 +238,6 @@
For more information, see \l{Using Data Models}.
To learn how to use a timeline to animate the transition between the login
and registration pages, see the next example in the series,
and registration pages, see the next tutorial in the series,
\l {Log In UI - Part 4}.
*/

2
doc/qtdesignstudio/examples/doc/loginui4.qdoc
View File

@@ -35,7 +35,7 @@
\image loginui4.gif "Log In UI"
\e{Log In UI - Part 4} is the fourth in a series of examples that build
\e{Log In UI - Part 4} is the fourth in a series of tutorials that build
on each other to illustrate how to use \QDS to create a simple UI with
some basic UI components, such as pages, buttons, and entry fields. Part 4
describes how to use the timeline and states to animate UI components.