feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Doc: Update mobile app tutorial

Browse Source 
- Use Qt Quick Application - Empty wizard template to create
  a simpler project
- Use Add New Assets button to add the Bluebubble.svg file to
  the project and QRC
- Use Connections View Properties tab to add custom properties
- Use Properties view and Binding Editor to specify values for
  the custom properties
- Add screenshots

Fixes: QTCREATORBUG-24478
Change-Id: Ic165684141b06dc1870054c8faa2f27f33162c20
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>
This commit is contained in:
Leena Miettinen
2020-08-13 18:15:37 +02:00
parent cf9cdd2a36
commit d425710587
17 changed files with 133 additions and 540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
doc/qtcreator/examples/accelbubble/Bubble.qml
View File

@@ -1,60 +1,12 @@
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator
**
** $QT_BEGIN_LICENSE:BSD$
** 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.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick 2.14
import QtQuick.Window 2.14
Image {
id: bubble
source: "Bluebubble.svg"
smooth: true
property real centerX
property real centerY
property real bubbleCenter
property real centerY
fillMode: Image.PreserveAspectFit
}

74
doc/qtcreator/examples/accelbubble/Page1Form.ui.qml
View File

@@ -1,74 +0,0 @@
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator
**
** $QT_BEGIN_LICENSE:BSD$
** 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.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.9
import QtQuick.Controls 2.2
Page {
width: 600
height: 400
property alias bubble: bubble
property alias mainWindow: mainWindow
header: Label {
text: qsTr("Page 1")
font.pixelSize: Qt.application.font.pixelSize * 2
padding: 10
}
Rectangle {
id: mainWindow
color: "#ffffff"
anchors.fill: parent
Bubble {
id: bubble
}
}
}

67
doc/qtcreator/examples/accelbubble/Page2Form.ui.qml
View File

@@ -1,67 +0,0 @@
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator
**
** $QT_BEGIN_LICENSE:BSD$
** 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.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.9
import QtQuick.Controls 2.2
Page {
width: 600
height: 400
header: Label {
text: qsTr("Page 2")
font.pixelSize: Qt.application.font.pixelSize * 2
padding: 10
}
Label {
text: qsTr("You are on Page 2.")
anchors.centerIn: parent
}
}

20
doc/qtcreator/examples/accelbubble/accelbubble.pro
View File

@@ -2,18 +2,12 @@ QT += quick sensors svg xml
CONFIG += c++11
# The following define makes your compiler emit warnings if you use
# any feature of Qt which as been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS
# You can also make your code fail to compile if you use deprecated APIs.
# You can make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0
SOURCES += main.cpp
SOURCES += \
main.cpp
RESOURCES += qml.qrc
@@ -28,10 +22,4 @@ qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
ios {
QTPLUGIN += qsvg qsvgicon qtsensors_ios
QMAKE_INFO_PLIST = Info.plist
}
DISTFILES += \
Bluebubble.svg
ANDROID_ABIS = armeabi-v7a

60
doc/qtcreator/examples/accelbubble/main.cpp
View File

@@ -1,53 +1,3 @@
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator
**
** $QT_BEGIN_LICENSE:BSD$
** 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.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
#include <QGuiApplication>
#include <QQmlApplicationEngine>
@@ -58,9 +8,13 @@ int main(int argc, char *argv[])
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}

143
doc/qtcreator/examples/accelbubble/main.qml
View File

