QML States : Not able to see any transition, rectangle always remains in state1

sonal1687

Code :

@
import QtQuick 1.0
import com.nokia.meego 1.0

PageStackWindow {
id: rootWindow
initialPage: page1

Page {
    id: page1
    anchors.fill: parent


    Rectangle {
        id: rectItem
        width: 20
        height: 20
        color: "Red"
    }


    states: [
        State {
            name: "state1"
            PropertyChanges {
                target: rectItem; x: 0; y:20
            }
        },
        State {
            name: "state2"
            PropertyChanges {
                target: rectItem; x: 100; y: 100
            }
        }
    ]

    state: "state1"

    transitions: [
        Transition {
            from: "state1"
            to: "state2"
            PropertyAnimation { duration: 1000; properties: "x";
                easing.type: Easing.InOutQuad }
        }
    ]
    Component.onCompleted: {
        timer.running = true;
    }
}
Timer {
    id: timer
    interval: 3000; running: false; repeat: true
    triggeredOnStart: true
    onTriggered: {
        console.log("timer")
        state = state === "state2" ? "state1" : "state2"
        console.log(state +  "state");
    }
}

}
@

[EDIT: code formatting, Volker]

sonal1687

Sorry for previous formatting error , please find code below and please help me

[EDIT: removed doubled code. Please edit the original post (link is to the right, below username and avatar) to change it in the future, thanks. Volker]

billouparis

What is this state = state === ?

I used the following, and it worked!
@
state = (state == "state2")? "state1": "state2"
@

Enjoy!
Bill

sonal1687

Hi Bill,

Its still not working :( M testing on N9 device.

Regards,
Sonal

lgeyer

[quote author="billouparis" date="1329218245"]
What is this state = state === ?
[/quote]

JavaScript has an equality operator <code>==</code> and an identiy operator <code>===</code> - both do comparison, but the latter one not doing implicit type conversion.

<code>state = state === ... ? ... :</code> is an conditional assignment as known from C++.

[quote author="sonal1687" date="1329219216"]Its still not working[/quote]

Do you get any console output so you can make sure the timer is fired?

billouparis

Ok I tested it so:

@state = state === "state2" ? "state1": "state2"@
and it worked too indeed, sorry for this!

So the issue must be somewhere else. In my case I tested it on desktop PC, and simply removed the Nokia component you're using, and replaced it with a simple Item / Rectangle elements combo.

Bill

sonal1687

Ok so it is working in desktop... Yes I do get console output that state is changing after every 3 seconds but I see no visual change in position of rectangle.

-Sonal-

sonal1687

I got it : after putting state as page1.state :)