2 files changed, 53 insertions, 40 deletions
diff --git a/sources/pyside6/doc/tutorials/qmlintegration/main.py b/sources/pyside6/doc/tutorials/qmlintegration/main.py
index 5fc40ad36..0408313d3 100644
--- a/sources/pyside6/doc/tutorials/qmlintegration/main.py
+++ b/sources/pyside6/doc/tutorials/qmlintegration/main.py
@@ -1,6 +1,6 @@
 #############################################################################
 ##
-## Copyright (C) 2019 The Qt Company Ltd.
+## Copyright (C) 2021 The Qt Company Ltd.
 ## Contact: http://www.qt.io/licensing/
 ##
 ## This file is part of the Qt for Python examples of the Qt Toolkit.
@@ -39,32 +39,37 @@
 #############################################################################
 
 import sys
-import os
 from pathlib import Path
 
 from PySide6.QtCore import QObject, Slot
 from PySide6.QtGui import QGuiApplication
-from PySide6.QtQml import QQmlApplicationEngine
+from PySide6.QtQml import QQmlApplicationEngine, QmlElement
+from PySide6.QtQuickControls2 import QQuickStyle
 
-from style_rc import *
 
+# To be used on the @QmlElement decorator
+# (QML_IMPORT_MINOR_VERSION is optional)
+QML_IMPORT_NAME = "io.qt.textproperties"
+QML_IMPORT_MAJOR_VERSION = 1
 
+
+@QmlElement
 class Bridge(QObject):
 
     @Slot(str, result=str)
-    def getColor(self, color_name):
-        if color_name.lower() == "red":
+    def getColor(self, s):
+        if s.lower() == "red":
             return "#ef9a9a"
-        elif color_name.lower() == "green":
+        elif s.lower() == "green":
             return "#a5d6a7"
-        elif color_name.lower() == "blue":
+        elif s.lower() == "blue":
             return "#90caf9"
         else:
             return "white"
 
     @Slot(float, result=int)
     def getSize(self, s):
-        size = int(s * 42) # Maximum font size
+        size = int(s * 34)
         if size <= 0:
             return 1
         else:
@@ -94,19 +99,13 @@ class Bridge(QObject):
 
 if __name__ == '__main__':
     app = QGuiApplication(sys.argv)
+    QQuickStyle.setStyle("Material")
     engine = QQmlApplicationEngine()
 
-    # Instance of the Python object
-    bridge = Bridge()
-
-    # Expose the Python object to QML
-    context = engine.rootContext()
-    context.setContextProperty("con", bridge)
-
     # Get the path of the current directory, and then add the name
     # of the QML file, to load it.
-    qmlFile = Path(__file__).parent / 'view.qml'
-    engine.load(qmlFile.resolve())
+    qml_file = Path(__file__).parent / 'view.qml'
+    engine.load(qml_file)
 
     if not engine.rootObjects():
         sys.exit(-1)
diff --git a/sources/pyside6/doc/tutorials/qmlintegration/view.qml b/sources/pyside6/doc/tutorials/qmlintegration/view.qml
index 97968d691..de9715ee1 100644
--- a/sources/pyside6/doc/tutorials/qmlintegration/view.qml
+++ b/sources/pyside6/doc/tutorials/qmlintegration/view.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: http://www.qt.io/licensing/
 **
 ** This file is part of the Qt for Python examples of the Qt Toolkit.
@@ -40,16 +40,24 @@
 
 
 import QtQuick 2.0
