2010-08-05

'extend' property of Qml State

The property 'State.extend' holds the base state. When a state extends another state, it inherits all the changes of the base state and you need only specify the difference in your extended state. The usage of this property can largely reduce the code size: See the example below:

Without using extend (bad)
states: [
State { name: "album"
 PropertyChanges { target: but_album; state: 'Selected' }
 PropertyChanges { target: but_radio; state: 'Unselected' }
 PropertyChanges { target: but_rss; state: 'Unselected' }
},
State { name: "radio"
 PropertyChanges { target: but_album; state: 'Unselected' }
 PropertyChanges { target: but_radio; state: 'Selected' }
 PropertyChanges { target: but_rss; state: 'Unselected' }
},
State { name: "rss"
 PropertyChanges { target: but_album; state: 'Unselected' }
 PropertyChanges { target: but_radio; state: 'Unselected' }
 PropertyChanges { target: but_rss; state: 'Selected' }
}
]



Using extend (good)
states: [
State { name: "default"
 PropertyChanges { target: but_album; state: 'UnSelected' }
 PropertyChanges { target: but_radio; state: 'Unselected' }
 PropertyChanges { target: but_rss; state: 'Unselected' }
},
State { name: "album"; extend: 'default'
 PropertyChanges { target: but_album; state: 'Selected' }
},
State { name: "radio"; extend: 'default'
 PropertyChanges { target: but_radio; state: 'Selected' }
},
State { name: "rss"; extend: 'default'
 PropertyChanges { target: but_rss; state: 'Selected' }
}
] 

Reference:
http://doc.qt.nokia.com/4.7-snapshot/qml-state.html#extend-prop

3 comments:

  1. that's a very cool observation. I have to be more careful while reading docs :)

    ReplyDelete
  2. Thanks! Your example was so useful that I suggested to integrate it in the Qt documentation.

    https://bugreports.qt.nokia.com/browse/QTCOMPONENTS-950

    ReplyDelete
  3. Thanks for the example, but I could not use it.

    In my problem, I have a transition associated with the state. What I intend to do is change to first state, that will do an animation and put some elements in a specific spot. When over, I want to go for the second state, that will do another animation and change the width of the element.

    With my actual code, what happen is that the first animation is executed again :S

    A piece of my QML is here:
    http://pastebin.com/EMvDhW6y

    Does anyone have an idea how I could do this?

    Thanks

    ReplyDelete