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

Doc: Update Login UI 3 & 4

Browse Source 
- Small general fixes to the rest of the Login UI
tutorials, such as ALT-texts.
- Unifying the intro texts with the rest of the
tutorials in the series.

Task-number: QDS-14470
Change-Id: Ia7dd92e946b3f05460d4a5350bf7a7dc1a6cfc0d
Reviewed-by: Mats Honkamaa <mats.honkamaa@qt.io>
This commit is contained in:
Johanna Vanhatapio
2025-03-20 18:21:19 +02:00
parent 1acd199665
commit c7ce2bc2e8
2 changed files with 46 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,15 +10,15 @@
\previouspage {Login UI: Positioning} \previouspage {Login UI: Positioning}
\nextpage {Login UI: Timeline} \nextpage {Login UI: Timeline}
\image loginui3.gif "Login UI" \image loginui3.gif Login UI in Qt Design Studio Live Preview.
\e{Login UI: States} is the third in a series of tutorials that build \e{Login UI: States} is the third of the \QDS \e{Login UI} tutorials, which
on each other to illustrate how to use \QDS to create a simple UI with build on each other to illustrate how to create a simple UI with some basic UI
some basic UI components, such as pages, buttons, and entry fields. The components, such as pages, buttons, and entry fields.
third tutorial in the series describes how to use \e states to add a
second page to the UI. On the first page, users can enter a username This tutorial describes how to use \e states to add a second page to the UI.
and password to log in. On the second page, they can register as users if they On the first page, users can enter a username and password to log in. On the
do not already have an account. second page, they can register as users if they do not already have an account.
Because the second page will contain most of the same UI components as the Because the second page will contain most of the same UI components as the
login page, you will use \e states to show and hide UI components as necessary login page, you will use \e states to show and hide UI components as necessary
@@ -31,16 +31,14 @@
Additionally, you can download the completed project of this tutorial Additionally, you can download the completed project of this tutorial
\l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui3}{here}. \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui3}{here}.
For more information, see \l{Working with states} and \l{Signal and Handler Event System}.
\section1 Adding UI components \section1 Adding UI components
You will add another entry field for verifying the password that users You will add another entry field for verifying the password that users
enter to create an account. You are already familiar with the tasks in enter to create an account. You are already familiar with the tasks in
this section from the previous \e {Login UI} tutorials. this section from the previous \e {Login UI} tutorials.
To preview the changes that you make, select the \uicontrol {Live Preview} button To preview the changes that you make, select the \uicontrol Run dropdown menu from the
or select \key {Alt+P}. top toolbar, and then select \uicontrol {Live Preview}, or select \key {Alt+P}.
To add the entry field needed on the second page to the \e Screen01 To add the entry field needed on the second page to the \e Screen01
component: component:
@@ -48,17 +46,16 @@
\list 1 \list 1
\li Double-click \e Screen01.ui.qml in \uicontrol Projects to open it \li Double-click \e Screen01.ui.qml in \uicontrol Projects to open it
in the \uicontrol {2D} view. in the \uicontrol {2D} view.
\li Drag an instance of the EntryField component from \li Drag an EntryField component from \uicontrol Components >
\uicontrol Components > \uicontrol {My Components} to \e fields in \uicontrol {My Components} to \e fields in \l Navigator.
\l Navigator. \li Select the EntryField in \uicontrol Navigator to modify
\li Select the EntryField instance in \uicontrol Navigator to modify
its ID and text in \uicontrol Properties. its ID and text in \uicontrol Properties.
\li In \uicontrol Component > \uicontrol ID, enter \li In \uicontrol Component > \uicontrol ID, enter
\e repeatPassword. \e repeatPassword.
\li In \uicontrol {EntryField} > \uicontrol {Button Content} > \uicontrol Text, \li In \uicontrol {EntryField} > \uicontrol {Button Content} > \uicontrol Text,
enter \e {Repeat Password} and select \uicontrol tr to mark the text enter \e {Repeat Password} and select \uicontrol tr to mark the text
translatable. translatable.
\image loginui3-new-entryfield-properties.webp "Entryfield properties" \image loginui3-new-entryfield-properties.webp The Entryfield properties.
\li Select \uicontrol File > \uicontrol Save or select \key {Ctrl+S} \li Select \uicontrol File > \uicontrol Save or select \key {Ctrl+S}
to save your changes. to save your changes.
\endlist \endlist
@@ -66,7 +63,7 @@
\e Screen01 should now look something like this in the \e Screen01 should now look something like this in the
\uicontrol {2D} view: \uicontrol {2D} view:
\image loginui3-base-state.webp "Login page with a Repeat Password field" \image loginui3-base-state.webp The login page with a Repeat Password field.
Next, you will add states for the login page and the account creation page, Next, you will add states for the login page and the account creation page,
where you use the visibility property to hide the \e {Repeat Password} field on where you use the visibility property to hide the \e {Repeat Password} field on
@@ -82,7 +79,7 @@
\li In the \l States view, select \imageplus \li In the \l States view, select \imageplus
. .
\li Enter \e login as the state name. \li Enter \e login as the state name.
\image loginui3-login-state.webp "States view" \image loginui3-login-state.webp The States view.
\li Select \e repeatPassword in \uicontrol Navigator to display its \li Select \e repeatPassword in \uicontrol Navigator to display its
properties in \uicontrol Properties. properties in \uicontrol Properties.
\li In the \uicontrol Visibility section, clear the \li In the \uicontrol Visibility section, clear the
@@ -104,11 +101,11 @@
You can now see all the states in the \uicontrol States view: You can now see all the states in the \uicontrol States view:
\image loginui3-states.webp "All states in the States view" \image loginui3-states.webp All states in the States view.
The live preview displays the default state, \e login: The live preview displays the default state, \e login:
\image loginui3-login-state-preview.webp "Preview of the login state" \image loginui3-login-state-preview.webp Preview of the login state.
Next, you will create connections to specify that clicking the Next, you will create connections to specify that clicking the
\e {Create Account} button on the login page triggers a \e {Create Account} button on the login page triggers a
@@ -138,7 +135,7 @@
\li Select the \imageclose \li Select the \imageclose
button to close the connection setup options. button to close the connection setup options.
\image loginui3-connections.webp "Connections tab" \image loginui3-connections.webp The Connections tab in the Connections view.
\li Select \uicontrol File > \uicontrol Save or select \key {Ctrl+S} \li Select \uicontrol File > \uicontrol Save or select \key {Ctrl+S}
to save your changes. to save your changes.
@@ -149,7 +146,7 @@
\uicontrol {Change State to createAccount}. \uicontrol {Change State to createAccount}.
\endlist \endlist
In the live preview, you can now select the \e {Create Account} In \uicontrol {Live Preview}, you can now select the \e {Create Account}
button to go to the account creation page. button to go to the account creation page.
\image loginui3.gif "Moving between login page and account creation page" \image loginui3.gif "Moving between login page and account creation page"
@@ -159,4 +156,6 @@
To learn how to use a timeline to animate the transition between the login To learn how to use a timeline to animate the transition between the login
and account creation pages, see the next tutorial in the series, and account creation pages, see the next tutorial in the series,
\l {Login UI: Timeline}. \l {Login UI: Timeline}.
\sa {Working with states}, {Signal and Handler Event System}
*/ */

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

