How to declare a property of type EventHandler (slot?) in Custom Component and assign function for that in its usage

Question

For my Custom window, shown in the answer, I've created a Component named PathButton

import QtQuick 2.0
import QtQuick.Shapes 1.12

Item {
    property alias pathData: svg.path
    width: 24
    height: 24
    Shape {
        ShapePath {
            fillColor: "black"
            PathSvg {
                id: svg
                path: pathData
            }
        }
    }
}

and used it to minimize, maximize and close the window like this:

RowLayout{
    Layout.preferredWidth: 100
    anchors.right: title.right
    PathButton{
        pathData: ViewModel.minimizeIcon
        MouseArea{
            anchors.fill: parent
            onClicked: mainWindow.showMinimized()
        }
    }
    PathButton{
        pathData: ViewModel.maximizeIcon
        MouseArea{
            anchors.fill: parent
            //this doesn't restore the window to its Normal state, showMaximized() is called always
            onClicked: mainWindow.Maximized? mainWindow.showNormal() : mainWindow.showMaximized()
        }
    }
    PathButton{
        pathData: ViewModel.closeIcon
        MouseArea{
            anchors.fill: parent
            onClicked: mainWindow.close()
        }
    }
}

in all those I've a MouseArea. What I want is to have that MouseArea in my Custom Component and declare a property of type eventhandler/signal/slot and assign that handler for onClicked like this:

import QtQuick 2.0
import QtQuick.Shapes 1.12

Item {
    property alias pathData: svg.path
    property alias handler: mouse.onClicked
    width: 24
    height: 24
    Shape {
        ShapePath {
            fillColor: "black"
            PathSvg {
                id: svg
                path: pathData
            }
        }
    }
    MouseArea{
        id: mouse
        anchors.fill: parent
        onClicked: handler
    }
}

and in its usage I want to assign the relevant function like this:

PathButton{
    pathData: ViewModel.minimizeIcon
    handler: mainWindow.showMinimized()
}

EDIT

Here's what I've in PathButton.qml:

import QtQuick 2.0
import QtQuick.Shapes 1.12

Item {
    id: root
    property alias pathData: svg.path
    signal onClicked()

    width: 24
    height: 24
    Shape {
        ShapePath {
            fillColor: "black"
            PathSvg {
                id: svg
                path: pathData
            }
        }
    }
    MouseArea{
        anchors.fill: parent
        onClicked: root.onClicked()
    }
}

and in main.qml I get that error and when I hit run with that error, in Application Output I get another error:

JarMan · Accepted Answer · 2020-07-01T21:52:57.867

1

I think what you're looking for is simply a signal:

// PathButton.qml
Item {
    id: root
    signal clicked()

    ...

    MouseArea {
        onClicked: root.clicked()
    }
}

Then you would use it like this:

PathButton {
    onClicked: mainWindow.showMinimized()
}

edited Jul 01 '20 at 21:52

answered Jul 01 '20 at 20:48

JarMan

7,589
1
10
25

that didn't work for me, see edit part for the errors – Jul 01 '20 at 21:18
Sorry, see my edit. The signal should just be `clicked`. The signal handler is still `onClicked`. – JarMan Jul 01 '20 at 21:54
used that `on` and first letter capitalized convention in `Connections` like `function onCppSignal` BUT didn't know that `signal` keyword exists in qml! – Jul 01 '20 at 22:03

How to declare a property of type EventHandler (slot?) in Custom Component and assign function for that in its usage

1 Answers1