QmlDesigner: Update the Designer-Developer workflow doc

This patch updates the Designer-Developer workflow document.
Removes the old image and add new images to support the current
workflow.

Fixes: QDS-10916
Change-Id: I3e448b36bd634da4fede76343567ebd2282faffd
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>
Reviewed-by: Mats Honkamaa <mats.honkamaa@qt.io>

doc/qtdesignstudio/src/developers/studio-designer-developer-workflow.qdoc

@@ -31,76 +31,58 @@
     \e CMakeLists.txt file as the project file. This enables you to share
     your project as a fully working C++ application with developers.
 
-    If you add or remove QML files in \QDS, you have to regenerate the
-    \e CMakeLists.txt project configuration file by selecting \uicontrol File
-    > \uicontrol {Export Project} > \uicontrol {Generate CMake Build Files}.
-
     If you use Git, you can clone an example project
     \l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/playground/AuroraCluster0}
     {here}.
 
-    The following image shows the example project structure and contents in the
+    \section1 Exporting a \QDS Project
-    \l Projects and \l {File System} views in \QDS and Qt Creator:
 
-    \image studio-project-structure.png "\QDS project in \QDS and Qt Creator views"
+    \QDS uses a different project format than Qt Creator. \QDS does not build the project,
-
+    it uses a pre-compiled \l{QML runtime} to run the project. To export a \QDS project for the
-    \section1 Converting Project Structure for CMake
+    Qt Creator, follow the process:
-
-    \QDS can generate \e CMakeLists.txt and other related files to use with
-    Qt Creator and to compile into an executable application but only if the
-    project has a certain folder structure. If you have a \QDS QML project that
-    doesn't have the CMake configuration, follow these steps to convert its
-    file structure to the correct format.
 
     \list 1
-    \li Create a folder named \e content in the project's folder. This folder contains the
+        \li Open the project you want to export in \QDS.
-    application's main module.
+        \li Select \uicontrol {File} > \uicontrol {Export Project} > \uicontrol {Generate CMake Build Files}.
-    \li Move all QML files of the project's main module to the \e content folder. If your project
+            \image studio-project-export.webp "Export the \QDS project for Qt Creator"
-    has multiple modules, place the other modules in the \e imports or
+
-    \e asset_imports folder.
+        \li Select \uicontrol {Details} to access the \l {Advanced Options}.
-    \li If your project's main module has resource folders such as \e fonts or \e {images}, move
+            \image studio-project-export-advanced.webp "Access Advanced Options in the project exporter"
-    them to the \e content folder.
+
-    \li Create a folder named \e src in the project's folder. This folder contains C++ code for
+            \note The project exporter has default settings selected. This works better if the project
-    compiling the project.
+             is combined with an existing Qt project.
-    \li If your project doesn't have an \e imports folder for other QML modules, create it
+
-    now even if you do not have other modules. The CMake file generator expects it.
+        \li Select all the options here. This allows to export the
-    \li In the project's \e .qmlproject file:
+            complete project. So, it can be compiled as a stand-alone application.
-        \list
+            \image studio-project-export-advanced-options.webp "Select all the options in the project exporter"
-        \li Add \e "." in importPaths. For example:
+
-        \code
+            \note If you copy this export on top of the existing Qt Creator project
-            importPaths: [ "imports", "asset_imports", "." ]
+                  it overwrites the existing project. Hence, the default selected options in
-        \endcode
+                  the exporter only exports the QML-specific items. You get a list of
-        \li Change mainFile to \e "content/App.qml":
+                  warnings at the bottom part of the exporter that denotes exactly which parts
-        \code
+                  of the project gets overwritten.
-            mainFile: "content/App.qml"
-        \endcode
     \endlist
-    \li In the \e content folder, create a file named \e App.qml and add the following content:
 
-        \qml
+    \section1 Using the Exported Project in Qt Creator
-        import QtQuick
-        import QtQuick.Window
-        import YourImportModuleHere
-        Window {
-            width: Constants.width
-            height: Constants.height
-            visible: true
-            title: "YourWindowTitleHere"
-            <YourMainQmlClassHere> {
-            }
-        }
-        \endqml
 
-    \li In \e{App.qml}, modify imported modules, window dimensions, window title, and main QML
+    After exporting the project from the \QDS, you have to open it from Qt Creator.
-    class appropriately.
 
-    \note This template assumes that your project has a module named \e YourImportModuleHere in
+    If you have used any version before \QDS 4.0 to create the project, manually include this code
-    the \a imports folder containing a singleton class named \a Constants.
+    in the \l {CMakeLists.txt} file so the exported project works in Qt Creator.
-    This isn't mandatory.
 
-    \li Generate CMake files and C++ source files that are used to compile the application into
+    \code
-    an executable file by selecting \uicontrol File > \uicontrol {Export Project} >
+        set(BUILD_QDS_COMPONENTS ON CACHE BOOL "Build design studio components")
-    \uicontrol {Generate CMake Build Files}.
+
+        set(CMAKE_INCLUDE_CURRENT_DIR ON)
+
+        if (${BUILD_QDS_COMPONENTS})
+            include(${CMAKE_CURRENT_SOURCE_DIR}/qmlcomponents)
+        endif ()
+
+        include(${CMAKE_CURRENT_SOURCE_DIR}/qmlmodules)
+    \endcode
+
+    \note If you have created the project with the \QDS version 4.0 or above, you already have this code in
+          \l {CMakeLists.txt} by default.
 
-    \endlist
 */