QML
| QML | |
|---|---|
| Paradigms : | declarative , reactive, scripting language |
| Publishing year: | 2009 |
| Developer: | Qt Project |
| Current version : | 5.15.0 (May 26, 2020) |
| Typing : | strong , dynamic |
| Influenced by: | JavaScript , Qt |
| Affected: | Qt |
| doc.qt.io/qt-5/qmlapplications.html | |
QML (Qt Modeling Language) is a declarative programming language that was developed as part of Qt , a library for creating user interfaces in C ++ . The purpose of the language is to develop user interfaces, primarily (but not necessarily) for desktop and mobile systems. The language is syntactically based on JSON , but is not compatible. Due to its declarative basic structure and the seamless integration of JavaScript , it combines declarative and imperative approaches in one programming language. QML is part of the Qt User Interface Creation Kit (Qt Quick) and can (including its JavaScript components) be compiled into native C ++ using the Qt Quick Compiler .
syntax
At the center of the QML language is the declarative description of GUI elements. The description of an individual element can look like this, for example:
Rectangle {
color: "green"
x: 5; y: 10
width: 50
height: 2 * width
}
At the beginning there is the type of the element, followed by curly braces. The properties of the element are described in the curly brackets in the form “ Name of property : Value ”. The value can either be a simple literal or a complete JavaScript statement, as in the example above when defining the height. However, this definition by means of a JavaScript instruction is not an assignment according to the principle of imperative programming languages, but rather a definition in the mathematical sense. In the case of the above example, this means that the height is always twice the width, even if the value of the width changes. The actual height is then recalculated.
Elements can be nested. To do this, the description of the child element is written into the description of the parent element:
Rectangle {
//...
Text {
id: label
color: "red"
text: "Hello World!"
anchors.centerIn: parent
}
}
The child element can now reference its parent element via the parent variable , e.g. B. to center yourself in its parent element using the "Property" anchors.centerIn: parent . In addition, elements can in principle, if defined, be referenced via their ID. The ID is defined via the property id .
The “signal slot principle” is an important part of language. Signals are triggered, for example, as a consequence of inputs such as B. the clicked () signal of the MouseArea element type . A signal can be reacted to by defining a "slot" in the corresponding element, for this purpose the property on <signal name> is defined with the JavaScript instruction to be executed or the JavaScript block to be executed, which is then executed imperatively. For the example with the MouseArea it could look like this:
MouseArea {
//...
onClicked: {
console.log("Hello World");
label.text = "Guten Abend!";
}
}
Alternatively, you can define properties and signals yourself or trigger them manually:
Item {
//...
property bool enabled: true
signal clicked; // Dies ist die Definition des Signals
MouseArea {
anchors.fill: parent
onClicked: if (enabled) {
parent.clicked(); // Hiermit wird das Signal ausgelöst
}
}
}
Advantages over other approaches
QWidgets
Traditionally, Qt-based interfaces were developed using the QWidget system using C ++. The advantage of QML lies on the one hand in the declarative programming, which has an advantage in the clarity of the program code. Animations, in particular, are easier to implement using QML. On the other hand, QML surfaces from version 5.0 are drawn by an OpenGL -based scene graph . This brings higher execution speed and reduces the risk of display errors.
HTML
In the field of mobile applications, HTML is becoming increasingly important. The significant strengths of QML or Qt Quick compared to HTML as the basis for user interfaces are:
- Property bindings
- Different elements in user interfaces are often interdependent, especially in terms of shape, e.g. B. if an element has a variable width, but a sibling element should always use the remaining horizontal space in the parent element. What is only possible with tricks in HTML with CSS, if at all, is possible in QML with the simple property definition "width: parent.width - otherElement.width".
- Positioning
- The positioning of elements in QtQuick is possible in three different ways: Absolute positioning, related to the parent element, layouts and so-called anchors. While layouts are already something that does not exist in this form in HTML, which means that layouts are a strength of QML in themselves, the power of QML really comes into play with anchors. Every graphical QML element has several anchors, namely top , bottom , left , right , verticalCenter and horizontalCenter . Any anchor of another element can be assigned as a value to each of these anchors via property binding (horizontal anchors, of course, only other horizontal anchors, vertical anchors only other vertical anchors). So z. B. the middle of an element can be aligned vertically and centrally on the right edge of another object:
The result
Rectangle {
id: rect1
color: "green"
width: 100
height: 100
}
Rectangle {
id: rect2
color: "red"
width: 20
height: 20
anchors.horizontalCenter: rect1.right
anchors.verticalCenter: rect1.verticalCenter
}
- Object orientation
- In addition to the standard element types, it is possible in QML to define your own element types, so-called components. This works by creating an ordinary QML file with the name of the component and simply creating an element with the name of the component as the element type in another QML file (the files must be in the same directory). The element is now programmatically transparent as an instance of the code that is in the corresponding component QML file. This means that code segments that have been used repeatedly can be swapped out and reused according to the principle of object orientation. For more complex applications it is also possible to link your own functionalities developed in C ++ with QML. For example, any QObject instances can be assigned to a QML context, whose attributes and methods can then be accessed in the QML code. Thanks to the signal slot concept , which is used in the entire Qt library, QML attribute values can also be linked to C ++ attribute values and automatically updated when they are changed. You can also develop your own QML element types with any functionality in C ++ or expand existing QML elements. The drawing routines already used for QWidgets and the newer, OpenGL-based scene graph are available for visual elements.
The main advantage of HTML is that it is more widely used and more widely known.