qml notes.md

overview

 import QtQuick 2.9
    import Mycroft 1.0 as Mycroft
    import QtQuick.Controls 2.9
    
    Mycroft.Delegate { // This is a QML Component provided by the default mycroft-gui mycroft import above
        id: root
        
        Button { // This is a QML Component provided by QtQuick Controls import above
            width: 100
            height: 100
        }
    }
    
    Item { 
    // This is a custom component this can be seperated into a file "CategoryHomeView.qml" and then directly imported locally as CategroyHomeView{ .. } 
    
        id: categoryHomeView
    }

we generally want to put things in a folder to keep it clean so generally use "Views" and "Delegates" folder and then if GridTileView.qml is in the views folder then we can import like import "views" as Views and then use it as Views.GridTileView {} and the same for Delegates folder

data from python

self.gui["videoCardsModel"] = {"videoCards": [{"video_name: example", "video_url: example"}, {"video_name: example", "video_url: example"}, {"video_three: example", "video_url: example"}]

GridView {
    model: sessionData.videoCardsModel.videoCards
    delegate: Item {
        Text {
            text: modelData.video_name
        }
        Text {
            text: modelData.video_url
        }
    }
}

events/callbacks

here i am just creating an additional local variable videoModel and assigning the session data to that and also passing that to my model in the view i can check the local variable for changes with the onVideoModelChanged signal and then do any changes in the qml if required so everytime you send session data from the python side the onVideoModelChanged signal is fired

   Mycroft.Delegate {
        property var videoModel: sessionData.videoModel.videoCards
        
        onVideoModelChanged: {
            console.log("Video Model Changed Do Something Here")
        }
        
        GridView {
            model: videoModel
        }
    }

in qml everything works more on signals mechanism than callbacks, every property in any Component be that width / height or text or when you define your own "property type(string/bool/var) somename" will have a onSomeProperyNameChanged signal attached to it so any change to it will triggered when its changed btw we also have an event system in Mycroft.GUI where you don't need to depend on sending session data changes to trigger something in gui you can just send self.gui.send_event("someEvent.name") and map it to a function in qml directly