@@ -10,15 +10,16 @@
components. components.
\previouspage {Login UI: States} \previouspage {Login UI: States}
\image loginui4.gif "Login UI" \image loginui4.gif Moving between the login page and the account creation page.
\e{Login UI: Timeline} is the fourth in a series of tutorials that build \e{Login UI: Timeline} is the fourth of the \QDS \e{Login UI} tutorials, which
on each other to illustrate how to use \QDS to create a simple UI with build on each other to illustrate how to create a simple UI with some basic UI
some basic UI components, such as pages, buttons, and entry fields. The components, such as pages, buttons, and entry fields.
fourth part of the tutorial describes how to use the timeline and states
to animate UI components. The result of this final tutorial is a UI similar This tutorial describes how to use the timeline and states to animate UI
to the preceding animation, where you can navigate to the account creation components. The result of this final tutorial is a UI similar to the preceding
page by clicking the \e {Create Account} button. animation, where you can navigate to the account creation page by selecting the
\e {Create Account} button.
In \l {Login UI: States}, you learned how to use states to simulate page In \l {Login UI: States}, you learned how to use states to simulate page
changes in a UI and connections to provide user interaction with it. In changes in a UI and connections to provide user interaction with it. In
@@ -71,7 +72,7 @@
\l{Arranging components}{component hierarchy}. \l{Arranging components}{component hierarchy}.
\endlist \endlist
\li Repeat the previous step for \e password and \e repeatPassword. \li Repeat the previous step for \e password and \e repeatPassword.
\li Select \e fields in \uicontrol Navigator and select \key Delete to \li Select \e fields in \uicontrol Navigator, and then select \key Delete to
delete it. delete it.
\image loginui4-hierarchy.webp "The hierarchy of the components." \image loginui4-hierarchy.webp "The hierarchy of the components."
\li Select \e username in \uicontrol Navigator. \li Select \e username in \uicontrol Navigator.
@@ -104,7 +105,7 @@
\endlist \endlist
This attaches \e password to the bottom of \e username while keeping its This attaches \e password to the bottom of \e username while keeping its
horizontal center aligned with that of the rectangle. horizontal center aligned with that of the rectangle.
\image loginui4-password-layout.webp "The layout of password entry field." \image loginui4-password-layout.webp The layout properties of password entry field.
\li Repeat the previous step to anchor the top of \e repeatPassword \li Repeat the previous step to anchor the top of \e repeatPassword
to the bottom of \e password with a margin of \e 20 and to to the bottom of \e password with a margin of \e 20 and to
anchor it horizontally to its parent. anchor it horizontally to its parent.
@@ -114,7 +115,7 @@
\e Screen01 should not display visible changes in the \uicontrol {2D} view: \e Screen01 should not display visible changes in the \uicontrol {2D} view:
\image loginui4-base-state.webp "UI with all the buttons and fields" \image loginui4-base-state.webp Login UI with all the buttons and fields.
\section2 Adding a timeline \section2 Adding a timeline
@@ -151,7 +152,7 @@
\imageactionicon \imageactionicon
> \uicontrol {Insert Keyframe} to insert a keyframe for the > \uicontrol {Insert Keyframe} to insert a keyframe for the
opacity property of the component. opacity property of the component.
\image loginui4-keyframe-opacity.png "Inserting keyframe for opacity property" \image loginui4-keyframe-opacity.png Inserting a keyframe for the opacity property.
\li In \uicontrol Timeline, check that the playhead is in \li In \uicontrol Timeline, check that the playhead is in
frame \e 0, select the small arrow next to \e repeatPassword frame \e 0, select the small arrow next to \e repeatPassword
keyframe to expand it, and then select the \imagerecordfill keyframe to expand it, and then select the \imagerecordfill
@@ -166,7 +167,7 @@
Alternatively, you can fine-tune the value of a keyframe by right-clicking the Alternatively, you can fine-tune the value of a keyframe by right-clicking the
keyframe marker \imagekeyframelinearactive keyframe marker \imagekeyframelinearactive
, and selecting \uicontrol {Edit Keyframe}. , and selecting \uicontrol {Edit Keyframe}.
\image loginui4-timeline.webp "Recording the opacity property" \image loginui4-timeline.webp Recording the opacity property.
\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.
@@ -174,7 +175,7 @@
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 \e 1 in frame \e 0 and \e 0 in frame \e 1000. time the opacity value needs to be \e 1 in frame \e 0 and \e 0 in frame \e 1000.
\image loginui4-timeline-opacity.webp "Recorded timeline for the opacity properties" \image loginui4-timeline-opacity.webp Recorded timeline for the opacity properties.
\li Select \uicontrol File > \uicontrol Save or select \key {Ctrl+S} \li Select \uicontrol File > \uicontrol Save or select \key {Ctrl+S}
to save your changes. to save your changes.
\endlist \endlist
@@ -197,7 +198,7 @@
), select \imageactionicon ), select \imageactionicon
> \uicontrol {Insert Keyframe} to insert a keyframe for the top > \uicontrol {Insert Keyframe} to insert a keyframe for the top
anchor margin of \e repeatPassword. anchor margin of \e repeatPassword.
\image loginui4-keyframe-top-anchor-margin.png "Inserting keyframe for top anchor margin" \image loginui4-keyframe-top-anchor-margin.png Inserting keyframe for top anchor margin.
\li In \uicontrol Timeline, check that the playhead is in \li In \uicontrol Timeline, check that the playhead is in
frame \e 0, and select the record button for the \e anchors.topMargin frame \e 0, and select the record button for the \e anchors.topMargin
property of \e repeatPassword. property of \e repeatPassword.
@@ -209,7 +210,7 @@
value, \e repeatPassword appears to slide down and settle below value, \e repeatPassword appears to slide down and settle below
\e password. \e password.
\li Select the record button again to stop recording property changes. \li Select the record button again to stop recording property changes.
\image loginui4-timeline-all.webp "Recorded timeline for repeatPassword and createAccount." \image loginui4-timeline-all.webp Recorded timeline for repeatPassword and createAccount.
\li Select \uicontrol File > \uicontrol Save or select \key {Ctrl+S} \li Select \uicontrol File > \uicontrol Save or select \key {Ctrl+S}
to save your changes. to save your changes.
\endlist \endlist
@@ -223,12 +224,12 @@
\li Select the keyframe marker \imagekeyframelinearactive \li Select the keyframe marker \imagekeyframelinearactive
for the \e anchors.topMargin property at frame \e 1000 on the for the \e anchors.topMargin property at frame \e 1000 on the
timeline to select it. timeline to select it.
\image loginui4-easing-curve-top-anchor-margin.webp "Top anchor margin keyframe marker" \image loginui4-easing-curve-top-anchor-margin.webp Top anchor margin keyframe marker.
\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 \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 Easing Curve Editor.
\li Select \uicontrol OK to close the editor. \li Select \uicontrol OK to close the editor.
\endlist \endlist
@@ -239,7 +240,7 @@
Your timeline should now look something like this: Your timeline should now look something like this:
\image loginui4-timeline-final.webp "Timeline view with the recorded property changes" \image loginui4-timeline-final.webp The Timeline view with the recorded property changes.
Next, you will create states for the login and account creation pages and bind Next, you will create states for the login and account creation pages and bind
them to the animation settings. them to the animation settings.
@@ -257,7 +258,7 @@
bind the states to property animations. bind the states to property animations.
\li In \uicontrol States, select \uicontrol Default for \e login to determine that \li In \uicontrol States, select \uicontrol Default for \e login to determine that
the \e login state is applied when the application starts. the \e login state is applied when the application starts.
\image loginui4-states.webp "Created states in the States view." \image loginui4-states.webp Created states in the States view.
\li With the base state selected, select \uicontrol Timeline > \li With the base state selected, select \uicontrol Timeline >
\imagesettings (\uicontrol {Timeline Settings (S)}) on the toolbar \imagesettings (\uicontrol {Timeline Settings (S)}) on the toolbar
(or select \key S) to open the \uicontrol {Timeline Settings} dialog. (or select \key S) to open the \uicontrol {Timeline Settings} dialog.
@@ -269,14 +270,14 @@
\e createAccount row, and select \e toCreateAccountState. \e createAccount row, and select \e toCreateAccountState.
\image loginui4-timeline-settings-states.png \image loginui4-timeline-settings-states.png
\li Select \uicontrol Close to save the timeline settings. \li Select \uicontrol Close to save the timeline settings.
\li Select \uicontrol File > \uicontrol Save or select \key {Ctrl+S} \li Select \uicontrol File > \uicontrol Save or \key {Ctrl+S}
to save your changes. to save your changes.
\endlist \endlist
In the live preview, you can now select the \e {Create Account} In \uicontrol {Live Preview}, you can now select the \e {Create Account}
button to go to the account creation page. button to go to the account creation page.
\image loginui4.gif "Moving between login page and account creation page" \image loginui4.gif Moving between the login page and the account creation page.
\section1 Next steps \section1 Next steps