QML Reference Manager 2 - With Python to QML communication

0.md

Description

Same as QML Reference Manager except with data being passed from Python to QML, as a "context property".

Context properties are inserted into the global namespace of QML, the name ("myModel") is directly accessible from any QML file, and the object can be any Python object.

Instance.qml

// The item in the ListView

import QtQuick 2.3
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1

MouseArea {
    height: 50
    width: parent.width
    hoverEnabled: true

    Rectangle {
        color: "steelblue"
        anchors.fill: parent
        visible: parent.containsMouse
        opacity: 0.3
    }

    RowLayout {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 10

        CheckBox {}
        
        // Notice how "itemType", "itemName" etc are the same as those
        // exposed via the QAbstractListModel.roleNames()
        Label { text: itemType; color: "#888"; font.italic: true }
        Label { text: itemName; Layout.fillWidth: true }
        Label { text: itemPath }
        ComboBox { model: itemVersions; Layout.preferredWidth: 60 }
    }
}

reference_manager.py

"""QML launcher

This Python scripts connects to the PyQt run-time and
loads the associated QML script.

This is also where we'll establish communication between
Python and QML; QML is always the View, Python the
Controller and optionally also the Model.

"""

import sys
import contextlib
from PyQt5 import QtCore, QtGui, QtQuick


@contextlib.contextmanager
def application():
    app = QtGui.QGuiApplication(sys.argv)
    yield
    app.exec_()


class Model(QtCore.QAbstractListModel):
    def __init__(self, items, parent=None):
        super(Model, self).__init__(parent)
        self._items = items

    def rowCount(self, parent=None):
        return len(self._items)

    def data(self, index, role=None):
        role = role or QtCore.QModelIndex()

        if role == QtCore.Qt.UserRole + 0:
            return self._items[index.row()]["type"]

        if role == QtCore.Qt.UserRole + 1:
            return self._items[index.row()]["name"]

        if role == QtCore.Qt.UserRole + 2:
            return self._items[index.row()]["path"]

        if role == QtCore.Qt.UserRole + 3:
            return self._items[index.row()]["versions"]

    def roleNames(self):
        """Names accessible to delegates via QML

        These names are accessible in the global namespace
        of delegates to this model.

        """

        return {
            QtCore.Qt.UserRole + 0: "itemType",
            QtCore.Qt.UserRole + 1: "itemName",
            QtCore.Qt.UserRole + 2: "itemPath",
            QtCore.Qt.UserRole + 3: "itemVersions",
        }


if __name__ == '__main__':
    qml = QtCore.QUrl.fromLocalFile("reference_manager.qml")

    items = [
        {
            "type": "asset",
            "name": "shapes",
            "path": "c:/users/Roy/Desktop/shapes.ma",
            "versions": ["v001", "v002", "v003"]
        },
        {
            "type": "asset",
            "name": "shapes1",
            "path": "c:/users/Roy/Desktop/shapes.ma",
            "versions": ["v001", "v002", "v003", "v004"]
        },
        {
            "type": "asset",
            "name": "shapes2",
            "path": "c:/users/Roy/Desktop/shapes.ma",
            "versions": ["v001", "v002", "v003"]
        },
    ]

    with application():
        window = QtQuick.QQuickView()
        window.setTitle("Manager")
        window.setResizeMode(window.SizeRootObjectToView)

        engine = window.engine()
        context = engine.rootContext()

        model = Model(items)
        context.setContextProperty("myModel", model)

        # Context properties established *before* loading QML
        # Otherwise, QML will load and miss "myModel", throw an
        # error, and then refresh once the model is inserted.
        window.setSource(qml)
        window.show()

reference_manager.qml

import QtQuick 2.4
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3


Item {
    width: 500
    height: 300

    Item {
        // To add some margin around the list view
        id: container
        anchors.fill: parent
        anchors.bottomMargin: 30

        ListView {
            id: items

            anchors.fill: parent
            anchors.margins: 10

            // Defined in Instance.qml
            delegate: Instance {}

            // This is normally coming from Python
            model: myModel
        }
    }

    RowLayout {
        id: buttons

        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.rightMargin: 10

        height: 40

        Item { Layout.fillWidth: true }

        Button {
            id: refreshButton
            text: "Refresh"
        }

        Button {
            id: applyButton
            text: "Apply"
        }
    }   
}