Commit 95c7d6fe authored by Leena Miettinen's avatar Leena Miettinen

Doc: update the Transitions example to use UI forms

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: default avatarTim Jenssen <tim.jenssen@theqtcompany.com>
parent e2b8a1cb
/****************************************************************************
**
** 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"
}
}
/****************************************************************************
**
** 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();
}
/****************************************************************************
**
** 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
anchors.fill: parent
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 {
}
]
}
}
}
<RCC>
<qresource prefix="/">
<file>main.qml</file>
<file>MainForm.ui.qml</file>
<file>qt-logo.png</file>
</qresource>
</RCC>
<?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>
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)
doc/images/qmldesigner-tutorial.png

4.9 KB | W: | H:

doc/images/qmldesigner-tutorial.png

4.79 KB | W: | H:

doc/images/qmldesigner-tutorial.png
doc/images/qmldesigner-tutorial.png
doc/images/qmldesigner-tutorial.png
doc/images/qmldesigner-tutorial.png
  • 2-up
  • Swipe
  • Onion skin
\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.
......@@ -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
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.
\li In the \uicontrol Projects view, double-click the main.qml file
to open it in the code editor.
\list a
\li Click \uicontrol Design to open the file in \QMLD.