Channels ▼


Qt 5 Beta: A Developer's Tour

Qt 5 and HTML5

A lot of the improvements made in Qt 5 come down to HTML 5 support. The engine is faster; it is less memory hungry; it has better support for CSS 3 and animations, transitions, and transforms — with upcoming support for CSS filters and shaders. Work is also ongoing for WebGL and hardware accelerated canvas.

Qt 5, Qt Quick, and JavaScript

One of the visions in Qt 5 was to improve the support for Qt Quick and JavaScript — especially on resource-limited devices. In Qt 5, graphical parts of Qt Quick have been separated from the QML and JS language into separate modules. Some of the changes are:

  • Qt QML, which is a new module in Qt 5 that provides the QML engine and backend infrastructure. The JavaScript engine has changed to V8, providing much better performance for JavaScript. Loading/compilation can now be performed in a separate thread, which can be enabled programmatically.
  • QtQuick 2.0 QML module, which is a major update with lot of improvements like new a Canvas type for drawing, thus providing a high-level command set based on the HTML5 Canvas specification (see Listing One for an example), support for sprite animations and transitions, improvements in user interaction like the MultiPointTouchArea type, which processes multi-point touches and provides information on touch points including position, pressure, and velocity etc.

Listing One:– Simple Canvas Example.

import QtQuick 2.0

Rectangle {
    id : rootWindow
    width: 300
    height: 200

    Canvas {
        id: canvas
        anchors.fill: parent
        property int rectWidth: 30

        onPaint: {
            // Get the drawing context
            var ctx = canvas.getContext('2d');

            // Create gradient
            var grd = ctx.createLinearGradient(0,0,parent.width,0);
            ctx.fillStyle = grd

            // Draw rectangle with selected style, in this case the gradient
            ctx.fillRect(0,0,parent.width, parent.height)

            ctx.fillStyle = "lightblue"
            ctx.fillRect(0,(parent.height / 2 - rectWidth / 2), 
                         parent.width, rectWidth)
            ctx.fillRect(parent.width / 3, 0, rectWidth, parent.height)

The effect of Lisitng One is shown in Figure 2.

Figure 2.

The Qt Quick module contains the OpenGL-based Scenegraph, support for GL based shader effects (see Listing Two for an example), particles, and many other things.

Listing Two: ShaderEffects Example.

import QtQuick 2.0

Rectangle {
    id: main
    width: 500
    height: 200

    Image {
        id: myImage
        width: parent.width/2
        height: parent.height
        source: "lake.jpg"
        anchors.left: parent.left

    ShaderEffect {
        id: myEffect
        width: parent.width/2
        height: parent.height
        anchors.right: parent.right
        property variant source: myImage
        property real alpha

        // Repeat the animation for alpha value
        NumberAnimation on alpha {
            from: 0.5; to: 1
            duration: 2000
            loops: Animation.Infinite

        // Use the QML item as the source for the Sampler2D in the fragment
        // shader. If a uniform variable in the shader program has the same 
        // name as a property defined in the ShaderEffect, the value of the
        // property is bound to the uniform
            "varying highp vec2 qt_TexCoord0;
            uniform sampler2D source;
            uniform highp float alpha;
            void main() {
                gl_FragColor = vec4(texture2D(source, qt_TexCoord0).xyz, 
                    texture2D(source, qt_TexCoord0).w * alpha);

The result of the code in Listing Two is shown in FIgure 3.

Figure 3.

Additional Changes in Qt 5

Additional changes in Qt 5 include:

Qt Core has now a new class, QStandardPaths, giving standard locations for media, documents, etc. on your platform. New compile-time checked signal/slot connection syntax has been added. A JSON parser and optimized binary format for JSON are included; as are support for Mimetype recognition, both on extension and file content. Also, C++11 support has been added where it makes sense.

Qt Gui has support for top level surfaces through the QWindow class and has built-in OpenGL support. One big change is that all QWidget-based classes have been separated out into the QtWidgets library, which is an add-on module in Qt 5 and is ported on top of the QPA architecture.

Qt Network has support for DNS lookups, the QHttp and QFtp classes have been removed.

Compatibility Between Qt 4.x and Qt 5

The Qt team has been working hard to enable smooth transition from Qt 4.x to Qt 5. There is a binary break, meaning that applications built with Qt 4.x won 't run on Qt 5. There are also some source compatibility breaks, but the Qt community has expended great effort to keep the number of source compatibility breaks to a minimum.

The Qt 5 reference documentation has a porting guide section detailing how to port Qt 4 application to Qt 5, and additional details are available from a Qt transition wiki.

As to platforms, Qt is supported on multiple primary platforms such as Windows (XP and 7), Linux (multiple distributions), and Mac OS (Apple Mac OS X 10.6 and 10.7). The community is also working to fully support Qt on platforms such as QNX, Android, and iOS.


Qt 5 is a huge step forward in bringing developers more options to use their preference of technologies, whether it is C++, Qt Quick, HTML 5, or mixture. I expect that Qt will continue to expand and run on more platforms due to input from the Qt community. And even as JavaScript and Qt Quick have become first-class citizens in Qt, C++ is and will continue to be the main programming language.

This is a particularly exciting time for the Qt community and an ideal time to start kicking the tires on the many changes and additions to the library.

A long-time contributor to Qt, Eero Penttinen is a Lead Program Manager on the Nokia Windows Phone team. His Twitter handle is eeropenttinen.

Related Reading

Qt Application Development for Symbian

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.