QML - a new approach to building a GUI

Traditionally, all desktop applications are written in imperative programming languages, this approach is simple and understandable, it’s much easier to describe the sequence of actions for solving a particular problem than to put the task in a machine-friendly form, but when it comes to designing appearance and behavior, there are difficulties .
Web designers are used to describing how a web application should look like, that is, to pose a task, and not describe its solution point-by-point, this approach is called declarative, it is convenient, but unfortunately in traditional applications the imperative approach still prevails. Of course, there are form designers, but they only allow a general outline of the appearance of the application, but they are completely unable to describe its behavior. To solve these problems, a new Declarative User Interface project was proposed in Qt Software and a new markup language as part of it:

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 json-like syntax, which brings it a little closer to html5, which I think will appeal very much to web designers, and programmers too. And in the future, this will finally allow us to completely separate the internal logic of the application and its external behavior, as a result of which the eternal problem will be finally solved when the programmer also deals 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 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-looker.

The 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 bit 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 various states should switch, and much more.
But while these are still only the very first steps, the technology has not yet grown to a state of readiness, until all of this has even been integrated into the main Qt development branch, but even the most daring of you can dive into it today.
And then one day not to clutch my head with the thought “Lord, I’ll have to rewrite everything under this QML now”, I advise you to take a closer look at this technology today and design your applications so that it easily integrates into them. On 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.