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
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
|
/****************************************************************************
**
** Copyright (C) 2019 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.
**
****************************************************************************/
// **********************************************************************
// 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.
// **********************************************************************
/*!
\contentspage index.html
\previouspage creator-writing-program.html
\example accelbubble
\nextpage creator-project-managing.html
\title Creating a Mobile Application
This tutorial describes developing Qt Quick applications for Android and iOS
devices using Qt Quick Controls.
We use \QC to implement a Qt Quick application
that accelerates an SVG (Scalable Vector Graphics) image based on the
changing accelerometer values.
\image creator_android_tutorial_ex_app.png
For more information about the UI choices you have, see \l{User Interfaces}.
\section1 Setting up the Development Environment
To be able to build the application for and run it on a mobile device, you must
set up the development environment for the device platform and configure a
connection between \QC and the mobile device.
To develop for Android devices, you must download and install the latest
Android NDK and SDK Tools, and then update or install the tools and packages
needed for development. In addition, you must install the Java SE
Development Kit (JDK). After you have installed all
these tools, you must specify the paths to them in \QC.
For detailed instructions, see \l{Qt for Android} and
\l{Connecting Android Devices}.
To develop for iOS devices, you must install Xcode and use it to configure
a device. For this, you need an Apple developer account and iOS Developer
Program certificate that you receive from Apple. For more information, see
\l{Connecting iOS Devices}.
\include creator-tutorial-create-qq-project.qdocinc qt quick application
\section1 Creating the Accelbubble Main View
The main view of the application displays an SVG bubble image that moves
around the screen when you tilt the device.
To use \l{accelbubble/Bluebubble.svg}{Bluebubble.svg} in your project,
copy it to the project directory (same subdirectory as the QML file).
The image appears in \uicontrol Resources. You can also use any other
image or a QML type, instead.
To create the UI in the Design mode:
\list 1
\li In the \uicontrol Projects view, double-click the \e Page1Form.ui.qml
file to open it in the Design mode.
\li In the \uicontrol Navigator, select \uicontrol Label and press
\key Delete to delete it.
\li In \uicontrol Library > \uicontrol {QML Types}, select
\uicontrol Rectangle and drag and drop it to the \uicontrol Page in
the navigator.
\li Select the rectangle in the navigator to edit its properties:
\list a
\li In the \uicontrol Id field enter \e mainWindow, to be able
to reference the rectangle from other places.
\li Select the \uicontrol Layout tab, and then click
the \inlineimage anchor-fill.png
(\uicontrol {Fill to Parent}) button to anchor the rectangle
to the item.
\endlist
\li In \uicontrol Library > \uicontrol Resources, select Bluebubble.svg
and drag and drop it to \e mainWindow in the navigator.
\li In the \uicontrol Properties pane, \uicontrol Id field, enter
\e bubble to be able to reference the image from other places.
\li Select the \inlineimage export_unchecked.png
(\uicontrol Export) button in the navigator to export the
\e mainWindow and \e bubble as properties.
\endlist
We want to modify the properties of the bubble in ways that are not
supported in the Design mode, and therefore we create a custom QML
type for it:
\list 1
\li Right-click the image and select
\uicontrol {Move Component into Separate File}.
\image qtcreator-move-component-into-separate-file.png
\li In the \uicontrol {Component name} field, enter \e Bubble.
\li Deselect the \uicontrol x, \uicontrol y, and
\uicontrol {ui.qml file} check boxes.
\li Select \uicontrol OK to create \e Bubble.qml.
\endlist
\QC creates a reference to the Bubble type in \e Page1Form.ui.qml.
To check your code, you can compare \e Page1Form.ui.qml with the
\l{accelbubble/Page1Form.ui.qml}{Page1Form.ui.qml} example file and
\e Bubble.qml with the \l{accelbubble/Bubble.qml}{Bubble.qml} example file.
The UI is now ready and you can switch to editing the \e Bubble.qml and
\e main.qml files in the \uicontrol {Text Editor}, as described in the
following section.
\section1 Moving the Bubble
In the \uicontrol {Text Editor}, edit \e Bubble.qml to add properties that we
will use to position the image:
\quotefromfile accelbubble/Bubble.qml
\skipto Image
\printuntil }
In the \uicontrol {Text Editor}, edit \e main.qml to specify the application
title, as illustrated by the following code snippet:
\quotefromfile accelbubble/main.qml
\skipto ApplicationWindow
\printuntil title
Specify bubble properties to position the image:
\printuntil bubbleCenter
Then set the x and y position of the image based on the new properties:
\printuntil centerY
\skipto /^\}/
\printuntil }
Then add code to move the bubble based on Accelerometer sensor values:
\list 1
\li Add the following import statement to \e main.qml:
\code
import QtSensors 5.9
\endcode
\li Add the \l{Accelerometer} type with the necessary properties:
\quotefromfile accelbubble/main.qml
\skipto Accelerometer
\printuntil true
\skipto }
\printuntil }
\li Add the following JavaScript functions that calculate the
x and y position of the bubble based on the current Accelerometer
values:
\quotefromfile accelbubble/main.qml
\skipto function
\printuntil Math.atan(x
\printuntil }
\li Add the following JavaScript code for \c onReadingChanged signal of
Accelerometer type to make the bubble move when the Accelerometer
values change:
\quotefromfile accelbubble/main.qml
\skipto onReadingChanged
\printuntil }
We want to ensure that the position of the bubble is always within
the bounds of the screen. If the Accelerometer returns not a number
(NaN), the value is ignored and the bubble position is not updated.
\li Add SmoothedAnimation behavior on the \c x and \c y properties of
the bubble to make its movement look smoother.
\quotefromfile accelbubble/main.qml
\skipto Behavior
\printuntil x
\printuntil }
\printuntil }
\endlist
\section1 Locking Device Orientation
The device display is rotated by default when the device orientation
changes between portrait and landscape. For this example, it would be
better for the screen orientation to be fixed.
To lock the orientation to portrait or landscape on Android, specify it in
an AndroidManifest.xml that you can generate in \QC. For more information,
see \l{Editing Manifest Files}.
On iOS, you can lock the device orientation in a Info.plist file that you
specify in the .pro file as the value of the QMAKE_INFO_PLIST variable.
\section1 Adding Dependencies
Update the accelbubble.pro file with the following library dependency
information:
\code
QT += quick sensors svg xml
\endcode
On iOS, you must link to the above libraries statically, by adding the
plugin names explicitly as values of the QTPLUGIN variable. Specify a
qmake scope for iOS builds (which can also contain the QMAKE_INFO_PLIST
variable):
\code
ios {
QTPLUGIN += qsvg qsvgicon qtsensors_ios
QMAKE_INFO_PLIST = Info.plist
}
\endcode
After adding the dependencies, select \uicontrol Build > \uicontrol {Run qmake} to apply
the changes to the Makefile of the project.
\section1 Adding Resources
You need to add the Bluebubble.svg image file to the application resources
for deployment to mobile devices:
\list 1
\li In the \uicontrol Projects view, double-click the qml.qrc file to open it
in the resource editor.
\li Select \uicontrol Add to add Bluebubble.svg.
\endlist
\section1 Running the Application
The application is complete and ready to be deployed to a device:
\list 1
\li Enable \e{USB Debugging} on the Android device or \e{developer mode}
on the iOS device.
\li Connect the device to the development PC.
If you are using a device running Android v4.2.2, it should prompt you to
verify the connection to allow USB debugging from the PC it is connected
to. To avoid such prompts every time you connect the device, select the
\uicontrol {Always allow from the computer} check box, and then select
\uicontrol OK.
\li To run the application on the device, press \key {Ctrl+R}.
\endlist
*/
|
