Commit f84169b5 authored by Leena Miettinen's avatar Leena Miettinen

Doc: update the Qt Quick Application tutorial

To match the changes in the application templates
and the Qt Quick Designer UI.

Use the \example command to create an HTML of the
example QML file.

Change-Id: I4da7d5f3f14ae7a1e9597204cb9dbcd54c4127cd
Reviewed-by: default avatarTim Jenssen <tim.jenssen@theqtcompany.com>
parent eb848eb8
import QtQuick 2.1
import QtQuick.Window 2.1
import QtQuick 2.5
import QtQuick.Controls 1.4
Window {
ApplicationWindow {
id: page
visible: true
width: 360
height: 360
color: "#343434"
title: qsTr("Transitions")
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.png"
source: "states.svg"
}
Rectangle {
id: topLeftRect
width: 64
height: 64
x: 10
y: 20
width: 44
height: 44
color: "#00000000"
radius: 6
opacity: 1
......@@ -37,8 +54,8 @@ Window {
Rectangle {
id: middleRightRect
width: 64
height: 64
width: 44
height: 44
color: "#00000000"
radius: 6
anchors.right: parent.right
......@@ -55,8 +72,8 @@ Window {
Rectangle {
id: bottomLeftRect
width: 64
height: 64
width: 44
height: 44
color: "#00000000"
radius: 6
border.width: 1
......
<?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>
doc/images/qmldesigner-tutorial.png

5.74 KB | W: | H:

doc/images/qmldesigner-tutorial.png

4.9 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
......@@ -26,7 +26,7 @@
\contentspage {Qt Creator Manual}
\previouspage creator-build-example-application.html
\page creator-tutorials.html
\nextpage creator-qml-application.html
\nextpage {Creating a Qt Quick Application}
\title Tutorials
......
......@@ -25,7 +25,7 @@
/*!
\contentspage {Qt Creator Manual}
\previouspage creator-tutorials.html
\page creator-qml-application.html
\example transitions
\nextpage creator-writing-program.html
\title Creating a Qt Quick Application
......@@ -53,20 +53,19 @@
\li Select \uicontrol{File > New File or Project > Application >
Qt Quick Application > Choose}.
\li In the \uicontrol{Name} field, type \b {Transitions}.
\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 {Qt Quick component set} field, select
\uicontrol {Qt Quick 2.1}.
\li In the \uicontrol {Minimal required Qt version} field, select the Qt
version to develop with.
\note This selection determines the set of files that the wizard
\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 some other component set, such as Qt
Quick 2.4. The wizard indicates which Qt version each component set
requires at minimum.
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}.
......@@ -96,7 +95,7 @@
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.png image in your application, you must copy it to the
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
......@@ -112,10 +111,10 @@
\image qmldesigner-tutorial-design-mode.png "Transitions project in Design Mode"
\li In the \uicontrol Navigator, select \uicontrol MouseArea and
\uicontrol Text and press \key Delete to delete them.
\li In the \uicontrol Navigator, select \uicontrol Label and press
\key Delete to delete it.
\li Select \uicontrol Window to edit its properties.
\li Select \uicontrol ApplicationWindow to edit its properties.
\image qmldesigner-tutorial-page.png "Page properties"
......@@ -124,12 +123,17 @@
\li In the \uicontrol Id field, enter \e page, to be able to reference the
window from other places.
\li In the \uicontrol Title field, type \e Transitions.
\li In the \uicontrol Size field, set \uicontrol W and \uicontrol H
to \e 330.
\li In the \uicontrol Color field, set the window background color
to #343434.
to \e #343434.
\endlist
\li In \uicontrol Library > \uicontrol Resources, select states.png and
\li In \uicontrol Library > \uicontrol Resources, select states.svg and
drag and drop it to the canvas.
\image qmldesigner-tutorial-user-icon.png "Image properties"
......@@ -138,15 +142,17 @@
\li In the \uicontrol Id field, enter \e icon.
\li In the \uicontrol Position field, set \uicontrol X to 10 and \uicontrol Y to 20.
\li In the \uicontrol Position field, set \uicontrol X to \e 10 and
\uicontrol Y to \e 20.
\endlist
\li Right-click the resource file, qml.qrc, in the \uicontrol Projects
view, and select \uicontrol {Open in Editor} to add states.png to
view, and select \uicontrol {Open in Editor} to add states.svg to
the resource file for deployment.
\li Click \uicontrol Add and select states.png.
\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,
......@@ -158,26 +164,21 @@
\li In the \uicontrol Id field, enter \e topLeftRect.
\li In the \uicontrol Size field, set \uicontrol W and \uicontrol H to 64, for the
rectangle size to match the image size.
\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 Color field, click the
\inlineimage qmldesigner-transparent-button.png
(\uicontrol Transparent) button to make the rectangle transparent.
\li In the \uicontrol Border field, set the border color to #808080.
\li In the \uicontrol Border field, set the border color to
\e #808080.
\li In the \uicontrol Rectangle group, \uicontrol Border field, set the border
width to 1.
\note If the \uicontrol Border field does not appear after you set the
border color, try setting the border color to solid by clicking
the
\inlineimage qmldesigner-solid-color-button.png
(\uicontrol {Solid Color}) button.
width to \e 1.
\li In the \uicontrol Radius field, select 6 to create rounded corners for
the rectangle.
\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
......@@ -185,8 +186,8 @@
\image qmldesigner-tutorial-topleftrect-layout.png "Layout tab"
\li In the \uicontrol Margin field, select 20 for the top anchor and 10
for the left anchor.
\li In the \uicontrol Margin field, select \e 20 for the top anchor
and \e 10 for the left anchor.
\endlist
......@@ -238,8 +239,8 @@
then the right anchor button to
anchor the rectangle to the middle right margin of the screen.
\li In the \uicontrol Margin field, select 10 for the right anchor and 0
for the vertical center anchor.
\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
......@@ -260,8 +261,8 @@
\li In \uicontrol {Layout}, select the bottom and left anchor buttons to
anchor the rectangle to the bottom left margin of the screen.
\li In the \uicontrol Margin field, select 20 for the bottom anchor and 10
for the left anchor.
\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
......@@ -373,13 +374,4 @@
\endlist
Click the rectangles to view the animated transitions.
\section1 Example Code
When you have completed the steps, the main.qml file should look as follows:
\quotefromfile transitions/main.qml
\skipto Window {
\printuntil /^\}/
*/
......@@ -24,7 +24,7 @@
/*!
\contentspage {Qt Creator Manual}
\previouspage creator-qml-application.html
\previouspage {Creating a Qt Quick Application}
\page creator-writing-program.html
\nextpage creator-mobile-app-tutorial.html
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment