Using QML to pass a JavaScript object to a C++ member function

Question

Using QML to pass a JavaScript object to a C++ member function

I am attempting to send a JS object (map) to a C++ member function with the following signature

Q_INVOKABLE virtual bool generate(QObject* context);

using

a.generate({foo: "bar"});

The method is being called (confirmed via breakpoint), however, the passed context parameter is appearing as NULL. The documentation states that JS objects will be sent as QVariantMap, so I tried using this signature:

Q_INVOKABLE virtual bool generate(QVariantMap* context);

This resulted in an error during MOC compilation. Next, I attempted:

Q_INVOKABLE virtual bool generate(QVariantMap& context);

but at runtime, QML was unable to find the method (error message indicated "Unknown method parameter type: QVariantMap&").

The documentation only provides an example of sending a QVariantMap from C++ to QML, not vice versa.

Switching to a public slot instead of Q_INVOKABLE yielded the same results and errors.

javascript c++qt qml

Answer 1

Answer №1

It is recommended not to use references to pass values from the QML world to CPP world. The following example demonstrates a simple and effective approach:

test.h

#ifndef TEST_H
#define TEST_H

#include <QObject>
#include <QDebug>
#include <QVariantMap>

class Test : public QObject
{
    Q_OBJECT
public:
    Test(){}

    Q_INVOKABLE bool generate(QVariantMap context)
    {qDebug() << context;}
};

#endif // TEST_H

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "test.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    engine.rootContext()->setContextProperty(QStringLiteral("Test"), new Test());

    engine.load(QUrl(QLatin1String("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            Test.generate({foo: "bar"});
        }
    }
}

When you click in the window, the following message will be printed in the output console:

QMap(("foo", QVariant(QString, "bar")))

Answer 2

It is recommended not to use references to pass values from the QML world to CPP world. The following example demonstrates a simple and effective approach:

test.h

#ifndef TEST_H
#define TEST_H

#include <QObject>
#include <QDebug>
#include <QVariantMap>

class Test : public QObject
{
    Q_OBJECT
public:
    Test(){}

    Q_INVOKABLE bool generate(QVariantMap context)
    {qDebug() << context;}
};

#endif // TEST_H

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "test.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    engine.rootContext()->setContextProperty(QStringLiteral("Test"), new Test());

    engine.load(QUrl(QLatin1String("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            Test.generate({foo: "bar"});
        }
    }
}

When you click in the window, the following message will be printed in the output console:

QMap(("foo", QVariant(QString, "bar")))

Using QML to pass a JavaScript object to a C++ member function

Answer №1

Similar questions

Utilizing jQuery to delete items once their corresponding checkboxes are checked

Tips for integrating error management in Angular with RXJS

Angular version 7.2.1 encounters an ES6 class ReferenceError when attempting to access 'X' before it has been initialized

webpack is encountering difficulty resolving the node_modules material-icons directory

Efficiently sanitizing a JavaScript object using the replace() method in JavaScript

Issue encountered during creation of a polyline in Cesium

A method for displaying both the next and previous steps without relying on a switch case statement

Node.js not resetting array properly

The reflow feature in Highcharts does not properly update the width of the container for High

Explain the concepts of URL decoding and URL encoding

What is the best way to transfer a multidimensional array from PHP to JavaScript?

The form does not display the radio button value upon submission

Deactivating Button Features in Wx Widgets

What is the solution to resolving the error "null property 'role' cannot be read"?

What is the process for specifying a dependency on an ng-metadata module?

The application unexpectedly minimizes when the "Show Desktop" or "Minimize All" button is clicked

Switching minimum and maximum input values based on a specific condition: A step-by-step guide

Guide to utilizing jQuery for setting values in all subsequent rows of a table

What could be causing the issue of only the title being visible and not the content in Next.js when using next-mdx-remote?

Organize intricate JavaScript Arrays