Skip to content

Declarative Widgets adding Qt Widgets support to QML

Declarative Widgets is a QML plugin that adds Qt Widgets support to QML. This means we can now easily mix the power of QML with the comfort of a Widgets UI on desktop.

 

import QtWidgets 1.0

MainWindow {
    width: 640
    height: 400

    Label {
        text: "Hello Declarative Widgets!"
        alignment: Qt.AlignHCenter | Qt.AlignVCenter
    }
}

Background

Declarative Widgets was born out of a breakfast discussion about how awesome it would be to use QML to describe QWidget-based scenes. If you have ever worked on a Qt Quick project and then switched back to creating a Widgets UI you will understand how frustrating it can be to write and maintain a complex UI in plain C++, or even create and modify UI files in Qt Designer.

The real power of QML, however, is in property bindings. Property bindings allow us to set the value of a property as an expression that is evaluated when ever a property involved in that expression changes. Take the following example:

import QtWidgets 1.0

GroupBox {
    title: qsTr("New Contact: %1 %2").arg(firstName.text).arg(lastName.text)

    FormLayout {
        LineEdit {
            id: firstName
            FormLayout.label: qsTr("First Name")
        }
        LineEdit {
            id: lastName
            FormLayout.label: qsTr("Last Name")
        }
    }
}

The title property of the GroupBox is updated when the text property of either LineEdit changes. We could build this example in C++, but in QML we don’t need to write any boilerplate code to connect to signals or define slots. By using Declarative Widgets we don’t need to worry about writing our own UI components either; we can make use of all the existing widgets we developed warm, fuzzy feelings for over the years.

Implementation

To get an idea of how the Declarative Widgets plugin works, lets take a look at how QWidget is integrated into QML.

qmlRegisterExtendedType<QWidget, DeclarativeWidgetExtension>(uri, 1, 0, "Widget");

QWidgetneeds a few tweaks in order to integrate it into QML: there is no default property, the x, y, width and height properties are read-only, and the geometry and visible properties do not have notify signals. Rather than modifying QWidget directly we can useqmlRegisterExtendedType to register an extension object which adds or overrides the properties we need.

class DeclarativeWidgetExtension : public DeclarativeObjectExtension
{
    Q_OBJECT

    // repeat property declarations, qmlRegisterExtendedType doesn't see the ones from base class
    Q_PROPERTY(QQmlListProperty<QObject> data READ data DESIGNABLE false CONSTANT)

    Q_PROPERTY(int x READ x WRITE setX NOTIFY posChanged)
    Q_PROPERTY(int y READ y WRITE setY NOTIFY posChanged)
    Q_PROPERTY(int width READ width WRITE setWidth NOTIFY sizeChanged)
    Q_PROPERTY(int height READ height WRITE setHeight NOTIFY sizeChanged)
    Q_PROPERTY(QRect geometry READ geometry WRITE setGeometry NOTIFY geometryChanged)
    Q_PROPERTY(bool visible READ isVisible WRITE setVisible NOTIFY visibleChanged)

    Q_CLASSINFO("DefaultProperty", "data")
}

Our extension object, DeclarativeWidgetExtension, derives from DeclarativeObjectExtension which provides us with a default property. A default property is the property to which a value is assigned if an object is declared within another object’s definition without declaring it as a value for a particular property. In Qt Quick, the default property is used to construct the visual scene hierarchy, and we do the same with Declarative Widgets to create the QWidget hierarchy, calling QWidget::setParent, QWidget::setLayout, or QWidget::addAction depending on the type of the declared object. Note that we have to redeclare the data property because qmlRegisterExtendedType doesn’t see the one from the base class.

To make the read-only properties writable, we override the existing property and provide a WRITE accessor function to make the appropriate change. Let’s take a look at the new x property:

