4 files changed, 146 insertions, 0 deletions
diff --git a/examples/qml/tutorials/extending-qml/chapter2-methods/app.qml b/examples/qml/tutorials/extending-qml/chapter2-methods/app.qml
new file mode 100644
index 000000000..d9477e253
--- /dev/null
+++ b/examples/qml/tutorials/extending-qml/chapter2-methods/app.qml
@@ -0,0 +1,32 @@
+// Copyright (C) 2016 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import Charts
+import QtQuick
+
+Item {
+    width: 300; height: 200
+
+    PieChart {
+        id: aPieChart
+        anchors.centerIn: parent
+        width: 100; height: 100
+        color: "red"
+
+        onChartCleared: console.log("The chart has been cleared")
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: aPieChart.clearChart()
+    }
+
+    Text {
+        anchors {
+            bottom: parent.bottom;
+            horizontalCenter: parent.horizontalCenter;
+            bottomMargin: 20
+        }
+        text: "Click anywhere to clear the chart"
+    }
+}
diff --git a/examples/qml/tutorials/extending-qml/chapter2-methods/chapter2-methods.pyproject b/examples/qml/tutorials/extending-qml/chapter2-methods/chapter2-methods.pyproject
new file mode 100644
index 000000000..cdf33be7f
--- /dev/null
+++ b/examples/qml/tutorials/extending-qml/chapter2-methods/chapter2-methods.pyproject
@@ -0,0 +1,3 @@
+{
+    "files": ["methods.py", "app.qml"]
+}
diff --git a/examples/qml/tutorials/extending-qml/chapter2-methods/doc/chapter2-methods.rst b/examples/qml/tutorials/extending-qml/chapter2-methods/doc/chapter2-methods.rst
new file mode 100644
index 000000000..245d0ddb2
--- /dev/null
+++ b/examples/qml/tutorials/extending-qml/chapter2-methods/doc/chapter2-methods.rst
@@ -0,0 +1,36 @@
+.. _qml-chapter2-methods:
+
+Extending QML - Connecting to C++ Methods and Signals
+=====================================================
+
+This is the second of a series of 6 examples forming a tutorial about extending
+QML with Python.
+
+Suppose we want ``PieChart`` to have a ``clearChart()`` method that erases the
+chart and then emits a ``chartCleared`` signal. Our ``app.qml`` would be able
+to call ``clearChart()`` and receive ``chartCleared()`` signals like this:
+
+.. literalinclude:: app.qml
+    :lineno-start: 4
+    :lines: 4-32
+
+To do this, we add a ``clearChart()``  method and a ``chartCleared()``  signal
+to our C++ class:
+
+.. literalinclude:: methods.py
+    :lineno-start: 54
+    :lines: 54-58
+
+The use of the ``Slot`` decorator makes the ``clearChart()`` method available
+to the Qt Meta-Object system, and in turn, to QML. The method simply changes
+the color to ``Qt::transparent``, repaints the chart, then emits the
+``chartCleared()`` signal:
+
+.. literalinclude:: methods.py
+    :lineno-start: 21
+    :lines: 21-24
+
+Now when we run the application and click the window, the pie chart disappears,
+and the application outputs::
+
+    qml: The chart has been cleared
diff --git a/examples/qml/tutorials/extending-qml/chapter2-methods/methods.py b/examples/qml/tutorials/extending-qml/chapter2-methods/methods.py
new file mode 100644
index 000000000..d455c317b
--- /dev/null
+++ b/examples/qml/tutorials/extending-qml/chapter2-methods/methods.py
@@ -0,0 +1,75 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+"""PySide6 port of the qml/tutorials/extending-qml/chapter2-methods example from Qt v5.x"""
+
+import os
+from pathlib import Path
+import sys
+
+from PySide6.QtCore import Property, Signal, Slot, Qt, QUrl
+from PySide6.QtGui import QGuiApplication, QPen, QPainter, QColor
+from PySide6.QtQml import QmlElement
+from PySide6.QtQuick import QQuickPaintedItem, QQuickView
+
+# To be used on the @QmlElement decorator
+# (QML_IMPORT_MINOR_VERSION is optional)
+QML_IMPORT_NAME = "Charts"
+QML_IMPORT_MAJOR_VERSION = 1
+
+
+@QmlElement
+class PieChart(QQuickPaintedItem):
+
+    chartCleared = Signal()
+    nameChanged = Signal()
+
+    def __init__(self, parent=None):
+        QQuickPaintedItem.__init__(self, parent)
+        self._name = u''
+        self._color = QColor()
+
+    def paint(self, painter):
+        pen = QPen(self.color, 2)
+        painter.setPen(pen)
+        painter.setRenderHints(QPainter.Antialiasing, True)
+        painter.drawPie(self.boundingRect().adjusted(1, 1, -1, -1), 90 * 16, 290 * 16)
+
+    @Property(QColor, final=True)
+    def color(self):
+        return self._color
+
+    @color.setter
+    def color(self, value):
+        self._color = value
+
+    @Property(str, notify=nameChanged, final=True)
+    def name(self):
+        return self._name
+
+    @name.setter
+    def name(self, value):
+        self._name = value
+
+    @Slot()  # This should be something like @Invokable
+    def clearChart(self):
+        self.color = Qt.transparent
+        self.update()
+        self.chartCleared.emit()
+
+
+if __name__ == '__main__':
+    app = QGuiApplication(sys.argv)
+
+    view = QQuickView()
+    view.setResizeMode(QQuickView.SizeRootObjectToView)
+    qml_file = os.fspath(Path(__file__).resolve().parent / 'app.qml')
+    view.setSource(QUrl.fromLocalFile(qml_file))
+    if view.status() == QQuickView.Error:
+        sys.exit(-1)
+    view.show()
+    res = app.exec()
+    # Deleting the view before it goes out of scope is required to make sure all child QML instances
+    # are destroyed in the correct order.
+    del view
+    sys.exit(res)