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 @@
/**************************************************************************** import QtQuick 2.14
** import QtQuick.Window 2.14
** 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
Image { Image {
id: bubble
source: "Bluebubble.svg" source: "Bluebubble.svg"
smooth: true smooth: true
property real centerX property real centerX
property real centerY
property real bubbleCenter 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 CONFIG += c++11
# The following define makes your compiler emit warnings if you use # You can make your code fail to compile if it uses deprecated APIs.
# 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.
# In order to do so, uncomment the following line. # 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 #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 RESOURCES += qml.qrc
@@ -28,10 +22,4 @@ qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target !isEmpty(target.path): INSTALLS += target
ios { ANDROID_ABIS = armeabi-v7a
QTPLUGIN += qsvg qsvgicon qtsensors_ios
QMAKE_INFO_PLIST = Info.plist
}
DISTFILES += \
Bluebubble.svg

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 <QGuiApplication>
#include <QQmlApplicationEngine> #include <QQmlApplicationEngine>
@@ -58,9 +8,13 @@ int main(int argc, char *argv[])
QGuiApplication app(argc, argv); QGuiApplication app(argc, argv);
QQmlApplicationEngine engine; QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); const QUrl url(QStringLiteral("qrc:/main.qml"));
if (engine.rootObjects().isEmpty()) QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
return -1; &app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec(); return app.exec();
} }

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

@@ -1,76 +1,24 @@
/**************************************************************************** import QtQuick 2.14
** import QtQuick.Window 2.14
** Copyright (C) 2017 The Qt Company Ltd. import QtSensors 5.12
** 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 Window {
import QtQuick.Controls 2.2 id: window
import QtSensors 5.9
ApplicationWindow {
visible: true visible: true
width: 640 property alias mainWindow: mainWindow
height: 480 property alias bubble: bubble
title: qsTr("Accelerate Bubble") Rectangle {
id: mainWindow
SwipeView { color: "#ffffff"
id: swipeView
anchors.fill: parent anchors.fill: parent
currentIndex: tabBar.currentIndex
Page1Form { Bubble {
bubble {
id: bubble id: bubble
centerX: mainWindow.width / 2 x: bubble.centerX - bubbleCenter
centerY: mainWindow.height / 2 y: bubble.centerY - bubbleCenter
bubbleCenter: bubble.width / 2 bubbleCenter: bubble.width /2
x: bubble.centerX - bubble.bubbleCenter centerX: mainWindow.width /2
y: bubble.centerY - bubble.bubbleCenter centerY: mainWindow.height /2
Behavior on y { Behavior on y {
SmoothedAnimation { SmoothedAnimation {
@@ -87,26 +35,11 @@ ApplicationWindow {
} }
} }
Page2Form {
}
}
footer: TabBar {
id: tabBar
currentIndex: swipeView.currentIndex
TabButton {
text: qsTr("Page 1")
}
TabButton {
text: qsTr("Page 2")
}
}
Accelerometer { Accelerometer {
id: accel id: accel
dataRate: 100 dataRate: 100
active: true active: true
readonly property double radians_to_degrees: 180 / Math.PI
onReadingChanged: { onReadingChanged: {
var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1) var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
@@ -118,24 +51,24 @@ ApplicationWindow {
if (newX < 0) if (newX < 0)
newX = 0 newX = 0
if (newX > page1.mainWindow.width - bubble.width) if (newX > mainWindow.width - bubble.width)
newX = page1.mainWindow.width - bubble.width newX = mainWindow.width - bubble.width
if (newY < 18) if (newY < 18)
newY = 18 newY = 18
if (newY > page1.mainWindow.height - bubble.height) if (newY > mainWindow.height - bubble.height)
newY = page1.mainWindow.height - bubble.height newY = mainWindow.height - bubble.height
bubble.x = newX bubble.x = newX
bubble.y = newY bubble.y = newY
} }
} }
function calcPitch(x, y, z) { function calcPitch(x,y,z) {
return -(Math.atan(y / Math.sqrt(x * x + z * z)) * 57.2957795); return -Math.atan2(y, Math.hypot(x, z)) * accel.radians_to_degrees;
} }
function calcRoll(x, y, z) { function calcRoll(x,y,z) {
return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795); 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> <RCC>
<qresource prefix="/"> <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>main.qml</file>
<file>Bluebubble.svg</file>
<file>Bubble.qml</file>
</qresource> </qresource>
</RCC> </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 set up the development environment for the device platform and configure a
connection between \QC and the mobile device. connection between \QC and the mobile device.
To develop for Android devices, you must download and install the latest To develop for Android devices, you must install \l{Qt for Android}
Android NDK and SDK Tools, and then update or install the tools and packages and set up the development environment, as instructed in
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}. \l{Connecting Android Devices}.
To develop for iOS devices, you must install Xcode and use it to configure 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 Program certificate that you receive from Apple. For more information, see
\l{Connecting iOS Devices}. \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 \section1 Creating the Accelbubble Main View
The main view of the application displays an SVG bubble image that moves The main view of the application displays an SVG bubble image that moves
around the screen when you tilt the device. around the screen when you tilt the device.
To use \e {Bluebubble.svg} in your project, We use \e {Bluebubble.svg} in this tutorial, but you can use any other
copy it to the project directory (same subdirectory as the QML file).
The image appears in \uicontrol Assets. You can also use any other
image or a QML type, instead. image or a QML type, instead.
To create the UI in the Design mode: To create the UI in the Design mode:
\list 1 \list 1
\li In the \uicontrol Projects view, double-click the \e Page1Form.ui.qml \li Open the \e main.qml in the Design mode.
file to open it in the Design mode.
\li In the \uicontrol Navigator, select \uicontrol Label and press \li In the \uicontrol Navigator, select \uicontrol Label and press
\key Delete to delete it. \key Delete to delete it.
\li In \uicontrol Library > \uicontrol {QML Types}, select \li In \uicontrol Library > \uicontrol {QML Types}, select
\uicontrol Rectangle and drag and drop it to the \uicontrol Page in \uicontrol Rectangle and drag and drop it to \e Window
the navigator. 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 \list a
@@ -105,14 +100,19 @@
\endlist \endlist
\li In \uicontrol Library > \uicontrol Assets, select Bluebubble.svg \li Select \uicontrol Library > \uicontrol Assets >
and drag and drop it to \e mainWindow in the navigator. \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 \li In the \uicontrol Properties view, \uicontrol Id field, enter
\e bubble to be able to reference the image from other places. \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 \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. \e mainWindow and \e bubble as properties.
\endlist \endlist
@@ -130,62 +130,80 @@
\li In the \uicontrol {Component name} field, enter \e Bubble. \li In the \uicontrol {Component name} field, enter \e Bubble.
\li Deselect the \uicontrol x, \uicontrol y, and \li Deselect the \uicontrol x and \uicontrol y check boxes,
\uicontrol {ui.qml file} 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. \li Select \uicontrol OK to create \e Bubble.qml.
\endlist \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. \e {Bubble.qml} with the corresponding example files.
The UI is now ready and you can switch to editing the \e Bubble.qml and The UI is now ready and you can add the necessary properties for
\e main.qml files in the \uicontrol {Text Editor}, as described in the making the bubble move.
following section.
\section1 Moving the Bubble \section1 Moving the Bubble
In the \uicontrol {Text Editor}, edit \e Bubble.qml to add properties that we We add custom properties to position the image in respect to the width
will use to position the image: and height of the main window.
\quotefromfile accelbubble/Bubble.qml \list 1
\skipto Image \li Open \e Bubble.qml in Design mode.
\printuntil } \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 We now want to add code to move the bubble based on Accelerometer sensor
title, as illustrated by the following code snippet: values. This is not supported by \uicontrol {Form Editor}, so we will do
it in \uicontrol {Text Editor}:
\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 \list 1
\li Add the following import statement to \e main.qml: \li Add the following import statement to \e main.qml:
\code \quotefromfile accelbubble/main.qml
import QtSensors 5.9 \skipto QtSensors
\endcode \printline QtSensors
\li Add the \l{Accelerometer} type with the necessary properties: \li Add the \l{Accelerometer} type with the necessary properties:
\quotefromfile accelbubble/main.qml
\skipto Accelerometer \skipto Accelerometer
\printuntil true \printuntil radians_to_degrees
\skipto } \skipto }
\printuntil } \printuntil }
@@ -195,7 +213,7 @@
\quotefromfile accelbubble/main.qml \quotefromfile accelbubble/main.qml
\skipto function \skipto function
\printuntil Math.atan(x \printuntil Math.atan2(x
\printuntil } \printuntil }
\li Add the following JavaScript code for \c onReadingChanged signal of \li Add the following JavaScript code for \c onReadingChanged signal of
@@ -206,10 +224,11 @@
\skipto onReadingChanged \skipto onReadingChanged
\printuntil } \printuntil }
We want to ensure that the position of the bubble is always within We want to ensure that the position of the bubble is always
the bounds of the screen. If the Accelerometer returns not a number within the bounds of the screen. If the Accelerometer returns
(NaN), the value is ignored and the bubble position is not updated. \e {not a number} (NaN), the value is ignored and the bubble
\li Add SmoothedAnimation behavior on the \c x and \c y properties of 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. the bubble to make its movement look smoother.
\quotefromfile accelbubble/main.qml \quotefromfile accelbubble/main.qml
@@ -256,20 +275,6 @@
After adding the dependencies, select \uicontrol Build > \uicontrol {Run qmake} to apply After adding the dependencies, select \uicontrol Build > \uicontrol {Run qmake} to apply
the changes to the Makefile of the project. 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 \section1 Running the Application
The application is complete and ready to be deployed to a device: 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]
*/