Time for action – notifying the environment about button states

We have added some code to make the button look more natural by changing its visual aspects. Now, let's extend the button programming interface so that developers can use more features of the button.

The first thing we can do is make button colors definable by introducing some new properties for the button. Let's put the highlighted code at the beginning of the button component definition:

Rectangle {
  id: button
  property color topColor: "#eeeeee"
  property color bottomColor: "#777777"
  property color textColor: "black"
  property color textPressedColor: "white"
  signal clicked()

Then, we'll use the new definitions for the background gradient:

gradient: Gradient {
  GradientStop { position: 0; color: button.topColor }
  GradientStop { position: 1; color: button.bottomColor }
}

Now for the text color:

Text {
  id: buttonText
  text: "ButtonText"
  color...