QWidget *DeclarativeWidgetExtension::extendedWidget() const
{
    QWidget *parentWidget = qobject_cast<QWidget*>(parent());
    Q_ASSERT(parentWidget);
    Q_UNUSED(parentWidget);

    return parentWidget;
}

int DeclarativeWidgetExtension::x() const
{
    return extendedWidget()->x();
}

void DeclarativeWidgetExtension::setX(int value)
{
    QWidget *widget = extendedWidget();

    if (value == widget->x())
      return;

    QRect geometry = widget->geometry();
    geometry.moveLeft(value);
    widget->setGeometry(geometry);
}

The READ accessor function simply calls the original READaccessor function on the extended type. However, QWidget does not have an existing setX function so we have to update the x property using QWidget::setGeometry.

Keen observers will notice that we haven’t emitted any of the NOTIFY signals that we declared. This is because widgets respond to events delivered to them by Qt as a result of things that have happened either within the application or as a result of outside activity that the application needs to know about. In order to hook into this system, our extension object installs itself as an event filter on the object we are extending. An event filter receives all the events for the target object before the target does, allowing us to observe and react to the events as required.

bool DeclarativeWidgetExtension::eventFilter(QObject *watched, QEvent *event)
{
    Q_ASSERT(watched == parent());
    Q_UNUSED(watched);

    switch (event->type())
    {
    case QEvent::Move:
        emit posChanged();
        emit geometryChanged();
        break;

    case QEvent::Resize:
        emit sizeChanged();
        emit geometryChanged();
        break;

    case QEvent::Show:
    case QEvent::Hide:
        emit visibleChanged(isVisible());
        break;

    default:
        break;
    }

    return false;
}

In our event filter we simply emit the NOTIFY signals when we receive the appropriate event. In our x property example we receive a QEvent::Move event as a result of our call to QWidget::setGeometry. This is where we emit posChanged.

The geometry and visibleproperties that we overrode to add a NOTIFY signal to simply call the original QWidget READ and WRITE accessor functions. Then, in the event filter we emit the new signals when we receive the appropriate event.

What about QQuickWidget or QWebEngineView?

There are no additional limitations to using QQuickWidget with Declarative Widgets. One of the use cases we came up with for using Declarative Widgets is as a stepping stone to porting existing Qt Widgets applications to Qt Quick. The first step of the port would be to isolate the business logic and replicate the existing UI using Declarative Widgets (we even wrote a tool to generate QML files from .ui files). You could then replace chunks of the UI with QtQuick components displayed in QQuickWidgets.

To see QQuickWidget or QWebEngineView in action take a look through our examples on GitHub.

How do I get it?

The Declarative Widgets source code is available on GitHub: https://github.com/KDAB/DeclarativeWidgets

If you like Declarative Widgets please consider contributing to the project. Adding Qt Widgets support to QML is a large task and whilst we have done most of the ground work there are surely features we have missed. If there are features you need and you are unable to contribute, please get in touch and we will see what we can do about implementing them for you.

View our ‘Widgets and more’ video series
Yes, widgets are still alive and kicking. In the many years we have worked with them, we have gathered quite a number of tips and tricks that we’d love to share with you.

Welcome to our brand new video series about...Qt Widgets! Yes, widgets are still alive and kicking. In the many years we have worked with them, we have gathered quite a number of tips and tricks that we'd love to share with you.

Whether it's some handy snippet in C++ or a hidden button in a graphical tool, these suggestions will make your development life considerably easier.
In this first video, we will show you a few ways to improve your workflow when using a QGridLayout inside Qt Designer. Sounds simple, doesn't it? Well, there are a few subtleties involved.

The example code showcased in this video is available here: https://github.com/KDAB/kdabtv

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more.  https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/
GridLayout in Qt Designer

Welcome to our brand new video series about...Qt Widgets! Yes, widgets are still alive and kicking. In the many years we have worked with them, we have gathered quite a number of tips and tricks that we'd love to share with you.

