Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Solved QML signal and slot between 2 different QML

    QML and Qt Quick
    2
    8
    599
    Loading More Posts
    • 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.
    • G
      Gunkut last edited by

      I need to perform some actions in let's say main.qml according to button press in button.qml. Button inside of the button QML is inside of some custom object. Let's give it a name customObject. So customObject in button.qml looks like this:

      customObject {
      id:trialObject
      signal backPagePressed()
      
      Button {
      id:button1
      MultitouchArea {
      onPressed:
      {
         trialObject.backPagePressed()
      }
      

      Now when I press the button, it emits backPagePressed(). My question is: How can I make a slot for this signal in main QML? I'm familiar to signal and slot mechanism in C++, but that does not work for QML. I made something like this in main.qml:

      Loader 
      {
        id:pageLoader
        onBackPagePressed:
      {
        pageLoader.source =""
      }
      }
      

      That part needs to delete the Loader's source so that it will go back to page before. However, I'm not sure about onBackPagePressed: ... How can I connect my signal backPagePressed, to the related part in my loader?

      1 Reply Last reply Reply Quote 0
      • J.Hilk
        J.Hilk Moderators @Gunkut last edited by

        @Gunkut

        The use about connections sounds about right :D

        change it to:

        Loader
        {
             id:pageLoader
             anchors.fill:parent
             Connections
        {
             target:pageLoader.item
             onBackPagePressed: {
                 console.log("Pressed")
                 pageLoader.source =""
            }
        }
        }
        

        Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct

        Qt Needs YOUR vote: https://bugreports.qt.io/browse/QTQAINFRA-4121


        Q: What's that?
        A: It's blue light.
        Q: What does it do?
        A: It turns blue.

        G 1 Reply Last reply Reply Quote 0
        • G
          Gunkut last edited by

          After some trial, I added Connections to the loader. Now loader looks like this:

          Loader
          {
               id:pageLoader
               anchors.fill:parent
               Connections
          {
               target:pageLoader.item
               onBackPagePressed.source =""
          }
          }
          

          But it says QML Connections: Cannot assign to non-existent property "onBackPagePressed"

          J.Hilk 1 Reply Last reply Reply Quote 0
          • J.Hilk
            J.Hilk Moderators @Gunkut last edited by

            @Gunkut

            The use about connections sounds about right :D

            change it to:

            Loader
            {
                 id:pageLoader
                 anchors.fill:parent
                 Connections
            {
                 target:pageLoader.item
                 onBackPagePressed: {
                     console.log("Pressed")
                     pageLoader.source =""
                }
            }
            }
            

            Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct

            Qt Needs YOUR vote: https://bugreports.qt.io/browse/QTQAINFRA-4121


            Q: What's that?
            A: It's blue light.
            Q: What does it do?
            A: It turns blue.

            G 1 Reply Last reply Reply Quote 0
            • G
              Gunkut @J.Hilk last edited by

              @J-Hilk Thank your for the answer. It still gives me QML Connections: Cannot assign to non-existent property "onBackPagePressed".

              J.Hilk 1 Reply Last reply Reply Quote 0
              • J.Hilk
                J.Hilk Moderators @Gunkut last edited by

                @Gunkut can you post the full code from your loader ?

                Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct

                Qt Needs YOUR vote: https://bugreports.qt.io/browse/QTQAINFRA-4121


                Q: What's that?
                A: It's blue light.
                Q: What does it do?
                A: It turns blue.

                G 1 Reply Last reply Reply Quote 0
                • G
                  Gunkut @J.Hilk last edited by

                  @J-Hilk Sure. Here is the code for main.qml (that includes loader).

                  Window {
                  id:main
                  .
                  .
                  .
                  
                  
                  Loader
                  { 
                     id:pageLoader
                     anchors.fill:parent
                     Connections
                    {
                        target:pageLoader.item
                        onBackPagePressed:
                   {
                       console.log("Pressed back button")
                       pageLoader.source=""
                  }
                  }
                  }
                  }
                  

                  And that is the other qml where I emit the signal:

                  Item
                  {
                     Image
                   {
                      id:kontrol_backButton
                      signal backPagePressed()
                      MultiTouchArea
                       {
                         onPressed:
                          {
                              kontrol_backButton.backPagePressed()
                           }
                  }
                  }
                  
                  J.Hilk 1 Reply Last reply Reply Quote 0
                  • J.Hilk
                    J.Hilk Moderators @Gunkut last edited by J.Hilk

                    @Gunkut well
                    Image, that has the signal defined, is not the root element. So you'll not get the signal outside of that file.

                    move
                    signal backPagePressed() to the root item


                    main.qml

                    import QtQuick 2.12
                    import QtQuick.Window 2.2
                    import QtQuick.Controls 2.12
                    import QtQuick.Layouts 1.12
                    
                    ApplicationWindow {
                        id: mainWindow
                    
                        visible: true
                        width: 200
                        height: 50
                    
                        Loader{
                            id:pageLoader
                            anchors.fill: parent
                    
                            source: "TestFile.qml"
                    
                            Connections{
                                target: pageLoader.item
                                onBackPagePressed: {
                                    console.log("Pressed")
                                    pageLoader.source = ""
                                }
                            }
                        }
                    }
                    
                    

                    TestFile.qml

                    import QtQuick 2.0
                    
                    Rectangle {
                        color: "blue"
                    
                        signal backPagePressed()
                    
                        MouseArea{
                            anchors.fill: parent
                            onClicked: parent.backPagePressed()
                        }
                    }
                    
                    

                    Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct

                    Qt Needs YOUR vote: https://bugreports.qt.io/browse/QTQAINFRA-4121


                    Q: What's that?
                    A: It's blue light.
                    Q: What does it do?
                    A: It turns blue.

                    G 1 Reply Last reply Reply Quote 0
                    • G
                      Gunkut @J.Hilk last edited by

                      @J-Hilk That solved the error. Thank you :)

                      1 Reply Last reply Reply Quote 1
                      • First post
                        Last post