Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML Call function from another QML
Forum Updated to NodeBB v4.3 + New Features

QML Call function from another QML

Scheduled Pinned Locked Moved Solved QML and Qt Quick
6 Posts 2 Posters 6.6k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    AriosJentu
    wrote on last edited by
    #1

    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.

    1 Reply Last reply
    0
    • Shrinidhi UpadhyayaS Offline
      Shrinidhi UpadhyayaS Offline
      Shrinidhi Upadhyaya
      wrote on last edited by Shrinidhi Upadhyaya
      #2

      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

      Shrinidhi Upadhyaya.
      Upvote the answer(s) that helped you to solve the issue.

      1 Reply Last reply
      2
      • A Offline
        A Offline
        AriosJentu
        wrote on last edited by
        #3

        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.

        1 Reply Last reply
        0
        • Shrinidhi UpadhyayaS Offline
          Shrinidhi UpadhyayaS Offline
          Shrinidhi Upadhyaya
          wrote on last edited by
          #4

          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

          Shrinidhi Upadhyaya.
          Upvote the answer(s) that helped you to solve the issue.

          1 Reply Last reply
          3
          • A Offline
            A Offline
            AriosJentu
            wrote on last edited by AriosJentu
            #5

            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

            1 Reply Last reply
            0
            • A Offline
              A Offline
              AriosJentu
              wrote on last edited by
              #6

              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.

              1 Reply Last reply
              1

              • Login

              • Login or register to search.
              • First post
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved