Doc: Update the Qt Quick Application tutorial

- Remove references to Qt Quick Designer plugin
- Remove obsolete screenshots
- Promote code completion and Qt Quick Toolbars
- Describe using wizards to create custom QML types
- Describe adding resources to CMakeLists.txt files

Task-number: QTCREATORBUG-26483
Change-Id: I804870b962e0d1daa6ba7c988425f14ad87fe888
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>

doc/qtcreator/examples/transitions/CMakeLists.txt

@@ -1,59 +1,24 @@
-cmake_minimum_required(VERSION 3.14)
+cmake_minimum_required(VERSION 3.16)
 
 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(Qt6 6.2 COMPONENTS Quick REQUIRED)
-find_package(Qt${QT_VERSION_MAJOR} COMPONENTS Core Quick REQUIRED)
 
-set(PROJECT_SOURCES
+qt_add_executable(transitionsexample
-        main.cpp
+    main.cpp
-        qml.qrc
 )
 
-if(${QT_VERSION_MAJOR} GREATER_EQUAL 6)
+qt_add_qml_module(transitionsexample
-    qt_add_executable(transitions
+    URI transitions
-        MANUAL_FINALIZATION
+    VERSION 1.0
-        ${PROJECT_SOURCES}
+    QML_FILES main.qml Page.qml
-    )
+    RESOURCES qt-logo.png
-# 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)
+target_compile_definitions(transitionsexample
-    qt_import_qml_plugins(transitions)
+    PRIVATE $<$<OR:$<CONFIG:Debug>,$<CONFIG:RelWithDebInfo>>:QT_QML_DEBUG>)
-    qt_finalize_executable(transitions)
+target_link_libraries(transitionsexample
-endif()
+    PRIVATE Qt6::Quick)

doc/qtcreator/examples/transitions/Page.qml

@@ -48,19 +48,18 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Window 2.15
 
 Rectangle {
     id: page
-    state: "State1"
+    anchors.fill: parent
+    color: "#ffffff"
 
     Image {
         id: icon
         x: 20
         y: 20
-        source: "images/qt-logo.png"
+        source: "qt-logo.png"
-        fillMode: Image.PreserveAspectFit
     }
 
     Rectangle {
@@ -88,7 +87,6 @@ Rectangle {
         }
     }
 
-
     Rectangle {
         id: middleRightRect
         width: 55
@@ -112,7 +110,6 @@ Rectangle {
         }
     }
 
-
     Rectangle {
         id: bottomLeftRect
         width: 55
@@ -160,6 +157,7 @@ Rectangle {
             }
         }
     ]
+
     transitions: [
         Transition {
             id: toState1
@@ -202,7 +200,7 @@ Rectangle {
                     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]
+                        easing.type: Easing.OutBounce
                         duration: 1006
                     }
                 }
@@ -215,7 +213,7 @@ Rectangle {
                     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]
+                        easing.type: Easing.OutBounce
                         duration: 1006
                     }
                 }
@@ -234,7 +232,7 @@ Rectangle {
                     PropertyAnimation {
                         target: icon
                         property: "y"
-                        easing.bezierCurve: [0.455,0.03,0.515,0.955,1,1]
+                        easing.type: Easing.InOutQuad
                         duration: 2000
                     }
                 }
@@ -247,7 +245,7 @@ Rectangle {
                     PropertyAnimation {
                         target: icon
                         property: "x"
-                        easing.bezierCurve: [0.455,0.03,0.515,0.955,1,1]
+                        easing.type: Easing.InOutQuad
                         duration: 2000
                     }
                 }
@@ -257,10 +255,3 @@ Rectangle {
         }
     ]
 }
-
-/*##^##
-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}
-}
-##^##*/

doc/qtcreator/examples/transitions/main.cpp

@@ -54,19 +54,10 @@
 
 int main(int argc, char *argv[])
 {
-    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);
 
     QQmlApplicationEngine engine;
-    const QUrl url(QStringLiteral("qrc:/main.qml"));
+    const QUrl url(u"qrc:/transitions/main.qml"_qs);
     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
         &app, [url](QObject *obj, const QUrl &objUrl) {
             if (!obj && url == objUrl)

doc/qtcreator/examples/transitions/main.qml

@@ -48,24 +48,16 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Window 2.15
 
 Window {
     width: 640
     height: 480
     visible: true
-    title: qsTr("Hello World")
+    title: qsTr("Transitions")
 
     Page {
         id: page
         anchors.fill: parent
-        color: "#ffffff"
     }
 }
-
-/*##^##
-Designer {
-    D{i:0;formeditorZoom:0.75}
-}
-##^##*/

doc/qtcreator/examples/transitions/qml.qrc

@@ -1,7 +0,0 @@
-<RCC>
-    <qresource prefix="/">
-        <file>main.qml</file>
-        <file>images/qt-logo.png</file>
-        <file>Page.qml</file>
-    </qresource>
-</RCC>

doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc

@@ -30,33 +30,29 @@
 
     \title Creating a Qt Quick Application
 
-    This tutorial uses preset components and illustrates basic concepts of
+    This tutorial illustrates basic concepts of \l{Qt Quick}. For more
-    \l{Qt Quick}.
+    information about the UI choices you have, see \l{User Interfaces}.
-    For more information about the UI choices you have, see \l{User Interfaces}.
 
-    This tutorial describes how to use \QC to implement states and
+    This tutorial describes how to use \QC to implement \l{Qt Quick States}
-    transitions. We create an application that displays a Qt logo that moves
+    {states} and \l{Animation and Transitions in Qt Quick}{transitions}
-    between three rectangles on the page when you click them.
+    when using Qt 6 as the minimum Qt version and CMake as the build system.
 
-    \image qmldesigner-tutorial.png "States and transitions example"
+    We use the \l{Working in Edit Mode}{Edit mode} to create an application
+    that moves a Qt logo between three rectangles when you click them.
 
-    For more information about developing Qt Quick applications in the Design
+    \image qtquick-tutorial.gif "Transitions example"
-    mode, see \l{Developing Qt Quick Applications}.
 
-    For examples of using Qt Quick Controls, see \l{Qt Quick Controls Examples}.
+    For more examples, see \l{Qt Quick Examples and Tutorials}.
+
+    You can develop Qt Quick applications also in \QDS. For more information,
+    see \l{Qt Design Studio Manual}.
 
     \include qtquick-tutorial-create-empty-project.qdocinc qtquick empty application
 
     \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
+    \uicontrol Edit mode.
-    the \l {Form Editor} view.
 
-    \note The visibility of Design views depends on the selected workspace.
+    \section1 Deploying Applications
-    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
 
     The main view of the application displays a Qt logo inside a rectangle in
     the top left corner of the view and two empty rectangles.
@@ -64,256 +60,122 @@
     We use the \e qt-logo.png image in this tutorial, but you can also use
     any other image or a component, instead.
 
+    For the image to appear when you run the application, you must specify it
+    as a resource in the \c RESOURCES section of \e CMakeLists.txt file that
+    the wizard created for you:
+
+    \quotefromfile transitions/CMakeLists.txt
+    \skipto qt_add_qml_module
+    \printuntil )
+
+    \section1 Creating Custom QML Types
+
+    Because the \l Window QML type requires states to be added into child
+    components, we use the wizard to create a custom QML type called
+    \e Page that we will refer to from \e main.qml.
+
+    To create a custom QML type:
+
     \list 1
