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

Doc: Update entry-level tutorials

Browse Source 
Fixes: QDS-2304
Change-Id: Ib3417b40a19767d79b36bd920d21ae50b903a554
Reviewed-by: Aleksei German <aleksei.german@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Leena Miettinen
2020-06-18 15:37:02 +02:00
parent b410def067
commit 004bef4909
4 changed files with 81 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -136,24 +136,24 @@
hidden views, select \uicontrol Window > \uicontrol Views in the Design
mode. For more information, see \l {Managing Workspaces}.
To modify \e Screen01.ui.qml in the \uicontrol {Form Editor}:
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 the \uicontrol Properties view.
properties in \uicontrol Properties.
\li In the \uicontrol Color field, select the
\inlineimage icons/action-icon-binding.png
(\uicontrol Actions) menu, and then select \uicontrol Reset to
reset the rectangle background to the default color, white.
\li Select \e Text in the \uicontrol Navigator.
\li In the \uicontrol id field, change its id to \e pageTitle.
\li Select \e Text in \uicontrol Navigator.
\li In the \uicontrol id field, enter the id \e pageTitle.
\li In the \uicontrol Text field, enter \e {Qt Account}.
\li In the \uicontrol Font group, \uicontrol Size field, set the font
size to \e 24 pixels.
\li Drag and drop an \l Image type from \uicontrol Library >
\uicontrol {QML Types} > \uicontrol {Qt Quick Basic} to the
top-left corner of the rectangle.
\li In the \uicontrol id field, change its id to \e logo.
\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}
@@ -186,8 +186,8 @@
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 in the \uicontrol {My QML Components} tab.
The tab is only visible if you have created custom QML components.
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
example, see \l{Use Case - Visual Elements In QML}. For descriptions of all
@@ -196,10 +196,10 @@
\section1 Creating a Push Button
You can use another wizard to create a push button and to add it to the
project. The wizard creates a reusable button component that appears in
the \uicontrol {My QML Components} tab in the \uicontrol Library. You can
drag and drop it to the \uicontrol {Form Editor} and modify its properties
in the \uicontrol Properties view to change its appearance and functionality.
project. The wizard creates a reusable button component that appears under
\uicontrol {My QML Components} in \uicontrol Library. You can
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 to create the kind of push
button that you want, you can create your button from scratch using basic
@@ -271,8 +271,8 @@
\li On the toolbar, select \uicontrol Master >
\uicontrol buttonBackground to move into the button background
component.
\li Select the button background in the \uicontrol {Form Editor} or
in the \uicontrol Navigator to display its properties in the
\li Select the button background in \uicontrol {Form Editor} or
\uicontrol Navigator to display its properties in the
\uicontrol Properties view.
\li In the \uicontrol Color field, select
\inlineimage icons/action-icon.png
@@ -306,7 +306,7 @@
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
values you set in the \uicontrol {Binding Editor} are static.
values you set in \uicontrol {Binding Editor} are static.
However, to make the fullest use of QML and its built-in support for dynamic
object behavior, you can use property bindings that specify relationships
@@ -330,13 +330,13 @@
You will now add two button instances to the UI and modify their labels.
\list 1
\li Double-click \e Screen01.ui.qml in the \uicontrol Projects
view to open it in the \uicontrol {Form Editor}.
\li Drag and drop two instances of the PushButton type from the
\uicontrol Library to the \uicontrol {Form Editor}.
\li Double-click \e Screen01.ui.qml in \uicontrol Projects
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"
\li Select one of the buttons in the \uicontrol Navigator to modify
its id and text label in the \uicontrol Properties 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.
\li In the \uicontrol Text field, enter \e {Log In} and select
\uicontrol tr to mark the text

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

