Doc: Fix the Qt Quick Application tutorial

- Keep the Window, but move the page into a separate QML file
  to which you add states
- Explain how to bind the icon to the rectangles in the states
  to make the UI scalable
- Update the transparent icon and instructions for setting the border
  transparent
- Add and update screenshots

Fixes: QTCREATORBUG-26291
Change-Id: I68c6b7b897c7824b43b9e0fa719e37864841ba9b
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>

16 files changed, 550 insertions, 274 deletions

diff --git a/doc/qtcreator/examples/transitions/CMakeLists.txt b/doc/qtcreator/examples/transitions/CMakeLists.txt
new file mode 100644
index 0000000000..bf543f34ff
--- /dev/null
+++ b/doc/qtcreator/examples/transitions/CMakeLists.txt
@@ -0,0 +1,59 @@
+cmake_minimum_required(VERSION 3.14)
+
+project(transitions VERSION 0.1 LANGUAGES CXX)
+
+set(CMAKE_INCLUDE_CURRENT_DIR ON)
+
+set(CMAKE_AUTOUIC ON)
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_AUTORCC ON)
+
+set(CMAKE_CXX_STANDARD 11)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+find_package(QT NAMES Qt6 Qt5 COMPONENTS Core Quick REQUIRED)
+find_package(Qt${QT_VERSION_MAJOR} COMPONENTS Core Quick REQUIRED)
+
+set(PROJECT_SOURCES
+        main.cpp
+        qml.qrc
+)
+
+if(${QT_VERSION_MAJOR} GREATER_EQUAL 6)
+    qt_add_executable(transitions
+        MANUAL_FINALIZATION
+        ${PROJECT_SOURCES}
+    )
+# Define target properties for Android with Qt 6 as:
+#    set_property(TARGET transitions APPEND PROPERTY QT_ANDROID_PACKAGE_SOURCE_DIR
+#                 ${CMAKE_CURRENT_SOURCE_DIR}/android)
+# For more information, see https://doc.qt.io/qt-6/qt-add-executable.html#target-creation
+else()
+    if(ANDROID)
+        add_library(transitions SHARED
+            ${PROJECT_SOURCES}
+        )
+# Define properties for Android with Qt 5 after find_package() calls as:
+#    set(ANDROID_PACKAGE_SOURCE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/android")
+    else()
+        add_executable(transitions
+          ${PROJECT_SOURCES}
+        )
+    endif()
+endif()
+
+target_compile_definitions(transitions
+  PRIVATE $<$<OR:$<CONFIG:Debug>,$<CONFIG:RelWithDebInfo>>:QT_QML_DEBUG>)
+target_link_libraries(transitions
+  PRIVATE Qt${QT_VERSION_MAJOR}::Core Qt${QT_VERSION_MAJOR}::Quick)
+
+set_target_properties(transitions PROPERTIES
+    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
+    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
+    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
+)
+
+if(QT_VERSION_MAJOR EQUAL 6)
+    qt_import_qml_plugins(transitions)
+    qt_finalize_executable(transitions)
+endif()
diff --git a/doc/qtcreator/examples/transitions/Page.qml b/doc/qtcreator/examples/transitions/Page.qml
new file mode 100644
index 0000000000..932a29cd02
--- /dev/null
+++ b/doc/qtcreator/examples/transitions/Page.qml
@@ -0,0 +1,266 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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.15
+import QtQuick.Window 2.15
+
+Rectangle {
+    id: page
+    state: "State1"
+
+    Image {
+        id: icon
+        x: 20
+        y: 20
+        source: "images/qt-logo.png"
+        fillMode: Image.PreserveAspectFit
+    }
+
+    Rectangle {
+        id: topLeftRect
+        width: 55
+        height: 41
+        color: "#00ffffff"
+        border.color: "#808080"
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.leftMargin: 20
+        anchors.topMargin: 20
+
+        MouseArea {
+            id: mouseArea
+            anchors.fill: parent
+
+            Connections {
+                target: mouseArea
+                function onClicked()
+                {
+                    page.state = "State1"
+                }
+            }
+        }
+    }
+
+
+    Rectangle {
+        id: middleRightRect
+        width: 55
+        height: 41
+        color: "#00ffffff"
+        border.color: "#808080"
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: 20
+        MouseArea {
+            id: mouseArea1
+            anchors.fill: parent
+
+            Connections {
+                target: mouseArea1
+                function onClicked()
+                {
+                    page.state = "State2"
+                }
+            }
+        }
+    }
+
+
+    Rectangle {
+        id: bottomLeftRect
+        width: 55
+        height: 41
+        color: "#00ffffff"
+        border.color: "#808080"
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 20
+        anchors.leftMargin: 20
+        MouseArea {
+            id: mouseArea2
+            anchors.fill: parent
+
+            Connections {
+                target: mouseArea2
+                function onClicked()
+                {
+                    page.state = "State3"
+                }
+            }
+        }
+    }
+
+    states: [
+        State {
+            name: "State1"
+        },
+        State {
+            name: "State2"
+
+            PropertyChanges {
+                target: icon
+                x: middleRightRect.x
+                y: middleRightRect.y
+            }
+        },
+        State {
+            name: "State3"
+
+            PropertyChanges {
+                target: icon
+                x: bottomLeftRect.x
+                y: bottomLeftRect.y
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            id: toState1
+            ParallelAnimation {
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: 0
+                    }
+
+                    PropertyAnimation {
+                        target: icon
+                        property: "y"
+                        duration: 200
+                    }
+                }
+
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: 0
+                    }
+
+                    PropertyAnimation {
+                        target: icon
+                        property: "x"
+                        duration: 200
+                    }
+                }
+            }
+            to: "State1"
+            from: "State2,State3"
+        },
+        Transition {
+            id: toState2
+            ParallelAnimation {
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: 0
+                    }
+
+                    PropertyAnimation {
+                        target: icon
+                        property: "y"
+                        easing.bezierCurve: [0.233,0.161,0.264,0.997,0.393,0.997,0.522,0.997,0.555,0.752,0.61,0.75,0.664,0.748,0.736,1,0.775,1,0.814,0.999,0.861,0.901,0.888,0.901,0.916,0.901,0.923,0.995,1,1]
+                        duration: 1006
+                    }
+                }
+
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: 0
+                    }
+
+                    PropertyAnimation {
+                        target: icon
+                        property: "x"
+                        easing.bezierCurve: [0.233,0.161,0.264,0.997,0.393,0.997,0.522,0.997,0.555,0.752,0.61,0.75,0.664,0.748,0.736,1,0.775,1,0.814,0.999,0.861,0.901,0.888,0.901,0.916,0.901,0.923,0.995,1,1]
+                        duration: 1006
+                    }
+                }
+            }
+            to: "State2"
+            from: "State1,State3"
+        },
+        Transition {
+            id: toState3
+            ParallelAnimation {
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: 0
+                    }
+
+                    PropertyAnimation {
+                        target: icon
+                        property: "y"
+                        easing.bezierCurve: [0.455,0.03,0.515,0.955,1,1]
+                        duration: 2000
+                    }
+                }
+
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: 0
+                    }
+
+                    PropertyAnimation {
+                        target: icon
+                        property: "x"
+                        easing.bezierCurve: [0.455,0.03,0.515,0.955,1,1]
+                        duration: 2000
+                    }
+                }
+            }
+            to: "State3"
+            from: "State1,State2"
+        }
+    ]
+}
+
+/*##^##
+Designer {
+    D{i:0;height:480;width:640}D{i:1}D{i:16;transitionDuration:2000}D{i:24;transitionDuration:2000}
+D{i:32;transitionDuration:2000}
+}
+##^##*/
diff --git a/doc/qtcreator/examples/transitions/qt-logo.png b/doc/qtcreator/examples/transitions/images/qt-logo.png
index f465822ed0..f465822ed0 100644
--- a/doc/qtcreator/examples/transitions/qt-logo.png
+++ b/doc/qtcreator/examples/transitions/images/qt-logo.png
diff --git a/doc/qtcreator/examples/transitions/main.cpp b/doc/qtcreator/examples/transitions/main.cpp
index fa832817aa..c43b030e92 100644
--- a/doc/qtcreator/examples/transitions/main.cpp
+++ b/doc/qtcreator/examples/transitions/main.cpp
@@ -1,9 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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[])
 {
-    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    if (qEnvironmentVariableIsEmpty("QTGLESSTREAM_DISPLAY")) {
+        qputenv("QT_QPA_EGLFS_PHYSICAL_WIDTH", QByteArray("213"));
+        qputenv("QT_QPA_EGLFS_PHYSICAL_HEIGHT", QByteArray("120"));
+
+#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
+        QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+#endif
+    }
 
     QGuiApplication app(argc, argv);
 
diff --git a/doc/qtcreator/examples/transitions/main.qml b/doc/qtcreator/examples/transitions/main.qml
index 1072e85ffe..bb93d70fe9 100644
--- a/doc/qtcreator/examples/transitions/main.qml
+++ b/doc/qtcreator/examples/transitions/main.qml
@@ -1,214 +1,71 @@
-import QtQuick 2.14
-
-Rectangle {
-    id: page
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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.15
+import QtQuick.Window 2.15
+
+Window {
     width: 640
     height: 480
     visible: true
-    border.color: "#808080"
-    state: "State1"
-
-    Image {
-        id: icon
-        x: 10
-        y: 20
-        source: "qt-logo.png"
-        fillMode: Image.PreserveAspectFit
-    }
-
-    Rectangle {
-        id: topLeftRect
-        width: 55
-        height: 41
-        color: "#00000000"
-        border.color: "#808080"
-        anchors.left: parent.left
-        anchors.top: parent.top
-        anchors.leftMargin: 10
-        anchors.topMargin: 20
-
-        MouseArea {
-            id: mouseArea
-            anchors.fill: parent
-
-            Connections {
-                target: mouseArea
-                onClicked: page.state = "State1"
-            }
-        }
-    }
-
-    Rectangle {
-        id: middleRightRect
-        width: 55
-        height: 41
-        color: "#00000000"
-        border.color: "#808080"
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.right: parent.right
-        anchors.rightMargin: 10
-        MouseArea {
-            id: mouseArea1
-            anchors.fill: parent
-
-            Connections {
-                target: mouseArea1
-                onClicked: page.state = "State2"
-            }
-        }
-    }
-
-    Rectangle {
-        id: bottomLeftRect
-        width: 55
-        height: 41
-        color: "#00000000"
-        border.color: "#808080"
-        anchors.left: parent.left
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 20
-        MouseArea {
-            id: mouseArea2
-            anchors.fill: parent
+    title: qsTr("Hello World")
 
-            Connections {
-                target: mouseArea2
-                onClicked: page.state = "State3"
-            }
-        }
-        anchors.leftMargin: 10
+    Page {
+        id: page
+        anchors.fill: parent
+        color: "#ffffff"
     }
-    states: [
-        State {
-            name: "State1"
-
-            PropertyChanges {
-                target: icon
-                x: 10
-                y: 20
-            }
-        },
-        State {
-            name: "State2"
-
-            PropertyChanges {
-                target: icon
-                x: 575
-                y: 219
-            }
-        },
-        State {
-            name: "State3"
-            PropertyChanges {
-                target: icon
-                x: 10
-                y: 419
-            }
-        }
-    ]
-    transitions: [
-        Transition {
-            id: toState1
-            ParallelAnimation {
-                SequentialAnimation {
-                    PauseAnimation {
-                        duration: 50
-                    }
-
-                    PropertyAnimation {
-                        target: icon
-                        property: "x"
-                        easing.bezierCurve: [0.2,0.2,0.8,0.8,1,1]
-                        duration: 152
-                    }
-                }
-
-                SequentialAnimation {
-                    PauseAnimation {
-                        duration: 52
-                    }
-
-                    PropertyAnimation {
-                        target: icon
-                        property: "y"
-                        easing.bezierCurve: [0.2,0.2,0.8,0.8,1,1]
-                        duration: 152
-                    }
-                }
-            }
-            to: "State1"
-            from: "State2,State3"
-        },
-        Transition {
-            id: toState2
-            ParallelAnimation {
-                SequentialAnimation {
-                    PauseAnimation {
-                        duration: 50
-                    }
-
-                    PropertyAnimation {
-                        target: icon
-                        property: "x"
-                        easing.bezierCurve: [0.233,0.161,0.264,0.997,0.393,0.997,0.522,0.997,0.555,0.752,0.61,0.75,0.664,0.748,0.736,1,0.775,1,0.814,0.999,0.861,0.901,0.888,0.901,0.916,0.901,0.923,0.995,1,1]
-                        duration: 951
-                    }
-                }
-
-                SequentialAnimation {
-                    PauseAnimation {
-                        duration: 50
-                    }
-
-                    PropertyAnimation {
-                        target: icon
-                        property: "y"
-                        easing.bezierCurve: [0.233,0.161,0.264,0.997,0.393,0.997,0.522,0.997,0.555,0.752,0.61,0.75,0.664,0.748,0.736,1,0.775,1,0.814,0.999,0.861,0.901,0.888,0.901,0.916,0.901,0.923,0.995,1,1]
-                        duration: 951
-                    }
-                }
-            }
-            to: "State2"
-            from: "State1,State3"
-        },
-        Transition {
-            id: toState3
-            ParallelAnimation {
-                SequentialAnimation {
-                    PauseAnimation {
-                        duration: 0
-                    }
-
-                    PropertyAnimation {
-                        target: icon
-                        property: "x"
-                        easing.bezierCurve: [0.25,0.46,0.45,0.94,1,1]
-                        duration: 2000
-                    }
-                }
-
-                SequentialAnimation {
-                    PauseAnimation {
-                        duration: 0
-                    }
-
-                    PropertyAnimation {
-                        target: icon
-                        property: "y"
-                        easing.bezierCurve: [0.25,0.46,0.45,0.94,1,1]
-                        duration: 2000
-                    }
-                }
-            }
-            to: "State3"
-            from: "State1,State2"
-        }
-    ]
 }
 
 /*##^##
 Designer {
-    D{i:0;formeditorZoom:0.6600000262260437}D{i:17;transitionDuration:2000}D{i:25;transitionDuration:2000}
-D{i:33;transitionDuration:2000}
+    D{i:0;formeditorZoom:0.75}
 }
 ##^##*/
diff --git a/doc/qtcreator/examples/transitions/qml.qrc b/doc/qtcreator/examples/transitions/qml.qrc
index 1cca02ca09..f046cc30b3 100644
--- a/doc/qtcreator/examples/transitions/qml.qrc
+++ b/doc/qtcreator/examples/transitions/qml.qrc
@@ -1,6 +1,7 @@
 <RCC>
     <qresource prefix="/">
         <file>main.qml</file>
-        <file>qt-logo.png</file>
+        <file>images/qt-logo.png</file>
+        <file>Page.qml</file>
     </qresource>
 </RCC>
diff --git a/doc/qtcreator/examples/transitions/transitions.pro b/doc/qtcreator/examples/transitions/transitions.pro
deleted file mode 100644
index 34ba75e407..0000000000
--- a/doc/qtcreator/examples/transitions/transitions.pro
+++ /dev/null
@@ -1,23 +0,0 @@
-QT += quick
-
-CONFIG += c++11
-
-# You can make your code fail to compile if it uses deprecated APIs.
-# In order to do so, uncomment the following line.
-#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
-
-SOURCES += \
-        main.cpp
-
-RESOURCES += qml.qrc
-
-# Additional import path used to resolve QML modules in Qt Creator's code model
-QML_IMPORT_PATH =
-
-# Additional import path used to resolve QML modules just for Qt Quick Designer
-QML_DESIGNER_IMPORT_PATH =
-
-# Default rules for deployment.
-qnx: target.path = /tmp/$${TARGET}/bin
-else: unix:!android: target.path = /opt/$${TARGET}/bin
-!isEmpty(target.path): INSTALLS += target
diff --git a/doc/qtcreator/images/icons/transparent.png b/doc/qtcreator/images/icons/transparent.png
new file mode 100644
index 0000000000..3f9bffcac5
--- /dev/null
+++ b/doc/qtcreator/images/icons/transparent.png
diff --git a/doc/qtcreator/images/qmldesigner-tutorial-bindings.png b/doc/qtcreator/images/qmldesigner-tutorial-bindings.png
new file mode 100644
index 0000000000..ab9e72cd9e
--- /dev/null
+++ b/doc/qtcreator/images/qmldesigner-tutorial-bindings.png
diff --git a/doc/qtcreator/images/qmldesigner-tutorial-page-component.png b/doc/qtcreator/images/qmldesigner-tutorial-page-component.png
new file mode 100644
index 0000000000..e73e837085
--- /dev/null
+++ b/doc/qtcreator/images/qmldesigner-tutorial-page-component.png
diff --git a/doc/qtcreator/images/qmldesigner-tutorial-states.png b/doc/qtcreator/images/qmldesigner-tutorial-states.png
index 62f166b873..7c4d44f0ec 100644
--- a/doc/qtcreator/images/qmldesigner-tutorial-states.png
+++ b/doc/qtcreator/images/qmldesigner-tutorial-states.png
diff --git a/doc/qtcreator/images/qmldesigner-tutorial-topleftrect-layout.png b/doc/qtcreator/images/qmldesigner-tutorial-topleftrect-layout.png
index 59f7fa0d7f..d05ac96a4d 100644
--- a/doc/qtcreator/images/qmldesigner-tutorial-topleftrect-layout.png
+++ b/doc/qtcreator/images/qmldesigner-tutorial-topleftrect-layout.png
diff --git a/doc/qtcreator/images/qmldesigner-tutorial-topleftrect.png b/doc/qtcreator/images/qmldesigner-tutorial-topleftrect.png
index cdd691ad1a..e935213744 100644
--- a/doc/qtcreator/images/qmldesigner-tutorial-topleftrect.png
+++ b/doc/qtcreator/images/qmldesigner-tutorial-topleftrect.png
diff --git a/doc/qtcreator/images/qmldesigner-tutorial-ui-ready.png b/doc/qtcreator/images/qmldesigner-tutorial-ui-ready.png
index 3fb5585416..e87bfd6b87 100644
--- a/doc/qtcreator/images/qmldesigner-tutorial-ui-ready.png
+++ b/doc/qtcreator/images/qmldesigner-tutorial-ui-ready.png
diff --git a/doc/qtcreator/images/qmldesigner-tutorial-user-icon.png b/doc/qtcreator/images/qmldesigner-tutorial-user-icon.png
index 10755939fe..a115cf8fbf 100644
--- a/doc/qtcreator/images/qmldesigner-tutorial-user-icon.png
+++ b/doc/qtcreator/images/qmldesigner-tutorial-user-icon.png
diff --git a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc
index 23ed4f5f49..be4a66a01c 100644
--- a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc
+++ b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc
@@ -47,15 +47,14 @@
 
     \include qtquick-tutorial-create-empty-project.qdocinc qtquick empty application
 
-    \QC generates a component file, \e main.qml, and opens it in
-    \l {Text Editor}. The wizard template uses an instance of the \l Window
-    control, which does not support adding states. Because we want to use states
-    in this example, we first replace the instance of the Window component with
-    an instance of the basic \l {basic-rectangle}{Rectangle} component. We must
-    also remove the line that sets the \c title property, which the Rectangle
-    component does not have. If you change the value of the \l Type property in
-    the \l Properties view, \QC offers to automatically remove the \c title
-    property.
+    \QC generates a component file, \e main.qml, and opens it in the
+    \l {Text Editor} view. Select \uicontrol Design to open the file in
+    the \l {Form Editor} view.
+
+    \note The visibility of Design views depends on the selected workspace.
+    To open hidden views, select \uicontrol View > \uicontrol Views
+    in the \uicontrol Design mode. For more information about moving
+    views around, see \l {Managing Workspaces}.
 
     \section1 Creating the Main View
 
@@ -65,15 +64,22 @@
     We use the \e qt-logo.png image in this tutorial, but you can also use
     any other image or a component, instead.
 
-    \note If a view is hidden, you can show it by selecting \uicontrol View >
-    \uicontrol Views.
-
     \list 1
 
+        \li In \uicontrol Library > \uicontrol Components >
+            \uicontrol {Default Components} > \uicontrol Basic, select
+            \uicontrol Rectangle and drag and drop it to \e Window in
+            \uicontrol Navigator.
+
         \li Select the \uicontrol Rectangle instance in \l Navigator, and enter
             \e page in the \uicontrol ID field in \l Properties.
 
-        \li Select \l Library > \uicontrol Assets > \inlineimage plus.png
+        \li In \uicontrol Layout, select the
+            \inlineimage icons/anchor-fill.png "Fill anchor button"
+            fill anchor button to anchor the rectangle to the window on all
+            sides.
+
+        \li Select \uicontrol Library > \uicontrol Assets > \inlineimage plus.png
             to locate qt-logo.png (or your own image) and add it to the
             project folder.
 
@@ -91,7 +97,7 @@
 
             \li In the \uicontrol ID field, enter \e icon.
 
-            \li In the \uicontrol Position field, set \uicontrol X to \e 10 and
+            \li In the \uicontrol Position field, set \uicontrol X and
                 \uicontrol Y to \e 20.
 
         \endlist
@@ -111,26 +117,25 @@
             \li In the \uicontrol ID field, enter \e topLeftRect.
 
             \li In the \uicontrol Size field, set \uicontrol W and
-                \uicontrol H to \e 64, for the rectangle size to
-                match the image size.
+                \uicontrol H to values that match the image size
+                (\e 55 and \e 41).
 
-            \li In the \uicontrol Color field, click the
-                \inlineimage icon_color_none.png
-                (\uicontrol Transparent) button to make the rectangle
-                transparent.
+            \li Select the \uicontrol Color field, and then select the
+                \inlineimage icons/transparent.png "Transparent button"
+                button in the \l{Picking colors}{color picker} to make
+                the rectangle transparent.
 
             \li In the \uicontrol {Border color} field, set the border
                 color to \e #808080 to make the rectangle visible on
-                the white background.
+                the background.
 
             \li Click \uicontrol {Layout}, and then click the
-                \inlineimage icons/anchor-top.png
-                (\uicontrol Top) and \inlineimage icons/anchor-left.png
-                (\uicontrol Left) anchor buttons to anchor the
-                rectangle to the top left corner of the page.
+                \inlineimage icons/anchor-top.png "Top anchor button"
+                top and \inlineimage icons/anchor-left.png "Left anchor button"
+                left anchor buttons to anchor the rectangle to the top left
+                corner of the page.
 
-            \li In the \uicontrol Margin field, select \e 20 for the top anchor
-                and \e 10 for the left anchor.
+            \li In the \uicontrol Margin field, select \e 20 for both anchors.
 
                 \image qmldesigner-tutorial-topleftrect-layout.png "Anchor margins"
 
@@ -140,9 +145,8 @@
             \uicontrol Library to \e topLeftRect in \uicontrol Navigator.
 
         \li Click \uicontrol {Layout}, and then click the
-            \inlineimage icons/anchor-fill.png
-            (\uicontrol {Fill to Parent}) button to anchor the mouse area to the
-            rectangle.
+            \inlineimage icons/anchor-fill.png "Fill anchor button"
+            button to anchor the mouse area to its parent.
 
         \li In the \uicontrol Navigator, copy \e topLeftRect (by pressing
             \key {Ctrl+C}) and paste it to \e page in \uicontrol Navigator
@@ -156,13 +160,13 @@
             \li In the \uicontrol ID field, enter \e middleRightRect.
 
             \li In \uicontrol {Layout}, select the
-                \inlineimage icons/anchor-center-vertical.png
-                (\uicontrol {Vertical Center} anchor button and then the
-                \inlineimage icons/anchor-right.png
-                (\uicontrol Right) anchor button to anchor the rectangle
+                \inlineimage icons/anchor-center-vertical.png "Vertical center anchor button"
+                vertical center anchor button and then the
+                \inlineimage icons/anchor-right.png "Right anchor button"
+                right anchor button to anchor the rectangle
                 to the middle right margin of its parent.
 
-            \li In the \uicontrol Margin field, select \e 10 for the right
+            \li In the \uicontrol Margin field, select \e 20 for the right
                 anchor and \e 0 for the vertical center anchor.
 
         \endlist
@@ -179,8 +183,7 @@
                 (\uicontrol Left) anchor buttons to anchor the rectangle
                 to the bottom left margin of its parent.
 
-            \li In the \uicontrol Margin field, select \e 20 for the bottom
-                anchor and \e 10 for the left anchor.
+            \li In the \uicontrol Margin field, select \e 20 for both anchors.
 
         \endlist
 
@@ -199,18 +202,41 @@
     For more information about the views you used, see:
 
     \list
+        \li \l {Form Editor}
         \li \l Library
         \li \l Navigator
         \li \l Properties
     \endlist
 
     Next, we will make the image move between the rectangles when users click
-    them by adding states and by connecting mouse clicks to state changes.
+    them by \l{Adding States}{adding states} and by connecting mouse clicks
+    to state changes.
+
+    Because the Window component requires states to be added into child
+    components, we must first move \e page into a separate component.
+
+    \section1 Turning Page into a Custom Component
+
+    To turn \e page into a custom component, right-click it
+    in \uicontrol Navigator or \uicontrol {Form Editor}, and select
+    \uicontrol {Move Component into Separate File} in the context menu.
+
+    \image qmldesigner-tutorial-page-component.png "Move page component instance into a separate file"
+
+    \list 1
+        \li In \uicontrol {Component name}, enter \e Page.
+        \li In \uicontrol {Property assignments for main.qml} select both
+            check boxes to preserve the appearance of the UI.
+        \li Select \uicontrol OK to create a file called \e Page.qml that
+            defines the Page custom component and to add an instance of it
+            into \e main.qml.
+    \endlist
 
     \section1 Connecting Mouse Clicks to State Changes
 
     To make the image move between the rectangles when users click them, we add
-    states, where we change the values of the \c x and \c y properties of
+    states to the Page component, where we change the values of the \c x and
+    \c y properties of
     \e icon to match those of the middle right and top left rectangles. Then,
     we connect the \c onClicked signals of the mouse areas to the state changes.
 
@@ -219,6 +245,9 @@
     \c y properties of \e icon to those of the rectangles.
 
     \list 1
+        \li Right-click \e page in \uicontrol Navigator, and select
+            \uicontrol {Go into Component} in the context menu to open
+            \e Page.qml in \uicontrol {Form Editor}.
         \li In the \uicontrol States view, select \uicontrol {Create New State}
             three times to create \e State1, \e State2, and \e State3.
         \li Select \e State1 in \uicontrol States.
@@ -227,13 +256,22 @@
             \uicontrol {Set as Default} to display \e State1 when
             the application starts.
         \li Select \e State2 in \uicontrol States.
-        \li Select \e icon in \uicontrol Navigator and drag it on top of the
-            middle left rectangle in \uicontrol {Form Editor}. This changes the
-            \c x and \c y property values of \e icon to match those of
-            \e middleRightRect in \e State2.
-            \image qmldesigner-tutorial-states.png "States view"
-        \li Select \e State3 in \uicontrol States, and drag \e icon on top of
-            the bottom left rectangle in \uicontrol {Form Editor}.
+        \li Select \e icon in \uicontrol Navigator to display its properties
+            in \uicontrol Properties.
+        \li In \uicontrol {Geometry - 2D} > \uicontrol Position > \uicontrol X,
+            select \inlineimage icons/action-icon.png "Actions button"
+            , and then select \uicontrol {Set Binding} to open
+            \uicontrol {Binding Editor}.
+        \li Select the \e middleRightRect component and the \e x property
+            to bind the \e x property value of \e icon to that of
+            \e middleRightRect.
+            \image qmldesigner-tutorial-bindings.png "Binding Editor"
+        \li Select \uicontrol OK to create the binding.
+        \li Repeat for \uicontrol Y, but set the binding as
+            \e middleRightRect.y.
+        \li Select \e State3 in \uicontrol States, and bind the \e x and \e y
+            property values of \e icon to those of \e bottomLeftRect
+            (\e bottomLeftRect.x and \e bottomLeftRect.y).
         \li In \l {Connection View} > \uicontrol Connections, click the
             \inlineimage plus.png
             button to create a new connection.
@@ -250,10 +288,30 @@
 
     Click the rectangles to move the Qt logo from one rectangle to another.
 
+    If you develop with Qt 6, you must specify the connections as
+    functions. This is currently not supported in \uicontrol {Connections},
+    so you must do it in \uicontrol {Text Editor}. For example:
+
+    \code
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+
+        Connections {
+            target: mouseArea
+            function onClicked()
+            {
+                page.state = "State1"
+            }
+        }
+    }
+    \endcode
+
     For more information about the views you used, see:
 
     \list
         \li \l States
+        \li \l{Setting Bindings}
         \li \l{Connecting Components to Signals}
     \endlist