-
+        \li Select \uicontrol File > \uicontrol {New File or Project} >
-        \li In \uicontrol Library > \uicontrol Components >
+            \uicontrol {Files and Classes} > \uicontrol Qt >
-            \uicontrol {Default Components} > \uicontrol Basic, select
+            \uicontrol {QML File (Qt Quick 2)}.
-            \uicontrol Rectangle and drag and drop it to \e Window in
+        \li Select \uicontrol Choose to open the \uicontrol Location dialog.
-            \uicontrol Navigator.
+        \li In the \uicontrol {File name} field, enter a name for the custom
-
+            QML type. In this example, we call the type \e Page.
-        \li Select the \uicontrol Rectangle instance in \l Navigator, and enter
+        \li Select \uicontrol Next to open the \uicontrol {Project Management}
-            \e page in the \uicontrol ID field in \l Properties.
+            dialog.
-
+        \li Select \uicontrol Finish to create \e Page.qml.
-        \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.
-
-        \li Drag and drop the image from \uicontrol Assets to \e page in
-            \uicontrol Navigator. \QC automatically generates an instance
-            of the \l{Images}{Image} component for you, with the image as
-            the source image.
-
-            \image qmldesigner-tutorial-user-icon.png "Image properties"
-
-        \li In \uicontrol Properties, edit the properties of the Image
-            component instance:
-
-        \list a
-
-            \li In the \uicontrol ID field, enter \e icon.
-
-            \li In the \uicontrol Position field, set \uicontrol X and
-                \uicontrol Y to \e 20.
-
-        \endlist
-
-        \li In \uicontrol Library > \uicontrol Components >
-            \uicontrol {Default Components} > \uicontrol Basic, select
-            \uicontrol Rectangle and drag and drop it to \e page in
-            \uicontrol Navigator.
-
-            \image qmldesigner-tutorial-topleftrect.png "Rectangle properties"
-
-        \li In \uicontrol Properties, edit the properties of the Rectangle
-            component instance:
-
-        \list a
-
-            \li In the \uicontrol ID field, enter \e topLeftRect.
-
-            \li In the \uicontrol Size field, set \uicontrol W and
-                \uicontrol H to values that match the image size
-                (\e 55 and \e 41).
-
-            \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 background.
-
-            \li Click \uicontrol {Layout}, and then click the
-                \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 both anchors.
-
-                \image qmldesigner-tutorial-topleftrect-layout.png "Anchor margins"
-
-        \endlist
-
-        \li Drag and drop a \uicontrol {Mouse Area} component from the
-            \uicontrol Library to \e topLeftRect in \uicontrol Navigator.
-
-        \li Click \uicontrol {Layout}, and then click the
-            \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
-            twice (by pressing \key {Ctrl+V}). \QC renames the new instances
-            of the component \e topLeftRect1 and \e topLeftRect2.
-
-        \li  Select \e topLeftRect1 and edit its properties:
-
-        \list a
-
-            \li In the \uicontrol ID field, enter \e middleRightRect.
-
-            \li In \uicontrol {Layout}, select the
-                \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 20 for the right
-                anchor and \e 0 for the vertical center anchor.
-
-        \endlist
-
-        \li Select \e topLeftRect2 and edit its properties:
-
-        \list a
-
-            \li In the \uicontrol ID field, enter \e bottomLeftRect.
-
-            \li In \uicontrol {Layout}, select the
-                \inlineimage icons/anchor-bottom.png
-                (\uicontrol Bottom) and \inlineimage icons/anchor-left.png
-                (\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 both anchors.
-
-        \endlist
-
-        \li Press \key {Ctrl+S} to save the changes.
-
     \endlist
 
-    To check your code, you can view your \e {main.qml} file in the
+    \QC opens \e Page.qml in the \uicontrol Edit mode. It contains a root item
-    \uicontrol {Text Editor} and compare it with the \e {main.qml}
+    of the type \l Item that we replace with a \l Rectangle type. We give the
-    example file.
+    type the ID \e page, anchor it to the parent item on all sides, and set
+    its color to white:
 
-    The UI design is now ready.
+    \quotefromfile transitions/Page.qml
+    \skipto import
+    \printuntil color
 
-    \image qmldesigner-tutorial-ui-ready.png "Transitions UI"
+    Because we develop with Qt 6, where version numbers are not used with
+    modules, we remove the version number from the import statement.
 
-    For more information about the views you used, see:
+    When you start typing the QML type name, \QC suggests available types
+    and properties to \l{Completing Code}{complete the code}.
 
-    \list
+    Select the light bulb icon \inlineimage refactormarker.png
-        \li \l {Form Editor}
+    next to the type name to open the \l{Editing Rectangles}
-        \li \l Library
+    {Qt Quick Toolbar for rectangles}. You can use it to specify
-        \li \l Navigator
+    rectangle properties, such as color, transparency, and gradients.
-        \li \l Properties
+
-    \endlist
+    \image qml-toolbar-rectangle.png "Qt Quick Toolbar for rectangles"
+
+    Next, we add an \l Image type with \e qt-logo.png as the source. We
+    position the image in the top-left corner of the rectangle:
+
+    \printuntil }
+
+    You can use the \l{Previewing Images}{Qt Quick Toolbar for images} to
+    specify image properties, such as source file and fill mode.
+
+    \image qml-toolbar-image.png "Logo visible in Qt Quick Toolbar for images"
+
+    We now create the rectangles that the image will move between. Their size
+    should match the image size and they should be transparent, so that the
+    image is visible. We set the border color to light gray to make the
+    rectangles visible:
+
+    \printuntil border.color
+
+    We anchor the rectangles to their parent to position them in its
+    top-left and and bottom-left corners, as well as the vertical center
+    of its right edge. The following code snippet anchors a rectangle to
+    the top-left corner of its parent:
+
+    \printuntil anchors.topMargin
+
+    We add a \l MouseArea type to make the rectangle clickable by users:
+
+    \printuntil anchors.fill
+
+    To check your code, you can compare it with the \e {Page.qml} example file.
 
     Next, we will make the image move between the rectangles when users click