@@ -1,105 +1,37 @@
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator
**
** $QT_BEGIN_LICENSE:BSD$
** 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.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.14
import QtQuick.Window 2.14
import QtSensors 5.12
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtSensors 5.9
ApplicationWindow {
Window {
id: window
visible: true
width: 640
height: 480
title: qsTr("Accelerate Bubble")
SwipeView {
id: swipeView
property alias mainWindow: mainWindow
property alias bubble: bubble
Rectangle {
id: mainWindow
color: "#ffffff"
anchors.fill: parent
currentIndex: tabBar.currentIndex
Page1Form {
bubble {
id: bubble
centerX: mainWindow.width / 2
centerY: mainWindow.height / 2
bubbleCenter: bubble.width / 2
x: bubble.centerX - bubble.bubbleCenter
y: bubble.centerY - bubble.bubbleCenter
Bubble {
id: bubble
x: bubble.centerX - bubbleCenter
y: bubble.centerY - bubbleCenter
bubbleCenter: bubble.width /2
centerX: mainWindow.width /2
centerY: mainWindow.height /2
Behavior on y {
SmoothedAnimation {
easing.type: Easing.Linear
duration: 100
}
}
Behavior on x {
SmoothedAnimation {
easing.type: Easing.Linear
duration: 100
}
Behavior on y {
SmoothedAnimation {
easing.type: Easing.Linear
duration: 100
}
}
Behavior on x {
SmoothedAnimation {
easing.type: Easing.Linear
duration: 100
}
}
}
Page2Form {
}
}
footer: TabBar {
id: tabBar
currentIndex: swipeView.currentIndex
TabButton {
text: qsTr("Page 1")
}
TabButton {
text: qsTr("Page 2")
}
}
@@ -107,6 +39,7 @@ ApplicationWindow {
id: accel
dataRate: 100
active: true
readonly property double radians_to_degrees: 180 / Math.PI
onReadingChanged: {
var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
@@ -118,24 +51,24 @@ ApplicationWindow {
if (newX < 0)
newX = 0
if (newX > page1.mainWindow.width - bubble.width)
newX = page1.mainWindow.width - bubble.width
if (newX > mainWindow.width - bubble.width)
newX = mainWindow.width - bubble.width
if (newY < 18)
newY = 18
if (newY > page1.mainWindow.height - bubble.height)
newY = page1.mainWindow.height - bubble.height
if (newY > mainWindow.height - bubble.height)
newY = mainWindow.height - bubble.height
bubble.x = newX
bubble.y = newY
bubble.x = newX
bubble.y = newY
}
}
function calcPitch(x, y, z) {
return -(Math.atan(y / Math.sqrt(x * x + z * z)) * 57.2957795);
function calcPitch(x,y,z) {
return -Math.atan2(y, Math.hypot(x, z)) * accel.radians_to_degrees;
}
function calcRoll(x, y, z) {
return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795);
function calcRoll(x,y,z) {
return -Math.atan2(x, Math.hypot(y, z)) * accel.radians_to_degrees;
}
}

7
doc/qtcreator/examples/accelbubble/qml.qrc
View File

@@ -1,10 +1,7 @@
<RCC>
<qresource prefix="/">
<file>Page1Form.ui.qml</file>
<file>Page2Form.ui.qml</file>
<file>qtquickcontrols2.conf</file>
<file>Bubble.qml</file>
<file>Bluebubble.svg</file>
<file>main.qml</file>
<file>Bluebubble.svg</file>
<file>Bubble.qml</file>
</qresource>
</RCC>

6
doc/qtcreator/examples/accelbubble/qtquickcontrols2.conf
View File

@@ -1,6 +0,0 @@
; This file can be edited to change the style of the application
; Read "Qt Quick Controls 2 Configuration File" for details:
; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html
[Controls]
Style=Default

BIN
doc/qtcreator/images/creator_android_tutorial_ex_app.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
doc/qtcreator/images/qtcreator-move-component-into-separate-file.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
doc/qtcreator/images/qtquick-mobile-app-tutorial-binding-editor.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
doc/qtcreator/images/qtquick-mobile-app-tutorial-binding-editor1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
doc/qtcreator/images/qtquick-mobile-app-tutorial-custom-properties.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
doc/qtcreator/images/qtquick-mobile-app-tutorial-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
doc/qtcreator/images/qtquick-mobile-app-tutorial-main-view.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

149
doc/qtcreator/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc
View File

@@ -52,12 +52,8 @@
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
To develop for Android devices, you must install \l{Qt for Android}
and set up the development environment, as instructed in
\l{Connecting Android Devices}.
To develop for iOS devices, you must install Xcode and use it to configure
@@ -65,33 +61,32 @@
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
\include qtquick-tutorial-create-empty-project.qdocinc qtquick empty 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 \e {Bluebubble.svg} in your project,
copy it to the project directory (same subdirectory as the QML file).
The image appears in \uicontrol Assets. You can also use any other
We use \e {Bluebubble.svg} in this tutorial, but you can 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 Open the \e main.qml 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.
\uicontrol Rectangle and drag and drop it to \e Window
in \uicontrol Navigator.
\li Select the rectangle in the navigator to edit its properties:
\li Select the rectangle in \uicontrol Navigator to edit its properties:
\image qtquick-mobile-app-tutorial-main-view.png "Rectangle in different views"
\list a
@@ -105,14 +100,19 @@
\endlist
\li In \uicontrol Library > \uicontrol Assets, select Bluebubble.svg
and drag and drop it to \e mainWindow in the navigator.
\li Select \uicontrol Library > \uicontrol Assets >
\uicontrol {Add New Assets} to locate Bluebubble.svg
(or your own image) and add it to the project folder.
\li Drag and drop the image from \uicontrol Assets to
\e mainWindow in \uicontrol Navigator.
\li In the \uicontrol Properties view, \uicontrol Id field, enter
\e bubble to be able to reference the image from other places.
\image qtquick-mobile-app-tutorial-image.png "Image file in different views"
\li Select the \inlineimage export_unchecked.png
(\uicontrol Export) button in the navigator to export the
(\uicontrol Export) button in \uicontrol Navigator to export
\e mainWindow and \e bubble as properties.
\endlist
@@ -130,62 +130,80 @@
\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 Deselect the \uicontrol x and \uicontrol y check boxes,
because we want to use the accelerometer to determine
the location of the bubble on the screen.
\li Select \uicontrol OK to create \e Bubble.qml.
\endlist
\QC creates a reference to the Bubble type in \e Page1Form.ui.qml.
\QC creates a reference to the Bubble type in \e main.qml.
To check your code, you can compare your \e Page1Form.ui.qml and
To check your code, you can compare your \e main.qml and
\e {Bubble.qml} with the corresponding example files.
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.
The UI is now ready and you can add the necessary properties for
making the bubble move.
\section1 Moving the Bubble
In the \uicontrol {Text Editor}, edit \e Bubble.qml to add properties that we
will use to position the image:
We add custom properties to position the image in respect to the width
and height of the main window.
\quotefromfile accelbubble/Bubble.qml
\skipto Image
\printuntil }
\list 1
\li Open \e Bubble.qml in Design mode.
\li In \uicontrol {Connections View}, \uicontrol Properties tab,
select click the \inlineimage plus.png
button to add a custom property for the Bubble type.
\image qtquick-mobile-app-tutorial-custom-properties.png "Connection View Properties tab"
\li Double-click the value in the \uicontrol Property column, and enter
\e centerY as the name of the property.
\li Double-click the value in the \uicontrol {Property Type} column,
and select \e real as the type of the property. You will specify
the property value later in \uicontrol Properties.
\li Add two more properties of the same type with the names \e centerY
and \e bubbleCenter.
\li Open \e main.qml in Design mode.
\li Select \e bubble in \uicontrol Navigator to specify values for the
custom properties in \uicontrol Properties.
\li In the \uicontrol X field, select \inlineimage icons/action-icon.png
, and then select \uicontrol {Set Binding} to open
\uicontrol {Binding Editor}.
\image qtquick-mobile-app-tutorial-binding-editor1.png "Setting binding for X in Binding Editor"
\li Enter the following value to center the bubble horizontally in the
main window when the application starts:
\c{bubble.centerX - bubbleCenter}.
\li Select \uicontrol OK to close the binding editor and save the
binding.
\li In the \uicontrol X field, set the following binding to center the
bubble vertically: \c{bubble.centerY - bubbleCenter}.
\li In the \uicontrol centerY field, enter the following value to bind
the y coordinate of the bubble center to half the height of the main
window: \c {mainWindow.height /2}.
\image qtquick-mobile-app-tutorial-binding-editor.png "Setting binding for centerX"
\li In the \uicontrol centerX field, bind the x coordinate of
the bubble center to half the width of the main window:
\c {mainWindow.width /2}.
\li In the \uicontrol bubbleCenter field, bind the center of
the bubble to half of its width: \c {bubble.width /2}.
\endlist
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:
We now want to add code to move the bubble based on Accelerometer sensor
values. This is not supported by \uicontrol {Form Editor}, so we will do
it in \uicontrol {Text Editor}:
\list 1
\li Add the following import statement to \e main.qml:
\code
import QtSensors 5.9
\endcode
\quotefromfile accelbubble/main.qml
\skipto QtSensors
\printline QtSensors
\li Add the \l{Accelerometer} type with the necessary properties:
\quotefromfile accelbubble/main.qml
\skipto Accelerometer
\printuntil true
\printuntil radians_to_degrees
\skipto }
\printuntil }
@@ -195,7 +213,7 @@
\quotefromfile accelbubble/main.qml
\skipto function
\printuntil Math.atan(x
\printuntil Math.atan2(x
\printuntil }
\li Add the following JavaScript code for \c onReadingChanged signal of
@@ -206,10 +224,11 @@
\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
We want to ensure that the position of the bubble is always
within the bounds of the screen. If the Accelerometer returns
\e {not a number} (NaN), the value is ignored and the bubble
position is not updated.
\li Add \l SmoothedAnimation behavior on the \c x and \c y properties of
the bubble to make its movement look smoother.
\quotefromfile accelbubble/main.qml
@@ -256,20 +275,6 @@
After adding the dependencies, select \uicontrol Build > \uicontrol {Run qmake} to apply
the changes to the Makefile of the project.
\section1 Adding Assets
You need to add the Bluebubble.svg image file to the application assets
for deployment to mobile devices:
\list 1
\li In the \uicontrol Projects view, double-click the qml.qrc file to open it
in the assets 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:

89
doc/qtcreator/src/qtquick/creator-only/creator-tutorial-create-qq-project.qdocinc
View File

@@ -1,89 +0,0 @@
/****************************************************************************
**
** 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.
**
****************************************************************************/
/*!
//! [qt quick application]
\section1 Creating the Project
\list 1
\li Select \uicontrol File > \uicontrol {New File or Project} >
\uicontrol {Application (Qt Quick)} >
\uicontrol {Qt Quick Application - Swipe}.
\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.
\li Select \uicontrol Next (or \uicontrol Continue on \macos) to open
the \uicontrol {Define Build System} dialog.
\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 \uicontrol Next to use the default settings and to open
the \uicontrol {Translation File} dialog.
\li Select \uicontrol Next to use the default settings and 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. To build applications for
mobile devices, select kits for Android ARM and iPhone OS.
\note Kits are listed if they have been specified in \uicontrol
Tools > \uicontrol Options > \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}
(or \uicontrol Done on \macos) to create the project.
\endlist
\QC generates two UI files, \e Page1Form.ui.qml and \e Page2Form.ui.qml,
and a QML file, \e main.qml. You can modify \e Page1Form.ui.qml in the
\uicontrol {Form Editor} to create the application main view and \e main.qml
in the \uicontrol {Text Editor} to add the application logic. For the
purposes of this example, you can ignore \e Page2Form.ui.qml.
For more information about the settings that you skipped, see
\l{Creating Qt Quick Applications}.
//! [qt quick application]
*/