QML Qt.createQmlObject

[axed]

Hello everyone,

after some years with QWidgets, i decided to join the "QML stream" and give QML a try.

Yet, i've run into problems i can't even really explain (is there any good Error-Handling for QML??).

Problem 1: adding a ToolButton to a ToolBar

import QtQuick 2.3
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1
 
ApplicationWindow {
    id: applicationWindow
    width: 800
    height: 600
    title: "test"
 
 
    toolBar: ToolBar {
        id: mainWindowToolbar
        RowLayout {
            id: mainWindowToolbarLayout
            anchors.fill: parent // problem 2
        }
    }
 
    Component.onCompleted: {
        Qt.createQmlObject('import QtQuick 2.0; Rectangle {color: "red"; width: 20; height: 20}',
                           mainWindowToolbarLayout,
                           "TestToolButton");
    }
}

import QtQuick 2.3
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1

ApplicationWindow {
    id: applicationWindow
    width: 800
    height: 600
    title: "test"


    toolBar: ToolBar {
        id: mainWindowToolbar
        RowLayout {
            id: mainWindowToolbarLayout
            anchors.fill: parent // problem 2
        }
    }

    Component.onCompleted: {
        Qt.createQmlObject('import QtQuick 2.0; Rectangle {color: "red"; width: 20; height: 20}',
                           mainWindowToolbarLayout,
                           "TestToolButton");
    }
}

To copy to clipboard, switch view to plain text mode 

If i (re)start the application 3 times, it crashes 2/3 times and also throws an error: "Qt.createQmlObject(): Component is not ready".
Google told me that this one of the most unrelieable error message in QML.
Which brings us to Problem #3: in the documentation of Qt.createQmlObject it states that an QtScript error is thrown, so i encapsulated the Qt.createQmlObject part into an try and catch block - yet i have no idea how to retrieve the errors from that qmlErrors() function.

Problem 2: mainWindowToolbarLayout + "anchors.fill: parent" prints the following things into the output-console:
QML Item: Binding loop detected for property "layoutHeight"

"qrc:/qml/MainWindowUI:16:14: QML ToolBar: Binding loop detected for property "implicitWidth""
qrc:/qml/MainWindowUI:16:14: QML ToolBar: Binding loop detected for property "implicitWidth"
"qrc:/qml/MainWindowUI:16:14: QML ToolBar: Binding loop detected for property "implicitWidth""
qrc:/qml/MainWindowUI:16:14: QML ToolBar: Binding loop detected for property "implicitWidth"
"qrc:/qml/MainWindowUI:16:14: QML ToolBar: Binding loop detected for property "implicitHeight""
qrc:/qml/MainWindowUI:16:14: QML ToolBar: Binding loop detected for property "implicitHeight"

"qrc:/qml/MainWindowUI:16:14: QML ToolBar: Binding loop detected for property "implicitWidth""
qrc:/qml/MainWindowUI:16:14: QML ToolBar: Binding loop detected for property "implicitWidth"
"qrc:/qml/MainWindowUI:16:14: QML ToolBar: Binding loop detected for property "implicitWidth""
qrc:/qml/MainWindowUI:16:14: QML ToolBar: Binding loop detected for property "implicitWidth"
"qrc:/qml/MainWindowUI:16:14: QML ToolBar: Binding loop detected for property "implicitHeight""
qrc:/qml/MainWindowUI:16:14: QML ToolBar: Binding loop detected for property "implicitHeight"

To copy to clipboard, switch view to plain text mode 

What? The documentation isn't doing anything different?

What brings us to my final question:
is there any sane way to debug such things in QML?

[wysota]

Hello everyone,

after some years with QWidgets, i decided to join the "QML stream" and give QML a try.

Yet, i've run into problems i can't even really explain (is there any good Error-Handling for QML??).

Problem 1: adding a ToolButton to a ToolBar

import QtQuick 2.3
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1
 
ApplicationWindow {
    id: applicationWindow
    width: 800
    height: 600
    title: "test"
 
 
    toolBar: ToolBar {
        id: mainWindowToolbar
        RowLayout {
            id: mainWindowToolbarLayout
            anchors.fill: parent // problem 2
        }
    }
 
    Component.onCompleted: {
        Qt.createQmlObject('import QtQuick 2.0; Rectangle {color: "red"; width: 20; height: 20}',
                           mainWindowToolbarLayout,
                           "TestToolButton");
    }
}

import QtQuick 2.3
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1

ApplicationWindow {
    id: applicationWindow
    width: 800
    height: 600
    title: "test"


    toolBar: ToolBar {
        id: mainWindowToolbar
        RowLayout {
            id: mainWindowToolbarLayout
            anchors.fill: parent // problem 2
        }
    }

    Component.onCompleted: {
        Qt.createQmlObject('import QtQuick 2.0; Rectangle {color: "red"; width: 20; height: 20}',
                           mainWindowToolbarLayout,
                           "TestToolButton");
    }
}

To copy to clipboard, switch view to plain text mode 

Why would you use createQmlObject for such thing?

If i (re)start the application 3 times, it crashes 2/3 times and also throws an error: "Qt.createQmlObject(): Component is not ready".

