1 files changed, 109 insertions, 0 deletions
diff --git a/src/quick/doc/src/qtquick-how-tos.qdoc b/src/quick/doc/src/qtquick-how-tos.qdoc
new file mode 100644
index 0000000000..c030b071e2
--- /dev/null
+++ b/src/quick/doc/src/qtquick-how-tos.qdoc
@@ -0,0 +1,109 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page qtquick-how-tos.html
+    \title Qt Quick How-tos
+
+    This page aims to provide an easily discoverable, useful reference that
+    shows the simplest and best way of performing specific tasks in Qt Quick.
+    Each solution provides QML and/or C++ code snippets where applicable, and
+    every snippet is automatically tested by Qt to ensure they remain
+    functional.
+
+    How do I:
+
+    \list
+    \li \l {Call a C++ function from QML when a Button is clicked}
+    \li \l {See which item has active focus}
+    \li \l {Create a time picker like Android's TimePickerDialog}
+    \li \l {Use a C++ enum in JavaScript}
+    \endlist
+
+
+    \section1 Call a C++ function from QML when a Button is clicked
+
+    Assuming that the C++ type should be globally available to the QML
+    files in the application, the simplest way is to make it a QML singleton
+    with \l QML_SINGLETON. For example, in the header file, \c backend.h:
+
+    \snippet how-tos/how-to-cpp-button/backend.h file
+
+    \c backend.cpp:
+
+    \snippet how-tos/how-to-cpp-button/backend.cpp file
+
+    You can then call that function from any QML file:
+
+    \snippet how-tos/how-to-cpp-button/Main.qml file
+
+    If the C++ type only needs to be available to a small set of QML files,
+    consider using \l QML_ELEMENT. For more ways of exposing C++ types to QML,
+    see \l {Choosing the Correct Integration Method Between C++ and QML}.
+
+    This example assumes that the \c Backend type is available in a QML module.
+    With CMake, this is done via \l qt_add_qml_module. For an example that
+    demonstrates this in detail, see \l {Building a QML application}.
+
+
+    \section1 See which item has active focus
+
+    Write a \l {Property change signal handlers}{property change signal handler}
+    for the window's \l {Window::}{activeFocusItem} property:
+
+    \snippet how-tos/how-to-qml/active-focus-debugging/ActiveFocusDebuggingMain.qml file
+
+    This will print the item which currently has active focus to the console.
+    To ensure that the output is useful, give each item a descriptive
+    \l {QtObject::}{objectName}.
+
+
+    \section1 Create a time picker like Android's TimePickerDialog
+
+    We've prepared an example that consists of a few
+    \l {https://code.qt.io/cgit/qt/qtdeclarative.git/tree/tests/auto/quick/doc/how-tos/how-to-qml/time-picker/TimeComponentLabel.qml?h=\QtMajorVersion.\QtMinorVersion}
+    {QML files} which demonstrate how to do this. They can be used
+    in your application in the following manner:
+
+    \snippet how-tos/how-to-qml/time-picker/TimePickerMain.qml file
+
+    \table
+        \row
+            \li \image how-to-time-picker-light.png
+                \caption TimePickerDialog in its light theme.
+            \li \image how-to-time-picker-dark.png
+                \caption TimePickerDialog in its dark theme.
+    \endtable
+
+
+    \section1 Use a C++ enum in JavaScript
+
+    To expose a C++ enum to JavaScript (that is, \l QJSEngine, not
+    \l QQmlEngine or \l QQmlApplicationEngine), use
+    \l QJSEngine::newQMetaObject():
+
+    \quotefromfile how-tos/how-to-cpp-enum-js/tst_how-to-cpp-enum-js.cpp
+    \skipto QJSEngine engine
+    \printuntil setProperty
+    \skipto Backend backend
+    \printuntil backend.load()
+
+    The enum can then be used from JavaScript:
+
+    \snippet how-tos/how-to-cpp-enum-js/script.mjs file
+
+    When using \l QQmlEngine or \l QQmlApplicationEngine, there are easier
+    options; see
+    \l {Choosing the Correct Integration Method Between C++ and QML}
+    for more information.
+
+    \c backend.h:
+
+    \snippet how-tos/how-to-cpp-enum-js/backend.h file
+
+    \c backend.cpp:
+
+    \snippet how-tos/how-to-cpp-enum-js/backend.cpp file
+
+    For more information, see \l {QObject Integration}.
+*/