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>
2015-06-26 15:38:24 +02:00
parent eb848eb89f
commit f84169b51e
12 changed files with 158 additions and 56 deletions
--- a/doc/examples/transitions/main.qml
+++ b/doc/examples/transitions/main.qml
@@ -1,24 +1,41 @@
-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
--- a/doc/examples/transitions/states.png
+++ b/doc/examples/transitions/states.png
--- a/doc/examples/transitions/states.svg
+++ b/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>
--- a/doc/images/qmldesigner-tutorial-design-mode.png
+++ b/doc/images/qmldesigner-tutorial-design-mode.png
--- a/doc/images/qmldesigner-tutorial-page.png
+++ b/doc/images/qmldesigner-tutorial-page.png
--- a/doc/images/qmldesigner-tutorial-project.png
+++ b/doc/images/qmldesigner-tutorial-project.png
--- a/doc/images/qmldesigner-tutorial-topleftrect.png
+++ b/doc/images/qmldesigner-tutorial-topleftrect.png
--- a/doc/images/qmldesigner-tutorial-user-icon.png
+++ b/doc/images/qmldesigner-tutorial-user-icon.png
--- a/doc/images/qmldesigner-tutorial.png
+++ b/doc/images/qmldesigner-tutorial.png
--- a/doc/src/overview/creator-tutorials.qdoc
+++ b/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

--- a/doc/src/qtquick/qtquick-app-tutorial.qdoc
+++ b/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
-            \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.
+                width to \e 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.
-
-            \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 /^\}/
-
 */
--- a/doc/src/widgets/qtdesigner-app-tutorial.qdoc
+++ b/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