Image 1. An Element of GUI Autodesk Maya LT written in Qt.
Qt is de-facto the most suitable framework for the commercial application of a cross-platform GUI library available for C++, Python, Go, Haskell and some other languages. Of course, developers are free to choose from among many other frameworks for designing user interfaces: wxWidgets, JUCE, CEGUI, Tk or even GTK. But each of these frameworks have specific bottlenecks. Qt has its own issues also, but we feel they are are fewer than in any other GUI framework. Qt is time-proven and perhaps the most well-known, well documented and well supported framework. Qt is positioned as a tool for creating consistent multi-platform UIs, or rather as the company states “fluid, high-performance and intuitive UIs”. Naturally DevelopEx Company uses all these benefits for creation of many of our projects for multiple platforms.
QML
What makes Qt the most powerful tool for cross platform development is QML. It is not just another Qt module. It is the “Qt Meta (or Modelling) Language” that makes it possible to build powerful UIs with relatively simple JSON-based syntax. The inline JavaScript code handles imperative aspects. QML provides an API to enable application developers to extend the QML language with custom types and integrate QML code with JavaScript and C++. The QML provides both a QML API and a C++ API. QML is mainly used for mobile applications where touch input, fluid animations (60 FPS) and user experience are crucial.
Image 2. Using QML and UI Appearance Example.
Qt Controls
The basic problem with Qt is (or was) the controls. Many developers have complained about inability to create a UI exactly the same as a native platform (especially iPhone or Mac OS) has. The final GUI is almost the same as native but there is a difference in the details. What the Qt framework did was to work with snapshots of the native controls, tweak them, and used them as a foreground or background in own Qt’s controls. This approach does not work when animations and transitions are involved.
That is why Qt’s developers released the Qt Quick Controls 2.0 library within Qt 5.8. The aim was to do the alternative to the above standing procedure, and explore how feasible it would be to wrap actual native controls into a cross platform Qt API. The Quick Controls module was mainly focused on making the controls work on mobile and embedded projects. Controls 2.1 added new features for desktop, mobile and embedded projects such asHover effects, Ripple Effects, a new theme option for the Material and Universal styles, a new Dialog popup, and the RoundButton which can be used as a Floating Action Button. These were added to accommodate the interests of the Google Material Design and Windows Phone Guidelines.
Also, there are separate extensions such as the QML Theme and Component Library for Android, Material Design components using Qt/QML and QML Theme and Component Library for iOS.
Image 3. Various UI Components Provided by Qt Quick Controls.
Other Qt Features
There are many other features that make the Qt de-facto the best framework for making a GUI.
Windowing System
The Qt GUI module provides classes for windowing system integration, event handling, OpenGL and OpenGL ES integration, 2D graphics, basic imaging, fonts and text. These classes can be used directly, for instance to write applications using low-level OpenGL ES graphics APIs. For application developers writing user interfaces, Qt provides higher level API’s, like Qt Quick. The 2D Graphics module contains classes for 2D graphics, imaging, fonts and advanced typography. QWindow supports graphics rendering using OpenGL and OpenGL ES, depending on what the platform supports. The GUI module makes possible to create user interfaces with advanced features: maps, charts and data visualizations.
Qt Quick and Other Tools
Qt has its own designer and designing a good GUI with it is fairly simple with the help of spacers, buttons, html editor etc. The Qt Quick library reduces the effort required for designing UI compared to the traditional native (C or C++) approach. The new libraries Qt Controls and Qt Layouts reduce development time even more. These modules provide UI controls and layouts.
Animations
Qt Quick and QML provide the capability to animate properties and facilitate the creation of fluid UIs. These are user interfaces where the UI components animate instead of just appearing, disappearing, or jumping abruptly.
UX
Qt 5.x handles touch as well as mouse and keyboard handling. Qt Sensors and Qt Positioning modules makes it possible to implement reaction to a touch that uses common behaviors for most portable devices. The Qt Sensors API provides access to sensor hardware like accelerometers, compasses, gyroscopes. Also this module provides a motion gesture recognition API for devices. Qt Positioning retrieves different kinds of positioning information such as an object’s position on a map or area-based monitoring. With Qt Sensors QML and C++ interfaces are used.
Web Engine
Qt WebEngine is a web content rendering engine. Like many popular browsers it is based on the Chromium open source project. The WebEngine supports all standard web technologies and features. The module can be integrated with Qt Quick and other widgets. The WebEngine works with HTML5, CSS filters, animations, video, and Canvas. Also this module is complemented with Qt WebChannel, which bridges the gap between QML/C++ and HTML/JavaScript. It is possible to share QObjects from QML/C++ with HTML/JavaScript-based clients.
Multimedia
The multimedia possibilities of Qt are represented by a rich set of QML types and C++ classes that handle multimedia content. Qt Multimedia Classes are developed for audio, video, radio and camera functionality. Qt Multimedia Widgets are widget-based classes for implementing multimedia functionality. The modules can be used within the set of essential modules and are supported on all major platforms.
Suitable Operating Systems
Commercial use of a Qt application is possible with any popular operating system, including both desktop and mobile platforms: Windows, Linux, macOS, iOS, Android and others. But it does not mean that UI will look like a native application. Still today much work should be done to adapt a certain GUI for a certain operating system. However, it is now much easier than it was a year ago because of the following improvements:
- Qt contains platform-specific Extras to enable a GUI design as close as possible to the native GUI.
- Qt Android Extras enables you to integrate Java code into your Qt application.
- Qt Mac Extras enables you to access specific features of macOS and iOS.
- Qt Windows Extras enables you to use Windows-specific features such as jump lists, progress indicators on taskbar buttons, and so on.
- Qt X11 Extras enables you to access the display configuration on Linux (X11).
Also, it is possible to create an application for tvOS (Apple TV) and watchOS (Apple Watch). Qt for tvOS is 95% the same as iOS. The major difference between the two platforms is their input handling; iOS has a touch-based model while tvOS has a focus based model. Qt for watchOS is also heavily based on iOS. However, it is not possible to run QML or any other Qt based UI on the watch using public APIs because the primary interface API is WatchKit.
UI Examples
Finally, a couple of good examples of UIs created using Qt. There are both Telegram (desktop version) and the Google Earth desktop versions. As shown below these UIs look similar and are well-adapted for all three major platforms (macOS, Linux and Windows).
Telegram Messenger (Desktop)
Google Earth
Images used in the article: awn.com, mzstatic.com, orison.biz, doc.qt.io, sftcdn.net.
