diff options
| author | Cristián Maureira-Fredes <cmaureirafredes@gmail.com> | 2021-06-28 16:42:55 +0200 |
|---|---|---|
| committer | Cristián Maureira-Fredes <Cristian.Maureira-Fredes@qt.io> | 2021-07-21 10:01:45 +0200 |
| commit | c9330b0acf680d4c2a0933b8bf67dc9b3114de5d (patch) | |
| tree | f58d82c3ce57f04960e39f3af596e5a010f21a7f /sources/pyside6/doc/tutorials | |
| parent | b1b2cc2ebed2fcf6e31c1fbbdd3638216e34717b (diff) | |
qml: replace context properties and code updates
Most of the qml code in the repository was outdated,
and followed bad practices, like context properties.
Complementary, after the major updates for Qt6
most of the code was not relying on the new ways of
register types (singletons, and using the decorator QmlElement).
Drop the context property usage in the following examples:
- signals/qmltopy1
- signals/qmltopy2
- signals/pytoqml2
- usingmodel
- quickcontrols2/gallery
- textproperties
Additionally:
- all the tests related to context properties
- tutorials/qmlapp
- tutorials/qmlsqlintegration
- Removing 'scrolling' example
- Fixing some flake8 warnings
Change-Id: I649248c0149876bf2bf94e78e27cef7110f42f1d
Reviewed-by: Friedemann Kleint <Friedemann.Kleint@qt.io>
Reviewed-by: Qt CI Bot <qt_ci_bot@qt-project.org>
Reviewed-by: Keith Kyzivat <keith.kyzivat@qt.io>
Diffstat (limited to 'sources/pyside6/doc/tutorials')
7 files changed, 87 insertions, 62 deletions
diff --git a/sources/pyside6/doc/tutorials/qmlapp/main.py b/sources/pyside6/doc/tutorials/qmlapp/main.py index a34dc9296..490cb79ea 100644 --- a/sources/pyside6/doc/tutorials/qmlapp/main.py +++ b/sources/pyside6/doc/tutorials/qmlapp/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. @@ -38,18 +38,13 @@ ## ############################################################################# -#!/usr/bin/env python -# -*- conding: utf-8 -*- - -import os import sys import urllib.request import json from pathlib import Path -import PySide6.QtQml from PySide6.QtQuick import QQuickView -from PySide6.QtCore import QStringListModel, Qt, QUrl +from PySide6.QtCore import QStringListModel, QUrl from PySide6.QtGui import QGuiApplication @@ -72,7 +67,7 @@ if __name__ == '__main__': #Expose the list to the Qml code my_model = QStringListModel() my_model.setStringList(data_list) - view.rootContext().setContextProperty("myModel", my_model) + view.setInitialProperties({"myModel": my_model}) #Load the QML file qml_file = Path(__file__).parent / "view.qml" diff --git a/sources/pyside6/doc/tutorials/qmlapp/view.qml b/sources/pyside6/doc/tutorials/qmlapp/view.qml index c75052b29..5590fd1f8 100644 --- a/sources/pyside6/doc/tutorials/qmlapp/view.qml +++ b/sources/pyside6/doc/tutorials/qmlapp/view.qml @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2019 The Qt Company Ltd. +** Copyright (C) 2021 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the examples of Qt for Python. @@ -54,6 +54,7 @@ import QtQuick.Controls 2.12 Page { width: 640 height: 480 + required property var myModel header: Label { color: "#15af15" 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) } } } diff --git a/sources/pyside6/doc/tutorials/qmlsqlintegration/chat.qml b/sources/pyside6/doc/tutorials/qmlsqlintegration/chat.qml index 487f5b36c..453be1252 100644 --- a/sources/pyside6/doc/tutorials/qmlsqlintegration/chat.qml +++ b/sources/pyside6/doc/tutorials/qmlsqlintegration/chat.qml @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2019 The Qt Company Ltd. +** Copyright (C) 2021 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the examples of Qt for Python. @@ -40,6 +40,7 @@ import QtQuick 2.12 import QtQuick.Layouts 1.12 import QtQuick.Controls 2.12 +import ChatModel 1.0 ApplicationWindow { id: window @@ -47,6 +48,11 @@ ApplicationWindow { width: 640 height: 960 visible: true + + SqlConversationModel { + id: chat_model + } + ColumnLayout { anchors.fill: parent @@ -61,20 +67,21 @@ ApplicationWindow { spacing: 12 model: chat_model delegate: Column { - readonly property bool sentByMe: model.recipient !== "Me" - anchors.right: sentByMe ? parent.right : undefined + anchors.right: sentByMe ? listView.contentItem.right : undefined spacing: 6 + readonly property bool sentByMe: model.recipient !== "Me" Row { id: messageRow spacing: 6 anchors.right: sentByMe ? parent.right : undefined Rectangle { - width: Math.min(messageText.implicitWidth + 24, listView.width - messageRow.spacing) + width: Math.min(messageText.implicitWidth + 24, + listView.width - (!sentByMe ? messageRow.spacing : 0)) height: messageText.implicitHeight + 24 radius: 15 - color: sentByMe ? "lightgrey" : "#ff627c" + color: sentByMe ? "lightgrey" : "steelblue" Label { id: messageText @@ -117,7 +124,7 @@ ApplicationWindow { text: qsTr("Send") enabled: messageField.length > 0 onClicked: { - chat_model.send_message("machine", messageField.text, "Me"); + listView.model.send_message("machine", messageField.text, "Me"); messageField.text = ""; } } diff --git a/sources/pyside6/doc/tutorials/qmlsqlintegration/main.py b/sources/pyside6/doc/tutorials/qmlsqlintegration/main.py index ac295bda0..3cd19e96e 100644 --- a/sources/pyside6/doc/tutorials/qmlsqlintegration/main.py +++ b/sources/pyside6/doc/tutorials/qmlsqlintegration/main.py @@ -1,6 +1,6 @@ ############################################################################# ## -## Copyright (C) 2019 The Qt Company Ltd. +## Copyright (C) 2021 The Qt Company Ltd. ## Contact: https://www.qt.io/licensing/ ## ## This file is part of the Qt for Python project. @@ -37,6 +37,7 @@ ## ############################################################################# +import sys import logging from PySide6.QtCore import QDir, QFile, QUrl @@ -44,7 +45,8 @@ from PySide6.QtGui import QGuiApplication from PySide6.QtQml import QQmlApplicationEngine from PySide6.QtSql import QSqlDatabase -from sqlDialog import SqlConversationModel +# We import the file just to trigger the QmlElement type registration. +import sqlDialog logging.basicConfig(filename="chat.log", level=logging.DEBUG) logger = logging.getLogger("logger") @@ -57,7 +59,7 @@ def connectToDatabase(): if not database.isValid(): logger.error("Cannot add database") - write_dir = QDir() + write_dir = QDir("") if not write_dir.mkpath("."): logger.error("Failed to create writable directory") @@ -76,11 +78,11 @@ def connectToDatabase(): if __name__ == "__main__": app = QGuiApplication() connectToDatabase() - sql_conversation_model = SqlConversationModel() engine = QQmlApplicationEngine() - # Export pertinent objects to QML - engine.rootContext().setContextProperty("chat_model", sql_conversation_model) engine.load(QUrl("chat.qml")) + if not engine.rootObjects(): + sys.exit(-1) + app.exec() diff --git a/sources/pyside6/doc/tutorials/qmlsqlintegration/sqlDialog.py b/sources/pyside6/doc/tutorials/qmlsqlintegration/sqlDialog.py index 2b62c578b..4ebb19ce2 100644 --- a/sources/pyside6/doc/tutorials/qmlsqlintegration/sqlDialog.py +++ b/sources/pyside6/doc/tutorials/qmlsqlintegration/sqlDialog.py @@ -1,6 +1,6 @@ ############################################################################# ## -## Copyright (C) 2019 The Qt Company Ltd. +## Copyright (C) 2021 The Qt Company Ltd. ## Contact: https://www.qt.io/licensing/ ## ## This file is part of the Qt for Python project. @@ -42,8 +42,11 @@ import logging from PySide6.QtCore import Qt, Slot from PySide6.QtSql import QSqlDatabase, QSqlQuery, QSqlRecord, QSqlTableModel +from PySide6.QtQml import QmlElement table_name = "Conversations" +QML_IMPORT_NAME = "ChatModel" +QML_IMPORT_MAJOR_VERSION = 1 def createTable(): @@ -77,6 +80,7 @@ def createTable(): logging.info(query) +@QmlElement class SqlConversationModel(QSqlTableModel): def __init__(self, parent=None): super(SqlConversationModel, self).__init__(parent) @@ -126,6 +130,9 @@ class SqlConversationModel(QSqlTableModel): return names + # This is a workaround because PySide doesn't provide Q_INVOKABLE + # So we declare this as a Slot to be able to call it from QML + @Slot(str, str, str) def send_message(self, recipient, message, author): timestamp = datetime.datetime.now() |