1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
|
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\example Loginui3
\ingroup gstutorials
\title Log In UI - States
\brief Illustrates how to use states to create a second UI page.
\previouspage {Log In UI - Positioning}
\nextpage {Log In UI - Timeline}
\image loginui3.gif "Log In UI"
\e{Log In UI - States} 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. The
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
and password to log in. On the second page, they can register if they
do not already have an account.
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
when a user selects the \e {Create Account} button.
The starting point for this tutorial is the completed
\l{Log In UI - Positioning} project. You can download the project from
\l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui2}{here}.
Additionally, you can download the completed project of this tutorial from
\l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui3}{here}.
The \e {Learn More} sections provide additional information relevant to the
task at hand.
\section1 Adding UI Components
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
this section from previous parts of the tutorial.
To preview the changes that you make to the UI while you make
them, select the \inlineimage icons/live_preview.png
(\uicontrol {Show Live Preview}) button on the \l {Form Editor}
toolbar or press \key {Alt+P}.
To add the entry field needed on the second page to the \e Screen01
component:
\list 1
\li Double-click \e Screen01.ui.qml in \uicontrol Projects to open it
in \uicontrol {Form Editor}.
\li Drag-and-drop an instance of the EntryField component from
\uicontrol Components > \uicontrol {My Components} to \e fields in
\l Navigator.
\li Select the EntryField instance in \uicontrol Navigator to modify
its ID and text in \uicontrol Properties.
\li In \uicontrol Component > \uicontrol ID, enter
\e repeatPassword.
\li In \uicontrol {Button Content} > \uicontrol Text, enter
\e {Repeat Password} and select \uicontrol tr to mark the text
translatable.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
\e Screen01 should now look something like this in \uicontrol {Form Editor}:
\image loginui3-base-state.jpg "Login page with a Repeat Password field"
Next, you will add states for the login page and the account creation page,
where you use the visibility property to hide the repeat password field on
the login page and the \e {Create Account} button on the account creation
page.
\section1 Using States to Simulate Page Changes
You will now add \l{Adding States}{states} to the UI to show and hide UI
components in \uicontrol {Form Editor}, depending on the current page:
\list 1
\li In the \l States view, select \inlineimage icons/plus.png
.
\li Enter \e login as the state name.
\image loginui3-login-state.jpg "States view"
\li Select \e repeatPassword in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In the \uicontrol Visibility section, deselect the
\uicontrol Visible check box to hide the repeat
password field in the login state.
\image loginui3-visibility.png
\li In \uicontrol States, select \inlineimage icons/action-icon.png
for \e login to open the \uicontrol Actions menu, and then
select \uicontrol {Set as Default} to determine that the \e login
state is applied when the application starts.
\li With the base state selected, add another state and name it
\e createAccount. This state should now look identical to the base
state.
\li Select \e createAccount in the \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In \uicontrol Visibility, deselect the \uicontrol Visible check box
to hide the \e {Create Account} button in the account creation
state.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
You can now see all the states in the \uicontrol States view:
\image loginui3-states.jpg "All states in the States view"
The live preview displays the default state, \e login:
\image loginui3-login-state-preview.jpg "Preview of the login state"
\section2 Learn More - States
The \l{Adding States}{state} of a particular visual component is the set of
information which describes how and where the individual parts of the visual
component are displayed within it, and all the data associated with that
state. Most visual components in a UI will have a limited number of states,
each with well-defined properties.
For example, a list item may be either selected or not, and if
selected, it may either be the currently active single selection or it
may be part of a selection group. Each of those states may have certain
associated visual appearance (neutral, highlighted, expanded, and so on).
Youn can apply states to trigger behavior or animations. UI components
typically have a default state that contains all of a component's initial
property values and is therefore useful for managing property values before
state changes.
You can specify additional states by adding new states. Each state within a
component has a unique name. To change the current state of an component,
the state property is set to the name of the state. State changes can be
bound to conditions by using the \c when property.
Next, you will create connections to specify that clicking the
\uicontrol {Create Account} button on the login page triggers a
transition to the account creation page.
\section1 Connecting Buttons to States
Components have predefined signals that are emitted when users interact
with the UI. The \e PushButton component contains a \l{Mouse Area} component
that has a \e clicked signal. The signal is emitted whenever the mouse
is clicked within the area.
You will now use \l {Connection View} to
\l{Connecting Components to Signals}{connect} the clicked signal of the
\e createAccount button to \e createAccount state:
\list 1
\li Select \uicontrol View > \uicontrol Views >
\uicontrol {Connection View} to open the \uicontrol Connections tab.
\li Select \e createAccount in \uicontrol Navigator.
\li In the \uicontrol Connections tab, select the \inlineimage icons/plus.png
button to add the action that the \c onClicked signal handler of
\e createAccount should apply.
\li Double-click the value \uicontrol Action column and select
\uicontrol {Change state to createAccount} in the drop-down menu.
\image loginui3-connections.png "Connections tab"
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
In the live preview, you can now click the \uicontrol {Create Account}
button to go to the account creation page.
\image loginui3.gif "Moving between login page and account creation page"
\section2 Learn More - Signal and Event Handlers
UI components need to communicate with each other. For example, a button
needs to know that the user has clicked on it. In response, the button may
change color to indicate its state and perform an action.
To accomplish this, a \e {signal-and-handler} mechanism is used, where the
\e signal is the event that is responded to through a \e {signal handler}.
When a signal is emitted, the corresponding signal handler is invoked.
Placing logic, such as a script or other operations, in the handler allows
the component to respond to the event.
For more information, see \l{Signal and Handler Event System}.
\section1 Next Steps
For a more complicated UI, you would typically use components that specify
a view of items provided by a model, such as a \l{List and Grid Views}
{List View} or \l StackView. For more information, see
\l{Lists and Other Data Models}.
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,
\l {Log In UI - Timeline}.
*/
|
