Send press event to mouseArea from a parent QML

DavidM29

Hello,

I have a Component that use 2 custom button that I made. Lets call this component "ListFunction". This ListFunction is used in a ListView. I want from this listView to be able the press the button by pressing Left and Right arrow. But I don't know how to achieve that.

Here is what I've tried :

Custom Button :

import QtQuick 2.0

Rectangle{
    property alias press: press

    width: name.width < 100 ? 100 : 250
    height: 30
    border.width: 1
    border.color: "black"
    radius: height/2
    color: press.pressed ? "#e30613" : "#575757"

    Text{
        id: name
        text: qsTr("button")
        font.pixelSize: 13
        font.bold: true
        anchors.centerIn: parent
        z:99
    }

    MouseArea{
        id: press
        anchors.fill: parent
        preventStealing : true
    }

    function pressButton(){
        press.pressed()
    }
}

ListFunction :

import QtQuick 2.0
import QtQuick.Controls 1.3

Item {

    property string libelleBoutonG : ""
    property string libelleBoutonD : ""
    property alias btnG: btnG
    property alias btnD: btnD

    Rectangle{
        width: parent.width
        height :parent.height
        color: "transparent"

        CustomButton{ //The button that should be activated on the Right arrow press
            id: btnG
            libelle: libelleBoutonG
            anchors.right: test.left
            anchors.rightMargin: parent.width/16
            anchors.verticalCenter: test.verticalCenter
            width: parent.width/6
            height: parent.height/2.5
        }


        CustomButton{  //The button that should be activated on the Leftarrow press
            id: btnD
            libelle: libelleBoutonD
            anchors.left : test.right
            anchors.leftMargin: parent.width/16
            anchors.verticalCenter: test.verticalCenter
            width: parent.width/6
            height: parent.height/2.5
        }
    }

}

**In the ListView : **

    Keys.onLeftPressed: {  //Listen for LeftArrow 
        listView.currentItem.btnG.pressButton()  // Tried to call the press() function from the btnG
    }
    Keys.onRightPressed: {
        listView.currentItem.btnD.pressButton()
    }

What I've tried does not work it does not recognize the press() function.
Here is the error I get :

TypeError: Property 'press' of object CustomButton_QMLTYPE_10(0x96b2a58) is not a function

How can I achieve this properly ?

Thank you in advance for your help

J.Hilk

hi @DavidM29

Hard to tell, by my guess would be this alias

property alias press: press

to be the culprit. Usually not a good idea to name properties like object id.s. For me at least this always led to strange and undefined behaviour.

DavidM29

@J-Hilk
In fact I found the solution to correct the error message I got. But I'm still not capable to press the button by pressing the Arrow.

the only thing I need now is to find a way to send press event to the mouse area.

I tried to change the "pressed" property of the mouse area but it is read only. And the pressed() function is not working without a MouseEvent.

J.Hilk

@DavidM29
well, A MouseArea needs a MouseEvent to function. I don't know how one would emulate that.

Why don't you defined your own signal in the root element of your customButton. Than chain the onPressed event from the mouse area to that signal. Also you should have no problem calling your own signal programatically.

DavidM29

@J-Hilk
How do you chain the onPressed event ?

J.Hilk

@DavidM29 something like this

Item {
    id:root
    signal pressed()

    MouseArea{
       anchors.fill: parent
       onPressed: root.pressed()
    }


}

DavidM29

I'm not sure to understand what this code do :

Does it call the onPressed event of the mouse area when the root.pressed() signal is emitted or does it emit the root.pressed() signal when I press the mouse area ?

I'm not sure to understand.

J.Hilk

@DavidM29 said in Send press event to mouseArea from a parent QML:

I'm not sure to understand what this code do :

Does it call the onPressed event of the mouse area when the root.pressed() signal is emitted or does it emit the root.pressed() signal when I press the mouse area ?

I'm not sure to understand.

MouseArea pressed signal triggers the root item pressed signal

Item {
    id:root
    signal pressed()

    onPressed: console.log("root pressed signal");

    MouseArea{
       anchors.fill: parent
       onPressed: {
           console.log("MouseArea pressed signal");
           root.pressed()
       }
    }
}

DavidM29

@J.Hilk
That is what I thought.

So your idea is to use this root.pressed signal to implement the function I would have implement on the mouse area.
I get it now.

Thank you it is a good idea.

DavidM29

@J-Hilk
Do you have any idea how could I keep the color change on press of my button ? I tried to add a bool property that I change to true once I emit the root.pressed signal but I don't know how to change it back to false once I release the button.

J.Hilk

@DavidM29 , ähm, MouseArea has a onReleased: signal you could use ?

DavidM29

@J.Hilk
I used the Key.onReleased() event and the MouseArea onReleased event and now it seems to be all good. Thank you !