Why we should use Qt framework and QML

12 min readNov 18, 2019

Qt (pronounced “cute”) is an open-source Frameworks for creating graphical user interfaces as well as cross-platform applications that run on various software and hardware platforms with little or no change in the underlying codebase while still being a native application with native capabilities and speed.

In this article, we will discuss several points of the Qt framework:

The presentation of the framework and its target platforms deploying.
The applications that use it.
We will also present the IDE proposed by Qt, called Qt Creator, it’s a very good IDE for C++ and Qt applications.
And we will see another language created by Qt, which is both powerful, performant, and high level. It called QML, it’s integrated in Qt Quick module.
We will talk also about the tools used by Qt for helping to create application.

Qt frameworks

Using Qt, you can write GUI applications once and deploy them across desktop, mobile and embedded operating systems without rewriting the source code ( https://doc.qt.io/qt-5/supported-platforms.html).

Code less. Create more. Deploy everywhere. Qt. Its the objective of Qt.

Qt is written in C++, but you can also use language binding as Python with PySide2 (official Qt) or PyQt (unofficial).

There exist other bindings languages created by the community:

Go: https://github.com/therecipe/qt
Rust: https://github.com/rust-qt

Qt also offers a large number of modules.

Figure 3: List modules of Qt ( https://doc.qt.io/QtForDeviceCreation-5.12/index.html)

For more informations about Qt modules, see: https://doc.qt.io/qt-5/qtmodules.html

Qt softwares

In this section, we will see some importants softwares that are created by Qt.

KDE

Figure 4: KDE ( https://kde.org/announcements/plasma-5.15.0.php)

(K Desktop Environment) is a desktop environment. It consists of a set of tools that allow you to graphically use your computer: window manager, connection window, file manager, utilities, etc. and of course the Plasma Office.

Maya

Maya is 3D computer animation software with powerful modeling, rendering, simulation, texturing, and animation tools for artists, modelers, and animators.

Sailfish OS

Sailfish OS is a true Linux-based open operating system with an active open source contribution model, meaning that all customers and an active Sailfish developer community contribute to the development of the core software.

CryEngine

CryEngine is a game engine developed by Crytek, specializing in first-person shooter.

Peugeot E-Legend

Figure 8: Automotive ( https://www.qt.io/blog/2019/06/28/announcing-qt-automotive-suite-5-13)

Peugeot E-Legend is an autonomous driving car, where the digital cockpit is created using Qt.

webOS

webOS is an operating system deployed by the LG.

There are also other softwares:

Virtualbox, Adobe Photoshop Elements, Autodesk 3ds Max, emulators (rpcs3, dolphin, ppsspp, citra), OBS, Teamviewer, ArcGis, QGis, Spyder (powerful scientific environment for scientists, engineers and data analysts), etc.

Qt Creator

Qt has its own IDE called Qt Creator to develop. It is a cross-platform C++, Python, JavaScript and QML integrated development environment, and it is optimized to compile projects using Qt.
It includes a visual debugger and an integrated GUI layout and forms designer tools, which makes it easy to create a GUI.

QML (Qt Markup Language)

QML (module of Qt Quick) is a declarative language. It allows developers and designers alike to create highly performant, fluidly animated and visually appealing applications. It offers a highly readable, declarative, JSON-like syntax with support for imperative JavaScript expressions, and it allows components to be easily reused and customized within a user interface.

In a typical project, the front-end is developed in QML/JavaScript. The back-end code, which interfaces with the system and does the heavy lifting, is developed using Qt C++/Python. This allows a natural split between the more design-oriented developers and the functional developers. (Reference 1).

The importance of QML is to manipulate a powerful language easily.

To see all the modules available in QML, see this link: https://doc.qt.io/qt-5/modules-qml.html

QML Performance

QML uses GPU for accelerated calculations.
Qt is after all written in C++ and it runs natively on supported platforms.
The components of QML are written on C++.
Implement the application engines or application logic outside of the UI interface in C++ to improve efficiency.
QML uses a JIT (just in time) and AOT (ahead of time) compiler.
QML is native.

QML Syntax

QML is a hierarchy of elements, any object declaration can define child objects through nested object declarations.

In the next example, child elements inherit the coordinate system from the parent. An x,y coordinate is always relative to the parent ( (see reference 1).

Figure 12: Hierarchy of QML (see reference 1)

Figure 13: QML example (see reference 1)

// The root element is the Rectangle
Rectangle {
    id: root
    width: 120; height: 240
    color: "#4A4A4A"

    // Declare a nested element (child of root)
    Image {
        id: triangle

        // reference the parent
        x: (parent.width - width)/2 
        y: 40
        source: 'triangle_red.png'
    }

    // Another child of root
    Text {
        // reference element by id
        y: triangle.y + triangle.height + 20// reference root element
        width: root.width

        color: 'white'
        horizontalAlignment: Text.AlignHCenter
        text: 'Triangle'
    }
}

QML Features

In this section will see the best features of QML.

Anchors

In addition to the more traditional Grid, Row, Flow and Column layouts. Qt Quick provides a way to layout items using the concept of anchors.

Each item can be thought of as having a set of 7 invisible “anchor lines”: left, horizontalCenter, right, top, verticalCenter, baseline, and bottom.

Examples

Rectangle { id: rect1; ... }
Rectangle { 
    id: rect2
    anchors.left: rect1.right
     ... }

Rectangle { id: rect1; ... }
Rectangle { 
    id: rect2
    anchors.left: rect1.right
    anchors.top: rect1.bottom
    ... }

Rectangle { id: rect1; ... }
Rectangle { 
    id: rect2 
    anchors.left: rect1.right
    anchors.leftMargin: 5
    ... }

Fore more informations, see: https://doc.qt.io/qt-5/qtquick-positioning-anchors.html

Mouse area

MouseArea is an invisible item that is typically used in conjunction with a visible item in order to provide mouse handling for that item. It can be used with an image, rectangle, and others elements.

For more informations, see: https://doc.qt.io/qt-5/qml-qtquick-mousearea.html

Property Binding

Property bindings are a core feature of QML that lets developers specify relationships between different object properties. When a property’s dependencies change in value, the property is automatically updated according to the specified relationship.

For more informations, see: https://doc.qt.io/qt-5/qtqml-syntax-propertybinding.html

DragHandler

DragHandler is a handler that is used to interactively move an Item.

For more informations, see: https://doc.qt.io/qt-5/qml-qtquick-draghandler.html

State

A state is a set of batched changes from the default configuration.

All items have a default state that defines the default configuration of objects and property values. New states can be defined by adding State items to the states property to allow items to switch between different configurations. These configurations can, for example, be used to apply different sets of property values or execute different scripts.

For more informations, see: https://doc.qt.io/qt-5/qml-qtquick-state.html

Animation

Animation is a very flexible and multifunctional tool satisfying different users needs.

Figure 22: Animation applied on value type x

In Qt Creator, you have a mini editor to make an animation easily, just select the properties you want. ( This mini helper is existing for rectangle, image, text, and animation).

For more informations, see: https://qmlbook.github.io/ch05-fluid/fluid.html

Transition

A Transition defines the animations to be applied when a State change occurs.

For more informations, see: https://doc.qt.io/qt-5/qml-tutorial3.html

Behavior

A Behavior defines the default animation to be applied whenever a particular property value changes.

Loading Components Dynamically

The easiest way to dynamically load different QML components and files is to use the Loader element. It is useful for delaying the creation of a component until it is required: for example, when a component should be created on demand, or when a component should not be created unnecessarily for performance reasons.

For More informations, see: https://doc.qt.io/qt-5/qml-qtquick-loader.html and http://qmlbook.github.io/ch14-dynamicqml/dynamicqml.html.

Signal and Handler Event System

QML has a signal and handler mechanism, where the signal is the event and the signal is responded to through a signal handler. When a signal is emitted, the corresponding signal handler is invoked. Placing logic such as a script or other operations in the handler allows the component to respond to the event.

For example, the Button type has a clicked signal, which is emitted whenever the button is clicked. In this case, the signal handler for receiving this signal should be onClicked. In the example below, whenever the button is clicked, the onClicked handler is invoked,

Button {
    text: "Change color!"
    onClicked: {
       console.log("clicked") 
   }
}

In some cases it may be desirable to access a signal outside of the object that emits it. For these purposes, the QtQuick module provides the Connections type for connecting to signals of arbitrary objects. A Connections object can receive any signal from its specified target.

Button {
    id: button
    text: "Change color!"
}Connections {
   target: button
   onClicked: {
        console.log("clicked button")
   }
}

Property change signal handlers

A signal is automatically emitted when the value of a QML property changes. This type of signal is a property change signal and signal handlers for these signals are written in the form on<Property>Changed

For example, the Rectangle type has a color property. To receive a notification whenever this property changes, write a signal handler named

Rectangle {
    color: "red"
    onColorChanged: {
       console.log("Color changed") 
   }
}

You can also add your own custom signal easely !

For more informations, see: https://doc.qt.io/qt-5/qtqml-syntax-signals.html

QML and JavaScript

QML provides a JavaScript host environment tailored for writing QML applications. This environment is different from the host environment provided by a browser or a server-side JavaScript environment such as Node.js.

For example, QML does not provide a window object or DOM API as commonly found in a browser environment. It can run valid standard JavaScript constructs such as conditional operators, arrays, variable setting, and loops. The QML runtime supports currently up to ES7.

Example 1

Item {
    function fibonacci(n){
        var arr = [0, 1];
        for (var i = 2; i < n + 1; i++)
            arr.push(arr[i - 2] + arr[i -1]);

        return arr;
    }MouseArea { 
        anchor.fill = parent
        onClicked: console.log(fibonacci(10))   
    }
}

Example 2

// script.jsfunction jsFunction() {
    console.log("Called JavaScript function!")
}---------------------------// files.qmlimport "script.js" as MyScriptItem {
    id: item
    width: 200; height: 200

    TapHandler {
        id: inputHandler
    }

    Component.onCompleted: {
        inputHandler.tapped.connect(MyScript.jsFunction)
    }
}

The jsFunction() is called whenever the TapHandler's tapped signal is emitted.

Qt QML Style ( material , imagine, PS bridge)

Qt QML supports some styles:

Material Design (Black/White).
Universal Design (Black/White).
Imagine Style.
Fusion Style.
Default Style.

Fore more informations, see: https://doc.qt.io/qt-5/qtquickcontrols2-styles.html

Figure 27: Material and Universal design (black)

Imagine Style

The Imagine style is based on image assets. The style comes with a default set of images.

The designers tools

Figure 30: Qt 3D Studio and Qt Designer Studio

Qt uses 3 designers tools for its applications:

Qt Quick Designer: Qt offers a graphical tool that lets your build QML GUIs.
Qt 3D Studio: is designer-oriented and makes it easy to build complex 3D scenes with states and transitions that can be used in and controlled by Qt applications. For more information, see: https://www.youtube.com/watch?v=3OgiQMHzI-A
Qt Designer Studio: is a UI design and development tool that enables designers and developers to rapidly prototype and develop complex UIs. It’s special for designers. The most notable addition in this tools, it’s the Qt Bridge for Sketch. This allows you to seamlessly import your designs (Photoshop, Adobe Illustrator) to Qt Design Studio. For more informations, see: https://www.youtube.com/watch?v=oLdEJMoE7l8

Qt Quick Designer

With this tool, we can do a lot of things without going through code, especially for a designer. We can create:

States.
Signal and Slot.
Property bindings.
Animations with a timeline.

For more informations, see: https://doc.qt.io/qtcreator/creator-using-qt-quick-designer.html

Animation with timeline

We will see how we can create an animation with timeline editor

Video 1: Timeline editor

States example

We will see how to change the state of a QML element with Qt Quick Designer.

Video 2: Qt Quick Designer with states

Qt Quick 3D

Qt Quick 3D, which is a high-level API for creating 3D content for Qt Quick user interfaces. (We can use the Qt 3D module, but Qt Quick 3D is easier).

Prototyping

QML scene

It’s a utility that loads and displays QML documents even before the application is complete. It’s used for prototyping.

You can do this also on Qt Creator.

Qt Design Viewer

Based on Qt for WebAssembly , we can create a QML viewer that runs in web browser.

You can test in this link: http://qt-webassembly.io/designviewer/

Conclusion

We saw the importance of the Qt framework and the power of its IDE, as well as the use of its QML language, which is both easy and powerful, which allowed communication with the C ++ / python backend.

Ressources

Official Qt: https://qt.io
Learn QML: http://qmlbook.github.io/
C++ documentation: https://doc.qt.io/qt-5/reference-overview.html
Python documentation: https://doc.qt.io/qtforpython/
QML documentation: https://doc.qt.io/qt-5/qmlreference.html

References

1- http://qmlbook.github.io/ch01-meetqt/meetqt.html

Reviewers

Okba Bekhelifi