QML – a new approach to building GUI

Traditionally, all desktop applications are written in imperative programming languages, this approach is simple and straightforward, it is much easier to describe the sequence of actions for solving a particular problem than to pose the problem in a machine-understandable form, but when it comes to designing the appearance and behavior, difficulties arise …

Web designers are used to describing how a web application should look, that is, setting a task, and not describing its solution point by point, this approach is called declarative, it is convenient, but unfortunately in traditional applications, it is the imperative approach that still dominates. There are, of course, form designers, but they only allow you to outline the appearance of the application in general terms, but they are completely unable to describe its behavior. To solve this problem, Qt Software proposed a new project Declarative User Interface and within it a new markup language.

Meet QML

It 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 that brings its html5 a little closer, which I think web designers will really like, and programmers too. And in the future, this will finally allow completely separating the internal logic of the application and its external behavior, as a result of which the eternal problem will finally be solved when the programmer is also concerned with the appearance of the application because it was too difficult for designers to delve into programming.

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

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
  }
}

A slightly more complicated example, 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
      }
    }
  }
}

Impressive? It will be possible to describe in this way various states of the state of the machine, create signals / slots, indicate with the help of which effect various states should be switched, and much more.

But while these are only the very first steps, the technology has not yet matured to a state of readiness, while all this is not even integrated into the main Qt development branch, but the most daring of you can dive into it today.

And then one fine day not to clutch at my head with the thought “God, but now I have to rewrite everything under this QML”, I advise you to look closely at this technology today and design your applications so that it can be easily integrated into them. On my own, I advise you to use the dynamic property a little more, since they can be made visible from javascript and QML objects without unnecessary gestures.