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 hidden views, select \uicontrol Window > \uicontrol Views in the Design
mode. For more information, see \l {Managing Workspaces}. 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 \list 1
\li Select \e Rectangle in the \uicontrol Navigator view to display its \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 \li In the \uicontrol Color field, select the
\inlineimage icons/action-icon-binding.png \inlineimage icons/action-icon-binding.png
(\uicontrol Actions) menu, and then select \uicontrol Reset to (\uicontrol Actions) menu, and then select \uicontrol Reset to
reset the rectangle background to the default color, white. reset the rectangle background to the default color, white.
\li Select \e Text in the \uicontrol Navigator. \li Select \e Text in \uicontrol Navigator.
\li In the \uicontrol id field, change its id to \e pageTitle. \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 Text field, enter \e {Qt Account}.
\li In the \uicontrol Font group, \uicontrol Size field, set the font \li In the \uicontrol Font group, \uicontrol Size field, set the font
size to \e 24 pixels. size to \e 24 pixels.
\li Drag and drop an \l Image type from \uicontrol Library > \li Drag and drop an \l Image type from \uicontrol Library >
\uicontrol {QML Types} > \uicontrol {Qt Quick Basic} to the \uicontrol {QML Types} > \uicontrol {Qt Quick Basic} to the
top-left corner of the rectangle. 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 \li In the \uicontrol Source field, select the \inlineimage browse-button.png
(\uicontrol Browse) button to locate the Qt logo image file. Click (\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} \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 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 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. types, and they will be listed under \uicontrol {My QML Components}.
The tab is only visible if you have created custom 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 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 example, see \l{Use Case - Visual Elements In QML}. For descriptions of all
@@ -196,10 +196,10 @@
\section1 Creating a Push Button \section1 Creating a Push Button
You can use another wizard to create a push button and to add it to the 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 project. The wizard creates a reusable button component that appears under
the \uicontrol {My QML Components} tab in the \uicontrol Library. You can \uicontrol {My QML Components} in \uicontrol Library. You can
drag and drop it to the \uicontrol {Form Editor} and modify its properties drag and drop it to \uicontrol {Form Editor} and modify its properties
in the \uicontrol Properties view to change its appearance and functionality. in \uicontrol Properties to change its appearance and functionality.
If you find that you cannot use the wizard to create the kind of push 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 button that you want, you can create your button from scratch using basic
@@ -271,8 +271,8 @@
\li On the toolbar, select \uicontrol Master > \li On the toolbar, select \uicontrol Master >
\uicontrol buttonBackground to move into the button background \uicontrol buttonBackground to move into the button background
component. component.
\li Select the button background in the \uicontrol {Form Editor} or \li Select the button background in \uicontrol {Form Editor} or
in the \uicontrol Navigator to display its properties in the \uicontrol Navigator to display its properties in the
\uicontrol Properties view. \uicontrol Properties view.
\li In the \uicontrol Color field, select \li In the \uicontrol Color field, select
\inlineimage icons/action-icon.png \inlineimage icons/action-icon.png
@@ -306,7 +306,7 @@
An object's property can be assigned a static value which stays constant 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 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 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 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. You will now add two button instances to the UI and modify their labels.
\list 1 \list 1
\li Double-click \e Screen01.ui.qml in the \uicontrol Projects \li Double-click \e Screen01.ui.qml in \uicontrol Projects
view to open it in the \uicontrol {Form Editor}. to open it in \uicontrol {Form Editor}.
\li Drag and drop two instances of the PushButton type from the \li Drag and drop two instances of the PushButton type from
\uicontrol Library to the \uicontrol {Form Editor}. \uicontrol Library to \uicontrol {Form Editor}.
\image loginui1-library.png "Library view" \image loginui1-library.png "Library view"
\li Select one of the buttons in the \uicontrol Navigator to modify \li Select one of the buttons in \uicontrol Navigator to modify
its id and text label in the \uicontrol Properties view. its id and text label in \uicontrol Properties.
\li In the \uicontrol Id field, enter \e loginButton. \li In the \uicontrol Id field, enter \e loginButton.
\li In the \uicontrol Text field, enter \e {Log In} and select \li In the \uicontrol Text field, enter \e {Log In} and select
\uicontrol tr to mark the text \uicontrol tr to mark the text

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

