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
|
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
//! [converting-ui-projects-to-applications]
\1 projects are useful for creating user interfaces. To
use them for application development in Qt Creator you have to add:
\list
\li A project configuration file (\c CMakeLists.txt or a \c .pro file)
\li C++ code (\c .cpp)
\li Resource files
\li Code needed for deploying applications to \l{glossary-device}
{devices}
\endlist
For more information about integrating QML and C++, see
\l{Overview - QML and C++ Integration}.
\note Since \QDS 2.3.0, \QDS project wizard templates generate projects that
can be built with CMake. You can open the \c CMakeLists.txt project file in
Qt Creator to continue developing the project.
\target wizard-template-note
\note Since \QDS 3.9.0, \QDS project wizard templates generate projects that
automatically check out and build the Qt Quick Studio Components from
\l{https://code.qt.io/cgit/qt-labs/qtquickdesigner-components.git/} {Qt Code Review},
using CMake. To turn off this feature, use the option \c BUILD_QDS_COMPONENTS
in the CMake configuration.
\if defined(qtcreator)
For more information about using \QDS to create projects, see
\l{\QDS documentation}.
\endif
To use qmake as the build system, use a Qt Creator
wizard template to create a Qt Quick application that is built using the
qmake build system and then copy the source files from the Qt UI Quick
project to the application project.
You can use the \c RESOURCES option in the project configuration file to
automatically add all the QML files and related assets to a
\l{The Qt Resource System}{Qt resource collection file (\c .qrc)}. However,
large files should be included as external binary resources instead of
compiling them into the binary.
The wizard automatically adds the \c QML_IMPORT_PATH option to the project
file for specifying the required \l{QML Import Path}{QML import path}. The
path is only needed if more than one subdirectory has QML files.
Then you can use the \l QQuickView class in the main C++ source file to
show the main QML file when the application starts.
\if defined(qtcreator)
The \e {Qt Quick Studio Components} module is installed when you
install \QDS. If you use Qt Quick Studio Components or Effects
from the module in a project that you want to edit in Qt Creator,
you have to build the module and install it to your Qt to be able to
build your project. For more information, see
\l{Adding Qt Quick Studio Components to Qt Installations}.
The \l{Qt Quick Timeline} module is installed when you install \QDS.
If you only install Qt Creator and Qt, remember to also select the
Qt Quick Timeline module for installation. If your Qt is older than
5.14, you must build the Qt Quick Timeline module and install it to
your Qt to be able to build your project.
\section1 Converting into qmake Projects
To convert a project that has a \c .qmlproject file to one that has a \c .pro
file:
\list 1
\li Select \uicontrol File > \uicontrol {New Project} >
\uicontrol {Application (Qt)} > \uicontrol {Qt Quick Application} >
\uicontrol Choose.
\li In the \uicontrol {Build system} field, select \l qmake as the build
system to use for building and running the project, and then select
\uicontrol Next (or \uicontrol Continue on \macos).
\li Follow the instructions of the wizard to create the project.
\li In the file explorer, copy the source files from the Qt Quick UI
project directory to a subdirectory in the application
project directory. For the purpose of these instructions, the
directory is called \c qml.
\li Open the application project file, and edit the value of the
\c RESOURCES option to add the following line:
\badcode
RESOURCES += \
$$files(qml/*)
\endcode
\li Also edit the value of the \c QML_IMPORT_PATH option to specify the
QML import path:
\badcode
QML_IMPORT_PATH = qml/imports
\endcode
Where \c {qml/imports} is the import path.
\li Go to \uicontrol Build, and select \uicontrol {Run qmake} to
apply the \c RESOURCES option to the build configuration.
\li Open the \c {main.cpp} file and replace the QQmlApplicationEngine
object with a QQuickView object:
\quotefromfile progressbar/main.cpp
\skipto QQuickView view;
\printuntil view.show()
Where \c {qrc:/qml/imports} is the import path and
\c {qrc:/qml/ProgressBar.ui.qml} is the path to and the
name of the main QML file in the Qt Quick UI project.
\li Go to \uicontrol Build, and select \uicontrol Run to build and
run your project.
\note If you get error messages related to modules, perfom the steps
described in \l{Adding Qt Quick Studio Components to Qt Installations}.
\endlist
For example, if you copy the source files of the \e ProgressBar
example from your \QDS installation (located in the
\c{\share\qtcreator\examples\ProgressBar} directory) to an empty
Qt Quick application project and make the necessary changes, the
\c {main.cpp} file should look as follows:
\quotefile progressbar/main.cpp
\endif
\if defined(qtdesignstudio)
If you only install Qt Creator and Qt, remember to also select the
Qt Quick Timeline module for installation.
\endif
\section1 Handling Large Data Files
Graphical assets used in the UI, such as images, effects, or 3D scenes
are a typical cause for performance problems in UIs. Even building the
application requires huge amounts of memory if you try to include large
asset files, such as 100-MB 3D models or 64-MB textures, into the \c .qrc
file for compiling them into the binary.
First try to optimize your assets, as described in
\l{Optimizing designs} and \l {Creating optimized 3D scenes}.
Large assets should either be loaded directly from the file system or by
using the Qt resource system dynamically. For more information, see
\l{The Qt Resource System}.
\section1 Adding Qt Quick Studio Components to Qt Installations
Since \QDS 3.9, the Qt Quick Studio Components module is installed by default
as part of the application created with \QDS. You can also install the module manually.
For example:
\list 1
\li Clone the module repository.
\badcode
git clone https://code.qt.io/qt-labs/qtquickdesigner-components.git
\endcode
\li Install the Qt Quick Studio Components module.
\badcode
mkdir build
cd build
cmake -GNinja -DCMAKE_INSTALL_PREFIX=<path_to_qt_install_directory> <path_to_qtquickdesigner-components>
cmake --build .
cmake --install .
\endcode
\note Here, \e <path_to_qt_install_directory> and \e <path_to_qtquickdesigner-components>
needs to be replaced with the real location on your local drive. For example,
\e <path_to_qt_install_directory> can be something like \e /Qt/6.3.0/msvc2019_64
and \e <path_to_qtquickdesigner-components> like this \e ../qtquickdesigner-components/
\endlist
\if defined(qtcreator)
\sa {Create Qt Quick UI Prototypes}
\endif
//! [converting-ui-projects-to-applications]
*/
|
