Create QML Grouped Properties in PySide6 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

import sys

from PySide6.QtCore import QObject, Slot, Signal, Property
from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlApplicationEngine, QmlElement, QmlAnonymous


QML_IMPORT_NAME = 'examples.logger'
QML_IMPORT_MAJOR_VERSION = 1

# 1. Create a class to hold the grouped properties
#    and decorate it with @QmlAnonymous

@QmlAnonymous
class LogDetails(QObject):
    
    # 2. Create the properties
    
    severityChanged = Signal(int)
    filenameChanged = Signal(str)
    
    severity_value = None
    fname_value = ''
    
    def getSeverity(self):
        return self.severity_value
    
    def setSeverity(self, value):
        if value != self.severity_value:
            self.severity_value = value
            self.severityChanged.emit(value)
    
    def getFilename(self):
        return self.fname_value
    
    def setFilename(self, value):
        if value != self.fname_value:
            self.fname_value = value
            self.filenameChanged.emit(value)
    
    severity = Property(int, fget=getSeverity,
        fset=setSeverity, notify=severityChanged)
    
    filename = Property(str, fget=getFilename, 
        fset=setFilename, notify=filenameChanged) 

# 3. Create the main Qml element class

@QmlElement
class Logger(QObject):
    
    messageChanged = Signal(str)
    msg_value = ''
    details_obj = LogDetails()
    
    def getMessage(self):
        return self.msg_value
    
    def setMessage(self, value):
        if value != self.msg_value:
            self.messageChanged.emit(value)
            self.msg_value = value
            
    message = Property(str, fget=getMessage,
        fset=setMessage, notify=messageChanged)
    
    # 4. Add a property to it with the type of LogDetails
    #    ie. the class that holds the grouped properties.
    
    def getDetails(self):
        return self.details_obj
    
    details = Property(LogDetails, fget=getDetails)

if __name__ == '__main__':

    app = QGuiApplication(sys.argv)
    
    engine = QQmlApplicationEngine()
    engine.quit.connect(app.quit)
    engine.load('05_grouped_properties.qml')

    result = app.exec()
    del engine
    
    sys.exit(result)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

// 1. Use the QML_IMPORT_NAME value
//    to import the Logger class    

import examples.logger

ApplicationWindow {

    visible: true
    width: 400
    height:200
    title: "Template App"
    
    // 2. Create a Logger object

    Logger {
    
        id: logger
        message: "Log message"
        details {
            severity: 1
            filename: "filename.qml"
        }
        
        onMessageChanged: function (msg) {
            console.log("Message changed: ", msg);
        }
            
        details.onSeverityChanged: function (severity) {  
            console.log("Severity changed: ", severity);
        }
        
        details.onFilenameChanged: function (filename) {
            console.log("File name changed: ", filename);
        }
    }

    RowLayout {
        
        anchors.fill: parent
            
        Button {
            text: "Click me!"

            Layout.fillWidth: true
            Layout.fillHeight: true
            
            font.pointSize:24
            font.bold: true
            
            // 3. Use the grouped properties

            onClicked: {
                logger.message = "Some message";
                logger.details.severity = 5
                logger.details.filename = "05_grouped_properties.qml";
                console.log(logger.details.severity);
                console.log(logger.details.filename);
                console.log(logger.message);
            }
        }
    }
}