Whether it's some handy snippet in C++ or a hidden button in a graphical tool, these suggestions will make your development life considerably easier.
In this first video, we will show you a few ways to improve your workflow when using a QGridLayout inside Qt Designer. Sounds simple, doesn't it? Well, there are a few subtleties involved.

The example code showcased in this video is available here: https://github.com/KDAB/kdabtv

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more. https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/

49 16

YouTube Video UEw2Q0pZbjQwZ042Z2YtRy1vNnN5RndHcnRxM2tJdEVxSS41NkI0NEY2RDEwNTU3Q0M2

GridLayout in Qt Designer

Let's revisit Qt Designer once more, this time to discuss combo boxes. Mapping a QComboBox's entry to a specific value is easy in C++, but not so easy when the combo box is populated from within Qt Designer. How do we improve the situation?

The example code showcased in this video is available here: https://github.com/KDAB/kdabtv

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more.  https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/
Populating a Combobox from Qt Designer

Let's revisit Qt Designer once more, this time to discuss combo boxes. Mapping a QComboBox's entry to a specific value is easy in C++, but not so easy when the combo box is populated from within Qt Designer. How do we improve the situation?

The example code showcased in this video is available here: https://github.com/KDAB/kdabtv

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more. https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/

17 6

YouTube Video UEw2Q0pZbjQwZ042Z2YtRy1vNnN5RndHcnRxM2tJdEVxSS4yODlGNEE0NkRGMEEzMEQy

Populating a Combobox from Qt Designer

If you're submitting code for a review, there's nothing worse than getting nitpicked because you violated a style guideline of the project.
If you're doing the code review, there's nothing more annoying than nitpicking on small code style inconsistencies.

This is where clang-format can help you. Clang-format is a tool (based on the clang/LLVM compiler infrastructure) that can automatically reformat your source code. Not only can you run it manually to apply a given formatting, but you can set it up so that it automatically reformats the code when committing into git, or when saving in Qt Creator.

The example code showcased in this video is available here: https://github.com/KDAB/kdabtv

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more.  https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/
Using Clang-Format to Ensure Style Guidelines

If you're submitting code for a review, there's nothing worse than getting nitpicked because you violated some style guideline of the project.
If you're doing a code review, there's nothing more annoying than nitpicking on small code style inconsistencies.

This is where clang-format can help us. clang-format is a tool (based on the clang/LLVM compiler infrastructure) that can automatically reformat our source code. Not only we can run it manually to apply a given formatting, but we can set it up so that it automatically reformats the code when committing into git, or when saving in Qt Creator.

The example code showcased in this video is available here: https://github.com/KDAB/kdabtv

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more. https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/

31 3

YouTube Video UEw2Q0pZbjQwZ042Z2YtRy1vNnN5RndHcnRxM2tJdEVxSS41MjE1MkI0OTQ2QzJGNzNG

Using Clang-Format to Ensure Style Guidelines

Today's video falls in the proverbial "removing the pebble in one's shoes" category. We'll talk about headers in a QTableView. Were you ever slightly annoyed by the fact that you can click on a header and sort the table by the corresponding column, but then you cannot undo the sorting? Let's fix that!

The example code showcased in this video is available here: https://github.com/KDAB/kdabtv

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more.  https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/
Un-sorting headers in QTableView

Today's video falls in the proverbial "removing the pebble in one's shoes" category. We'll talk about headers in a QTableView. Were you ever slightly annoyed by the fact that you can click on a header and sort the table by the corresponding column, but then you cannot undo the sorting? Let's fix that!

The example code showcased in this video is available here: https://github.com/KDAB/kdabtv

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more. https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/

15 1

YouTube Video UEw2Q0pZbjQwZ042Z2YtRy1vNnN5RndHcnRxM2tJdEVxSS4wOTA3OTZBNzVEMTUzOTMy

Un-sorting headers in QTableView

