QML Call function from another QML

[AriosJentu]

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.

[Shrinidhi Upadhyaya]

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:-

[AriosJentu]

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.

[Shrinidhi Upadhyaya]

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":-

  

[AriosJentu]

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

[AriosJentu]

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.