QML - a new approach to building a GUI

Traditionally, all desktop applications are written in imperative programming languages, this approach is simple and straightforward, where it is easier to describe the sequence of actions to solve a particular task rather than to set the task in a form understandable to the machine, but when it comes to designing appearance and behavior, difficulties arise .
Web designers, on the other hand, are accustomed to describing how a web application should look like, that is, setting a task, not describing its solution point by point, such an approach is called declarative, it is convenient, but unfortunately, traditional applications still dominate the imperative approach. Of course, there are form designers, but they only allow to outline the appearance of the application in general, but they are completely unable to describe its behavior. To solve this problem, Qt Software proposed a new project, the Declarative User Interface, and within it a new markup language:

Meet QML

This is a new markup language that allows you to describe not only the appearance, but also the behavior of your applications. It is very simple and has a json-like syntax, html5 brings it together a bit, which I think web designers will really like, and programmers as well. And in the future, it will finally allow to completely separate the internal logic of the application and its external behavior, with the result that the eternal problem will finally be solved when the programmer is also engaged in the appearance of the application, because it was too difficult for designers to understand programming.




If you want to look at QML, you can download a special build of QtCreator. As a result, you will receive, in addition to the Creator himself, also a folder with examples and a compiled program viewer.

Simplest Hello, World! It will look like this:

import Qt 4.6

Rectangle {
width: 200
height: 200
color: "white"
Text {
text: "Hello World"
anchors.centerIn: parent
}
}
* This source code was highlighted with Source Code Highlighter .

A slightly more complicated example is dial with video:

')

import Qt 4.6
import "content"

Rectangle {
color: "#545454"
width: 300; height: 300

// Dial with a slider to adjust it
Dial { id: dial; anchors.centerIn: parent; value: slider.x *100 / (container.width - 34) }

Rectangle {
id: container
anchors.bottom: parent.bottom; anchors.bottomMargin: 10
anchors.left: parent.left; anchors.leftMargin: 20
anchors.right: parent.right; anchors.rightMargin: 20; height: 16
gradient: Gradient {
GradientStop { position: 0.0; color: "gray" }
GradientStop { position: 1.0; color: "white" }
}
radius: 8; opacity: 0.7; smooth: true
Rectangle {
id: slider
x: 1; y: 1; width: 30; height: 14
radius: 6; smooth: true
gradient: Gradient {
GradientStop { position: 0.0; color: "#424242" }
GradientStop { position: 1.0; color: "black" }
}
MouseRegion {
anchors.fill: parent
drag.target: parent; drag.axis: "XAxis" ; drag.minimumX: 2; drag.maximumX: container.width - 32
}
}
}
}

* This source code was highlighted with Source Code Highlighter .

Impressive? It will be possible to describe in this way the various states of the state machine, create signals / slots, indicate with what effect different states should switch and whatnot.
But while it is still only the very first steps, the technology has not yet reached a state of readiness, as long as it is not even integrated into the main Qt development branch, but the most courageous of you can dive into it today.
And so that one day not to clutch at the head with the thought “God, I’ll have to rewrite everything for this QML now”, I advise you to look closely at this technology today and design your applications so that it easily integrates into them. From my own, I advise you to use the dynamic property more, since they can be made visible from javascript and QML objects without unnecessary gestures.
All information about the new technology can be found here.