Overview of the new features in Qt Quick

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 .

Blog Topics:

Comments