Did you try splitting your component definition into multiple lines to avoid the semicolon after the import statement?

What? The documentation isn't doing anything different?

Hard to say without knowing what documentation you mean.

is there any sane way to debug such things in QML?

Yes. Use the QML debugger and analyzer that comes with Qt Creator. However your errors are very simple so there is no need to use a debugger to avoid them.

[axed]

Why would you use createQmlObject for such thing?

Because the documentation states that this is only one of two options.

src: https://qt-project.org/doc/qt-5-snap...tcreation.html

So Qt.createComponent looks like some overkill when i just want to add some ToolButton.

Did you try splitting your component definition into multiple lines to avoid the semicolon after the import statement?

Why should i? The documentation does the same in it's examples.
https://qt-project.org/doc/qt-5-snap...-string-of-qml

Hard to say without knowing what documentation you mean.

http://doc.qt.io/qt-5/index.html
https://qt-project.org/doc/qt-5-snap...s-toolbar.html

Yes. Use the QML debugger and analyzer that comes with Qt Creator. However your errors are very simple so there is no need to use a debugger to avoid them.

Nice to hear that they are simple, yet i found no reference to what they mean.

[anda_skoa]

So Qt.createComponent looks like some overkill when i just want to add some ToolButton.

I think what wysota meant is: "why don't you just add a ToolButton"?

toolBar: ToolBar {
        RowLayout {
            anchors.fill: parent
 
            ToolButton {
            }
        }
    }

toolBar: ToolBar {
        RowLayout {
            anchors.fill: parent

            ToolButton {
            }
        }
    }

To copy to clipboard, switch view to plain text mode 

Cheers,
_

[axed]

I think what wysota meant is: "why don't you just add a ToolButton"?

As the title may suggest, i want/need to do this at runtime :/

[wysota]

So Qt.createComponent looks like some overkill when i just want to add some Tool Button.

I think createQmlObject is a larger overkill but anyway I didn't mean to use createComponent. You can declare a component inline in the original QML document and just instantiate it when needed. See the docs on Component element.

By the way, the title doesn't suggest you want to do anything dynamically.

[anda_skoa]

As the title may suggest, i want/need to do this at runtime :/

Maybe it would help to know what exactly you are trying to achieve.

Cheers,
_

[axed]

@QML ToolBar: Binding loop detected for property "implicitWidth""
Something was anchored by me when it shouldn't have been (as some items are automatically anchored). Maybe it was the toolbar - i can't remember right now, but that one sounds right.

This is how i'm creating things at runtime right now:

function createByData(targetQmlSourceCode, parentItem, targetQmlModuleName) {
try {
 
        var component = Qt.createQmlObject(targetQmlSourceCode,
                                               parentItem,
                                               targetQmlModuleName);
        return component;
    }
    catch (error) {
        console.error("There were QML errors:" + JSON.stringify( error.qmlErrors));
    }
 
    return 0;
}

function createByData(targetQmlSourceCode, parentItem, targetQmlModuleName) {
try {

        var component = Qt.createQmlObject(targetQmlSourceCode,
                                               parentItem,
                                               targetQmlModuleName);
        return component;
    }
    catch (error) {
        console.error("There were QML errors:" + JSON.stringify( error.qmlErrors));
    }

    return 0;
}

To copy to clipboard, switch view to plain text mode 

The documentation was a little but fuzzy about details like how to access the "qmlErrors" object and that you have to use try{} and catch(){} blocks for the cases where Qt.createQmlObject would otherwise suicide-bomb the qmlapplicationengine.
Now that my frustration with this problem has faded, i'd like to apologize if i might have sounded a bit harsh.
Thank you guys for your contribution!

[anda_skoa]

It would still be interesting why you need that at all.

Such imperative code is commonly unnecessary, most often there is a way cleaner solution.

Cheers,
_

[axed]

It would still be interesting why you need that at all.

Such imperative code is commonly unnecessary, most often there is a way cleaner solution.

Cheers,
_

I wrote a third-party plugin handler for my application and needed to create the "shortcut-icons" for those plugins at runtime.
Generating a ListModel and throw that into a ListView would also have done the trick i guess, but i prefered actual Buttons to keep up with the design of the application.

[wysota]

I wrote a third-party plugin handler for my application and needed to create the "shortcut-icons" for those plugins at runtime.
Generating a ListModel and throw that into a ListView would also have done the trick i guess, but i prefered actual Buttons to keep up with the design of the application.

You could have declared the list of buttons in the plugin and then pass that list to your handler so that it can put them in the toolbar.

Your current design is a secutiry risk -- you are accepting code from a third-party plugin that you execute on behalf of your object.

[anda_skoa]

I wrote a third-party plugin handler for my application and needed to create the "shortcut-icons" for those plugins at runtime.
Generating a ListModel and throw that into a ListView would also have done the trick i guess, but i prefered actual Buttons to keep up with the design of the application.

Why would having the data in a model keep you from using buttons?

Creating instances of any type based on a model is a standard use case, implemented with the Repeater element.

Cheers,
_