@@ -53,7 +53,7 @@
\section1 Anchoring UI Components
First, you will add a new rectangle to the \uicontrol {Form Editor} and move
First, you will add a new rectangle to \uicontrol {Form Editor} and move
all the current UI components to it to create a new page. Then, you will
\l {Setting Anchors and Margins}{anchor} the static elements on the
page, that is the logo image (\e logo) and page title (\e pageTitle),
@@ -71,25 +71,26 @@
To anchor components on a page:
\list 1
\li Open \e {Screen01.ui.qml} for editing in the Design mode
\uicontrol {Form Editor}.
\li Open \e {Screen01.ui.qml} for editing in the
\uicontrol {Form Editor} view.
\li Select the rectangle that forms the UI background in the
\uicontrol Navigator, and change its id to \e root in the
\uicontrol Navigator view, and change its id to \e root in the
\uicontrol Properties view.
\li Drag and drop a \uicontrol Rectangle from the \uicontrol Library
to \e root, and change its id to \e loginPage.
\li In the \uicontrol Layout view, select the \inlineimage anchor-fill.png
view to \e root in \uicontrol Navigator, and change its id to
\e loginPage in \uicontrol Properties.
\li Under \uicontrol Layout, select the \inlineimage anchor-fill.png
(\uicontrol {Fill Parent Item}) button to anchor the page to the root
item on all sides.
\li Select all the other UI elements below \e root in the
\li Select all the other UI elements below \e root in
\uicontrol Navigator (press the \key Shift key for multiple
selection) and drag them to \e loginPage.
\li Select \e logo in the \uicontrol Navigator.
\li Select \e logo in \uicontrol Navigator.
\li Select the \inlineimage anchor-top.png
(\uicontrol Top) and \inlineimage anchor-left.png
(\uicontrol Left) anchor buttons to anchor \e logo to the top left
corner of its parent (the \e loginPage) with 10-pixel margins.
\li Select \e pageTitle in the \uicontrol Navigator.
corner of its parent (\e loginPage) with 10-pixel margins.
\li Select \e pageTitle in \uicontrol Navigator.
\li Deselect the \inlineimage anchor-vertical-center.png
(\uicontrol {Vertical Center}) button to remove the
anchor, and then select the \uicontrol Top button to anchor the
@@ -132,32 +133,29 @@
\l {Qt Quick Controls 2} types in the tab:
\image loginui2-imports.png
\li Drag and drop two instances of the \uicontrol {Text Field} type
to the \uicontrol {Form Editor}.
\li Select one of the text fields in the \uicontrol Navigator, and
change its id to \e usernameField in the \uicontrol Properties view.
to \uicontrol {Form Editor}.
\li Select one of the text fields in \uicontrol Navigator, and
change its id to \e usernameField in \uicontrol Properties.
\li In the \uicontrol Geometry group, \uicontrol Size field, set the
width of the field to \e 300 pixels.
\li In the \uicontrol Placeholder field, enter \e Username and select
\uicontrol tr to mark the text translatable.
\image loginui2-field-properties.png "Text field properties"
\li In the \uicontrol Text field, delete the default text to make the
placeholder text visible on the \uicontrol {Form Editor}. The text
value always takes precedence over the placeholder text value.
\li Select the other text field, and change its id to
\e passwordField, placeholder text to \e Password,
and width to \e 300 pixels. Also remove the default text.
and width to \e 300 pixels.
\endlist
You will now position the fields and buttons as columns:
\list 1
\li Select \e usernameField and \e passwordField in the
\li Select \e usernameField and \e passwordField in
\uicontrol Navigator, and right-click on either item
to open a context menu.
\li Select \uicontrol Position > \uicontrol {Position in Column}
to position the fields on top of each other in the
to position the fields on top of each other in
\uicontrol {Form Editor}.
\li Select the column in the \uicontrol Navigator and change its id
\li Select the column in \uicontrol Navigator and change its id
to \e fieldColumn in \uicontrol Properties.
\li In the \uicontrol Spacing field, set the spacing between the
fields to 5 pixels.
@@ -172,14 +170,14 @@
You will now anchor the field and button columns to the page:
\list 1
\li Select \e fieldColumn in the \uicontrol Navigator.
\li Select \e fieldColumn in \uicontrol Navigator.
\li In \uicontrol Properties > \uicontrol Layout, select the
\uicontrol Top button to anchor the top of the button column to
the top of its parent (the \e loginPage) with a 200-pixel margin.
\li Select the \inlineimage anchor-horizontal-center.png
(\uicontrol {Horizontal Center}) button to center the field
column horizontally on the page.
\li Select \e buttonColumn in the \uicontrol Navigator.
\li Select \e buttonColumn in \uicontrol Navigator.
\li In \uicontrol Properties > \uicontrol Layout, select the
\inlineimage anchor-bottom.png
(\uicontrol Bottom) button to anchor the bottom of the button

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

