Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML Call function from another QML



  • Hi. I have again a question, which I haven't found solution for now. I need to call in specific event function from another QML object.
    I have this:

    main.qml

    import QtQuick 2.2
    import QtQuick.Window 2.10
    ....
    
    Window {
    
        id: root
        visible: true
        ....
    
        StackView {
            id: mainStackView;
            anchors.fill: parent
            initialItem: mainPage
        }
    
        Component {
            id: mainPage
            CalendarView {}
        }
    
        Component {
            id: viewPage
            //property alias viewComponent: viewPageEventViewElement
    
            EventView { id:viewPageEventViewElement }
    
    
            /*onCompleted: {
                viewPageEventViewElement.setEvent(calendarWindow.currentEvent);
            }*/
            /*function setEvent(modelobj) {
                viewPageEventViewElement.setEvent(modelobj);
            }*/
        }
    }
    

    CalendarView.qml

    import QtQuick 2.2
    ....
    
    Item {
    
        id: calendarWindow
        ....
        //property var currentEvent
        ....
        MouseArea {
           ....
            onClicked: {
        
                //calendarWindow.currentEvent = modelData
        
                if (mouse.button === Qt.RightButton) {
                    ....
                } else {
                    mainStackView.push(viewPage);
                    //viewPageEventViewElement.setEvent(modelData);
                }
            }
            ....
        }
        ....
    }
    

    EventView.qml

    import QtQuick 2.2
    ....
    Item {
    
        id: eventWindow
        ....
    
        function setEvent(modelobj) {
            ....
        }
    

    So, I've tried to make property for component in main.qml - I've got crashing with 255. When I comment line with property, program works (but not events). Also, I've tried to call event using component ID - viewPageEventViewElement. It says that reference for this ID not defined. I've tried to use properties in CalendarView.qml (currentEvent property), and call it from main.qml, and I've got same as first error - program doesn't running, and sends 255 error. I've heard about signals, but I think (and I hope) it has another easy looking solution for this, because I need an argument for function too. Thank you.



  • Hi @AriosJentu , i guess you just need to call a function of another Class.

    I have made few changes to your code and have written a sample code:-

    CalendarView.qml

    Item {
    
    id: calendarWindow
    
    height: 100
    width: 100
    //property var currentEvent
    
    //####Display Purpose
    Rectangle {
        anchors.fill: parent
        color: "red"
    }
    
    MouseArea {
        onClicked: {
    
            //calendarWindow.currentEvent = modelData
    
            if (mouse.button === Qt.RightButton) {
            } else {
                mainStackView.push(viewPage);
                //viewPageEventViewElement.setEvent(modelData);
            }
        }
    }
    
    function setEventCV(txt) {
        console.log(txt)
      }
    }
    

    EventView.qml

    Item {
    id: eventWindow
    
    height: 100
    width: 100
    
    //####Display Purpose
    Rectangle {
        anchors.fill: parent
        color: "green"
    }
    
    function setEventEV(txt) {
        console.log(txt)
      }
    }
    

    main.qml

    StackView {
        id: mainStackView;
    
        anchors.fill: parent
        initialItem: mainPage
    }
    
    Component {
        id: mainPage
    
        Row {
            spacing: 10
    
            EventView {
                Component.onCompleted: {
                    setEventEV("Event View");
                }
            }
    
            CalendarView {
                Component.onCompleted: {
                    setEventCV("Calendar View");
                }
            }
        }
    }
    

    Sample Output:-

    0_1560488003651_4f534a7b-240d-4cab-99c2-ce785428d0d5-image.png



  • Thank you. But, as you see, I need to call function from CalendarView class for EventVIew class. Here - when I press something on CalendarView, I've send event with some parameters of CalendarView to EventView, and I think, your code isn't work in my situation. But also, thank you, I've understood how it works using it in Main class.



  • Hi @AriosJentu , i guess you can do that:-

    • Give an id to EventView in main.qml, something like this:-

      EventView {
                id: ev
            }
      
    • Make this code change inside CalendarView.qml

      MouseArea {
        anchors.fill: parent
        onClicked: {
            ev.setEventEV("EventView");
        }
      }
      
    • So when you click on the red Rectangle, you will get a log "EventView":-

      0_1560491240987_6e9dd203-f2a3-48a6-8852-b13bb80365ae-image.png



  • Also, thank you. But I've already got to EventView it's id, but I can't call it from another file:
    main.qml:

        ....
        Component {
            id: viewPage
    
            EventView {
                id: viewPageEventViewElement
            }
        }
        ....
    

    I've also added to EventView.qml function just to send info in log:
    EventView.qml:

        ....
        function sendMessage(message) {
            console.log(message);
        }
        ....
    

    And then I call this function for object with viewPageEventViewElement id in my CalendarView.qml:

    MouseArea {
        onClicked: {
    
            //calendarWindow.currentEvent = modelData
    
            if (mouse.button === Qt.RightButton) {
            } else {
                mainStackView.push(viewPage);
                viewPageEventViewElement.sendMessage("Hello world!"); //<<<< Line 277
                //viewPageEventViewElement.setEvent(modelData);
            }
        }
    }
    

    And I've got this:

    qrc:/qml/CalendarView.qml:277: ReferenceError: viewPageEventViewElement is not defined
    

    Same as start of the topic.
    I think, maybe it will be better send my EventView class outside of it's component in main.qml, but I need to add it inside component using ID, but I don't know, how.
    Also, check full code you can here: My GitHub



  • Found solution.
    I've just used StackView's parameter - currentItem, and for it I called a setEvent method:

    MouseArea {
        onClicked: {
            if (mouse.button === Qt.RightButton) {
            } else {
                mainStackView.push(viewPage);
                mainStackView.currentItem.setEvent(modelData);
            }
        }
    }
    

    Thanks.


Log in to reply