QML

QML (Qt Meta-object Language ) is a user interface markup language. It is a declarative language (similar to CSS and JSON) for designing user interface–centric applications. Imperative aspects are handled by inline JavaScript code. It is associated with Qt Quick, the UI creation kit originally developed by Nokia within the Qt framework. Qt Quick is used for mobile applications where touch input, fluid animations and user experience are crucial. QML is also used with Qt3D to describe a 3D scene and a "frame graph" rendering methodology. A QML document describes a hierarchical object tree. QML modules shipped with Qt include primitive graphical building blocks (e.g., Rectangle, Image), modeling components (e.g., FolderListModel, XmlListModel), behavioral components (e.g., TapHandler, DragHandler, State, Transition, Animation), and more complex controls (e.g., Button, Slider, Drawer, Menu). These elements can be combined to build components ranging in complexity from simple buttons and sliders, to complete internet-enabled programs. 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. QML is the language; its JavaScript runtime is the custom V4 engine, since Qt 5.2; and Qt Quick is the 2D scene graph and the UI framework based on it.…

QML (Qt Meta-object Language ) is a user interface markup language. It is a declarative language (similar to CSS and JSON) for designing user interface–centric applications. Imperative aspects are handled by inline JavaScript code. It is associated with Qt Quick, the UI creation kit originally developed by Nokia within the Qt framework. Qt Quick is used for mobile applications where touch input, fluid animations and user experience are crucial. QML is also used with Qt3D to describe a 3D scene and a "frame graph" rendering methodology. A QML document describes a hierarchical object tree. QML modules shipped with Qt include primitive graphical building blocks (e.g., Rectangle, Image), modeling components (e.g., FolderListModel, XmlListModel), behavioral components (e.g., TapHandler, DragHandler, State, Transition, Animation), and more complex controls (e.g., Button, Slider, Drawer, Menu). These elements can be combined to build components ranging in complexity from simple buttons and sliders, to complete internet-enabled programs. 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. QML is the language; its JavaScript runtime is the custom V4 engine, since Qt 5.2; and Qt Quick is the 2D scene graph and the UI framework based on it. These are all part of the Qt Declarative module, while the technology is no longer called Qt Declarative. QML and JavaScript code can be compiled into native C++ binaries with the Qt Quick Compiler. Alternatively there is a QML cache file format which stores a compiled version of QML dynamically for faster startup the next time it is run. Many open-source applications import QtQuick Rectangle { id: canvas width: 250 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 example above, there are two objects, a Rectangle; and its child, an Image. Between the braces, one can specify information about the object, such as its properties. Properties are specified as property: value. In the example above, 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: 120 height: 100 } Rectangle { width: myRect.width height: 200 } } An id must begin with a lower-case letter or an underscore, and can contain no characters other than letters, digits, and underscores. 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 built-in JavaScript objects like Date and Math. Rectangle { function calculateMyHeight() { return Math.max(otherItem.height, thirdItem.height); } anchors.centerIn: parent width: Math.min(otherItem.width, 10) height: calculateMyHeight() color: width > 10 ? "blue" : "red" } import QtQuick Item { 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 { from: "*" to: "moved" NumberAnimation { properties: "x,y"; duration: 500 } } ] 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 } } } } MouseArea { onPressed: console.log("mouse button pressed") } All signal handler names begin with "on".

Text derived from https://en.wikipedia.org/w/index.php?oldid=1362337601 under CC BY-SA 4.0; modifications have been made.