Doc: Add CMake sections to 'Creating C++ Plugins for QML' page

- Revise grammar
- Fix so that example project can be built from the command line using
  CMake
- Add tabs on example page

Pick-to: 6.3
Task-number: QTBUG-102330
Change-Id: Ic6bdcadec66850f5e811dcaac23a8cb59a6c3f94
Reviewed-by: Kai Koehne <kai.koehne@qt.io>

2 files changed, 36 insertions, 7 deletions

diff --git a/examples/qml/qmlextensionplugins/CMakeLists.txt b/examples/qml/qmlextensionplugins/CMakeLists.txt
index d7eafd7f16..5910a544b8 100644
--- a/examples/qml/qmlextensionplugins/CMakeLists.txt
+++ b/examples/qml/qmlextensionplugins/CMakeLists.txt
@@ -11,6 +11,7 @@ set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/qml/qmlextensionplugins/imports/T
 
 find_package(Qt6 REQUIRED COMPONENTS Core Gui Qml)
 
+#![0]
 set(qml_files
     imports/TimeExample/Clock.qml
 )
@@ -21,20 +22,23 @@ set(images
     imports/TimeExample/hour.png
     imports/TimeExample/minute.png
 )
+#![0]
 
 foreach(file IN LISTS qml_files images)
     get_filename_component(filename ${file} NAME)
     set_source_files_properties(${file} PROPERTIES QT_RESOURCE_ALIAS ${filename})
 endforeach()
 
-qt6_add_qml_module(qmlqtimeexample
-    OUTPUT_DIRECTORY TimeExample
+#![1]
+qt_add_qml_module(qmlqtimeexample
+    OUTPUT_DIRECTORY imports/TimeExample
     VERSION 1.0
     URI "TimeExample"
     SOURCES timemodel.cpp timemodel.h
     QML_FILES ${qml_files}
     RESOURCES ${images}
 )
+#![1]
 
 set_target_properties(qmlqtimeexample PROPERTIES
     WIN32_EXECUTABLE TRUE
diff --git a/examples/qml/qmlextensionplugins/doc/src/qmlpluginex.qdoc b/examples/qml/qmlextensionplugins/doc/src/qmlpluginex.qdoc
index cbc7de2936..be53080ae8 100644
--- a/examples/qml/qmlextensionplugins/doc/src/qmlpluginex.qdoc
+++ b/examples/qml/qmlextensionplugins/doc/src/qmlpluginex.qdoc
@@ -34,9 +34,34 @@
     \image qml-plugins-example.png
 
     To run this example, use the following commands on the prompt:
-    \code
-     > qmake
-     > make
-     > qml -I imports plugins.qml
-    \endcode
+
+    \if defined(onlinedocs)
+        \tab {build-qt-app}{tab-cmake}{CMake}{checked}
+        \tab {build-qt-app}{tab-qmake}{qmake}{}
+        \tabcontent {tab-cmake}
+    \else
+        \section1 Using CMake
+    \endif
+        \badcode
+            cmake -DCMAKE_PREFIX_PATH=path/to/Qt/6.4.0/your_platform -S <source-dir> -B <build-dir> -G Ninja
+            cd path/to/build/dir
+            ninja
+            qml -I imports plugins.qml
+        \endcode
+        For more information about building on the command line using CMake,
+        see \l {Building projects on the command line}.
+    \if defined(onlinedocs)
+        \endtabcontent
+        \tabcontent {tab-qmake}
+    \else
+        \section1 Using qmake
+    \endif
+        \badcode
+            qmake
+            make
+            qml -I imports plugins.qml
+        \endcode
+    \if defined(onlinedocs)
+        \endtabcontent
+    \endif
 */