Changing background of every instance of a QML component (button)

[Binary91]

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:

// Button.qml
 
    import QtQuick 2.4
 
    Rectangle
    {
      id: button
      property alias image: image
      property alias mousearea: mousearea
      property alias text: text.text
 
      width: 90
      height: 30
      color: "transparent"
 
      BorderImage
      {
        id: image
        source: mousearea.pressed ? "qrc:/img/buttons/cyan_hover.png" : "qrc:/img/buttons/cyan.png"
        width: parent.width
        height: parent.height
        border { left: 25; top: 25; right: 25; bottom: 25 }
        horizontalTileMode: BorderImage.Stretch
        verticalTileMode: BorderImage.Round
      }
 
      MouseArea
      {
        id: mousearea
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton
        cursorShape: "PointingHandCursor"
      }
 
      Text
      {
        id: text
        anchors.centerIn: parent
        text: "Button"
        color: "white"
        font.bold: true
      }
    }

// Button.qml
     
    import QtQuick 2.4
     
    Rectangle
    {
      id: button
      property alias image: image
      property alias mousearea: mousearea
      property alias text: text.text
     
      width: 90
      height: 30
      color: "transparent"
     
      BorderImage
      {
        id: image
        source: mousearea.pressed ? "qrc:/img/buttons/cyan_hover.png" : "qrc:/img/buttons/cyan.png"
        width: parent.width
        height: parent.height
        border { left: 25; top: 25; right: 25; bottom: 25 }
        horizontalTileMode: BorderImage.Stretch
        verticalTileMode: BorderImage.Round
      }
     
      MouseArea
      {
        id: mousearea
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton
        cursorShape: "PointingHandCursor"
      }
     
      Text
      {
        id: text
        anchors.centerIn: parent
        text: "Button"
        color: "white"
        font.bold: true
      }
    }

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:

