Hi,

I'm developing a little app where the user can change the design (background and button image).

My QML component 'Button' looks like that:
Qt Code: 
  1. // Button.qml
  2.  
  3.     import QtQuick 2.4
  4.  
  5.     Rectangle
  6.     {
  7.       id: button
  8.       property alias image: image
  9.       property alias mousearea: mousearea
  10.       property alias text: text.text
  11.  
  12.       width: 90
  13.       height: 30
  14.       color: "transparent"
  15.  
  16.       BorderImage
  17.       {
  18.         id: image
  19.         source: mousearea.pressed ? "qrc:/img/buttons/cyan_hover.png" : "qrc:/img/buttons/cyan.png"
  20.         width: parent.width
  21.         height: parent.height
  22.         border { left: 25; top: 25; right: 25; bottom: 25 }
  23.         horizontalTileMode: BorderImage.Stretch
  24.         verticalTileMode: BorderImage.Round
  25.       }
  26.  
  27.       MouseArea
  28.       {
  29.         id: mousearea
  30.         anchors.fill: parent
  31.         acceptedButtons: Qt.LeftButton
  32.         cursorShape: "PointingHandCursor"
  33.       }
  34.  
  35.       Text
  36.       {
  37.         id: text
  38.         anchors.centerIn: parent
  39.         text: "Button"
  40.         color: "white"
  41.         font.bold: true
  42.       }
  43.     }
To copy to clipboard, switch view to plain text mode 
It has a pre-defined background image (color: cyan) and a pressed-effect (background changes to cyan_hover).

In my main QML file, I create about 15 instances of those buttons ("Button black", "Button gray", "Button brown", "Button blue", "Button cyan" and so on...).
When the user clicks on one of those buttons, every button image should change to the image that was selected, example:
User clicks button "Button black" --> background image of every button should change to "qrc:/img/buttons/black.png".

This is how I create those instances:
Qt Code: 
  1. //main.qml
  2.     import QtQuick 2.4
  3.     import QtQuick.Window 2.2
  4.  
  5.     Window
  6.     {
  7.       id: window
  8.       visible: true
  9.       width: 350
  10.       height: 500
  11.  
  12.       Rectangle
  13.       {
  14.         id: rectangleLayout
  15.         anchors.fill: parent
  16.  
  17.         Image
  18.         {
  19.           id: imageBackground
  20.           source: "qrc:/img/backgrounds/cyan.jpg"
  21.           width: parent.width
  22.           height: parent.height
  23.           fillMode: Image.Stretch
  24.         }
  25.  
  26.         Button
  27.         {
  28.           id: buttonDesignBlack
  29.           anchors.top: rectangleHeader.bottom
  30.           anchors.left: rectangleLayout.left
  31.           anchors.topMargin: 30
  32.           anchors.leftMargin: 10
  33.           anchors.horizontalCenter: rectangleLayout.horizontalCenter
  34.           height: 50
  35.           mousearea.onClicked:
  36.           {
  37.             // there I have to put the code to change design
  38.           }
  39.           text: "Button black"
  40.         }
  41.         // another 14 instances of 'Button'
  42.       }
To copy to clipboard, switch view to plain text mode 

I have two questions about that now:
1. Is there a way to change the background image of all 15 instances with one line of code or do I have to change the source property of each instance by hand, like this:
Qt Code: 
  1. mousearea.onClicked:
  2.           {
  3.             buttonDesignBlack.image.source = buttonDesignBlack.mousearea.pressed ? "qrc:/img/buttons/black_hover.png" : "qrc:/img/buttons/black.png"
  4.             buttonDesignXX.image.source = buttonDesignXX.mousearea.pressed ? "qrc:/img/buttons/black_hover.png" : "qrc:/img/buttons/black.png"
  5.             // ...
  6.           }
To copy to clipboard, switch view to plain text mode 

2. The way I try it above does apply the changes, hence the new background is set correctly, but the pressed event does not change the background anymore. It works without doing anything in the onClicked scope, so I know the error has to be there.
Maybe the problem is, that the pressed event & changing background image is overwritten immediately by the onClicked signal?? But I also tried to press and hold the mouse button down on the button, so the onClicked signal is not yet emitted, but the background doesn't change anyway!
When running the app, the pressed event + background image change works exactly ONE TIME, after that it doesn't work anymore. So I think the problem is that I overwrite something when executing the code in onClicked scope... Does anyone know where my error is??

Thank you in anticipation!