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

Doc: update the Transitions example to use UI forms

Browse Source 
Move the instructions for creating the project into an
include file that can be used for all Qt Quick Application
tutorials.

Change-Id: I02385f68f23ef2d3ee98b754344781ae1819203c
Reviewed-by: Tim Jenssen <tim.jenssen@theqtcompany.com>
This commit is contained in:
Leena Miettinen
2015-11-02 13:21:31 +01:00
parent e2b8a1cb11
commit 95c7d6fed5
16 changed files with 376 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
doc/examples/transitions/MainForm.ui.qml Normal file
View File

@@ -0,0 +1,117 @@
/****************************************************************************
**
** Copyright (C) 2015 The Qt Company Ltd.
** Contact: http://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** 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.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
Item {
width: 640
height: 480
property alias bottomLeftRect: bottomLeftRect
property alias middleRightRect: middleRightRect
property alias topLeftRect: topLeftRect
property alias icon: icon
property alias mouseArea1: mouseArea1
property alias mouseArea2: mouseArea2
property alias mouseArea3: mouseArea3
Rectangle {
id: topLeftRect
width: 46
height: 55
color: "#00000000"
radius: 6
anchors.left: parent.left
anchors.leftMargin: 10
anchors.top: parent.top
anchors.topMargin: 20
border.color: "#808080"
MouseArea {
id: mouseArea1
anchors.fill: parent
}
}
Rectangle {
id: middleRightRect
x: 6
y: 6
width: 46
height: 55
color: "#00000000"
radius: 6
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 10
MouseArea {
id: mouseArea2
anchors.fill: parent
}
border.color: "#808080"
}
Rectangle {
id: bottomLeftRect
x: 0
y: 4
width: 46
height: 55
color: "#00000000"
radius: 6
anchors.bottom: parent.bottom
anchors.bottomMargin: 20
MouseArea {
id: mouseArea3
anchors.fill: parent
}
anchors.left: parent.left
border.color: "#808080"
anchors.leftMargin: 10
}
Image {
id: icon
x: 10
y: 20
source: "qt-logo.png"
}
}

52
doc/examples/transitions/main.cpp Normal file
View File

@@ -0,0 +1,52 @@
/****************************************************************************
**
** Copyright (C) 2015 The Qt Company Ltd.
** Contact: http://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** 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>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
return app.exec();
}

138
doc/examples/transitions/main.qml
View File

@@ -1,91 +1,63 @@
/****************************************************************************
**
** Copyright (C) 2015 The Qt Company Ltd.
** Contact: http://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** 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.5
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
ApplicationWindow {
id: page
visible: true
width: 360
height: 360
color: "#343434"
title: qsTr("Transitions")
width: 330
height: 330
menuBar: MenuBar {
Menu {
title: qsTr("File")
MenuItem {
text: qsTr("&Open")
onTriggered: console.log("Open action triggered");
}
MenuItem {
text: qsTr("Exit")
onTriggered: Qt.quit();
}
}
}
Image {
id: icon
x: 10
y: 20
source: "states.svg"
}
Rectangle {
id: topLeftRect
x: 10
y: 20
width: 44
height: 44
color: "#00000000"
radius: 6
opacity: 1
anchors.left: parent.left
anchors.leftMargin: 10
anchors.top: parent.top
anchors.topMargin: 20
border.color: "#808080"
MouseArea {
id: mouseArea1
MainForm {
anchors.fill: parent
id: page
mouseArea1 {
onClicked: stateGroup.state = ' '
}
}
Rectangle {
id: middleRightRect
width: 44
height: 44
color: "#00000000"
radius: 6
anchors.right: parent.right
anchors.rightMargin: 10
anchors.verticalCenter: parent.verticalCenter
border.color: "#808080"
MouseArea {
id: mouseArea2
anchors.fill: parent
mouseArea2 {
onClicked: stateGroup.state = 'State1'
}
}
Rectangle {
id: bottomLeftRect
width: 44
height: 44
color: "#00000000"
radius: 6
border.width: 1
anchors.leftMargin: 10
anchors.bottom: parent.bottom
anchors.bottomMargin: 20
anchors.left: parent.left
border.color: "#808080"
MouseArea {
id: mouseArea3
anchors.fill: parent
mouseArea3 {
onClicked: stateGroup.state = 'State2'
}
}
@@ -97,18 +69,18 @@ ApplicationWindow {
name: "State1"
PropertyChanges {
target: icon
x: middleRightRect.x
y: middleRightRect.y
target: page.icon
x: page.middleRightRect.x
y: page.middleRightRect.y
}
},
State {
name: "State2"
PropertyChanges {
target: icon
x: bottomLeftRect.x
y: bottomLeftRect.y
target: page.icon
x: page.bottomLeftRect.x
y: page.bottomLeftRect.y
}
}
]
@@ -137,4 +109,4 @@ ApplicationWindow {
}
]
}
}
}

7
doc/examples/transitions/qml.qrc Normal file
View File

@@ -0,0 +1,7 @@
<RCC>
<qresource prefix="/">
<file>main.qml</file>
<file>MainForm.ui.qml</file>
<file>qt-logo.png</file>
</qresource>
</RCC>

BIN
doc/examples/transitions/qt-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

93
doc/examples/transitions/states.svg
View File

@@ -1,93 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
height="44px"
version="1.1"
viewBox="0 0 44 44"
width="44px"
x="0px"
y="0px"
id="svg2"
inkscape:version="0.47 r22583"
sodipodi:docname="qt.svg">
<metadata
id="metadata18">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs16">
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 22 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="44 : 22 : 1"
inkscape:persp3d-origin="22 : 14.666667 : 1"
id="perspective2836" />
</defs>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1020"
id="namedview14"
showgrid="false"
inkscape:zoom="21.454545"
inkscape:cx="49.412871"
inkscape:cy="21.894358"
inkscape:window-x="-4"
inkscape:window-y="-4"
inkscape:window-maximized="1"
inkscape:current-layer="g3" />
<g
transform="matrix(0.18308778,0,0,0.18308778,6.6100946,3.2385199)"
id="g3">
<path
d="M 43.09,0.3586 C 40.94,0.0036 38.84,-0.0824 36.81,0.0776 31.968136,0.39505671 27.122677,0.73638425 22.28,1.0696 9.62,2.0816 0,12.4996 0,26.8896 l 0,169.7 14.19,13.2 28.87,-209.42 0.03,-0.011 z"
style="fill:#006225"
id="path5"
sodipodi:nodetypes="cccccccc" />
<path
d="m 174.4,160 c 0,12.5 -7.75,24.07 -17.57,25.77 L 14.23,209.73 V 25.93 C 14.23,9.21 27.57,-2.27 43.12,0.3 l 131.3,21.52 v 138.2 z"
style="fill:#80c342"
id="path7" />
<path
d="m 154.9,80.96 -12.96,-0.598 0,0.278 6.945,0.32 6.016,0 z"
style="fill:#006225"
id="path11" />
<path
d="m 144.6,135.6 c 0.66,0.328 1.43,0.476 2.351,0.476 0.161,0 0.329,-0.004 0.497,-0.016 2.55,-0.148 5.32,-0.933 8.343,-2.308 h -6.015 c -1.821,0.832 -3.532,1.457 -5.176,1.848 z"
style="fill:#006225"
id="path13" />
<path
id="path17"
style="fill:#ffffff"
d="m 91.15,132.4 c 2.351,-6.051 3.511,-17.91 3.511,-35.62 0,-15.89 -1.148,-26.82 -3.484,-32.81 -2.336,-6.027 -5.832,-9.281 -10.52,-9.691 -0.359,-0.031 -0.714,-0.051 -1.058,-0.051 -4.34,0 -7.68,2.535 -10.01,7.625 -2.52,5.543 -3.793,17.04 -3.793,34.44 0,16.82 1.238,28.75 3.734,35.75 2.356,6.672 5.879,9.976 10.5,9.976 0.207,0 0.41,-0.008 0.621,-0.019 4.633,-0.293 8.121,-3.496 10.49,-9.602 m 17.98,3.75 c -4.117,9.707 -10.39,16.06 -18.99,19 0.867,4.449 2.176,7.441 3.922,9.019 1.351,1.211 3.433,1.821 6.222,1.821 0.805,0 1.668,-0.055 2.59,-0.157 v 13.12 l -5.961,0.782 c -1.758,0.23 -3.426,0.343 -5.004,0.343 -5.218,0 -9.445,-1.265 -12.62,-3.824 -4.207,-3.379 -7.308,-9.894 -9.297,-19.54 -9.136,-1.945 -16.26,-7.754 -21.19,-17.5 -5.004,-9.902 -7.551,-24.39 -7.551,-43.34 0,-20.43 3.484,-35.51 10.34,-45.07 5.789,-8.07 13.86,-12.04 24.02,-12.04 1.629,0 3.309,0.102 5.043,0.305 11.95,1.375 20.62,7.016 26.26,16.79 5.535,9.562 8.254,23.27 8.254,41.26 0,16.48 -2,29.45 -6.043,39.02 z M 130.4,45.91 l 11.52,1.238 0,20.21 12.96,0.914 0,12.68 -12.96,-0.598 0,46.33 c 0,4.032 0.445,6.625 1.34,7.789 0.8,1.067 2.046,1.594 3.71,1.594 0.161,0 0.329,-0.004 0.497,-0.016 2.55,-0.148 5.32,-0.933 8.343,-2.308 v 11.65 c -5.136,2.258 -10.18,3.598 -15.12,4.02 -0.718,0.055 -1.41,0.086 -2.078,0.086 -4.48,0 -7.906,-1.301 -10.25,-3.934 -2.73,-3.051 -4.09,-7.949 -4.09,-14.67 V 79.535 L 118.046,79.25 V 65.66 l 7.586,0.547 4.773,-20.3 z" />
<path
d="m 100.3,166 c 0.809,0 1.672,-0.055 2.59,-0.157 H 98.054 C 98.73,165.949 99.507,166 100.3,166 z"
style="fill:#006225"
id="path19" />
<path
id="path21"
style="fill:#006225"
d="m 84.85,63.98 c 2.336,5.997 3.484,16.92 3.484,32.81 0,17.7 -1.16,29.57 -3.512,35.62 -1.894,4.879 -4.527,7.902 -7.863,9.07 0.965,0.368 1.992,0.551 3.078,0.551 0.207,0 0.41,-0.008 0.621,-0.019 4.633,-0.293 8.121,-3.496 10.49,-9.602 2.351,-6.051 3.511,-17.91 3.511,-35.62 0,-15.89 -1.148,-26.82 -3.484,-32.81 -2.336,-6.027 -5.832,-9.281 -10.52,-9.691 -0.359,-0.031 -0.714,-0.051 -1.058,-0.051 -1.09,0 -2.117,0.16 -3.082,0.481 h -0.004 c 3.601,1.121 6.379,4.215 8.336,9.261 z m -2.344,114.3 c -0.113,-0.05 -0.227,-0.105 -0.336,-0.16 -0.012,-0.004 -0.023,-0.012 -0.035,-0.015 -0.102,-0.051 -0.207,-0.106 -0.309,-0.157 -0.019,-0.011 -0.039,-0.019 -0.058,-0.031 -0.09,-0.051 -0.184,-0.098 -0.278,-0.148 -0.027,-0.016 -0.054,-0.036 -0.086,-0.051 -0.082,-0.043 -0.164,-0.09 -0.242,-0.137 -0.039,-0.023 -0.078,-0.047 -0.113,-0.07 -0.07,-0.039 -0.145,-0.082 -0.215,-0.125 -0.047,-0.031 -0.094,-0.059 -0.14,-0.09 -0.059,-0.039 -0.118,-0.074 -0.176,-0.113 -0.059,-0.039 -0.114,-0.075 -0.168,-0.114 -0.051,-0.031 -0.102,-0.066 -0.149,-0.097 -0.066,-0.047 -0.132,-0.094 -0.195,-0.137 -0.039,-0.027 -0.078,-0.055 -0.113,-0.082 -0.078,-0.055 -0.153,-0.113 -0.231,-0.172 -0.023,-0.016 -0.05,-0.035 -0.078,-0.055 -0.098,-0.078 -0.199,-0.156 -0.297,-0.234 -4.207,-3.379 -7.308,-9.894 -9.297,-19.54 -9.136,-1.945 -16.26,-7.754 -21.19,-17.5 -5.004,-9.902 -7.551,-24.39 -7.551,-43.34 0,-20.43 3.484,-35.51 10.34,-45.07 5.789,-8.07 13.86,-12.04 24.02,-12.04 h -6.351 c -10.15,0.008 -18.22,3.977 -24,12.04 -6.855,9.563 -10.34,24.64 -10.34,45.07 0,18.95 2.547,33.44 7.551,43.34 4.934,9.75 12.05,15.56 21.19,17.5 1.989,9.641 5.09,16.16 9.297,19.54 3.176,2.559 7.403,3.824 12.62,3.824 0.098,0 0.199,0 0.297,-0.004 h 5.539 c -3.406,-0.05 -6.383,-0.66 -8.906,-1.828 L 82.498,178.28 z M 128.4,145.6 c -2.73,-3.051 -4.09,-7.949 -4.09,-14.67 V 79.57 l -6.226,-0.285 v -13.59 h -6.016 v 3.035 c 0.871,3.273 1.555,6.82 2.063,10.64 l 4.164,0.192 v 51.36 c 0,6.723 1.367,11.62 4.09,14.67 2.343,2.633 5.765,3.934 10.25,3.934 h 6.015 c -4.48,0 -7.906,-1.301 -10.25,-3.934 z m 2.043,-99.66 -6.016,0 -4.668,19.88 5.911,0.422 4.773,-20.3 z" />
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 6.4 KiB

15
doc/examples/transitions/transitions.pro Normal file
View File

@@ -0,0 +1,15 @@
TEMPLATE = app
QT += qml quick
CONFIG += c++11
SOURCES += main.cpp
RESOURCES += qml.qrc
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =
# Default rules for deployment.
include(deployment.pri)

BIN
doc/images/qmldesigner-tutorial-design-mode.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 31 KiB

BIN
doc/images/qmldesigner-tutorial-page.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.5 KiB

BIN
doc/images/qmldesigner-tutorial-project.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
doc/images/qmldesigner-tutorial-topleftrect-layout.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
doc/images/qmldesigner-tutorial-topleftrect.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 28 KiB

BIN
doc/images/qmldesigner-tutorial-user-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
doc/images/qmldesigner-tutorial.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

44
doc/src/qtquick/creator-tutorial-create-qq-project.qdocinc Normal file
View File

@@ -0,0 +1,44 @@
\section1 Creating the Project
\list 1
\li Select \uicontrol File > \uicontrol {New File or Project} >
\uicontrol Application > \uicontrol {Qt Quick Controls Application}
> \uicontrol Choose.
\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, and then select \uicontrol Next (or \uicontrol Continue on
OS X).
\li In the \uicontrol {Minimal required Qt version} field, select
\uicontrol {Qt 5.4}, or later.
\li Deselect the \uicontrol {Enable native styling} check box to keep
the application size small. Enabling native styling would create
a dependency to the Qt Widgets module.
\li Select \uicontrol Next.
\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, and
click \uicontrol{Next}.
\note Kits are listed if they have been specified in \uicontrol
Tools > \uicontrol Options > \uicontrol {Build & Run} >
\uicontrol Kits (on Windows and Linux) or in \uicontrol {Qt Creator}
> \uicontrol Preferences \uicontrol {Build & Run} > \uicontrol Kits
(on OS X).
\li Select \uicontrol Next.
\li Review the project settings, and click \uicontrol{Finish} (or
\uicontrol Done on OS X).
\endlist
\QC generates a UI file, \e MainForm.ui.qml, that you can modify in the
\uicontrol Design mode and a QML file, \e main.qml, that you can modify in
the \uicontrol Edit mode to add the application logic.

247
doc/src/qtquick/qtquick-app-tutorial.qdoc
View File

@@ -34,9 +34,8 @@
\l{Qt Quick}.
This tutorial describes how to use \QC to implement Qt Quick states and
transitions. We
create an application that displays a Qt logo that moves between three rectangles on the
page when you click them.
transitions. We create an application that displays a Qt logo that moves
between three rectangles on the page when you click them.
\image qmldesigner-tutorial.png "States and transitions example"
@@ -46,95 +45,30 @@
For tutorials that describe using Qt Quick Controls, see
\l{Qt Quick Text Editor Guide} and \l{Qt Quick Controls - UI Forms}.
\section1 Creating the Project
\list 1
\li Select \uicontrol{File > New File or Project > Application >
Qt Quick Controls Application > Choose}.
\li In the \uicontrol{Name} field, type \e {Transitions}.
\li In the \uicontrol {Create in} field, enter the path for the project files.
For example, \c {C:\Qt\examples}, and then click \uicontrol{Next} (on
Windows and Linux) or \uicontrol Continue (on OS X).
\li In the \uicontrol {Minimal required Qt version} field, select the Qt
version to develop with.
\note This page determines the set of files that the wizard
generates and their contents. The instructions in this tutorial
might not apply if you select the \uicontrol {With .ui.qml file}
check box.
\li Select \l{glossary-buildandrun-kit}{kits} for running and building your project,
and then click \uicontrol{Next}.
\note Kits are listed if they have been specified in \uicontrol Tools >
\uicontrol Options > \uicontrol {Build & Run} > \uicontrol Kits (on Windows and Linux)
or in \uicontrol {Qt Creator} > \uicontrol Preferences \uicontrol {Build & Run} >
\uicontrol Kits (on OS X).
\li Select \uicontrol Next in the following dialogs to use the default
settings.
\li Review the project settings, and click \uicontrol{Finish} (on Windows and
Linux) or \uicontrol Done (on OS X) to create the project.
\li Press \key {Ctrl+R} (or \key {Cmd+R}) to run the application.
\endlist
\QC generates a default QML file that you can modify to create the main view
of the application.
\image qmldesigner-tutorial-project.png "Transitions project in Edit mode"
\include creator-tutorial-create-qq-project.qdocinc
\section1 Creating the Main View
The main view of the application displays a Qt logo in the top left corner
of the screen and two empty rectangles.
To use the states.svg image in your application, you must copy it to the
project directory (same subdirectory as the QML file) from the examples
directory in the Qt installation directory. For example:
\c {C:\Qt\Examples\Qt-5.4\declarative\animation\states}. The image appears
in \uicontrol Resources. You can also use any other image or a QML
type, instead.
\list 1
\li In the \uicontrol Projects view, double-click the main.qml file
to open it in the code editor.
\li Click \uicontrol Design to open the file in \QMLD.
\image qmldesigner-tutorial-design-mode.png "Transitions project in Design Mode"
\li In the \uicontrol Navigator, select \uicontrol Label and press
\key Delete to delete it.
\li Select \uicontrol ApplicationWindow to edit its properties.
\image qmldesigner-tutorial-page.png "Page properties"
To use the \e qt-logo.png image in your application, you must copy it from
the Qt examples directory 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.
\list a
\li In the \uicontrol Id field, enter \e page, to be able to reference the
window from other places.
\li In the \uicontrol Projects view, double-click the MainForm.ui.qml
file to open it in \QMLD.
\li In the \uicontrol Title field, type \e Transitions.
\image qmldesigner-tutorial-design-mode.png "Transitions project in Design Mode"
\li In the \uicontrol Size field, set \uicontrol W and \uicontrol H
to \e 330.
\li In the \uicontrol Navigator, select \uicontrol RowLayout and press
\key Delete to delete it.
\li In the \uicontrol Color field, set the window background color
to \e #343434.
\endlist
\li In \uicontrol Library > \uicontrol Resources, select states.svg and
drag and drop it to the canvas.
\li In \uicontrol Library > \uicontrol Resources, select qt-logo.png and
drag and drop it to the \uicontrol Item in the navigator.
\image qmldesigner-tutorial-user-icon.png "Image properties"
@@ -148,15 +82,11 @@
\endlist
\li Right-click the resource file, qml.qrc, in the \uicontrol Projects
view, and select \uicontrol {Open in Editor} to add states.svg to
the resource file for deployment.
view, and select \uicontrol {Add Existing File} to add qt-logo.png
to the resource file for deployment.
\li Click \uicontrol Add > \uicontrol {Add File} and select
\e states.svg.
\li In the \uicontrol Design mode, \uicontrol Library view, \uicontrol {QML Types} tab,
select \uicontrol Rectangle,
drag and drop it to the canvas, and edit its properties.
\li Drag and drop a \uicontrol Rectangle to \e page in the navigator and
edit its properties.
\image qmldesigner-tutorial-topleftrect.png "Rectangle properties"
@@ -164,25 +94,24 @@
\li In the \uicontrol Id field, enter \e topLeftRect.
\li In the \uicontrol Size field, set \uicontrol W and \uicontrol H
to \e 44, for the rectangle size to match the image size.
\li In the \uicontrol Size field, set \uicontrol W to \e 46 and
\uicontrol H to \e 55, for the rectangle size to match the image
size.
\li In the \uicontrol Color field, click the
\inlineimage qmldesigner-transparent-button.png
(\uicontrol Transparent) button to make the rectangle transparent.
(\uicontrol Transparent) button to make the rectangle
transparent.
\li In the \uicontrol Border field, set the border color to
\li In the \uicontrol {Border color} field, set the border color to
\e #808080.
\li In the \uicontrol Rectangle group, \uicontrol Border field, set the border
width to \e 1.
\li In the \uicontrol Radius field, select \e 6 to create rounded
corners for the rectangle.
\li Click \uicontrol {Layout}, and then click the top and left anchor
buttons to anchor the rectangle to the top left corner of the
page.
\li Click \uicontrol {Layout}, and then click the top and left
anchor buttons to anchor the rectangle to the top left corner of
the page.
\image qmldesigner-tutorial-topleftrect-layout.png "Layout tab"
@@ -192,42 +121,17 @@
\endlist
\li Drag and drop a \uicontrol {Mouse Area} type from the
\uicontrol Library to \e topLeftRect in the \uicontrol Navigator.
\li Edit the \uicontrol {Mouse Area} properties:
\list a
\uicontrol Library to \e topLeftRect in the navigator.
\li Click \uicontrol {Layout}, and then click the
\inlineimage qmldesigner-anchor-fill-screen.png
(\uicontrol {Fill to Parent}) button to anchor the mouse area to the
rectangle.
\li In the code editor, edit the pointer to the clicked expression
in the mouse area, as illustrated by the following code
snippet:
\quotefromfile transitions/main.qml
\skipto MouseArea
\printuntil }
The expression sets the state to the base state and returns the
image to its initial position.
You will create stateGroup later.
\endlist
The qml.main file should now look as follows:
\quotefromfile transitions/main.qml
\skipto Window {
\printuntil mouseArea1
\printuntil }
\li In the \uicontrol Navigator, copy topLeftRect (by pressing
\key {Ctrl+C}) and paste it to the canvas twice (by pressing
\key {Ctrl+V}). \QC renames the new instances of the type
topLeftRect1 and topLeftRect2.
\key {Ctrl+C}) and paste it to the \e page in the navigator twice
(by pressing \key {Ctrl+V}). \QC renames the new instances of the
type topLeftRect1 and topLeftRect2.
\li Select topLeftRect1 and edit its properties:
@@ -242,14 +146,6 @@
\li In the \uicontrol Margin field, select \e 10 for the right
anchor and \e 0 for the vertical center anchor.
\li In the code editor, add a pointer to a clicked expression to the
mouse area. The following expression sets the state to
\e State1:
\c {onClicked: stateGroup.state = 'State1'}
You will create State1 later.
\endlist
\li Select topLeftRect2 and edit its properties:
@@ -264,54 +160,77 @@
\li In the \uicontrol Margin field, select \e 20 for the bottom
anchor and \e 10 for the left anchor.
\li In the code editor, add a pointer to a clicked expression to the
mouse area. The following expression sets the state to
\e State2:
\c {onClicked: stateGroup.state = 'State2'}
You will create State2 later.
The qml.main file should now look as follows:
\quotefromfile transitions/main.qml
\skipto Window {
\printuntil mouseArea3
\printuntil }
\printuntil }
\endlist
\li In the \uicontrol Navigator, select the
\inlineimage qmldesigner-export-item-button.png
(\uicontrol Export) button for each type to export all types as
properties. This enables you to use the properties in the
\e main.qml file.
\li Press \key {Ctrl+S} to save the changes.
\li Press \key {Ctrl+R} to run the application.
\endlist
\image qmldesigner-tutorial.png "States and transitions example"
To check your code, you can open MainForm.ui.qml in the
\uicontrol Edit mode and compare it with the \l{transitions/MainForm.ui.qml}
{MainForm.ui.qml} example file.
You should see the Qt logo in the top left rectangle, and two additional
rectangles in the center right and bottom left of the screen.
The UI is now ready and you can switch to editing the \e main.qml file in
the \uicontrol Edit mode to add animation to the application, as described
in the following section.
You can now create additional states to add views to the application.
\section1 Adding Application Logic
\section1 Adding Views
The new project wizard adds boilerplate code to the \e 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
\e main.qml (or the application cannot be built).
In the .qml file, you already created pointers to two additional states:
State1 and State2. You cannot use the \QMLD to add states for a Window QML
Edit the main.qml file to add pointers to two additional states: \e State1
and \e State2. You cannot use the \QMLD to add states for a Window QML
type. Use the code editor to add the states inside a StateGroup QML type and
refer to them by using the id of the state group:
refer to them by using the id of the state group.
\list 1
\li Specify the window size and background color as properties of
the ApplicationWindow type:
\quotefromfile transitions/main.qml
\skipto ApplicationWindow
\printuntil height
\li Specify an id for the MainForm type to be able to use the properties
that you exported in \e MainForm.ui.qml:
\printuntil page
\li Add a pointer to the clicked expressions in \uicontrol mouseArea1:
\printuntil }
The expression sets the state to the base state and returns the
image to its initial position.
\li Add a pointer to a clicked expression to \uicontrol mouseArea2
to set the state to \e State1:
\printuntil }
\li Add a pointer to a clicked expression to \uicontrol mouseArea3 to
set the state to \e State2:
\printuntil }
\printuntil }
\li Bind the position of the Qt logo to the
rectangle to make sure that the logo is displayed within the
rectangle when the view is scaled on different sizes of screens. Set
expressions for the x and y properties, as illustrated by the
following code snippet:
\quotefromfile transitions/main.qml
\skipto StateGroup {
\printuntil ]
\li Press \key {Ctrl+R} to run the application.
@@ -334,8 +253,6 @@
moving to State1, the x and y coordinates of the Qt logo change
linearly over a duration of 1 second:
\dots
\skipto transitions
\printuntil },
\li You can use the Qt Quick toolbar for animation to change the easing