qml run javascript code after state change

Question

I have several states which I use only to change some properties:

Item {
    id: props
    property int someProperty: 0
    // ...

    states: [
        State {
            name: "firstState"
            PropertyChange {
                target: props
                someProperty: 1
                // ...
            }
        },
        State {
            name: "secondState"
            PropertyChange {
                target: props
                someProperty: 1
                // ...
            }
        }
    ]
    onStateChange: doSomething(someProperty)
}

Since different states could have the same value for someProperty I can't rely on the somePropertyChange signal, but I can't even rely on the onStateChange (as in the example) since when it runs the properties are unchanged.

So how could I run doSomething() every time the state change? There is a better way to do this kind of things with QML?

Where did you run the command that a state should change? There you can also execute your "doSomething()" method. Furthermore you can use property bindings for changing properties - that is the better way. QML is a declarative language! — sk2212, Nov 19 '15 at 13:29
@sk2212 I run the command for state change in several parts trough the application so putting `doSomething()` everywhere doesn't sound like a good choice (but I could create a function that change state and run `doSomething()` instead of changing the value of state). In the real application `someProperty` is the number of seconds after which an event should be triggered, if the state change the timer should start from the beginning (if two states have the same number of seconds the `somePropertyChange` signal is not fired so the timer doesn't restart by using a property binding). — lambdauser, Nov 19 '15 at 21:03
Well...how do you change the state through your application? Referencing the id in other qml files? Maybe you should also have a look in `running` property from `Timer` component. — sk2212, Nov 20 '15 at 07:57
the state is changed in "many" parts of the same qml file. The problem at hand is that I need to restart a `Timer` when the state change even if the value of the seconds is exactly the same. — lambdauser, Nov 23 '15 at 07:54

score 11 · Answer 1 · answered Nov 23 '15 at 12:08

You can run some script using StateChangeScript.

Item {
    id: props
    property int someProperty: 0

    states: [
        State {
            name: "firstState"
            PropertyChanges {
                target: props
                someProperty: 1
            }
            StateChangeScript {
                name: "firstScript"
                script: console.log("entering first state")
            }
        },
        State {
            name: "secondState"
            PropertyChanges {
                target: props
                someProperty: 1
            }
            StateChangeScript {
                name: "secondScript"
                script: console.log("entering second state")
            }
        }
    ]
}

but with this solution I need to place a StateChangeScript inside every State — lambdauser, Nov 27 '15 at 07:22

score 1 · Answer 2 · answered Mar 08 '17 at 15:12

Item {
    id: props
    property int someProperty: 0
    // ...

    states: [
        State {
            name: "firstState"
            PropertyChange {
                target: props
                someProperty: 1
                // ...
            }
        },
        State {
            name: "secondState"
            PropertyChange {
                target: props
                someProperty: 1
                // ...
            }
        }
    ]

    transitions: [
        Transition {
            ScriptAction { 
                script: console.log("transition to " + props.state) 
            }
        }
    ]
}

qml run javascript code after state change

2 Answers2