Remember this tip: when an application is being introspected by GammaRay, you can use Control + Shift + Mouse click on any of its widgets to select it for further inspection. This lets you check all the properties for the widget, its positioning, as well as simply get an answer to the question: of which class is this widget?

The example code showcased in this video is available here: https://github.com/KDAB/kdabtv

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more.  https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/
Using GammaRay to Find the Class of an UI Element

Remember this tip: when an application is being introspected by GammaRay, you can use Control + Shift + Mouse click on any of its widgets to select it for further inspection. This lets you check all the properties for the widget, its positioning, as well as simply get an answer to the question: of which class is this widget?

The example code showcased in this video is available here: https://github.com/KDAB/kdabtv

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more. https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/

5 2

YouTube Video UEw2Q0pZbjQwZ042Z2YtRy1vNnN5RndHcnRxM2tJdEVxSS4xMkVGQjNCMUM1N0RFNEUx

Using GammaRay to Find the Class of an UI Element

We know that we should use layouts to arrange chidren widgets inside a container widget. Layouts do the right thing for us, automatically, except when... they don't! Sometimes, we need to fine tune some of the decisions that layouts take; usually, the one that they take wrong is deciding how much padding/margins should be applied to contents. Let's see how to fix it.

The example code showcased in this video is available here: https://github.com/KDAB/kdabtv

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more.  https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/
Understanding Contents Margins in Qt Layouts

We know that we should use layouts to arrange chidren widgets inside a container widget. Layouts do the right thing for us automatically. Except when... they don't! Sometimes we need to fine tune some of the decisions that layouts take; usually, the one that they take wrong is deciding how much padding/margins should be applied to contents. Let's see how to fix it.

The example code showcased in this video is available here: https://github.com/KDAB/kdabtv

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more. https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/

13 0

YouTube Video UEw2Q0pZbjQwZ042Z2YtRy1vNnN5RndHcnRxM2tJdEVxSS41MzJCQjBCNDIyRkJDN0VD

Understanding Contents Margins in Qt Layouts

You've seen me constantly use GammaRay, when checking: item sizes, visibility, and layout margins. In this video, let me share with you a little trick: You can launch GammaRay right from within Qt Creator, with a convenient keyboard shortcut.

The example code showcased in this video is available here: https://github.com/KDAB/kdabtv

Link to the GammaRay Tutorials: https://www.youtube.com/playlist?list=PL6CJYn40gN6itybeSJb5FvRWOxVW5PCUX

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more.  https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/
Starting the application from GammaRay

You've seen me constantly use GammaRay, when checking: item sizes, visibility, and layout margins. In this video, let me share with you a little trick: You can launch GammaRay right from within Qt Creator, with a convenient keyboard shortcut.

The example code showcased in this video is available here: https://github.com/KDAB/kdabtv

Link to the GammaRay Tutorials: https://www.youtube.com/playlist?list=PL6CJYn40gN6itybeSJb5FvRWOxVW5PCUX

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more. https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/

8 0

YouTube Video UEw2Q0pZbjQwZ042Z2YtRy1vNnN5RndHcnRxM2tJdEVxSS5DQUNERDQ2NkIzRUQxNTY1

Starting the application from GammaRay

Sometimes a view would like to have more data for a cell than what is in a cell. Examples include:

A view that offers special context menu entries if the cell contains an employee. The text in the cell itself might just be the employee's name, and from that alone, it would be very hard to come to the conclusion that the cell indeed holds an employee.

A delegate that shows an annotation symbol (think cut of corner like in excel) if the data behind the cell is annotated. Again the cell text does not reveal this information.

One way to implement this is for the view or delegate to reach out to the model in question using a regular function call, but that will break in case there are proxy models in between.

This video shows how to obtain the effect by using custom roles.

You can contact us regarding our services at info@kdab.com

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:

KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more.  https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/
Communicating between a View/Delegate and a Model

Sometimes a view would like to have more data for a cell than what is in a cell, examples includes:

A view that offer special context menu entries if the cell contains an employee. The text in the cell itself might just be the employees name, and from that alone it would be very hard to come to the conclusion that this the cell indeed holds an employee.

A delegate which shows an annotation symbol (think cut of corner like in excel) if the data behind the cell is annotated. Again the cell text do not reveal this information.

One way to implement this is for the view or delegate to reach out to the model in question using a regular function call, but that will break in case there are proxy models in between.

This video shows how to obtain the effect by using custom roles.

The example code showcased in this video is available here: https://github.com/KDAB/kdabtv

You can contact us regarding our services at info@kdab.com

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:

KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more. https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/

27 17

YouTube Video UEw2Q0pZbjQwZ042Z2YtRy1vNnN5RndHcnRxM2tJdEVxSS40NzZCMERDMjVEN0RFRThB

Communicating between a View/Delegate and a Model

Got a stack of proxy models where there is a subtle bug somewhere in there? No worries --GammaRay to the rescue!

It can visualize the stack of models for you, but there is one thing you better remember in your code --watch this video to find out what it is! 🙂

Link to download GammaRay: https://www.kdab.com/development-resources/qt-tools/gammaray/

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more.  https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/
Visualizing the Model Stack in GammaRay

Got a stack of proxy models where there is a subtle bug somewhere in there? No worries --GammaRay to the rescue!

It can visualize the stack of models for you, but there is one thing you better remember in your code --watch this video to find out what it is! 🙂

Link to download GammaRay: https://www.kdab.com/development-resources/qt-tools/gammaray/

The video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:
KDAB offers experienced software experts to help you deliver functional, high-performing and innovative software across embedded, mobile and desktop platforms for projects using C++, Qt, QML/Qt Quick, OpenGL, Qt 3D and more. https://www.kdab.com/software-services

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL and C++.

Contact us to find out more at training@kdab.com or visit our website: https://www.kdab.com/software-services/scheduled-training/

We are about 90 people, located all around the world. Our Head Office is in Sweden and we have other offices in Germany, France, the UK and the USA. https://www.kdab.com/about/contact/

6 0

YouTube Video UEw2Q0pZbjQwZ042Z2YtRy1vNnN5RndHcnRxM2tJdEVxSS5EMEEwRUY5M0RDRTU3NDJC

Visualizing the Model Stack in GammaRay

FacebookTwitterLinkedInEmail

Categories: KDAB Blogs / KDAB on Qt / QML / Qt

10 thoughts on “Declarative Widgets”

    1. Declarative Widgets allows you to use Qt Widgets with QML, but it does not use Qt Quick. Declarative Widgets is still using the Qt Widgets rendering and wrapping platform native components under the hood, whilst Qt Quick uses OpenGL for rendering (a software renderer is now available) and you had to build your UI from basic components. Qt Quick Controls provide standard controls for Qt Quick.

  1. Examples look strange me, not clear what they try to demonstrate? Why there is no example with DeclarativeObjectExtension? Can I use custom widget in QML?

    1. Hi Aleksy,

      there are three example applications that show how to use the DeclarativeWidgets plugin in an application: bookstore, config-editor and text-editor. In addition the examples directory contains a number of QML files that can be run using the declarativewidgets binary the projects produces (runner target in Qt Creator). Pass the full path to one of those example files to declarativewidgets to see the result. I’m updating the read-me on GitHub with this information.

      Regarding the use of your custom widgets and DeclarativeObjectExtension: if you take a look at src/declarativewidgets_plugin.cpp you can see how we use DeclarativeObjectExtension and derived classes to register the Qt widgets with QML. Notice that many of them work using the DeclarativeWidgetExtension as the extension type. Depending on your custom widget, you may also be able to use DeclarativeWidgetExtension to extend your own widget. Otherwise you might have to write your own extension object to expose anything that is missing.

Leave a Reply

Your email address will not be published. Required fields are marked *