Qt Meta Language

QML (Qt Meta Language or Qt Modeling Language) is a user interface markup language. It is a JSON-like declarative language for designing user interface–centric applications. Inline JavaScript code handles imperative aspects. It is part of Qt Quick, the UI creation kit developed by Nokia within the Qt framework. QML is mainly used for mobile applications where touch input, fluid animations (60 FPS) and user experience are crucial. QML documents describe an object tree of elements. QML elements shipped with Qt are a sophisticated set of building blocks, graphical (e.g., rectangle, image) and behavioral (e.g., state, transition, animation). 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 V4 engine and Qt Quick is the scenegraph-based UI framework. These are all part of the Qt Declarative module, but the technology is no longer called Qt Declarative.

Example:

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, 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.

Note that an id must begin with a lower-case letter or an underscore, and cannot contain characters other than letters, digits and underscores.