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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
|
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\page studio-terms.html
\previouspage studio-use-cases.html
\nextpage {Examples}
\title Concepts and Terms
This topic describes main \QDS concepts and terms:
\list
\li \l{glossary-asset}{Asset}
\li \l{glossary-binding}{Binding}
\li \l{glossary-component}{Component}
\li \l{glossary-connection}{Connection}
\li \l{glossary-device}{Device}
\li \l{glossary-mode}{Mode}
\li \l{glossary-project}{Project}
\li \l{glossary-property}{Property}
\li \l{glossary-signal}{Signal}
\li \l{glossary-state}{State}
\li \l{glossary-transition}{Transition}
\endlist
\section1 Asset
\target glossary-asset
An \e asset is an image, font file, 3D model, or other supported file that
you add to your \l{glossary-project}{project}.
\image qtquick-assets-tab.png "Assets"
Assets are packaged with \l{glossary-component}{components} for delivery
to users.
Read more about assets:
\list
\li \l{Assets}
\endlist
\section1 Binding
\target glossary-binding
A \e binding is a declarative way of specifying the value of a
\l{glossary-property}{property}. Binding allows a property value
to be expressed as a JavaScript expression that defines the value
relative to other property values or data accessible in the
application. The property value is automatically updated if the
other properties or data values change.
At its simplest, a binding may be a reference to another property. For
example, the height of a \l{glossary-component}{component} can be bound
to the height of its parent, so that when the parent height changes, the
component height is adjusted automatically. Similarly, the opacity of a
component can be bound to the opacity of its parent component.
\image qtquick-connection-editor-assignment.png "Binding Editor"
Property bindings are created implicitly whenever a property is assigned a
JavaScript expression.
Read more about bindings:
\list
\li \l{Adding Bindings Between Properties}
\li \l{Setting Bindings}
\endlist
\section1 Component
\target glossary-component
A \e component is a reusable building block for a UI.
\QDS comes with \e {preset components} that you can use in your UI by
creating instances of them. These are similar to \e Symbols in Sketch or
\e Prefab in Unity.
\image qtquick-components-tab.png "Preset components in Components"
Some of the \l {Component Types}{preset components} represent simple shapes,
text, or images, while others represent complex UI controls with full
functionality, such as spin boxes or sliders. You can also add instances of
preset \l {3D Components}{3D components} to your UIs. You can find all
the preset components in \l Components.
To build \l {Creating Component Instances}{your own components}, you can
modify the \l{glossary-property}{properties} of the component instances
and combine them.
A component is specified within one file (with the file extension
\e ui.qml or \e .qml). For example, a Button component may be defined
in Button.ui.qml. Typically, the visual appearance of a component is
defined in a \e {UI file}. To create component files, you can use
\l{Creating Components from Scratch}{wizard templates}, or
\l{Turning Component Instances into Custom Components}
{move component instances into separate component files}.
Read more about components:
\list
\li \l {Preset Components}
\li \l {Creating Component Instances}
\li \l {Creating Custom Components}
\endlist
\section1 Connection
\target glossary-connection
A \e connection can be created between a \l{glossary-component}{component}
and \l{glossary-signal}{signal} to determine how the UI should react to
application events. Another way to create connections between components
is to create \l{glossary-binding}{bindings} between the values of their
\l{glossary-property}{properties}.
\image qmldesigner-connections.png "Connection View"
Read more about connections:
\list
\li \l{Connection View}
\li \l{Adding Connections}
\endlist
\section1 Device
\target glossary-device
An embedded device.
Read more about devices:
\list
\li \l{Previewing on Devices}
\endlist
\section1 Mode
\target glossary-mode
A \e mode adapts the \QDS UI to the different UI design
tasks at hand. Each mode has its own view that shows only the information
required for performing a particular task, and provides only the most
relevant features and functions related to it. As a result, the majority
of the \QDS window area is always dedicated to the actual task.
For a designer, the most important modes are \uicontrol Design for the
actual work, \uicontrol Welcome for opening examples and tutorials, and
\uicontrol Help for reading documentation. The other modes are mostly
needed for application development.
\image studio-design-mode.png "Design mode"
Read more about modes:
\list
\li \l{Selecting Modes}
\li \l{Design Views}
\endlist
\section1 Project
\target glossary-project
A project is a container for the \l{glossary-component}{components} and
\l{glossary-asset}{assets} that you use in your UI. You can \e package
the UI and preview or run it on different operating systems on the desktop
or a \l{glossary-device}{device}.
You use templates to create different types of projects according to your
needs. The templates add preset components to the project by default. For
example, if you create a 3D project, preset 3D components are added to it.
You can add more preset components in \uicontrol {Components}.
\image studio-project-wizards.png "New Project dialog"
Read more about projects:
\list
\li \l{Creating Projects}
\endlist
\section1 Property
\target glossary-property
A \e property is an attribute of a \l{glossary-component}{component}
that can be assigned a static value or bound to a dynamic expression.
A property's value can be read by other components. Generally, it can
also be modified by another component, unless a particular component
type has explicitly disallowed this for a specific property.
\image qtquick-item-properties-common.png "Properties view"
Read more about properties:
\list
\li \l{Properties}
\li \l{Preset Components}
\li \l{Specifying Component Properties}
\li \l{Adding Bindings Between Properties}
\li \l{Specifying Dynamic Properties}
\endlist
\section1 Signal
\target glossary-signal
A \e signal represents an application event, such as a user clicking a
button or the value of a \l{glossary-property}{property} of a
\l{glossary-component}{component} changing. The application needs this
information to perform actions or to relay it to other applications.
Components have predefined signals that are emitted when users interact with
the application. For example, the \l {Mouse Area} component has a \c clicked
signal that is emitted whenever the mouse is clicked within the area. Since
the signal name is \c clicked, the signal handler for receiving this signal
is named \c onClicked.
\image washingmachineui-connections.png "Connection View, Connections tab"
Further, a signal is automatically emitted when the value of a
\l{glossary-property}{property} changes.
Read more about signals:
\list
\li \l{Connecting Components to Signals}
\li \l{Mouse Area}
\endlist
\section1 State
\target glossary-state
The \e state of a particular visual \l{glossary-component}{component} is
the set of information that describes how and where the individual parts
of the 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 \l{glossary-property}{properties}.
For example, an element in a list 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 forth).
Similarly, the appearance of a button can change to indicate a \e pressed
state.
\image studio-custom-button.gif "Button states"
Read more about states:
\list
\li \l{States}
\li \l{Adding States}
\endlist
\section1 Transition
\target glossary-transition
When a visual \l{glossary-component}{component} transitions from one
\l{glossary-state}{state} to another, its appearance changes. A
\e transition is an \e edge between two states. It may trigger other
events to occur, as other parts of the application may have behavior
that is triggered when a certain state is entered or left.
Read more about transitions:
\list
\li \l{Transition Editor}
\li \l{Animating Transitions Between States}
\endlist
\omit
## The following terms might or might not come back, but for now, the
## descriptions are considered too technical for the designer target group.
\section1 Deploy Configuration
\target glossary-deploy-config
Handles the packaging and copying of the necessary files to a location
you want to preview the UI at. The files can be copied to a location in
the file system of the development PC or a \l{glossary-device}{device}.
\section1 Kit
\target glossary-buildandrun-kit
\QDS groups run settings as kits to make cross-platform development easier.
Each kit consists of a set of values that define one environment, such as a
\l{glossary-device} {device} to preview the UI on.
\section1 Run Configuration
\target glossary-run-config
Starts the UI in the location where it was copied by the
\e {deploy configuration}. By default, when you run a project, \QDS
deploys it to the \l{glossary-device}{device} specified in the
selected \l{glossary-buildandrun-kit}{kit}, and runs it there. However,
if you have not made any changes to the project since you last deployed
it, \QC simply runs it again.
\endomit
*/
|
