Overview of the new features in Qt Quick

Published Friday June 21st, 2013 | by

We have added a lot of new functionality to Qt Quick in Qt 5.1 and this blog aims to give you a brief overview. Most of the features that were previously part of the Desktop Components Project are now officially part of Qt Quick. The most obvious one being the inclusion of a new QtQuick.Controls module, but we have also added a number of related features that I would like to summarise in this blog.

Layouts

While anchors and basic positioners have previously provided great flexibility with Qt Quick, they can sometimes become tedious, verbose or complex when dealing with resizable user interfaces. By adding QtQuick.Layouts as a complement to the existing anchor based methods, you can now build complex resizable layouts, respecting minimum, maximum size hints and declare items as expanding or fixed in a simple and declarative way. We previously blogged about layouts here.

Controls

Controls are essentially the Qt Quick equivalent of widgets. Unlike the simple but powerful primitives previously provided by Qt Quick, these controls are completely defined and ready to use. Most of the familiar controls you would expect are there, including buttonscombo box, spin box, group box, slidersprogress bars, text fields and menus. They are built from the ground up using Qt Quick, and can of course be combined with any existing Qt Quick code.

Views

SplitView 

In addition to the basic controls, we also include a new set of views. As shown above, SplitView makes it possible to add a vertical or horizontal resize handle between items in a view. 

ScrollView complements the existing Flickable item but adds support for scroll bars and frame. It can be used both stand alone or in combination with an existing Flickable item, for instance in order to add scroll bars to a ListView.

TableView

While ListView has previously provided a lot of flexibility, it was often difficult to create anything resembling a classic item view table. To improve on this, we have added TableView which provides support for native look and feel as well as re-arrangable columns and row selection.

Customised Application

Most of the controls and views can also be customised so you will be able to create completely unique look for your application.

StackView

While most of our focus for the initial release was on improving Qt Quick development on the desktop, the controls are all platform agnostic and will work on all of the supported platforms. That said you should not expect a desktop application to look or work nicely on a tablet without adapting it to a more suitable application layout. To simplify application development on tablets or phones we have also added a StackView control that provides typical stack based (or drill-down) navigation through a series of application pages.

Platform exposed to QML

A common issue when writing cross platform applications in Qt Quick has been that you could not easily adapt your UI or layout to suit different platforms. To make this easier we are now exposing the platform directly to QML through the global Qt.platform.os property.

Possible values are:

  • "android" – Android
  • "blackberry" – BlackBerry OS
  • "ios" – Apple iOS
  • "linux" – Linux
  • "mac" – Mac OS X
  • "unix" – Other Unix-based OS
  • "windows" – Windows
  • "wince" – Windows CE

Tab key navigation

Supporting tab key navigation has previously been rather difficult as you had to create an explicit key chain between every control in your application. In 5.1, we have simplified this process significantly by adding the property activeFocusOnTab to QQuickItem. Setting this will attach the control to the implicit tab key chain. Since all of the provided controls already have this enabled by default, you can now rely on the key navigation to work out of the box when using controls.

Standard Dialogs

We are introducing a couple of new standard dialogs via the QtQuick.Dialogs import. Initially only ColorDialog and FileDialog will be supported, but we are planning to add more dialogs in later releases. These will generally map to the native platform dialogs on different systems.

Window improvements

While we included support for declaring windows in Qt Quick already in Qt 5.0, we have made a number of improvements in how they are handled in 5.1. Declaring a Window inside another window will implicitly make it transient to the parent. In practice it means that modal dialogs will behave properly like modal dialogs, and child windows should correctly center in their parents by default. In addition we have added a closing signal so you can gracefully handle how to deal with a window closing request.

Exposing the text document to C++

Text example in Qt Quick

One issue with the existing TextEdit item was that you were stuck with simply showing rich text. Most complex Qt applications require access to the text document in order to provide more advanced features such as syntax highlighters, code completion or printing support. While using this functionality is going to require a C++ plugin, we have made this accessible from both the TextEdit and the new TextArea control so you can enable all of this functionality in your Qt Quick applications. As you can see from the screenshot above, we have ported the good old TextEdit example to Qt Quick using this functionality.

ApplicationWindow

ApplicationWindow is similar to the regular QQuickWindow, but adds support for setting a window specific MenuBarToolBar and StatusBar in QML.

QQmlApplicationEngine