-    them by \l{Adding States}{adding states} and by connecting mouse clicks
+    them, by adding states and by connecting mouse clicks to state changes.
-    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 to the Page component, where we change the values of the \c x and
-    \c y properties of
+    \c y properties of \e icon to match those of the middle right and top left
-    \e icon to match those of the middle right and top left rectangles. Then,
+    rectangles. To make sure that the image is displayed within the rectangle
-    we connect the \c onClicked signals of the mouse areas to the state changes.
+    when the view is scaled on different sizes of screens, we \e bind the values
+    of the \c x and \c y properties of \e icon to those of the rectangles:
 
-    To make sure that the image is displayed within the rectangle when the view
+    \dots
-    is scaled on different sizes of screens, we bind the values of the \c x and
+    \skipto states:
-    \c y properties of \e icon to those of the rectangles.
+    \printuntil ]
 
-    \list 1
+    Then, we connect the \c onClicked signals of the mouse areas to the state
-        \li Right-click \e page in \uicontrol Navigator, and select
+    changes:
-            \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.
-        \li Select \inlineimage icons/action-icon.png
-            to open the \uicontrol Actions menu, and then select
-            \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 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.
-            \image qmldesigner-tutorial-connections.png "Connections tab"
-        \li Double-click the value in the \uicontrol Target column, and select
-            \e mouseArea in the list.
-        \li In the \uicontrol {Signal Handler} column, select \e onClicked.
-        \li In the \uicontrol Action column, select \e {page.state = 'State1'}.
-        \li Create two more connections to connect the \c onClicked signal of
-            \uicontrol mouseArea1 to State2, and that of \uicontrol mouseArea2
-            to State3.
-        \li Press \key {Ctrl+R} to run the application.
-    \endlist
 
-    Click the rectangles to move the Qt logo from one rectangle to another.
+    \quotefromfile transitions/Page.qml
+    \skipto Connections {
+    \printuntil }
 
-    If you develop with Qt 6, you must specify the connections as
+    Because we develop with Qt 6, we must specify the connections as functions.
-    functions. This is currently not supported in \uicontrol {Connections},
-    so you must do it in \uicontrol {Text Editor}. For example:
 
-    \code
+    \section1 Adding Page to the Main View
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
 
-        Connections {
+    We now open \e main.qml for editing and add an instance of the Page custom
-            target: mouseArea
+    component to it:
-            function onClicked()
-            {
-                page.state = "State1"
-            }
-        }
-    }
-    \endcode
 
-    For more information about the views you used, see:
+    \quotefromfile transitions/main.qml
+    \skipto import
+    \printuntil /^\ {0}\}/
 
-    \list
+    Press \key {Ctrl+R} to run the application, and click the rectangles to
-        \li \l States
+    move the Qt logo from one rectangle to another.
-        \li \l{Setting Bindings}
-        \li \l{Connecting Components to Signals}
-    \endlist
 
     \section1 Animating Transitions
 
@@ -321,56 +183,29 @@
     the image bounces back when it moves to \e middleRightRect and eases into
     \e bottomLeftRect.
 
