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

Doc: Update accelbubble example to use Qt Quick Controls 2

Browse Source 
Change-Id: I946e9cb31517f602ce07fe1967a87bfdf9bd79b0
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>
This commit is contained in:
Leena Miettinen
2016-12-07 14:58:32 +01:00
parent 48adeb1a82
commit 6175b2f404
10 changed files with 159 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
doc/examples/accelbubble/Bubble.qml
View File

@@ -3,7 +3,7 @@
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
** This file is part of Qt Creator
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
@@ -48,9 +48,9 @@
**
****************************************************************************/
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
Image {
source: "Bluebubble.svg"

55
doc/examples/accelbubble/Page1.qml Normal file
View File

@@ -0,0 +1,55 @@
/****************************************************************************
**
** Copyright (C) 2016 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.7
Page1Form {
}

27
doc/examples/accelbubble/MainForm.ui.qml → doc/examples/accelbubble/Page1Form.ui.qml
View File

@@ -3,7 +3,7 @@
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
** This file is part of Qt Creator
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
@@ -48,31 +48,20 @@
**
****************************************************************************/
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
Item {
id: id
width: 640
height: 480
property alias bubble: bubble
property alias mainWindow: mainWindow
property alias bubble: bubble
Rectangle {
id: mainWindow
color: "#ffffff"
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.leftMargin: 0
anchors.topMargin: 0
anchors.fill: parent
}
Bubble {
id: bubble
x: 10
y: 18
Bubble {
id: bubble
}
}
}

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

@@ -1,5 +1,3 @@
TEMPLATE = app
QT += qml quick sensors svg xml
CONFIG += c++11
@@ -11,5 +9,21 @@ RESOURCES += qml.qrc
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =
# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =
# 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.
# 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
# Default rules for deployment.
include(deployment.pri)
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

5
doc/examples/accelbubble/main.cpp
View File

@@ -3,7 +3,7 @@
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
** This file is part of Qt Creator
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
@@ -53,10 +53,11 @@
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
return app.exec();
}

67
doc/examples/accelbubble/main.qml
View File

@@ -3,7 +3,7 @@
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
** This file is part of Qt Creator
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
@@ -48,19 +48,18 @@
**
****************************************************************************/
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
import QtSensors 5.5
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtSensors 5.7
ApplicationWindow {
id: mainWindow
visible: true
width: 640
height: 480
title: qsTr("Accelerate Bubble")
MainForm {
Page1 {
anchors.fill: parent
bubble {
id: bubble
@@ -83,41 +82,41 @@ ApplicationWindow {
}
}
}
}
}
Accelerometer {
id: accel
dataRate: 100
active: true
Accelerometer {
id: accel
dataRate: 100
active: true
onReadingChanged: {
var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
onReadingChanged: {
var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
if (isNaN(newX) || isNaN(newY))
return;
if (isNaN(newX) || isNaN(newY))
return;
if (newX < 0)
newX = 0
if (newX < 0)
newX = 0
if (newX > mainWindow.width - bubble.width)
newX = mainWindow.width - bubble.width
if (newX > mainWindow.width - bubble.width)
newX = mainWindow.width - bubble.width
if (newY < 18)
newY = 18
if (newY < 18)
newY = 18
if (newY > mainWindow.height - bubble.height)
newY = 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 calcRoll(x, y, z) {
return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795);
}
function calcPitch(x, y, z) {
return -(Math.atan(y / Math.sqrt(x * x + z * z)) * 57.2957795);
}
function calcRoll(x, y, z) {
return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795);
}
}

4
doc/examples/accelbubble/qml.qrc
View File

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

15
doc/examples/accelbubble/qtquickcontrols2.conf Normal file
View File

@@ -0,0 +1,15 @@
; This file can be edited to change the style of the application
; See Styling Qt Quick Controls 2 in the documentation for details:
; http://doc.qt.io/qt-5/qtquickcontrols2-styles.html
[Controls]
Style=Default
[Universal]
Theme=Light
;Accent=Steel
[Material]
Theme=Light
;Accent=BlueGrey
;Primary=BlueGray

2
doc/src/overview/creator-tutorials.qdoc
View File

@@ -55,7 +55,7 @@
\li \l{Creating a Mobile Application}
Learn how to create a Qt Quick application using Qt Quick Controls
Learn how to create a Qt Quick application using Qt Quick Controls 2
for Android and iOS devices.
\li \l{Using Qt Quick UI Forms}

35
doc/src/qtquick/creator-mobile-app-tutorial.qdoc
View File

@@ -38,7 +38,7 @@
\title Creating a Mobile Application
This tutorial describes developing Qt Quick applications for Android and iOS
devices using Qt Quick Controls.
devices using Qt Quick Controls 2.
We use \QC to implement a Qt Quick application
that accelerates an SVG (Scalable Vector Graphics) image based on the
changing accelerometer values.
@@ -80,7 +80,7 @@
\list 1
\li In the \uicontrol Projects view, double-click the MainForm.ui.qml
\li In the \uicontrol Projects view, double-click the Page1Form.ui.qml
file to open it in \QMLD.
\li In the \uicontrol Navigator, select \uicontrol RowLayout and press
@@ -121,23 +121,27 @@
\list 1
\li Select \uicontrol Edit to open MainForm.ui.qml in the code editor.
\li Select \uicontrol Edit to open Page1Form.ui.qml in the code editor.
\li Right-click \uicontrol Image and select \uicontrol Refactoring >
\uicontrol {Move Component into Separate File}.
\li In the \uicontrol {Component name} field, enter \e Bubble and
select \uicontrol OK to create \e Bubble.qml.
\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 Bubble.qml in MainForm.ui.qml.
\QC creates a reference to the Bubble type in Page1Form.ui.qml.
To check your code, you can compare MainForm.ui.qml with the
\l{accelbubble/MainForm.ui.qml}{MainForm.ui.qml} example file and Bubble.qml
with the \l{accelbubble/Bubble.qml}{Bubble.qml} example file.
To check your code, you can compare Page1Form.ui.qml with the
\l{accelbubble/Page1Form.ui.qml}{Page1Form.ui.qml} example file and
Bubble.qml with the \l{accelbubble/Bubble.qml}{Bubble.qml} example file.
The UI is now ready and you can switch to editing the main.qml and
The UI is now ready and you can switch to editing the Page1.qml and
Bubble.qml files in the \uicontrol Edit mode, as described in the
following section.
@@ -146,8 +150,8 @@
The new project wizard adds boilerplate code to the main.qml file to create
menu items and push buttons. Modify the boilerplate code by removing
obsolete code and by adding new code. You removed the push buttons from the
UI Form, so you also need to remove the corresponding code from main.qml (or
the application cannot be built).
UI Form, so you also need to remove the corresponding code from Page1.qml
(or the application cannot be built).
In the code editor, edit Bubble.qml to add properties that we will use to
position the image:
@@ -156,14 +160,15 @@
\skipto Image
\printuntil }
In the code editor, edit the main.qml to specify the application title, as
In the code editor, edit main.qml to specify the application title, as
illustrated by the following code snippet:
\quotefromfile accelbubble/main.qml
\skipto ApplicationWindow
\printuntil title
Use the bubble properties to position the image:
Remove the rest of the boilerplate code in main.qml, except the Page1 type.
Specify bubble properties to position the image:
\printuntil bubbleCenter
@@ -179,7 +184,7 @@
\li Add the following import statement to main.qml:
\code
import QtSensors 5.5
import QtSensors 5.7
\endcode
\li Add the \l{Accelerometer} type with the necessary properties: