The Qt framework: solid fun in many languages

Particularly to people using C++ and Python the Qt framework is probably quite well-known, as in these communities it’s one of the most-used frameworks for application development. For those who don’t know what Qt is or what it does: it’s a comprehensive LGPL-licensed framework providing cross-platform support for GUI, network, multimedia, database, sensors, graphics (OpenGL) and many other features. In this article I would like to give a quick overview of these.
While written in C++, Qt has many language bindings1 2 3, including for Python, Perl, Ada, Ruby, Java, BASIC, Go, C#, PHP, Lua and Haskell. Any application written in any of these languages and using the Qt framework can be deployed unmodified on any of the supported platforms4 – including all major desktop and mobile platforms – which makes it a popular framework for many big organizations and companies. Some well-known applications written using Qt include Autodesk Maya, Altera Quartus, KDE, Google Earth, Skype, Spotify (Linux), Virtualbox and VLC.

qt_imagecomposer_qt-creator
Screenshot 1: Image Composition sample application running on top of Qt Creator IDE.

In addition to the straight Qt framework there is also the Qt Modeling Language (QML) component which can be used to rapidly create user interface-centric applications in a JavaScript-based, declarative language. It’s commonly used for mobile and embedded applications. A basic QML application can be enhanced using JavaScript code and feature anything from UI controls to a complete web browser widget (using the WebKit-based module).

Getting started

When I started using Qt in 2010 Qt 4.7 was the standard. Since then Qt has grown into its current form at version 5.3, with a strong focus on JavaScript and mobile development (using the Qt Quick module, which defines QML), while the original C++ API also got a makeover. This didn’t change any fundamentals, however, mostly improving library organization and features such as accessibility in GUIs.
To quickly build a GUI application, one can use the provided Qt Creator IDE, which includes all of the tools to make any type of application, including non-Qt-based ones. If one wanted to for example create a browser using the Webkit browser engine, a single class implementation would suffice, as in Qt’s Fancy Browser example5, which goes one step further and even loads a JQuery instance into the JavaScript runtime to perform HTML manipulation.

qt_fancybrowser
Screenshot 2: Fancy Browser example application.

For a hobby project I took this basic concept and made a more full-featured browser6, writing a custom cookie handler among other extensions to the basic Qt classes. With the foundation Qt provides it’s very easy to rapidly get started on a project, or to quickly prototype a concept without wasting hours on implementation details.
Whether one uses C++, Python, Ada or another language for which a complete wrapper exists, the basic principle doesn’t change in implementing a Qt-based application. One always uses the same API and same concepts, just molded to fit the implementing language.

Enter QML

Even to long-time users of C++/Qt QML can seem quite confusing at first, mostly because of the confusion over what QML is and isn’t. In essence QML (Qt Modeling Language) is the name of the modeling language: a descriptive language using which one can define user interface elements and their behavior. QML is part of Qt Quick, the UI creation kit which itself is part of the Qt framework. Finally, the runtime for QML is called Qt Declarative.
Places where QML is used include (outside of mobile/embedded) KDE and the Unity UI (as of version 87) which is used by Ubuntu. The main motivations behind the use of a QML-based UI seem to revolve around the language and platform agnostic nature of it. All one needs is the QML runtime whereby one can add JavaScript and C++ code for further functionality. Unity 8 uses QML to ease the cross-platform deployment across desktop and mobile devices (running Ubuntu Touch).

Qt PhotoViewer sample
Screenshot 3: Photo Viewer example. QML with minimal JavaScript.

The Photo Viewer QML example application8 on the Qt site is a good example of how much one can do with just QML: this application allows one to define all views of the application with transitions, widgets and the XML-based model which retrieves image URLs from the Flickr public API. The JavaScript file is just used for some minor utility functions.
In theory one could extend the JavaScript side to include more or additional logic, and use a C++ extension for example image processing or similar functionality. Where one puts the logic and which features are included would be determined by the available resources and intended languages. One can also use QML with just C++, or pure QML with no additional languages. Many QML applications can be readily deployed on a mobile device as well.
QML isn’t just about static content either. Using Qt’s multimedia features one can for example quickly set up a video player:

import QtQuick 2.0
import QtMultimedia 5.0
Video {
    id: video
    width : 800
    height : 600
    source: "video.avi"
    MouseArea {
        anchors.fill: parent
        onClicked: {
            video.play()
        }
    }
    focus: true
    Keys.onSpacePressed: video.playbackState == MediaPlayer.PlayingState ? video.pause() : video.play()
    Keys.onLeftPressed: video.seek(video.position - 5000)
    Keys.onRightPressed: video.seek(video.position + 5000)
}

This sample, taken from the Qt Video QML type documentation9 shows just how easy it is to set up a responsive user interface with QML and to add elements which not only respond to user inputs, but can use video and audio as well.

Wrapping up

This article has barely scratched the surface of what Qt is capable of. The multi-threading, networking, multimedia, graphics acceleration, storage-related and many other features are at least as interesting. Using the many sample applications on the Qt site10 it’s easy to get an idea of the possibilities, however. Simply download the current version of the libraries together with Qt Creator and browse through the examples in the Welcome tab of the IDE, or check them out online.
Finally, if anyone reading has experience with any of the language wrappers for Qt, please leave a comment. I’d be very interested in hearing how well they work.
 

1http://qt-project.org/wiki/Category:LanguageBindings

2http://en.wikipedia.org/wiki/List_of_language_bindings_for_Qt_4

3http://en.wikipedia.org/wiki/List_of_language_bindings_for_Qt_5

4http://qt-project.org/doc/qt-5/supported-platforms.html

5http://qt-project.org/doc/qt-5/qtwebkitexamples-webkitwidgets-fancybrowser-example.html

6http://mayaposch.com/wildfox.php

7https://unity.ubuntu.com/getinvolved/development/unity8/

8http://qt-project.org/doc/qt-5/qtquick-demos-photoviewer-example.html

9http://qt-project.org/doc/qt-5/qml-qtmultimedia-video.html

10http://qt-project.org/