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
|
/****************************************************************************
**
** Copyright (C) 2019 Luxoft Sweden AB
** Copyright (C) 2018 Pelagicore AG
** Contact: https://www.qt.io/licensing/
**
** This file is part of the QmlLive tool.
**
** $QT_BEGIN_LICENSE:GPL-QTAS$
** Commercial License Usage
** Licensees holding valid commercial Qt Automotive Suite licenses may use
** this file in accordance with the commercial license agreement provided
** with the Software or, alternatively, in accordance with the terms
** contained in a written agreement between you and The Qt Company. For
** licensing terms and conditions see https://www.qt.io/terms-conditions.
** For further information use the contact form at https://www.qt.io/contact-us.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3 or (at your option) any later version
** approved by the KDE Free Qt Foundation. The licenses are as published by
** the Free Software Foundation and appearing in the file LICENSE.GPL3
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
**
** $QT_END_LICENSE$
**
** SPDX-License-Identifier: GPL-3.0
**
****************************************************************************/
/*!
\page qmllive-concepts.html
\title Concepts
The following are some concepts that are helpful to understand QmlLive.
\list
\li \l{Live Reloading}
\li \l{QmlLive Bench vs QmlLive Runtime}
\li \l{Local Sessions}
\li \l{Remote Sessions}
\li \l{Create Your Own QmlLive Runtime}
\li \l{Structure QML Apps For Live Coding}
\endlist
\section1 Live Reloading
In a typical User Interface (UI) design phase, designers create many graphical
files describing their ideal UI. Transferring these graphical visions into
source code that runs, is a challenging and time consuming task.
\image workbench.png
This task also involves compromises between the designers and the developers.
Sometimes, the designer's vision cannot be replicated fully with the underlying
technology. Consequently, this task requires many iterations before there is
an optimal solution.
There is a lot of time consuming editing work needed, to reach a compromise
that satisfies the designer's vision and how the developer realizes it in code.
Each iteration is a small step towards the desired user experience goal. Qt,
with the Qt Quick technology, already shortens the gap between vision and
product via QML, a more design oriented language. QmlLive aims to close this
gap.
QmlLive supports live coding with two essential features:
\list
\li Allows you to distribute source code modifications, removing the need
to redeploy your application to see the effect of your changes. QmlLive monitors
changes in the file system. As soon as you save a file, it is preprocessed as
needed, and the live view is refreshed.
\li Loads a particular QML file with your required component instead of the main
component, so that each component can be worked on independently.
\endlist
After each code change, QmlLive reloads your project on each connected device,
within seconds.
\section1 QmlLive Bench vs. QmlLive Runtime
QmlLive is managed by a central Bench that watches your project workspace. A
change in a file inside the workspace is automatically detected and immediately
reflected onto one or more local rendering areas, or to connected remote
clients. A team can develop a UI quickly and precisely on a machine and
simultaneously display it on one or more local and/or remote clients. These
clients can run on any desktop or networked embedded device that supports Qt5
and QmlLive.
For sketching out the scene or working with independent UI elements, the QmlLive
Bench is sufficient; you can see the live preview on your local machine.
\table
\header
\li Feature
\li Description
\row
\li QmlLive Bench
\li A GUI server application that populates workspace
updates to each local or remote client.
\row
\li QmlLive Runtime
\li A client application that listens to workspace updates from the
QmlLive Bench.
\endtable
If the application being developed should run on any embedded device or
devices with different display resolutions, then you must launch the QmlLive Runtime
on each embedded device. But, you only need to launch the QmlLive Bench on the
developer's machine.
QmlLive Bench supports the following features:
\list
\li live reloads a \c main.qml file, or a selected component
\li watches the workspace for updates
\li provides a GUI to set a workspace or project settings, configure host connections,
import paths, and so on
\li publishes each file change to all local and remote QmlLive Runtimes on the
embedded devices
\li lets the user select different files to watch, for certain QmlLive Runtime
instances, on different connected devices
\li follows the currently watched file, on the connected devices
\li grabs log messages from all connected QmlLive Runtimes, to enable a more
convenient debugging process
\li lets the user select a file to watch, through the Workspace Navigator
\li controls connections to all of the devices
\endlist
QmlLive Runtime supports the following features:
\list
\li live reloads a \c main.qml file, or a selected component
\li listens for workspace updates from QmlLive Bench
\endlist
\image concept.png
\section1 Local Sessions
For a local session you only need QmlLive Bench. It contains all of the
required components in an easy-to-use interface. As you type and save, the
output is displayed on your machine in a fraction of a second. Local sessions
are best suited for a multi-monitor setup where you see your code on one
display and the live results of your changes on another display. This
use case is ideal for sketching out a scene or putting final touches to
animation behavior. Local sessions also encourage you to think in terms of
elements; instead of developing a whole scene, you can break the scene into
smaller elements. As you work on these small elements, you can see how they
look standalone or embedded into a larger scene.
\section1 Remote Sessions
A scene rendered on a machine's display rarely looks the same as on the target
display for an embedded device. There are subtle changes in the color
appearance, pixel density, font rendering, and proportions. So it is vital to
ensure that a user experience designed on a machine looks just as good on the
embedded device. In the past, this used to be a cumbersome process, requiring
that you copy the code to the embedded device and restart the application. With
QmlLive Bench and QmlLive Runtime you connect to the device, propagate your
workspace, and from there on all changes are reflected on the device's display.
You can always connect more devices, or devices with different sizes.
\image runtime.png
\section1 Create Your Own QmlLive Runtime
Some projects include custom C++ or native code. Those languages require a
compilation step and cannot be reloaded directly with QmlLive. In this case,
you can develop your own QmlLive Runtime based on the QmlLive library. For
more details see \l{Custom Runtime}.
\section1 Structure QML Apps For Live Coding
Over time, developing applications in QML can become complex, especially if
it's not clear how elements are isolated; this is also true for designing UIs.
To translate the designer's vision into a developer's code, the vision needs
to be broken into UI elements like \e display, \e screen, \e panel, \e component,
and \e fragment.
\code
+- Display
|
+- Panel
|
+- Screen
|
+- Panel
|
+- Component
|
+- Fragment
\endcode
These elements form a hierarchy from large UI elements to the smaller entities
and internals. The main benefit of this hierarchy, is that it allows the design
and the development team to share a common vocabulary with their customers, and
ensures that the product's design is always aligned with this shared definition.
These elements are defined as follows:
\list
\li display - The root element that contains a collection of screens or
panels, where each screen covers the entire physical display.
\li screen - Consists of several panels that provide the visual structure
as defined by the design team.
\li panel - Each panel consists of a set of components.
\li components - Reusable UI elements that contain fragments.
\li fragments - An internal structure UI element, not exposed to the
UI developer.
\endlist
Designing a UI requires understanding the initial display layout, its screen
navigation structure, as well as the structure of individual screens and their
panels. It's also necessary to define a common set of components for use inside
the panels; however, the fragments are implementation-specific.
*/
|
