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
|
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
**
** Commercial License Usage
** Licensees holding valid commercial Qt 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 Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/
/*!
\page quick-converting-ui-projects.html
\if defined(qtdesignstudio)
\previouspage studio-importing-3d.html
\nextpage quick-uis.html
\else
\previouspage creator-qml-modules-with-plugins.html
\nextpage creator-exporting-qml.html
\endif
\title Converting UI Projects to Applications
Qt Quick UI projects are useful for creating user interfaces. To
use them for application development in Qt Creator you have to add:
\list
\li Project configuration file (.pro)
\li C++ code (.cpp)
\li Resource files (.qrc)
\li Code needed for deploying applications to \l{glossary-device}
{devices}
\endlist
You can use a Qt Creator wizard 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 Qt resource
file.
The wizard automatically adds the \c QML_IMPORT_PATH option to the project
file for specifying the required
\l{https://doc.qt.io/qt-5/qtqml-syntax-imports.html#qml-import-path}
{QML import path}. The path is only needed if more than one subdirectory
contains 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.
The \l{Qt Quick Timeline} module is delivered with \QDS and with Qt 5.14,
and later. If you use a timeline in a \QDS project that you import to \QC,
and 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 Projects
To convert a project that has a .qmlproject file to one that has a .pro
file:
\list 1
\li Select \uicontrol File > \uicontrol {New File or Project} >
\uicontrol {Application (Qt Quick)} >
\uicontrol {Qt Quick Application - Empty} > \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 Select \uicontrol Build > \uicontrol {Run qmake} to apply the
\c RESOURCES option to the build configuration.
\li Open the \e {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 Select \uicontrol Build > \uicontrol Run to build and run your
project.
\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
\e {main.cpp} file should look as follows:
\quotefile progressbar/main.cpp
\section1 Adding Custom Fonts
To \l{Using Custom Fonts}{use custom fonts} from the Qt Quick UI project,
call the QFontDatabase::addApplicationFont() function from the \e {main.cpp}
file.
\section1 Adding Qt Quick Timeline Module to Qt Installations
\note You only need to do this if your Qt version is older than 5.14.
Check out the \l{Qt Quick Timeline} module from
\l{https://codereview.qt-project.org/#/admin/projects/qt/qtquicktimeline}
{Qt Code Review}.
For example:
\badcode
git clone ssh://user@codereview.qt-project.org:29418/qt/qtquicktimeline
\endcode
Then use qmake from your Qt installation to build the module and to add it
to your Qt. Switch to the directory that contains the sources (usually,
\c qtquicktimeline), and enter the following commands:
\badcode
<path_to_qmake>\qmake -r
make
make install
\endcode
On Windows, use the \c nmake and \c {nmake install} commands instead.
*/
|
