summaryrefslogtreecommitdiff
path: root/doc/qtcreator/src/qtquick/creator-only/qtquick-creating.qdoc
blob: af5f9ac321ba167847de68d11e2544359208be05 (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
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only

// **********************************************************************
// NOTE: the sections are not ordered by their logical order to avoid
// reshuffling the file each time the index order changes (i.e., often).
// Run the fixnavi.pl script to adjust the links to the index order.
// **********************************************************************

/*!
    \previouspage creator-visual-editor.html
    \page quick-projects.html
    \nextpage creator-qtquickdesigner-plugin.html

    \title Creating Qt Quick Projects

    The following table lists the wizard templates for creating a new
    Qt Quick project from scratch.

    \table
        \header
            \li Category
            \li Wizard Template
            \li Purpose
        \row
            \li Application (Qt)
            \li Qt Quick Application
            \li Creates a Qt Quick application project that can have both
                QML and C++ code. You can build the application and deploy it
                to desktop, embedded, and mobile target platforms.

                You can select an option to create a project that you can open
                in \QDS.
        \row
            \li Application (Qt for Python)
            \li Qt for Python - Qt Quick Application
            \li Creates a Python project that has an empty Qt Quick
                Application.
        \row
            \li Other Project
            \li Qt Quick UI Prototype
            \li Creates a Qt Quick UI project with a single QML file that
                has the main view. You can preview Qt Quick UI projects
                in the QML Scene preview tool. You do not need to build them
                because they do not have any C++ code.

                This project type is compatible with \QDS. However, use this
                template only if you are prototyping. You cannot create
                a full application by using this template.

                You cannot deploy Qt Quick UI projects to embedded or
                mobile target platforms. For those platforms, create a Qt Quick
                application instead.
        \row
            \li Library
            \li Qt Quick 2 Extension Plugin
            \li Creates C++ plugins that make it possible to offer extensions
                that can be loaded dynamically into Qt Quick applications.
    \endtable

    \note The SDK for a particular target platform might install additional
    templates for that platform. For example, the QNX templates are installed
    as part of the QNX SDK.

    \QC creates the necessary boilerplate files. Some of the files are
    specific to a particular target platform.

    \section1 Creating Qt Quick Applications

    \list 1

        \li Select \uicontrol File > \uicontrol {New Project} >
            \uicontrol {Application (Qt)} > \uicontrol {Qt Quick Application}
            > \uicontrol Choose.

            \image qtcreator-project-qt-quick.webp {New Project dialog}

        \li In the \uicontrol {Project Location} dialog, \uicontrol Name field,
            enter a name for the project. Keep in mind that you cannot easily
            change the project name later.

        \li In the \uicontrol {Create in} field, enter the path for the project
            files. Select the \uicontrol {Use as default project location} check
            box to create new projects in this folder by default. You can move
            project folders later without problems.

        \li Select \uicontrol Next (or \uicontrol Continue on \macos) to open
            the \uicontrol {Define Build System} dialog.

            \image qtcreator-project-qt-quick-details.webp {Define Project Details dialog}

            To create a project that you can develop with a visual editor in
            \QDS, select \uicontrol {Create a project that you can open in \QDS}.

        \li In the \uicontrol {Build system} field, select the build system to
            use for building and running the project: \l qmake,
            \l {Setting Up CMake}{CMake}, or \l {Setting Up Qbs}{Qbs}.

        \li Select \uicontrol Next to open the
            \uicontrol {Define Project Details} dialog.

        \li Select the Qt version to develop with in the
            \uicontrol {Minimum required Qt version} field.
            The Qt version determines the Qt Quick imports
            that are used in the QML files.

        \li Select the \uicontrol {Use Qt Virtual Keyboard} check box to add
            support for \l{Qt Virtual Keyboard} to the application.

            \note If you have not installed the Qt Virtual Keyboard module when
            you installed Qt, an error message will appear when you try to open
            \e Main.qml for editing. You can use the \l {Installing Qt}
            {Qt Maintenance Tool} to install Qt Virtual Keyboard.

        \li Select \uicontrol Next to open the \uicontrol {Kit Selection}
            dialog.

        \li Select \l{glossary-buildandrun-kit}{kits} for the platforms that
            you want to build the application for.

            \note Kits are listed if they have been specified in \uicontrol Edit
            > \uicontrol Preferences > \uicontrol Kits (on Windows and Linux)
            or in \uicontrol {\QC} > \uicontrol Preferences >
            \uicontrol Kits (on \macos).
            For more information, see \l {Adding Kits}.

        \li Select \uicontrol Next to open the \uicontrol {Project Management}
            dialog.

        \li Review the project settings, and select \uicontrol Finish
            (on Windows and Linux) or \uicontrol Done (on \macos) to
            create the project.

    \endlist

    \QC creates a QML file, \e Main.qml, that you can modify in the
    \uicontrol Edit mode.

    \include creator-python-project.qdocinc python qml project wizards

    \section1 Creating Qt Quick UI Projects

    Qt Quick UI Prototype projects are useful for testing or prototyping user
    interfaces,
    or for setting up a separate project just for QML editing, for example. You
    cannot use them for application development because they do not have:

    \list
        \li C++ code
        \li Resource files (.qrc)
        \li Code needed for deploying applications to \l{glossary-device}
            {devices}
    \endlist

    For more information about how to turn Qt Quick UI Prototype projects into
    Qt Quick Application projects, see
    \l{Converting UI Projects to Applications}.

    To create a Qt Quick UI Prototype project:

    \list 1

        \li Select \uicontrol File > \uicontrol {New Project} >
            \uicontrol {Other Project} > \uicontrol {Qt Quick UI Prototype}.

        \li Select \uicontrol Choose to open the \uicontrol {Project Location}
            dialog.

        \li In the \uicontrol Name field, enter a name for the application.

        \li In the \uicontrol {Create in} field, enter the path for the project
            files. Select the \uicontrol {Use as default project location} check
            box to create new projects in this folder by default.

        \li Select \uicontrol Next (or \uicontrol Continue on \macos) to open
            the \uicontrol {Define Project Details} dialog.

        \li In the \uicontrol {Minimum required Qt version} field, select the Qt
            version to develop with. The Qt version determines the Qt Quick
            imports that are used in the QML files.

            You can add imports later to combine Qt Quick basic types with
            Qt Quick Controls, Qt Quick Dialogs, and Qt Quick Layouts (available
            since Qt 5.1).

        \li Select the \uicontrol {Use Qt Virtual Keyboard} check box to add
            support for \l{Qt Virtual Keyboard} to the application.

            \note If you have not installed the Qt Virtual Keyboard module when
            you installed Qt, an error message will appear when you try to open
            \e main.qml.

        \li Select \uicontrol Next to open the \uicontrol {Kit Selection}
            dialog.

        \li Select \l{glossary-buildandrun-kit}{kits} for the platforms that
            you want to build the application for.

            \note Kits are listed if they have been specified in \uicontrol Edit
            > \uicontrol Preferences > \uicontrol Kits (on Windows and Linux)
            or in \uicontrol {\QC} > \uicontrol Preferences >
            \uicontrol Kits (on \macos).
            For more information, see \l {Adding Kits}.

        \li Select \uicontrol Next to open the \uicontrol {Project Management}
            dialog.

        \li Review the project settings, and select \uicontrol Finish
            (on Windows and Linux) or \uicontrol Done (on \macos) to
            create the project.

    \endlist

    \QC creates the following files:

    \list

        \li .qmlproject project file defines that all QML, JavaScript, and image
            files in the project folder belong to the project. Therefore, you do
            not need to individually list all the files in the project.

        \li .qml file defines a UI item, such as a component or the
            whole application UI.

        \li ui.qml file defines a form for the application UI. This file is
            created if you selected the \uicontrol {With .ui.qml file} check
            box.

    \endlist

    To use JavaScript and image files in the application, copy them to the
    project folder.

*/