@@ -69,30 +69,27 @@
To add the text field and a back button needed on the registration page:
\list 1
\li Open \e {Screen01.ui.qml} in the Design mode
\uicontrol {Form Editor} for editing.
\li Open \e {Screen01.ui.qml} in \uicontrol {Form Editor} for editing.
\li Drag and drop a \uicontrol {Text Field} from \uicontrol Library
> \uicontrol {QML Types} > \uicontrol {Qt Quick Controls 2} to
\e fieldColumn in the \uicontrol Navigator.
\e fieldColumn in \uicontrol Navigator.
\li In \uicontrol Properties, change the id of the text field to
\e verifyPasswordField.
\li In the \uicontrol Geometry group, \uicontrol Size field, set the
width of the field to \e 300 pixels.
\li In the \uicontrol Placeholder field, set the placeholder text to
\e {Verify password}.
\li In the \uicontrol Text field, delete the default text to make the
placeholder text visible in the \uicontrol {Form Editor}.
\li Drag and drop a PushButton type from the \uicontrol Library,
\uicontrol {My QML Components} tab, to \e loginPage in the
\e {Verify password} and mark the text translatable.
\li Drag and drop a PushButton type from \uicontrol Library >
\uicontrol {My QML Components} to \e loginPage in
\uicontrol Navigator.
\li Select the button in the \uicontrol Navigator and change its id to
\li Select the button in \uicontrol Navigator and change its id to
\e backButton in \uicontrol Properties.
\li In the \uicontrol Geometry group, \uicontrol Size field, set the
button width to \e 40 pixels.
\li In the \uicontrol Text field, enter \e <.
\li In the \uicontrol Font group, \uicontrol Size field, set the font
size to \e 24 pixels.
\li In the \uicontrol Layout tab, select the \inlineimage anchor-top.png
\li Under \uicontrol Layout, select the \inlineimage anchor-top.png
(\uicontrol Top) and \inlineimage anchor-right.png
(\uicontrol Right) anchor buttons to anchor \e backButton to
the top right corner of its parent (the \e loginPage) with 20-
@@ -127,16 +124,13 @@
the login state.
\image loginui3-visibility.png
\li Repeat the above step for \e backButton.
\li In the \uicontrol {Text Editor}, add the following line to the
definition of \e root to specify that the application should start
in \e loginState:
\quotefromfile loginui3/Screen01.ui.qml
\skipto Rectangle {
\printuntil state: "loginState"
\li Add another state and name it \e registerState.
\li In this state, reselect the \uicontrol Visibility check box in
\e verifyPasswordField and \e backButton properties to show them
again.
\li In \uicontrol States, select \inlineimage icons/action-icon.png
for \e loginState to open the \uicontrol Actions menu, and then
select \uicontrol {Set as Default} to determine that \e loginState
is applied when the application starts.
\li With the base state selected, add another state and name it
\e registerState. This state should now look identical to the base
state.
\li Select \e loginButton in the \uicontrol Navigator, and deselect
the \uicontrol Visibility check box to hide the login button in
the registration state.
@@ -195,8 +189,10 @@
to \e loginState:
\list 1
\li Select \uicontrol Window > \uicontrol Views >
\uicontrol {Connection View} to open the \uicontrol Connection view.
\li Select \e registerButton in the \uicontrol Navigator.
\li In the \uicontrol Connections view, select the \inlineimage plus.png
\li In the \uicontrol Connection view, select the \inlineimage plus.png
button to add the action that the \c onClicked signal handler of
\e registerButton should apply.
\li Double-click the value \uicontrol Action column and select

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

@@ -62,8 +62,6 @@
simulate changing pages. To make sure that those changes won't interfere
with the changes to the opacity property you will make in Part 4, you will
first remove the states.
In addition, you will need to remove the line that sets the default state
from the \e Screen01.ui.qml file in the \uicontrol {Text Editor}.
Then, you will add a timeline and insert keyframes for the opacity property
to hide the password verification field and back button on the login page
@@ -83,23 +81,19 @@
First, you will prepare the page for adding animation:
\list 1
\li Open \e {Screen01.ui.qml} in the Design mode for editing.
\li Open \e {Screen01.ui.qml} in \uicontrol {Form Editor} for editing.
\li In the \uicontrol States view, select the \inlineimage close.png
(\uicontrol Close) button in \e loginState and \e registerState
to remove the states.
\li In the \uicontrol {Text Editor}, remove the following line:
\code
{state: "loginState"}
\endcode
\li Select the fields in \e fieldColumn in the \uicontrol Navigator
\li Select the fields in \e fieldColumn in \uicontrol Navigator
and drag and drop them to \e loginPage.
\li Select \e fieldColumn in the \uicontrol Navigator and press
\li Select \e fieldColumn in \uicontrol Navigator and press
\key Delete to delete it.
\li Select \e usernameField in the \uicontrol Navigator.
\li Select \e usernameField in \uicontrol Navigator.
\li In \uicontrol Properties > \uicontrol Layout, select the
\inlineimage anchor-top.png
(\uicontrol Top) button to anchor the top of the field to the top
of its parent (the \e loginPage). \QDS will suggest an appropriate
of its parent (\e loginPage). \QDS will suggest an appropriate
margin based on the current Y-position of the field.
\li Select the \inlineimage anchor-horizontal-center.png
(\uicontrol {Horizontal Center}) button to anchor
@@ -112,7 +106,7 @@
\li Select the \uicontrol {Horizontal Center} button to anchor the
horizontal center of \e passwordField to that of \e usernameField.
\li Repeat the above steps to anchor the top of \e verifyPasswordField
to the bottom of the \e passwordField with a 5-pixel margin and to
to the bottom of \e passwordField with a 5-pixel margin and to
anchor its horizontal center to that of \e passwordField.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
@@ -140,11 +134,12 @@
To add a timeline with settings for running the animation:
\image loginui4-timeline-settings.png
\list 1
\li In the \uicontrol Timeline view, select \inlineimage plus.png
\li Select \uicontrol Window > \uicontrol Views >
\uicontrol Timeline to open the \uicontrol Timeline view.
\li In \uicontrol Timeline, select \inlineimage plus.png
to add a 1000-frame timeline and settings for running the animation.
\image loginui4-timeline-settings.png
\li In the \uicontrol {Animation ID} field, enter \e toLoginState.
\li Deselect the \uicontrol {Running in base state} check box, because
you want the animation to run only after the user clicks the
@@ -161,15 +156,15 @@
to save the timeline and the animation settings.
\endlist
Next, you will record the animation in the \uicontrol Timeline view.
Next, you will record the animation in \uicontrol Timeline.
\section2 Inserting Keyframes
You will now insert keyframes and record property changes in the
\uicontrol Timeline view:
You will now insert keyframes and record property changes in
\uicontrol Timeline:
\list 1
\li Select \e backButton in the \uicontrol Navigator.
\li Select \e backButton in \uicontrol Navigator.
\li In \uicontrol Properties > \uicontrol Opacity > \uicontrol Settings,
select \uicontrol {Insert Keyframe} to insert a keyframe for the
opacity property of the button.
@@ -185,11 +180,11 @@
\li Select the record button again to stop recording property changes.
If you forget this, all the following changes will be recorded, and
the results will be unpredictable.
\li Select \e verifyPasswordField in the \uicontrol Navigator,
\li Select \e verifyPasswordField in \uicontrol Navigator,
and repeat the above steps to insert a keyframe for the
\uicontrol opacity property of the field and to record
changes for it.
\li Select the \e loginButton in the \uicontrol Navigator, and repeat
\li Select \e loginButton in \uicontrol Navigator, and repeat
the above steps to insert a keyframe for the \uicontrol opacity
property of the button and to record changes for it. However, this
time the opacity value needs to be 1 in frame 0 and 0 in frame 1000.
@@ -208,11 +203,11 @@
To animate the top anchor margin of the verify password field:
\list 1
\li Select \e verifyPasswordField in the \uicontrol Navigator.
\li Select \e verifyPasswordField in \uicontrol Navigator.
\li Select \uicontrol Properties > \uicontrol Layout > \uicontrol Margin
> \uicontrol {Insert Keyframe} to insert a keyframe for the top
anchor margin of \e verifyPasswordField.
\li In the \uicontrol Timeline view, check that the playhead is in
\li In \uicontrol Timeline, check that the playhead is in
frame 0, and select the record button for the \e anchors.topMargin
property of \e verifyPasswordField.
\li In the field next to the property, set a negative value for the
@@ -238,7 +233,7 @@
\li Right-click the keyframe marker to open a context menu, and
select \uicontrol {Edit Easing Curve} to add an easing curve
to the animation.
\li In the \uicontrol {Easing Curve Editor}, select \e easeOutSine.
\li In \uicontrol {Easing Curve Editor}, select \e easeOutSine.
\image loginui4-easing-curve.png
\li Select \uicontrol OK to close the editor.
\endlist
@@ -248,7 +243,7 @@
to \inlineimage keyframe_manualbezier_inactive.png
.
Your timeline now should look something like this:
Your timeline should now look something like this:
\image loginui4-timeline.png "Timeline view with the recorded property changes"
@@ -259,14 +254,14 @@
You will now bring back the \l{Adding States}{states} in the
\uicontrol States view and bind them to the animation settings
in the \uicontrol Timeline view:
in \uicontrol Timeline:
\list 1
\li In the \uicontrol States view, select the \inlineimage plus.png
\li In \uicontrol States, select the \inlineimage plus.png
button twice to add two states called \e loginState and
\e registerState. You don't need to make any property changes this
time, because you'll bind the states to property animations.
\li In the \uicontrol Timeline view, select the \inlineimage animation.png
\li In \uicontrol Timeline, select the \inlineimage animation.png
(\uicontrol {Timeline Settings (S)}) button on the toolbar (or press
\key S to open the \uicontrol {Timeline Settings} dialog.
\image loginui4-timeline-settings-states.png
@@ -309,7 +304,7 @@
All the properties and functions of the QML types from this module are
available in the Design mode, and therefore it is enough to learn how to
use the \uicontrol Timeline view, as described in \l {Creating Animations}.
use \uicontrol Timeline, as described in \l {Creating Animations}.
\section1 Next Steps