| Name | QML |
|---|---|
| Extension | .qml |
| Publisher | Nokia |
| Genre | Scripting language |
QML elements can be augmented by standard JavaScript both inline and via included .js files. Elements can also be seamlessly integrated and extended by C++ components using the Qt framework.
The language name is QML. The runtime name is Qt Declarative.
import Qt 4.7Rectangle { id: canvas width: 200 height: 200 color: "blue"
Image { id: logo source: "pics/logo.png" anchors.centerIn: parent x: canvas.height / 5 } }
Objects are specified by their type, followed by a pair of braces. Object types always begin with a capital letter. In the above example, there are two objects, a Rectangle, and an Image. Between the braces, one can specify information about the object, such as its properties. Properties are specified as property: value. In the above example, we can see the Image has a property named source, which has been assigned the value "pics/logo.png". The property and its value are separated by a colon.
The id property
Each object can be given a special unique property called an id. Assigning an id enables the object to be referred to by other objects and scripts. The first Rectangle element below has an id, "myRect". The second Rectangle element defines its own width by referring to myRect.width, which means it will have the same width value as the first Rectangle element.
Item {
Rectangle {
id: myRect
width: 100
height: 100
}
Rectangle {
width: myRect.width
height: 200
}
}
Note that an id must begin with a lower-case letter or an underscore, and cannot contain characters other than letters, numbers and underscores.
Property bindings are created implicitly in QML whenever a property is assigned an JavaScript expression. The following QML uses two property bindings to connect the size of the rectangle to that of otherItem.
Rectangle {
width: otherItem.width
height: otherItem.height
}
QML extends a standards compliant JavaScript engine, so any valid JavaScript expression can be used as a property binding. Bindings can access object properties, make function calls and even use builtin JavaScript objects like Date and Math.
Example:
Rectangle {
function calculateMyHeight() {
return Math.max(otherItem.height, thirdItem.height);
}
anchors.centerIn: parent
width: Math.min(otherItem.width, 10)
height: calculateMyHeight()
color: { if (width > 10) "blue"; else "red" }
}
Example: In the default state myRect is positioned at 0,0. In the 'moved' state it is positioned at 50,50. Clicking within the mouse area changes the state from the default state to the 'moved' state, thus moving the rectangle.
import Qt 4.7Item { id: myItem width: 200; height: 200
Rectangle { id: myRect width: 100; height: 100 color: "red" } states: [ State { name: "moved" PropertyChanges { target: myRect x: 50 y: 50 } } ] MouseArea { anchors.fill: parent onClicked: myItem.state = 'moved' } }
State changes can be animated using Transitions.
For example, adding this code to the above Item element animates the transition to the "moved" state:
transitions: [
Transition {
NumberAnimation { properties: "x,y"; duration: 500 }
}
]
QML supports three main forms of animation: basic property animation, transitions, and property behaviors.
The simplest form of animation is a PropertyAnimation, which can animate all of the property types listed above. A property animation can be specified as a value source using the Animation on property syntax. This is especially useful for repeating animations.
The following example creates a bouncing effect:
Rectangle {
id: rect
width: 120; height: 200
Image {
id: img
source: "pics/qt.png"
x: 60 - img.width/2
y: 0
SequentialAnimation on y {
loops: Animation.Infinite
NumberAnimation { to: 200 - img.height; easing.type: Easing.OutBounce; duration: 2000 }
PauseAnimation { duration: 1000 }
NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 }
}
}
}
Familiar concepts
QML provides direct access to the following concepts from Qt:
MouseArea {
onPressed: console.log("mouse button pressed")
}
All signal handlers begin with "on".
Category:Qt (toolkit) Category:Declarative programming languages
This text is licensed under the Creative Commons CC-BY-SA License. This text was originally published on Wikipedia and was developed by the Wikipedia community.
