QML, user interface language

Qt Markup Language is a declarative UI language. It is compatible with the Qt framework and interfaces with its API. It can be extended with C code holding calls to this API.

To use the runtime, Qt Declarative, must be added to the Qt framework.

Why use QML?

Building an interface on the Qt environment is easier with QML as it is easier to describe a Java interface with JavaFX, which is similar (while other platforms make use of XML).
Just one line of code to display "Hello World!" cons thirty in Qt (see "Hello World!" in all languages).

The processing can be much slower however with than the use of direct calls to the Qt framework, so the language is best suited for small applications with a simple interface, and less for heavier applications.

According to the editor, the runtime being installed on a server, a QML application can works on the Web with HTTP, making it an alternative to HTML. A HTML page may be generated also by QML to be viewed in a browser and be powered by JavaScript.

Features of the language

The syntax is inspired by that of C. Objects are described as C structures.
There is no semicolon at the end of statements with a line break (as in Scriptol).
An object can be defined by a combination of other objects.
The values of the properties of an object may be JavaScript expressions. We can associate a list of conditions-actions to a property.
State, Transition, Animation are blocks that are associated with graphical objects (such as Image, Rectangle, Text, etc.).
State is a block that describes a set of properties that are applied to an object when a condition is met.
Transition is a declaration that shows a change in time.
Animation describes the evolution of an object through changes of its properties.

Code samples

Drawing a rectangle enclosing the words "Hello World!".

Rectangle {
   width: 200
   height: 200
   color: mouse.pressed ? "blue" : "red"  
   Text {          
     text: "Hello World"          
     anchors.centerIn: parent      
   }  
}

Including JavaScript code ...

Rectangle {      
   function calculateHeight() 
   {          
     ... calculs... 
     return x;      
   }      

   height: calculateHeight()      
   width: { 
      if (height > 100) 200; else 50 
   }  
}