[Previous: Importing Reusable Components] [Next: Animation and Transitions]
Many user interface designs are state driven; interfaces have configurations that differ depending on the current state. For example, a traffic signal will configure its flags or lights depending on its state. While in the signal's stop state, a red light will turn on while the yellow and the green lights will turn off. In the caution state, the yellow light is on while the other lights are turned off.
In QML, states are a set of property configurations defined in a State element. Different configurations could, for example:
All Item-based objects have a state property, and can specify additional states by adding new State objects to the item's states property. Each state within a component has a unique name, an empty string being the default. To change the current state of an item, set the state property to the name of the state.
Non-Item objects may use states through the StateGroup element.
To create a state, add a State object to the item's states property, which holds a list of states for that item.
A warning signal component may have two states, the NORMAL and the CRITICAL state. Suppose that in the NORMAL state, the color of the signal should be green and the warning flag is down. Meanwhile, in the CRITICAL state, the color should be red and the flag is up. We may model the states using the State element and the color and flag configurations with the PropertyChanges element.
Rectangle { id: signal width: 200; height: 200 state: "NORMAL" states: [ State { name: "NORMAL" PropertyChanges { target: signal; color: "green"} PropertyChanges { target: flag; state: "FLAG_DOWN"} }, State { name: "CRITICAL" PropertyChanges { target: signal; color: "red"} PropertyChanges { target: flag; state: "FLAG_UP"} } ] }
The PropertyChanges element will change the values of object properties. Objects are referenced through their id. Objects outside the component are also referenced using the id property, exemplified by the property change to the external flag object.
Further, the state may change by assigning the state property with the appropriate signal state. A state switch could be in a MouseArea element, assigning a different state whenever the signal receives a mouse click.
Rectangle { id: signalswitch width: 75; height: 75 color: "blue" MouseArea { anchors.fill: parent onClicked: { if (signal.state == "NORMAL") signal.state = "CRITICAL" else signal.state = "NORMAL" } } }
The State element is not limited to performing modifications on property values. It can also:
Every Item based component has a state property and a default state. The default state is the empty string ("") and contains all of an item's initial property values. The default state is useful for managing property values before state changes. Setting the state property to an empty string will load the default state.
For convenience, the State element has a when property that can bind to expressions to change the state whenever the bound expression evaluates to true. The when property will revert the state back to the default state when the expression evaluates to false.
Rectangle { id: bell width: 75; height: 75 color: "yellow" states: State { name: "RINGING" when: (signal.state == "CRITICAL") PropertyChanges {target: speaker; play: "RING!"} } }
The bell component will change to the RINGING state whenever the signal.state is CRITICAL.
State changes induce abrupt value changes. The Transition element allow smoother changes during state changes. In transitions, animations and interpolation behaviors are definable. The Animation and Transitions article has more information about creating state animations.
The States and Transitions example demonstrates how to declare a basic set of states and apply animated transitions between them.
[Previous: Importing Reusable Components] [Next: Animation and Transitions]
© 2008-2011 Nokia Corporation and/or its subsidiaries. Nokia, Qt and their respective logos are trademarks of Nokia Corporation in Finland and/or other countries worldwide.
All other trademarks are property of their respective owners. Privacy Policy
Licensees holding valid Qt Commercial licenses may use this document in accordance with the Qt Commercial License Agreement provided with the Software or, alternatively, in accordance with the terms contained in a written agreement between you and Nokia.
Alternatively, this document may be used under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation.