State management for QML

In 2 samples(phosphorescence: Change the scale of QML text and phosphorescence: Rotate QML Text), I implement the change of QML element with transform property.　And there is one another and more smart approach: using State elements.

1st, naming id for the element to manage states. 2nd, implement the event to change to one another state. 3rd, implement State elements. Each State element is a couple of state name and behavior. See the sample below:

import Qt 4.7

Rectangle {
    width: 200
    height: 200
    Text {
        id: message // naming this to manage states
        x: 60
        y: 80
        text: "changable"
        smooth: true
        states: [
            State {
                name: "right"
                PropertyChanges { target: message; color: "#0000FF"; font.pointSize: 12; font.italic: true }
            }, // couple of state:right and its behavior
            State {
                name: "left"
                PropertyChanges { target: message; color: "#000000"; font.pointSize: 10; font.italic: false }
            } // couple of state:left and its behavior
        ] // state elements
    }
    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: {
            if (mouse.button == Qt.RightButton) {
                message.state = "right"; // change the state to "right"
            } else {
                message.state = "left"; // change the state to "left"
            }
        }
    }
}

Let's launch, and click with right button.

And with left button.