//main.qml
    import QtQuick 2.4
    import QtQuick.Window 2.2
 
    Window
    {
      id: window
      visible: true
      width: 350
      height: 500
 
      Rectangle
      {
        id: rectangleLayout
        anchors.fill: parent
 
        Image
        {
          id: imageBackground
          source: "qrc:/img/backgrounds/cyan.jpg"
          width: parent.width
          height: parent.height
          fillMode: Image.Stretch
        }
 
        Button
        {
          id: buttonDesignBlack
          anchors.top: rectangleHeader.bottom
          anchors.left: rectangleLayout.left
          anchors.topMargin: 30
          anchors.leftMargin: 10
          anchors.horizontalCenter: rectangleLayout.horizontalCenter
          height: 50
          mousearea.onClicked:
          {
            // there I have to put the code to change design
          }
          text: "Button black"
        }
        // another 14 instances of 'Button'
      }

//main.qml
    import QtQuick 2.4
    import QtQuick.Window 2.2
     
    Window
    {
      id: window
      visible: true
      width: 350
      height: 500
     
      Rectangle
      {
        id: rectangleLayout
        anchors.fill: parent
     
        Image
        {
          id: imageBackground
          source: "qrc:/img/backgrounds/cyan.jpg"
          width: parent.width
          height: parent.height
          fillMode: Image.Stretch
        }
     
        Button
        {
          id: buttonDesignBlack
          anchors.top: rectangleHeader.bottom
          anchors.left: rectangleLayout.left
          anchors.topMargin: 30
          anchors.leftMargin: 10
          anchors.horizontalCenter: rectangleLayout.horizontalCenter
          height: 50
          mousearea.onClicked:
          {
            // there I have to put the code to change design
          }
          text: "Button black"
        }
        // another 14 instances of 'Button'
      }

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:

mousearea.onClicked:
          {
            buttonDesignBlack.image.source = buttonDesignBlack.mousearea.pressed ? "qrc:/img/buttons/black_hover.png" : "qrc:/img/buttons/black.png"
            buttonDesignXX.image.source = buttonDesignXX.mousearea.pressed ? "qrc:/img/buttons/black_hover.png" : "qrc:/img/buttons/black.png"
            // ...
          }

mousearea.onClicked:
          {
            buttonDesignBlack.image.source = buttonDesignBlack.mousearea.pressed ? "qrc:/img/buttons/black_hover.png" : "qrc:/img/buttons/black.png"
            buttonDesignXX.image.source = buttonDesignXX.mousearea.pressed ? "qrc:/img/buttons/black_hover.png" : "qrc:/img/buttons/black.png"
            // ...
          }

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!

[anda_skoa]

What you need are two properties (one for each state image) that is accessible from "everywhere".

One way to do that is a singleton type.

// Theme.qml
pragma Singleton
 
import QtQuick 2.0
 
Item {
    property url buttonDownSource
    property url biuttonUpSource
}

// Theme.qml
pragma Singleton

import QtQuick 2.0

Item {
    property url buttonDownSource
    property url biuttonUpSource
}

To copy to clipboard, switch view to plain text mode 

// qmldir
singleton Theme 1.0 Theme.qml

// qmldir
singleton Theme 1.0 Theme.qml

To copy to clipboard, switch view to plain text mode 

// Button.qml
Item {
    //...
 
    Image {
        source: mouseare.pressed ? Theme.buttonDownSource : Theme.buttonUpSource
    }
}

// Button.qml
Item {
    //...

    Image {
        source: mouseare.pressed ? Theme.buttonDownSource : Theme.buttonUpSource
    }
}

To copy to clipboard, switch view to plain text mode 

And then you assign whatever image URLs to those two properties.

As for (2), you are assigning a value to a property. This overwrites any binding on that property.

Cheers,
_

[Binary91]

Hi and thank you for your reply!

Well, singleton sounds interesting, I will take a look at it immediatelly :-)

As for (2), you are assigning a value to a property. This overwrites any binding on that property.

Can you explain that, I don't understand it exactly.
When I define the source in Button.qml like this:

source: mousearea.pressed ? "img_pressed.png" : "img.png"

source: mousearea.pressed ? "img_pressed.png" : "img.png"

To copy to clipboard, switch view to plain text mode 

Then it works great everytime i press and hold the button. After releasing, the normal "img.png" is displayed.

But as soon as I try to change the image using the same mechanism as above in onClicked event, then it doesn't work correctly anymore:

mouseare.onClicked:
{
  buttonXX.image.source = buttonXX.mousearea.pressed ? "img_pressed.png" : "img.png"
}

mouseare.onClicked:
{
  buttonXX.image.source = buttonXX.mousearea.pressed ? "img_pressed.png" : "img.png"
}

To copy to clipboard, switch view to plain text mode 

You mean, I am overwriting something, but where is the problem with it? Why isn't the img_pressed.png displayed anymore when pressing + holding the mouse button on buttonXX after the onClicked has changed its background image?

[anda_skoa]

source: mousearea.pressed ? "img_pressed.png" : "img.png"

source: mousearea.pressed ? "img_pressed.png" : "img.png"

To copy to clipboard, switch view to plain text mode 

Then it works great everytime i press and hold the button. After releasing, the normal "img.png" is displayed.

This is called a property binding. The value of the property is bound to an expression.
Any change of a property inside that expression leads to a reevaluation of the expression, potentially leading to a different value.

But as soon as I try to change the image using the same mechanism as above in onClicked event, then it doesn't work correctly anymore:

mouseare.onClicked:
{
  buttonXX.image.source = buttonXX.mousearea.pressed ? "img_pressed.png" : "img.png"
}

mouseare.onClicked:
{
  buttonXX.image.source = buttonXX.mousearea.pressed ? "img_pressed.png" : "img.png"
}

To copy to clipboard, switch view to plain text mode 

This is an assignment of a value to the property.
The imperative JavaScript code gets evaluated and the result is assigned to the property.
After that line the value of "source" is either "img_pressed.png" or "img.png".

Why isn't the img_pressed.png displayed anymore when pressing + holding the mouse button on buttonXX after the onClicked has changed its background image?

Lets say that the mouse was not pressed when that code gets executed.
The result of the conditional assignment is "img.png".

So buttonXX.image.source is "img.png", equivalen to writing

source: "img.png"

source: "img.png"

To copy to clipboard, switch view to plain text mode 

The property is bound to a fixed value.

Cheers,
_

[Binary91]

Ahh now I got it! Yes, that sounds logically...

So I think I could fix that when changing the assignment to a property binding, right?

Is that possible from outside of the object?

[anda_skoa]

Yes, using Qt.binding http://doc.qt.io/qt-5/qml-qtqml-qt.html#binding-method

But you don't need that once you have globally accessible "theme" properties since the binding never changes, only its values.

Cheers,
_

[Binary91]

Hi,

ok, you're right. The most logical way is to use a global Item with the two image sources and then binding its properties to the Button component, so I only have to change the Items properties and the changes are immediatelly applied in my Buttons...

So the singleton way is exactly for these purposes? You said "one way", are there any other ways to create global objects in QML? (Sorry for all those beginner questions, but I'm trying to get an overview of all this stuff :-P )

[anda_skoa]

There is another option: an appropriately id'ed object in the main QML file.

The id lookup rules will find id values defined in the main QML from any piece of QML that runs in the same engine.

More like QML equivalent of a global variable rather than a singleton.

The disadvantage is that any file-local id with the same value will "hide" that "global" object, the IDE has no way of identifying the object (no completion support), etc.
The advantage is that you don't need a separate QML file and no qmldir file like for singletons.

Given the choice I would go for the singleton.

Cheers,
_

[Binary91]

The id lookup rules will find id values defined in the main QML from any piece of QML that runs in the same engine.

Ah, that sounds interesting! How does it look the other way round? How "big" is the id scope of a *.qml file other than the main.qml? I mean, when I'm right, all objects in a specific *.qml file can access each other by its id, but a "inter-qml-file-access" via id isn't possible? (except the "global" ones defined in main.qml)? So the id scope is limited to the qml file, right?

There is another option: an appropriately id'ed object in the main QML file.

I also found a third way for my purpose, I just placed the url properties to the button's parent object and bound the image source not directly in the specific component file but after creating the instances in main.qml, like that:

Rectangle
{
    property string buttonStd = "qrc:/img/XX.png"
    property string buttonPressed = "qrc:/img/XXPressed.png"
 
    Button
    {
      image.source: mousearea.pressed ? parent.buttonPressed : parent.buttonStd
      mousearea.onClicked
      {
        parent.buttonStd = "qrc:/img/YY.png"
        parent.buttonPressed = "qrc:/img/YYPressed.png"
      }
    }
 }

Rectangle
{
    property string buttonStd = "qrc:/img/XX.png"
    property string buttonPressed = "qrc:/img/XXPressed.png"

    Button
    {
      image.source: mousearea.pressed ? parent.buttonPressed : parent.buttonStd
      mousearea.onClicked
      {
        parent.buttonStd = "qrc:/img/YY.png"
        parent.buttonPressed = "qrc:/img/YYPressed.png"
      }
    }
 }

To copy to clipboard, switch view to plain text mode 

What is interesting is, that I can use property binding in this case, but I can't use it in the onClicked scope right under the image.source binding (see posts above)... Is that because onClicked is a JavaScript functionallity and there is no property binding allowed but instead value assignment??

[anda_skoa]

Ah, that sounds interesting! How does it look the other way round? How "big" is the id scope of a *.qml file other than the main.qml? I mean, when I'm right, all objects in a specific *.qml file can access each other by its id, but a "inter-qml-file-access" via id isn't possible? (except the "global" ones defined in main.qml)? So the id scope is limited to the qml file, right?

I think all ids of "higher" files are visible.
But I would recommend not to rely on that and use only id values defined with a file.
Otherwise the code in a file becomes dependent on where it is being used from.

I also found a third way for my purpose, I just placed the url properties to the button's parent object and bound the image source not directly in the specific component file but after creating the instances in main.qml, like that:

Rectangle
{
    property string buttonStd = "qrc:/img/XX.png"
    property string buttonPressed = "qrc:/img/XXPressed.png"
 
    Button
    {
      image.source: mousearea.pressed ? parent.buttonPressed : parent.buttonStd
      mousearea.onClicked
      {
        parent.buttonStd = "qrc:/img/YY.png"
        parent.buttonPressed = "qrc:/img/YYPressed.png"
      }
    }
 }

Rectangle
{
    property string buttonStd = "qrc:/img/XX.png"
    property string buttonPressed = "qrc:/img/XXPressed.png"

    Button
    {
      image.source: mousearea.pressed ? parent.buttonPressed : parent.buttonStd
      mousearea.onClicked
      {
        parent.buttonStd = "qrc:/img/YY.png"
        parent.buttonPressed = "qrc:/img/YYPressed.png"
      }
    }
 }

To copy to clipboard, switch view to plain text mode 

So all your buttons have the same parent?

What is interesting is, that I can use property binding in this case, but I can't use it in the onClicked scope right under the image.source binding (see posts above)... Is that because onClicked is a JavaScript functionallity and there is no property binding allowed but instead value assignment??

I am afraid I don't understand the question.
Your snippet above never replaces any binding.

Cheers,
_

[Binary91]

So all your buttons have the same parent?

Yes, exactly, but it should also work with an object other than parent when it is also located in the main file and has a id to call it...

I am afraid I don't understand the question.
Your snippet above never replaces any binding.

Ok, I'll try it again. The code above uses a property binding (image.source: parent.buttonSdt). As you may remember from a few posts earlier, I asked you how I can use property binding outside of the "declaration" of the component.
In my example earlier, I could not use property binding like I wanted to (QtCreator gave me errors), and so I used assignment (image.source = ...). You explained the difference to me and told me why this would overwrite every earlier binding...
Now, I use property binding outside of the component declaration and QtCreator doesn't give me an error. I'll explain it with some code:

//Button.qml
Rectangle
{
  width: 90
  height: 30
  color: "transparent"
 
  property alias image: image
  property alias mousearea: mousearea
  property alias text: text.text
 
  BorderImage
  {
    id: image
    width: parent.width
    height: parent.height
    border { left: 25; top: 25; right: 25; bottom: 25 }
    horizontalTileMode: BorderImage.Stretch
    verticalTileMode: BorderImage.Round
  }
 
  MouseArea
  {
    id: mousearea
    anchors.fill: parent
    acceptedButtons: Qt.LeftButton
    cursorShape: "PointingHandCursor"
  }
 
  Text
  {
    id: text
    anchors.centerIn: parent
    color: "white"
    font.bold: true
  }
}

//Button.qml
Rectangle
{
  width: 90
  height: 30
  color: "transparent"

  property alias image: image
  property alias mousearea: mousearea
  property alias text: text.text

  BorderImage
  {
    id: image
    width: parent.width
    height: parent.height
    border { left: 25; top: 25; right: 25; bottom: 25 }
    horizontalTileMode: BorderImage.Stretch
    verticalTileMode: BorderImage.Round
  }

  MouseArea
  {
    id: mousearea
    anchors.fill: parent
    acceptedButtons: Qt.LeftButton
    cursorShape: "PointingHandCursor"
  }

  Text
  {
    id: text
    anchors.centerIn: parent
    color: "white"
    font.bold: true
  }
}

To copy to clipboard, switch view to plain text mode 

//main.qml
    Button
    {
      // no errors when I make a binding here:
      image.source: mousearea.pressed ? parent.buttonPressed : parent.buttonStd
      mousearea.onClicked:
      {
        // if I placed binding right here, QtCreator would give me errors
      }
    }

//main.qml
    Button
    {
      // no errors when I make a binding here:
      image.source: mousearea.pressed ? parent.buttonPressed : parent.buttonStd
      mousearea.onClicked:
      {
        // if I placed binding right here, QtCreator would give me errors
      }
    }

To copy to clipboard, switch view to plain text mode 

Do you know now what I mean? A few posts earlier I asked you how to make bindings from outside, but I see now that it is possible within the object instance, but not within an onClicked scope... Do you know why?