QML signal and slot between 2 different QML

[Gunkut]

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?

[J.Hilk]

@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 =""
    }
}
}

[Gunkut]

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]

@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 =""
    }
}
}

[Gunkut]

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

[J.Hilk]

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

[Gunkut]

@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]

@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()
    }
}

[Gunkut]

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