In Qt 5.0 we generally created Qt Quick applications by declaring a QQuickView in C++ and setting the base url on it. The drawback of that approach is that you have to use C++ to set properties like width, height etc. In Qt 5.1 we encourage using Window or ApplicationWindow as the root item of your application, giving complete control to Qt Quick, so we are now introducing the QQmlApplicationEngine to make this use case a little bit simpler. The QmlApplicationEngine is all you need to set up your qt quick window, pick up the right translation files and it implicitly connects the application quit() signal to your root window.

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine("main.qml");
    return app.exec();
}

Embedding Qt Quick in Widgets

As we have previously blogged about, we are finally adding a supported way to include a Qt Quick 2 scene inside an existing widget based application. This is done by embedding a QQuickWindow using the new QWidget::createWindowContainer() function.

Conclusion

There are too many new things to really cover everything in this blog so I will encourage you to check out our documentation and feel free to ask questions about any of the new features here. All of this functionality is of course included in the Qt 5.1 RC so please give it a try and report any issues or wishes you may have on our bug tracker.
Did you like this? Share it:

Posted in Declarative UI, desktop, Qt, Qt Quick 2

38 comments to Overview of the new features in Qt Quick

Lilian says:

This is way-way better!
Thank you guys!

Would be nice to have a layout system like the Zurb Foundation. Than it would be easier to move from desktop to mobile…

terry says:

Could you give us some examples of Qt.platform.os?I do not find any example from the document, I hope this property could ease some pain of cross platform deployment

Jens Bache-Wiig says:

Sure for instance:

anchors.margins: Qt.platform.os === "mac" ? 12 : 4

Alternatively you can use this in a loader to load different files based on platform.

terry says:

Thanks, your reply is fast, adding a lot of new features is a good news, but do you consider on publish a book for Qt5?Focus on qml and opengl(QWidget are almost as same as Qt4).

Qt5 has been enhanced the support of opengl so much, there are a lot of opengl tutorials on network teach you how to write cross-platform opengl codes with different libraries, but hard to find something mention about Qt5, even you find it, most of them are not designed for the beginners of opengl.

Any expert would like to write a book to teach us how to use Qt5 to design cross-platform opengl codes step by step?

Jens Bache-Wiig says:

You are right in that there should be more available learning material on Qt 5. It is still a pretty recent technology so it will probably take some time for quality books to come out. Note that learning OpenGL is certainly not a requirement for learning or using Qt Quick in an application.

I am not planning to write a book myself but I am planning to make a video introduction available on youtube with some live coding examples.

terry says:

>learning OpenGL is certainly not a requirement for learning or using Qt Quick in an application.

@Jens Bache-Wiig
In most of the cases, you are correct. But sometimes the developers still need to do some low level jobs with opengl. Besides, without some simple examples, it is really hard to know how to make use of those new opengl classed in Qt5, maybe it is very simple for adept opengl and Qt users, but for a beginner, try to combine the opengl with Qt5 is like figuring out the correct path in the mist.

Vasiliy Sorokin says:

What about support of drag’n’drop feature for view components?

Jens says:

You can already use them in combination with the existing DropArea. Inter-applicaiton DnD was not in scope for the first release but certainly something we will look into soon.

See:
http://doc-snapshot.qt-project.org/qt5-stable/qtquick/qml-qtquick2-droparea.html

Vasiliy Sorokin says:

Thanks!

Markus Franke says:

I am also waiting for this feature to be implemented. Meanwhile, you can follow this bug report to get updates on the issue.

https://bugreports.qt-project.org/browse/QTBUG-27498

R says:

Can I run a qml app within browser, and access remotely? Like html5

Lilian says:

Only if a browser has a QML interpreter which from what I know none have it and the same could be said about almost any desktop programming language.
There is an attempt, it’s called Emscripten: https://github.com/kripken/emscripten/wiki
Although you can’t say that it is QML in a browser, it’s QML translated into JavaScript code that runs in a browser and the performance is not even comparable. Also, it doesn’t work with all QML.

Stefan says:

Congratulations to this great release! The new Qt 5.1 features sound really impressive. Thanks a lot!

Jens says:

Can I run a qml app within browser, and access remotely? Like html5

Qt is not written in html5 so it will not work in browsers. That said you can use it with with Google NativeClient for Chrome. http://qt-project.org/wiki/Qt_for_Google_Native_Client

It might also _theoretically_ be possible to use emscripten to compile it into plain html5. http://vps2.etotheipiplusone.com:30176/redmine/projects/emscripten-qt/wiki Results are not guaranteed though… ;)

Dhi Aurrahman says:

How about this bug: https://bugreports.qt-project.org/browse/QTBUG-28214 (Cannot make transparent (translucent) background for QQuickView on Windows 7)

Tried the workaround for Windows 7 with Aero Theme in fullscreen setup with dwmapi, it worked for Qt5.0.2 but not in Qt5.1-beta (Windows 7 with aero enabled) the case is here: https://qt-project.org/forums/viewthread/28078 and the tested playground: https://github.com/diorahman/qt5-playground-transparent-windows

Jens Bache-Wiig says:

As far as I know we don’t currently support translucent OpenGL backgrounds on Windows so I cannot really provide any more information than what Gunnar and Friedemann already said in the bug report. We are working on finding a solution though. That said the current trend/guideline is not to use it at all:
http://blogs.msdn.com/b/b8/archive/2012/05/18/creating-the-windows-8-user-experience.aspx (edit:changed source url)

markg85 says:

Wow! I’ve said it before and i certainly repeat it now. For me personally the new views and the layouts module are really making things a _lot_ easier!

I “used” to have my own SplitView simply because there was nothing. I also used to have my own ScrollView and TableView again because there was nothing.. Then i was doing my own layout re-arrangements as the window was resized which is made a ton easier in the new layout module.

Thank you very much for making QML programming a lot easier out of the box, Jens :)

Now my wishlist for Qt 5.2 is:
– Better DnD support. The current support seems to be fine for in application DnD but seems to lack in accepting drop events from another app or i just didn’t figure out how to do that ;)
– Some convenient way of implementing a right mouse menu. I suppose i can use the new Menu component with the popup() function, but is that component flexible enough to implement something like this: http://dribbble.com/shots/647272-Circle-Menu-PSD I haven’t tried it, but i doubt it. I even think it needs to be done as a custom Scene Graph component.

Regards,
Mark

J-P Nurmi says:

I suppose i can use the new Menu component with the popup() function, but is that component flexible enough to implement something like this: http://dribbble.com/shots/647272-Circle-Menu-PSD I haven’t tried it, but i doubt it.

As of now, the Menu control is more a wrapper for the native menu provided by the platform plugin than a base for implementing custom menu popups. However, there’s already a non-native QtQuick-based fallback for platforms that do not provide a native menu. The necessary enablers and not yet in place, but I don’t see any reason why that non-native menu couldn’t be made styleable in the foreseen future. Whether it’s going to be flexible enough to implement a pie menu, as that would basically require masking the popup window and so on, is beyond me… :)

Jens Bache-Wiig says:

@markg85 Your praise should really go to everyone on our team. :)

You can already create a context menu easily and this is exactly what the popup function is intended for. Try to right clicking on the TextArea in the controls gallery for example.

Regarding the second issue, I think the pie menu is an excellent example of exactly where it would make sense to dig in and use the power of Qt Quick rather than the built-in controls. It won’t take all that long to write it from scratch and you can get _exactly_ the result the artist is looking for. Controls are certainly not supposed to cover every possible use case.

markg85 says:

+ note to my last comment. Or even a way more complicated right mouse button idea like this: http://dribbble.com/shots/920495–Pie-Nav

I guess that’s only possible with a custom component from the C++ side with Scene Graph. Canvas could probably do it as well if the menu isn’t animated (which it likely is).

M.S. Babaei says:

I’ve always preferred Widgets over Qt Quick . But from the moment I’ve tried Qt Quick 2.1 from 5.1-RC1 snapshots I felt for Qt Quick. My last project is totally using Qt Quick 2.1 and thanks to you guys it has a very fluid UI.

The most significant things that I’m excited about is Qt Quick controls and the performance gained by using V8.

\m/

stereomatching says:

Me too, I though qml is another oversale product which would not make me excited(ex : from c++ to java, c#, go etc), but I was wrong.qml is a niche tool for fluid UI development, qml is really impressive. Thanks a lot!

Stefan Lang says:

Concrats to you Jens and your Team. I Tried it out and works amazing. Qt Qtucik is absolute the rigth way for Qt . Never used a framework where you get so fast best visual results! The cherry on the cake would be a native looking toolbar for Mac OS X, so I do not need to mix QWidgets with Qt Quick, but I guess that’s pretty hard to do

Actually… take a look at the QtMacExtras module.

Stefan Lang says:

yes I know the QtmacExtras module and I’m using it Works fine but I need to write the Ui code in two points in my application, this is ok but would be better to have the Ui code in one place of my application.

Thomas Führinger says:

Any plans to implement MdiArea?

Jens says:

I am afraid we don’t currently plan to provide support for MDI interfaces. Modern application development has largely moved away from this paradigm and the UX guidelines on our major desktop platforms currently advice against using it.

That said, if it turns out that there is a strong demand for it this might change in the future.

You should still be able to use QtQuick with the existing QWorkspace by making use of the new createWindowContainer function however.

Paul Maynard says:

I am trying to display multiple images, and have used QMdiArea in the past. This approach simplifies if one image is resized, that is the only place where resizing happens. In the non-mdi approach where my multiple images are in effect tiled across the main window, changing one means I have to resize them all. Is there a simpler way? I would love to move to QtQuick, but would like some examples of managing multiple open images/text documents, dialogs, etc.

stereomatching says:

I give control a quick try, and find out that TableView still do not support multi-select, do you have a plan to give it a support or I miss something?

Jens Bache-Wiig says:

No it did unfortunately not make it in for 5.1 and it’s on the todo list for 5.2. That said, it is already possible to do this yourself with the API provided.

Here is a rough version that might be useful for the time being: http://pastebin.com/NMtvPcpk (MultiSelectTableView)

Chris says:

Hey, is that QML style from the “Customized Application” available? I would love to use it as a base for the ui for my app.

Other than that, thanks so much. I love QML more an more every time I touch it, and Qt 5.1 really brings it into it’s own.

Jens says:

Thanks for the kind words. That is an example I am working on but it was not ready for the release so I will probably make it available a bit later.

Chris says:

Excellent! I’d love to see some nice examples for doing a full application theme.

Keep up the amazing work!

Way too good. Thanks all developers!

Leo S says:

Is it just me or does iconSource on a Button just not work? It does absolutely nothing.

vitaliy says:

Hi. Interesting article. I found a few things in Qt 5.1 that can be very helpful in building fast UI with QML compare to Qt 4.8.x. I would try to move to Qt 5.1 but I’m worry about one thing. I can read sometimes posts from people that Qt 5.x uses OpenGL and some graphic videoadapters, even modern, do NOT support OpenGL perfect. And I even do not consider old graphic videoadapters here. In the same time other people answer to this that if OpenGL is not supported then Qt 5.x will use software rendering. On this I see answer that software rendering in Qt 5.x takes more time then in Qt 4.8.x. So I do not know who is right in this discussion. For example I tried 5.0 build on PC where not installed native drivers for graphic adapter (Win7 installed drivers by default) and could see simple “Hello world” example during resizing was re-painted slow and with some delay (it seems during resizing I could see some time black rectangle behind), in the same time Qt 4.8.1 has perfect and fast resizing on this machine. So before moving to Qt 5.x I would like to know if Qt 5.0 rendering with OpenGL will work the same to Qt 4.8 and not slowly?

Jens says:

This is why we also provide packages built with angle instead of opengl. Effectively that means they are using direct 3d instead. We have also done some improvements to screen resizing in 5.1 so it might be interesting if you tried the same hello world example using the latest RC (without -opengl) and reported your findings. I would suspect it is a lot faster.

vitaliy says:

Thank you for reply! I read about using “angle” and have two questions:

1. It seems Qt 5.0 has OpenGL used by default in official build? Something changed here in Qt 5.1? Or I should configure myself Qt 5.1 sources with “-opengl” to get Qt 5.1 for Windows worked with “angle”?

2. I read in above articles that on XP need to use only OpenGL as “angle” does not work fully correct on XP and can crash. Does this mean that OpenGL QML application will work slow on XP?
Looking on world OS statistics still 15% users use XP. Has Qt 5.1 any fixes and updates with “angle” work on XP?

I think it will be good theme for some your next article in Qt blog to compare Qt 5.x and Qt 4.8 perfomance on Windows (XP and Win7) were old OpenGL version installed. Like article with instructions how to use Qt 5.x properly on Windows will be very helpful. Coders will read this and will talk to friends that OpenGL is not issue for Windows. For products that plan to be installed on different Windows PCs it is extremely important thing!

Commenting closed.