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: Tim Jenssen <tim.jenssen@theqtcompany.com>

doc/examples/transitions/main.qml

@@ -1,24 +1,41 @@
-import QtQuick 2.1
+import QtQuick 2.5
-import QtQuick.Window 2.1
+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
+        x: 10
-        height: 64
+        y: 20
+        width: 44
+        height: 44
         color: "#00000000"
         radius: 6
         opacity: 1
@@ -37,8 +54,8 @@ Window {
 
     Rectangle {
         id: middleRightRect
-        width: 64
+        width: 44
-        height: 64
+        height: 44
         color: "#00000000"
         radius: 6
         anchors.right: parent.right
@@ -55,8 +72,8 @@ Window {
 
     Rectangle {
         id: bottomLeftRect
-        width: 64
+        width: 44
-        height: 64
+        height: 44
         color: "#00000000"
         radius: 6
         border.width: 1

doc/examples/transitions/states.svg

@@ -0,0 +1,93 @@
+<?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/src/overview/creator-tutorials.qdoc

@@ -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
 

doc/src/qtquick/qtquick-app-tutorial.qdoc

@@ -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
+        \li In the \uicontrol {Minimal required Qt version} field, select the Qt
-            \uicontrol {Qt Quick 2.1}.
+            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
+            might not apply if you select the \uicontrol {With .ui.qml file}
-            Quick 2.4. The wizard indicates which Qt version each component set
+            check box.
-            requires at minimum.
 
         \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
+        \li In the \uicontrol Navigator, select \uicontrol Label and press
-            \uicontrol Text and press \key Delete to delete them.
+            \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
+            \li In the \uicontrol Size field, set \uicontrol W and \uicontrol H
-                rectangle size to match the image size.
+                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.
+                width to \e 1.
 
-                \note If the \uicontrol Border field does not appear after you set the
+            \li In the \uicontrol Radius field, select \e 6 to create rounded
-                border color, try setting the border color to solid by clicking
+                corners for the rectangle.
-                the
-                \inlineimage qmldesigner-solid-color-button.png
-                (\uicontrol {Solid Color}) button.
-
-            \li In the \uicontrol Radius field, select 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
+            \li In the \uicontrol Margin field, select \e 20 for the top anchor
-                for the left 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
+            \li In the \uicontrol Margin field, select \e 10 for the right
-                for the vertical center anchor.
+                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
+            \li In the \uicontrol Margin field, select \e 20 for the bottom
-                for the left anchor.
+                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 /^\}/
-
 */

doc/src/widgets/qtdesigner-app-tutorial.qdoc

@@ -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