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