aboutsummaryrefslogtreecommitdiffstats
path: root/doc/usage.qdoc
blob: c8970db01fa4d8dfc519f3019f11a5031aaea437 (plain)
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
/****************************************************************************
**
** Copyright (C) 2019 Luxoft Sweden AB
** Copyright (C) 2018 Pelagicore AG
** Contact: https://www.qt.io/licensing/
**
** This file is part of the QML Live 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-usage.html
\title Usage

\section1 Introduction

QML Live is structured in a modular way, to be able to meet various usage requirements.

In the early phase of a project, normally, you want to use \b {QML Live Bench}, which has everything
included in a typical desktop application.

Later in the project, you may want to test your UI code on a device. For this, you can combine
QML Live Bench with \b {QML Live Runtime}. This combination provides you a default QML renderer to
run on the device and a small remote application on the desktop to control it.

For C++ developers, it's possible to integrate QML Live into your own custom runtime using the
\l LiveNodeEngine class with a few lines of code, and then using QML Live Bench to control it.

\section1 QML Live Bench

QML Live Bench is the all inclusive QML live reloading tool, that allows you to select a workspace
to watch over and provides a Prime QML Live Runtime for the selected QML document. The "Prime QML
Live Runtime" is a special type of Runtime that follows the currently selected \c .qml file.
In contrast, QML Live Bench lets you preview several files simultaneously.

\image qmllivebench.png QML Live Bench

To launch the Bench, run the following command:

\code
$(QMLIVEPROJECT)/bin/qmllivebench[.exe]
\endcode

You can pass command line arguments to the QML Live Bench as follows:

\code
qmllivebench [options] <workspace>
qmllivebench [options] <workspace/file.qml>
\endcode

The following options are supported:

\table
  \header
    \li Option
    \li Description
  \row
    \li \c -version
    \li Display version information.
  \row
    \li \c -pluginpath
    \li Specify the path to QML Live plugins.
  \row
    \li \c -importpath
    \li Specify the path to the QML import.
  \row
    \li \c -stayontop
    \li Keep the viewer window on top.
  \row
    \li \c {-addhost <name, address[,port]>}
    \li Add or update the remote host configuration and then exit.
  \row
    \li \c {-rmhost <name>}
    \li Remove the specified remote host configuration and then exit.
  \row
    \li \c {-probehost <name>}
    \li Suggest the specified host to be online and to connect; implies \c{-remotely}.
  \row
    \li \c -noremote
    \li Do not try to talk to a running Bench; do not listen for remote connections.
  \row
    \li \c -remoteonly
    \li Talk to a running Bench; do nothing if there is no bench running.
  \row
    \li \c -ping
    \li Check if there is a Bench running and accepting remote connections.
  \row
    \li \c {-maxdirwatch <number>}
    \li Limit the number of directories to watch for changes.
  \row
    \li \c -project
    \li Loads a project's \c .qmllive document that contains the workspace path, import paths,
        and the main document in JSON format.
  \row
    \li
\endtable


The following arguments are supported:

\table
  \header
    \li Argument
    \li Description
  \row
    \li \c workspace
    \li Specify the workspace folder to watch. If this folder points to a QML document, then the
        directory is assumed to be the workspace and the file is the active document.
  \row
    \li \c document
    \li The main QML document to load, initially.
\endtable

To preview an additional file, in the Workspace Navigator, right-click on the file and
select \uicontrol{Open in New Window}.

\image newwindow.png

\section1 Integrate with Qt Creator

You can integrate the QML Live Bench into Qt Creator, as an external tool. To do so:

\list
  \li From Qt Creator, open the \uicontrol Settings/Options dialog.
  \li Open the \uicontrol Environment group. The \uicontrol {External Tools} tab is located here.
  \li Under \uicontrol Executable, enter the path to your QML Live Bench executable.
\endlist

\image creator_tool.png Qt Creator

QML Live Bench is now availabe under \uicontrol{Tool > External > QML Live Bench}.
To launch QML Live Bench easily, you can also assign a shortcut to the tool.

\image creator_shortcut.png Qt Creator

Now when you press \uicontrol{Alt+F8} QML Live Bench launches with the current project root folder
open, as its workspace.

\image creator_result.png Qt Creator


\section1 QML Live Runtime

The QML Live Runtime tool provides a default runtime, with a default QML viewer, and listens on a
given port for IPC calls from the remote. This tool is ideal for development on a target device,
when no extra C++ code is required.

\image runtime.png QML Live Runtime

To call the runtime, run the following command:

\code
$(QMLIVEPROJECT)/bin/qmlliveruntime[.exe]
\endcode

To use the runtime, run the following command:

\code
qmlliveruntime [options] <workspace>
\endcode

The following options are supported:

\table
  \header
    \li Option
    \li Description
  \row
    \li \c -version
    \li Display version information.
  \row
    \li \c {-ipcport <port>}
    \li The port which the IPC listens on.
  \row
    \li \c -updates-as-overlay
    \li Allow the viewer to receive updates with read only workspace.
  \row
    \li \c -update-on-connect
    \li Update all workspace documents, initially. This is a blocking option.
  \row
    \li \c -pluginpath
    \li Specify the path to QML Live plugins.
  \row
    \li \c -importpath
    \li Specify the path to the QML import.
  \row
    \li \c -fullscreen
    \li Show the viewer window in fullscreen mode.
  \row
    \li \c -transparent
    \li Make the viewer window transparent.
  \row
    \li \c -frameless
    \li Run the viewer with no window frame.
  \row
    \li \c -stayontop
    \li Keep the viewer window on top.
  \row
    \li \c -allow-create-missing
    \li Allow creating new documents in the workspace. Without this option updates
    are only accepted for existing workspace documents.
  \row
    \li \c -title
    \li Set window title.
  \row
    \li \c -hidebuttons
    \li Hide window control buttons (close, minimize, maximize).
\endtable

Not all projects are designed in a way to allow the designer working on isolated panels or screens.
Sometimes, it may be necessary to deploy the whole project to a target device to run it. Receiving
updates normally requires write access to the deployed files. But, depending on the target
platform, the project may be deployed to a location which is not writable by the user. In most
cases, modifying the file permissions after deployment can help. However, a more convenient method
is to let the QML Live Runtime store all updates in a writable workspace overlay. Use the
\c -updates-as-overlay option to enable this feature.

When you update documents later, after application startup, you may encounter other constraints. If
this is the case the \c -update-on-connect option can help. When this option is used, all workspace
documents are updated before any QML components are instantiated.


\section1 Custom Runtime

You can create your own custom runtime with QML Live features. This way, you can use your QML view
setup with your additional C++ code together with the QML Live system.

For this, you need to use the \l LiveNodeEngine class to be able to receive workspace changes and
active document updates. By default, the IPC listens on port 49156.

The code snippet below shows an example of a minimal custom QML Live runtime:

\snippet ../examples/customruntime/main.cpp 0

On platforms where \c pkg-config is supported, add the following lines to your project file, if
QML Live is installed on your build host:

\code
CONFIG += link_pkgconfig
PKGCONFIG += qmllive
\endcode

Another option is to compile everything directly into your application by including
\c{$(QMLLIVEPROJECT)/src/src.pri} in your project file.

*/