QML

QML (Qt Meta Language or Qt Modeling Language) is a declarative programming language which was developed as part of Qt, a library for creating user interfaces in C . Purpose of language is the development of user interfaces, primarily (but not necessarily ) for desktop and mobile systems. Syntactically, the language is based on JSON, but is not compatible. Due to their declarative basic structure and the seamless integration of JavaScript declarative and imperative approaches unites them in a programming language. QML is part of the Qt User Interface Creation Kit (Qt Quick).

Syntax

In the center of the language QML is the declarative description of GUI elements. The description of a single element can for example look like this:

Rectangle {      color: " green"      x 5; y: 10      width: 50      height: 2 * width } At the beginning is the type of the element, followed by braces. In the curly brackets are the properties of the element are in the form " name of the property: value " described. The value can either be a simple literal or a complete JavaScript statement, as in the example above in the definition of the height to be. However, this definition using a JavaScript statement is an assignment according to the principle of imperative programming languages, but rather a definition in the mathematical sense. That is, in the case of the upper embodiment, the height is always double the width, although the value of the width. The actual amount is then recalculated.

Elements can be nested. To this end, 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 be parents now reference element parent of the variable, eg around " anchors.centerIn: parent " about the Property to be centered in its parent element. In addition, elements can, in principle, if defined, are referenced via their ID. The ID is defined by the property id.

An important component of language is also the signal-slot principle, a fundamental feature of Qt. Signals are triggered, for example, as a result of inputs, such as the clicked () signal of the element type Mouse Area. At a signal can be responded by defining a slot in the corresponding element, this one defines the Property on with the JavaScript statement to be executed or to be executed the JavaScript block that / which is then executed imperative. For the example with the Mouse Area could look like this:

Mouse Area {      / / ...      onClicked: {          console.log ("Hello World ");          Label.Text = " Good evening! ";      } } Alternatively, you can also define your own properties and signals, and / or emit manually:

Item {      / / ...      property bool enabled: true      signal clicked; / / This is the definition of the signal      Mouse Area {          anchors.fill: parent          onClicked: if ( enabled) {              parent.clicked (); / / This signal is emitted          }      } } Advantages over other technologies

QWidgets

Traditionally, Qt -based interfaces were developed using the QWidget system using C . The advantage of QML is firstly of declarative programming that brings an advantage in the clarity of the code. Especially animations are easier to implement using QML. On the other QML surfaces are drawn since version 5.0 of an OpenGL -based scene graphs. This brings performance improvements and reduces the risk of rendering errors.

HTML

In the context of mobile applications, HTML is becoming increasingly important. The major strengths of QML and Qt Quick in comparison to HTML as the basis for user interfaces are:

1 Property Bindings: Various elements in user interfaces are often, especially in terms of form, dependent on each other, eg if an element has a variable width, a sibling, however, should always utilize the remaining horizontal space remaining in the parent element. What in HTML with CSS if at all, only about tricks is possible in QML with the simple property definition "width: parent.width - otherElement.width " possible.

2 positions: The positioning of elements is possible in QtQuick in three different ways: Absolute positioning relative to the parent element, layouts and so-called anchor. While layouts are already something that does not exist in HTML in this form, making layouts for themselves are already a strength of QML, comes anchors have the power of QML ensure optimum use. Each graphical QML element has multiple anchors, namely, top, bottom, left, right, center vertical and horizontal center. Each of these anchors can be assigned a value of an arbitrary anchor of another element by Property Binding (horizontal anchor, of course, only other horizontal anchors, vertical anchor only other vertical anchors ). Thus, e.g. the center of a vertically oriented central element are at the right edge of another object:

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 } 3 Object Orientation: In addition to the standard element types, it is possible in QML to define your own item types, so-called components. This works by creating an ordinary QML file with the name of the component and easily created in a different QML file an element with the name of the component as the element type ( the files must be in the same directory). The element is now transparent programmatically an instance of the code which is in the corresponding component QML file. This multiple use of code segments can be stored and reused according to the principle of object orientation.

The most important advantage of HTML is the wider distribution and greater acquaintance of language.