-    \list 1
+    We specify transitions for switching from each state to the other two
-        \li In the \uicontrol {Transition Editor} view, click the
+    states:
-            \inlineimage plus.png
-            button to create a new transition.
-        \li Click the \inlineimage animation.png
-            button to specify transitions for switching to each state.
-            \image qmldesigner-tutorial-transition-settings.png "Transition Settings dialog"
-        \li In the \uicontrol {Transition ID} field, enter \e toState1.
-        \li In the \uicontrol From field, select \e State2 and \e State3.
-        \li In the \uicontrol To field, select \e State1.
-        \li Click \inlineimage plus.png
-            to add transitions for switching to \e State2 and \e State3, with
-            the IDs \e toState2 and \e toState3.
-        \li Select \uicontrol Close to save the settings and return to
-            \uicontrol {Transition Editor}.
-        \li Select \e toState2 in the list of transitions.
-            \image qmldesigner-tutorial-transitions.png "Transition Editor view"
-        \li Pull the right edge of the blue bar next to \e icon to frame 1000
-            to specify that the x and y coordinates of the image change
-            linearly over a duration of 1 second.
-        \li Select the \uicontrol x property, and click
-            \inlineimage curve_editor.png
-            to change the easing curve type from linear to easeOutBounce
-            (\c{[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]})
-            in \uicontrol {Easing Curve Editor}.
-            \image qmldesigner-tutorial-easing-curves.png "Easing Curve Editor"
-        \li Select the \uicontrol y property and set the easing curve for it,
-            too.
-        \li Close \uicontrol {Easing Curve Editor} to return to
-            \uicontrol {Transition Editor}, and select \e toState3
-            in the list of transitions.
-        \li Pull the right edge of the blue bar next to \e icon to frame 2000
-            to specify that the x and y coordinates of the image change
-            linearly over a duration of 2 seconds.
-        \li In \uicontrol {Easing Curve Editor}, change the easing curve type
-            from linear to easeInOutQuad (\c{[0.455,0.03,0.515,0.955,1,1]}).
-        \li Select \e toState1 in the list of transitions, and pull the blue
-            bar to frame 200 to specify that the x and y coordinates of the
-            image change linearly over a duration of 200 milliseconds.
-        \li Press \key {Ctrl+R} to run the application.
-    \endlist
 
-        For more information about the views you used, see:
+    \quotefromfile transitions/Page.qml
+    \skipto transitions:
+    \printuntil },
 
-    \list
+    We change the easing curve type for transitions to \e State2 from linear to
-        \li \l{Editing Easing Curves}
+    \c Easing.OutBounce to create the bounce effect:
-        \li \l{Transition Editor}
-    \endlist
 
-    Click the rectangles to view the animated transitions.
+    \printuntil },
+
+    \note You can use the \l{Previewing Animation}
+    {Qt Quick Toolbar for animation} to specify the
+    easing curve type and animation duration.
+
+    \image qml-toolbar-animation.png "Qt Quick Toolbar for animation"
+
+    Then, we change the easing curve type for transitions to \e State2 from
+    linear to \c Easing.InOutQuad to create the easing effect:
+
+    \printuntil /^\ {0}\}/
+
+    Press \key {Ctrl+R} to run the application, and click the rectangles to
+    view the animated transitions.
 */

doc/qtcreator/src/qtquick/creator-only/qtquick-tutorial-create-empty-project.qdocinc

@@ -46,16 +46,18 @@
         \li Select \uicontrol Next (or \uicontrol Continue on \macos) to open
             the \uicontrol {Define Build System} dialog.
 
-        \li In the \uicontrol {Build system} field, select the build system to
+        \li In the \uicontrol {Build system} field, select \l {Setting Up CMake}
-            use for building and running the project: \l qmake,
+            {CMake} as the build system to use for building and running the
-            \l {Setting Up CMake}{CMake}, or \l {Setting Up Qbs}{Qbs}.
+            project.
+
+            \note If you select \l qmake, the instructions for configuring the
+            project won't apply.
 
         \li Select \uicontrol Next to open the
             \uicontrol {Define Project Details} dialog.
 
-        \li In the \uicontrol {Screen resolution} field, select the initial
+        \li In the \uicontrol {Minimal required Qt version} field, select
-            size of the UI. You can easily change the screen size later
+            Qt 6.2.
-            in \l Properties.
 
         \li Select \uicontrol Next to open the \uicontrol {Translation File}
             dialog.
@@ -63,9 +65,10 @@
         \li Select \uicontrol Next to use the default settings and to open
             the \uicontrol {Kit Selection} dialog.
 
-        \li Select \l{glossary-buildandrun-kit}{kits} for the platforms that
+        \li Select Qt 6.2 or later \l{glossary-buildandrun-kit}{kits} for the
-            you want to build the application for. To build applications for
+            platforms that you want to build the application for. To build
-            mobile devices, select kits for Android ARM and iPhone OS.
+            applications for mobile devices, select kits also for Android and
+            iOS.
 
             \note Kits are listed if they have been specified in \uicontrol
             Tools > \uicontrol Options > \uicontrol Kits (on Windows and Linux)
@@ -82,8 +85,7 @@
     \endlist
 
     For more information about the settings that you skipped and the other
-    templates available, see \l{Creating Qt Quick Applications}.
+    wizard templates available, see \l{Creating Qt Quick Applications}.
 
 //! [qtquick empty application]
 */
-Con