Why we should use Qt framework and QML
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:
Qt also offers a large number of modules.
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
(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
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).
// 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.
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
Imagine Style
The Imagine style is based on image assets. The style comes with a default set of images.
The designers tools
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
States example
We will see how to change the state of a QML element with Qt Quick Designer.
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