-import QtQuick.Layouts 1.12
-import QtQuick.Controls 2.12
-import QtQuick.Window 2.12
-import QtQuick.Controls.Material 2.12
+import QtQuick.Layouts 1.11
+import QtQuick.Controls 2.1
+import QtQuick.Window 2.1
+import QtQuick.Controls.Material 2.1
+
+import io.qt.textproperties 1.0
 
 ApplicationWindow {
     id: page
     width: 800
     height: 400
     visible: true
+    Material.theme: Material.Dark
+    Material.accent: Material.Red
+
+    Bridge {
+        id: bridge
+    }
 
     GridLayout {
         id: grid
@@ -58,6 +66,7 @@ ApplicationWindow {
 
         ColumnLayout {
             spacing: 2
+            Layout.columnSpan: 1
             Layout.preferredWidth: 400
 
             Text {
@@ -72,40 +81,44 @@ ApplicationWindow {
 
             RadioButton {
                 id: italic
+                Layout.alignment: Qt.AlignLeft
                 text: "Italic"
                 onToggled: {
-                    leftlabel.font.italic = con.getItalic(italic.text)
-                    leftlabel.font.bold = con.getBold(italic.text)
-                    leftlabel.font.underline = con.getUnderline(italic.text)
+                    leftlabel.font.italic = bridge.getItalic(italic.text)
+                    leftlabel.font.bold = bridge.getBold(italic.text)
+                    leftlabel.font.underline = bridge.getUnderline(italic.text)
 
                 }
             }
             RadioButton {
                 id: bold
+                Layout.alignment: Qt.AlignLeft
                 text: "Bold"
                 onToggled: {
-                    leftlabel.font.italic = con.getItalic(bold.text)
-                    leftlabel.font.bold = con.getBold(bold.text)
-                    leftlabel.font.underline = con.getUnderline(bold.text)
+                    leftlabel.font.italic = bridge.getItalic(bold.text)
+                    leftlabel.font.bold = bridge.getBold(bold.text)
+                    leftlabel.font.underline = bridge.getUnderline(bold.text)
                 }
             }
             RadioButton {
                 id: underline
+                Layout.alignment: Qt.AlignLeft
                 text: "Underline"
                 onToggled: {
-                    leftlabel.font.italic = con.getItalic(underline.text)
-                    leftlabel.font.bold = con.getBold(underline.text)
-                    leftlabel.font.underline = con.getUnderline(underline.text)
+                    leftlabel.font.italic = bridge.getItalic(underline.text)
+                    leftlabel.font.bold = bridge.getBold(underline.text)
+                    leftlabel.font.underline = bridge.getUnderline(underline.text)
                 }
             }
             RadioButton {
                 id: noneradio
+                Layout.alignment: Qt.AlignLeft
                 text: "None"
                 checked: true
                 onToggled: {
-                    leftlabel.font.italic = con.getItalic(noneradio.text)
-                    leftlabel.font.bold = con.getBold(noneradio.text)
-                    leftlabel.font.underline = con.getUnderline(noneradio.text)
+                    leftlabel.font.italic = bridge.getItalic(noneradio.text)
+                    leftlabel.font.bold = bridge.getBold(noneradio.text)
+                    leftlabel.font.underline = bridge.getUnderline(noneradio.text)
                 }
             }
         }
@@ -128,7 +141,7 @@ ApplicationWindow {
                     highlighted: true
                     Material.accent: Material.Red
                     onClicked: {
-                        leftlabel.color = con.getColor(red.text)
+                        leftlabel.color = bridge.getColor(red.text)
                     }
                 }
                 Button {
@@ -137,7 +150,7 @@ ApplicationWindow {
                     highlighted: true
                     Material.accent: Material.Green
                     onClicked: {
-                        leftlabel.color = con.getColor(green.text)
+                        leftlabel.color = bridge.getColor(green.text)
                     }
                 }
                 Button {
@@ -146,7 +159,7 @@ ApplicationWindow {
                     highlighted: true
                     Material.accent: Material.Blue
                     onClicked: {
-                        leftlabel.color = con.getColor(blue.text)
+                        leftlabel.color = bridge.getColor(blue.text)
                     }
                 }
                 Button {
@@ -155,7 +168,7 @@ ApplicationWindow {
                     highlighted: true
                     Material.accent: Material.BlueGrey
                     onClicked: {
-                        leftlabel.color = con.getColor(nonebutton.text)
+                        leftlabel.color = bridge.getColor(nonebutton.text)
                     }
                 }
             }
@@ -165,6 +178,7 @@ ApplicationWindow {
                 Text {
                     id: rightlabel
                     color: "white"
+                    Layout.alignment: Qt.AlignLeft
                     text: "Font size"
                     Material.accent: Material.White
                 }
@@ -174,7 +188,7 @@ ApplicationWindow {
                     id: slider
                     value: 0.5
                     onValueChanged: {
-                        leftlabel.font.pointSize = con.getSize(value)
+                        leftlabel.font.pointSize = bridge.getSize(value)
                     }
                 }
             }