MouseArea calling a FileDialog : know which element opened the FileDialog (QML)

Question

Since my last issue with my code, I've come across a new one. Unfortunately, it's not really an implementation issue but much more an "conceptual" issue.

Well so let met introduce the case. I have a grid full of button and then to deal with their onClicked events I have a ButtonGroup

GridLayout {
id: gl
anchors.fill: parent
...

   CustomButton{
      id: btnMILA1
      text: "PlayBook 1"
      ... //Layout stuff
   }
   CustomButton{
      id: btnMILA2
      text: "PlayBook 1"
      ... //Layout stuff
   }
   CustomButton{
      id: btnMILAN
      text: "PlayBook 1"
      ... //Layout stuff
   }
}

Those are generated in a loop so no worries, I didn't wrote all 40 buttons ^^ So here is my ButtonGroup

ButtonGroup {
   id: btnGroup
   buttons: gl.children
   onClicked: {       
      ... //Do some stuff
   }
}

As you may have seen, I have a CustomButton element which is used for two reasons :

• Esthetics (custom design, round corners, etc...)
• Add a MouseArea to each button and onRightclick, show a Menu element

So here is a simplified version of my code for CustomButton element:

import QtQuick 2.15

Button {
    id: button

    property string optionalConf //SEE LATER BELOW, THIS ITEM WILL BE USEFUL

    text: qsTr("Button")
    contentItem: Item{
        Text {
            id: name
            text: button.text
            font: button.font
            color: "#ffffff"
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }

    background: Rectangle{
        color: internal.dynamicColor //Used to deal with Hovered/Pressed/Default states
        radius: 10
    }

    MouseArea {
        id:mouseHovered
        anchors.fill: parent
        acceptedButtons: Qt.RightButton
        onClicked:{
            rightClickMenu.open()
        }
        hoverEnabled: true
    }

    Menu {
        id: rightClickMenu

        MenuItem {
            text: qsTr("Choix du fichier de configuration...")
            shortcut: StandardKey.Open
            onTriggered: confOpen.open()
        }

        MenuItem {
            text: qsTr("Choix du firmware...")
            shortcut: "Ctrl+Shift+O"
            onTriggered: firmwareOpen.open()
        }

        MenuSeparator{}

        MenuItem {
            text: qsTr("Console")
            shortcut: StandardKey.AddTab
            //onTriggered: zoomOut()
            enabled: false
        }
    }
}

I don't really know the efficiency in generating a mouseArea for each element so let me know if you have a better way to have an independent onRightclick option for something like 20 or 30 elements.

My issue is the following. On the page, let's say main.qml where the CustomButton is implemented, I have two fileDialog items : one called confOpen and the other called firmwareOpen as you could expect given the code above. When the user uses the rightclick, the MenuItem shows at the exact place of the mouse, he can choose wherever option he wants. Then a called is made to either confOpen or firmwareOpen and the user is able to select one file.

FileDialog{
   id: confOpen
   title: "Please choose a conf file"
   folder: shortcuts.desktop
   selectMultiple: false
   nameFilters: ["Conf file (*.conf)"]
   onAccepted: {
      console.log(fileUrl)
      //I'd like to do something like this :
      //ButtonUsedToOpenFileDialog.optionalConf : fileUrl
   }
}

So here is the real issue, I'd like to store the file path into a property of my CustomButton. I have a property string optionalConf in order to do so. But I can't manage to which button made the call to the FileDialog, so I don't know which button should have his optionalConf property updated.

I hope I've been clear and it doesn't take to long to read but I wanted to be clear and precise. Let me know if you have better ways to do what I'm doing, I'm always listening to advice :)

Answer 1

Add a function to your FileDialog called openDialog and pass to it the button like this:

[...]
        MenuItem {
            text: qsTr("Choix du fichier de configuration...")
            shortcut: StandardKey.Open
            onTriggered: confOpen.openDialog(button)
        }
[...]
FileDialog {
   id: confOpen
   
   property var button

   function openDialog(button_) {
       button = button_;
       open();
   }

   onAccepted: {
       button.optionalConf = "UPDATED";
   }
}