@@ -53,7 +53,7 @@
\section1 Anchoring UI Components \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 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 \l {Setting Anchors and Margins}{anchor} the static elements on the
page, that is the logo image (\e logo) and page title (\e pageTitle), page, that is the logo image (\e logo) and page title (\e pageTitle),
@@ -71,25 +71,26 @@
To anchor components on a page: To anchor components on a page:
\list 1 \list 1
\li Open \e {Screen01.ui.qml} for editing in the Design mode \li Open \e {Screen01.ui.qml} for editing in the
\uicontrol {Form Editor}. \uicontrol {Form Editor} view.
\li Select the rectangle that forms the UI background in the \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. \uicontrol Properties view.
\li Drag and drop a \uicontrol Rectangle from the \uicontrol Library \li Drag and drop a \uicontrol Rectangle from the \uicontrol Library
to \e root, and change its id to \e loginPage. view to \e root in \uicontrol Navigator, and change its id to
\li In the \uicontrol Layout view, select the \inlineimage anchor-fill.png \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 (\uicontrol {Fill Parent Item}) button to anchor the page to the root
item on all sides. 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 \uicontrol Navigator (press the \key Shift key for multiple
selection) and drag them to \e loginPage. 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 \li Select the \inlineimage anchor-top.png
(\uicontrol Top) and \inlineimage anchor-left.png (\uicontrol Top) and \inlineimage anchor-left.png
(\uicontrol Left) anchor buttons to anchor \e logo to the top left (\uicontrol Left) anchor buttons to anchor \e logo to the top left
corner of its parent (the \e loginPage) with 10-pixel margins. corner of its parent (\e loginPage) with 10-pixel margins.
\li Select \e pageTitle in the \uicontrol Navigator. \li Select \e pageTitle in \uicontrol Navigator.
\li Deselect the \inlineimage anchor-vertical-center.png \li Deselect the \inlineimage anchor-vertical-center.png
(\uicontrol {Vertical Center}) button to remove the (\uicontrol {Vertical Center}) button to remove the
anchor, and then select the \uicontrol Top button to anchor 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: \l {Qt Quick Controls 2} types in the tab:
\image loginui2-imports.png \image loginui2-imports.png
\li Drag and drop two instances of the \uicontrol {Text Field} type \li Drag and drop two instances of the \uicontrol {Text Field} type
to the \uicontrol {Form Editor}. to \uicontrol {Form Editor}.
\li Select one of the text fields in the \uicontrol Navigator, and \li Select one of the text fields in \uicontrol Navigator, and
change its id to \e usernameField in the \uicontrol Properties view. change its id to \e usernameField in \uicontrol Properties.
\li In the \uicontrol Geometry group, \uicontrol Size field, set the \li In the \uicontrol Geometry group, \uicontrol Size field, set the
width of the field to \e 300 pixels. width of the field to \e 300 pixels.
\li In the \uicontrol Placeholder field, enter \e Username and select \li In the \uicontrol Placeholder field, enter \e Username and select
\uicontrol tr to mark the text translatable. \uicontrol tr to mark the text translatable.
\image loginui2-field-properties.png "Text field properties" \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 \li Select the other text field, and change its id to
\e passwordField, placeholder text to \e Password, \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 \endlist
You will now position the fields and buttons as columns: You will now position the fields and buttons as columns:
\list 1 \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 \uicontrol Navigator, and right-click on either item
to open a context menu. to open a context menu.
\li Select \uicontrol Position > \uicontrol {Position in Column} \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}. \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. to \e fieldColumn in \uicontrol Properties.
\li In the \uicontrol Spacing field, set the spacing between the \li In the \uicontrol Spacing field, set the spacing between the
fields to 5 pixels. fields to 5 pixels.
@@ -172,14 +170,14 @@
You will now anchor the field and button columns to the page: You will now anchor the field and button columns to the page:
\list 1 \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 \li In \uicontrol Properties > \uicontrol Layout, select the
\uicontrol Top button to anchor the top of the button column to \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. the top of its parent (the \e loginPage) with a 200-pixel margin.
\li Select the \inlineimage anchor-horizontal-center.png \li Select the \inlineimage anchor-horizontal-center.png
(\uicontrol {Horizontal Center}) button to center the field (\uicontrol {Horizontal Center}) button to center the field
column horizontally on the page. 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 \li In \uicontrol Properties > \uicontrol Layout, select the
\inlineimage anchor-bottom.png \inlineimage anchor-bottom.png
(\uicontrol Bottom) button to anchor the bottom of the button (\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: To add the text field and a back button needed on the registration page:
\list 1 \list 1
\li Open \e {Screen01.ui.qml} in the Design mode \li Open \e {Screen01.ui.qml} in \uicontrol {Form Editor} for editing.
\uicontrol {Form Editor} for editing.
\li Drag and drop a \uicontrol {Text Field} from \uicontrol Library \li Drag and drop a \uicontrol {Text Field} from \uicontrol Library
> \uicontrol {QML Types} > \uicontrol {Qt Quick Controls 2} to > \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 \li In \uicontrol Properties, change the id of the text field to
\e verifyPasswordField. \e verifyPasswordField.
\li In the \uicontrol Geometry group, \uicontrol Size field, set the \li In the \uicontrol Geometry group, \uicontrol Size field, set the
width of the field to \e 300 pixels. width of the field to \e 300 pixels.
\li In the \uicontrol Placeholder field, set the placeholder text to \li In the \uicontrol Placeholder field, set the placeholder text to
\e {Verify password}. \e {Verify password} and mark the text translatable.
\li In the \uicontrol Text field, delete the default text to make the \li Drag and drop a PushButton type from \uicontrol Library >
placeholder text visible in the \uicontrol {Form Editor}. \uicontrol {My QML Components} to \e loginPage in
\li Drag and drop a PushButton type from the \uicontrol Library,
\uicontrol {My QML Components} tab, to \e loginPage in the
\uicontrol Navigator. \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. \e backButton in \uicontrol Properties.
\li In the \uicontrol Geometry group, \uicontrol Size field, set the \li In the \uicontrol Geometry group, \uicontrol Size field, set the
button width to \e 40 pixels. button width to \e 40 pixels.
\li In the \uicontrol Text field, enter \e <. \li In the \uicontrol Text field, enter \e <.
\li In the \uicontrol Font group, \uicontrol Size field, set the font \li In the \uicontrol Font group, \uicontrol Size field, set the font
size to \e 24 pixels. 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 Top) and \inlineimage anchor-right.png
(\uicontrol Right) anchor buttons to anchor \e backButton to (\uicontrol Right) anchor buttons to anchor \e backButton to
the top right corner of its parent (the \e loginPage) with 20- the top right corner of its parent (the \e loginPage) with 20-
@@ -127,16 +124,13 @@
the login state. the login state.
\image loginui3-visibility.png \image loginui3-visibility.png
\li Repeat the above step for \e backButton. \li Repeat the above step for \e backButton.
\li In the \uicontrol {Text Editor}, add the following line to the \li In \uicontrol States, select \inlineimage icons/action-icon.png
definition of \e root to specify that the application should start for \e loginState to open the \uicontrol Actions menu, and then
in \e loginState: select \uicontrol {Set as Default} to determine that \e loginState
\quotefromfile loginui3/Screen01.ui.qml is applied when the application starts.
\skipto Rectangle { \li With the base state selected, add another state and name it
\printuntil state: "loginState" \e registerState. This state should now look identical to the base
\li Add another state and name it \e registerState. state.
\li In this state, reselect the \uicontrol Visibility check box in
\e verifyPasswordField and \e backButton properties to show them
again.
\li Select \e loginButton in the \uicontrol Navigator, and deselect \li Select \e loginButton in the \uicontrol Navigator, and deselect
the \uicontrol Visibility check box to hide the login button in the \uicontrol Visibility check box to hide the login button in
the registration state. the registration state.
@@ -195,8 +189,10 @@
to \e loginState: to \e loginState:
\list 1 \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 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 button to add the action that the \c onClicked signal handler of
\e registerButton should apply. \e registerButton should apply.
\li Double-click the value \uicontrol Action column and select \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 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 with the changes to the opacity property you will make in Part 4, you will
first remove the states. 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 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 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: First, you will prepare the page for adding animation:
\list 1 \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 \li In the \uicontrol States view, select the \inlineimage close.png
(\uicontrol Close) button in \e loginState and \e registerState (\uicontrol Close) button in \e loginState and \e registerState
to remove the states. to remove the states.
\li In the \uicontrol {Text Editor}, remove the following line: \li Select the fields in \e fieldColumn in \uicontrol Navigator
\code
{state: "loginState"}
\endcode
\li Select the fields in \e fieldColumn in the \uicontrol Navigator
and drag and drop them to \e loginPage. 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. \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 \li In \uicontrol Properties > \uicontrol Layout, select the
\inlineimage anchor-top.png \inlineimage anchor-top.png
(\uicontrol Top) button to anchor the top of the field to the top (\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. margin based on the current Y-position of the field.
\li Select the \inlineimage anchor-horizontal-center.png \li Select the \inlineimage anchor-horizontal-center.png
(\uicontrol {Horizontal Center}) button to anchor (\uicontrol {Horizontal Center}) button to anchor
@@ -112,7 +106,7 @@
\li Select the \uicontrol {Horizontal Center} button to anchor the \li Select the \uicontrol {Horizontal Center} button to anchor the
horizontal center of \e passwordField to that of \e usernameField. horizontal center of \e passwordField to that of \e usernameField.
\li Repeat the above steps to anchor the top of \e verifyPasswordField \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. anchor its horizontal center to that of \e passwordField.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes. to save your changes.
@@ -140,11 +134,12 @@
To add a timeline with settings for running the animation: To add a timeline with settings for running the animation:
\image loginui4-timeline-settings.png
\list 1 \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. 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 In the \uicontrol {Animation ID} field, enter \e toLoginState.
\li Deselect the \uicontrol {Running in base state} check box, because \li Deselect the \uicontrol {Running in base state} check box, because
you want the animation to run only after the user clicks the you want the animation to run only after the user clicks the
@@ -161,15 +156,15 @@
to save the timeline and the animation settings. to save the timeline and the animation settings.
\endlist \endlist
Next, you will record the animation in the \uicontrol Timeline view. Next, you will record the animation in \uicontrol Timeline.
\section2 Inserting Keyframes \section2 Inserting Keyframes
You will now insert keyframes and record property changes in the You will now insert keyframes and record property changes in
\uicontrol Timeline view: \uicontrol Timeline:
\list 1 \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, \li In \uicontrol Properties > \uicontrol Opacity > \uicontrol Settings,
select \uicontrol {Insert Keyframe} to insert a keyframe for the select \uicontrol {Insert Keyframe} to insert a keyframe for the
opacity property of the button. opacity property of the button.
@@ -185,11 +180,11 @@
\li Select the record button again to stop recording property changes. \li Select the record button again to stop recording property changes.
If you forget this, all the following changes will be recorded, and If you forget this, all the following changes will be recorded, and
the results will be unpredictable. 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 and repeat the above steps to insert a keyframe for the
\uicontrol opacity property of the field and to record \uicontrol opacity property of the field and to record
changes for it. 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 the above steps to insert a keyframe for the \uicontrol opacity
property of the button and to record changes for it. However, this 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. 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: To animate the top anchor margin of the verify password field:
\list 1 \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 \li Select \uicontrol Properties > \uicontrol Layout > \uicontrol Margin
> \uicontrol {Insert Keyframe} to insert a keyframe for the top > \uicontrol {Insert Keyframe} to insert a keyframe for the top
anchor margin of \e verifyPasswordField. 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 frame 0, and select the record button for the \e anchors.topMargin
property of \e verifyPasswordField. property of \e verifyPasswordField.
\li In the field next to the property, set a negative value for the \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 \li Right-click the keyframe marker to open a context menu, and
select \uicontrol {Edit Easing Curve} to add an easing curve select \uicontrol {Edit Easing Curve} to add an easing curve
to the animation. 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 \image loginui4-easing-curve.png
\li Select \uicontrol OK to close the editor. \li Select \uicontrol OK to close the editor.
\endlist \endlist
@@ -248,7 +243,7 @@
to \inlineimage keyframe_manualbezier_inactive.png 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" \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 You will now bring back the \l{Adding States}{states} in the
\uicontrol States view and bind them to the animation settings \uicontrol States view and bind them to the animation settings
in the \uicontrol Timeline view: in \uicontrol Timeline:
\list 1 \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 button twice to add two states called \e loginState and
\e registerState. You don't need to make any property changes this \e registerState. You don't need to make any property changes this
time, because you'll bind the states to property animations. 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 (\uicontrol {Timeline Settings (S)}) button on the toolbar (or press
\key S to open the \uicontrol {Timeline Settings} dialog. \key S to open the \uicontrol {Timeline Settings} dialog.
\image loginui4-timeline-settings-states.png \image loginui4-timeline-settings-states.png
@@ -309,7 +304,7 @@
All the properties and functions of the QML types from this module are 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 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 \section1 Next Steps