Converting JavaScript QML objects to C++ QT components

I have a QML JavaScript function that generates and returns a component called Item:

function createComponent() {
    var component = Qt.createComponent('MyComponent.qml');
    var obj = component.createObject(container, {'x': 0, 'y': 0});
    return obj; // Unsure whether to return obj or component for C++ usage
}

In my main.qml, I utilize a custom C++ class:

// ...
import com.acidic.customclass 1.0
import "CreateComponent.js" as CreateComponent

ApplicationWindow {
    visible: true
    width: 1280
    height: 800

    CustomClass {
        id: customClass
    }

    Button {
        onClicked: {
            customClass.receiveComponent(CreateComponent.createComponent)
        }
    }
}

The header file for my C++ class is as follows:

Q_INVOKABLE void receiveComponent(const QObject& obj /* QObject ref doesn't work */);

And here's the body of the C++ class:

void CustomClass::receiveComponent(const QObject& obj) {
    qDebug(obj.property("width")); // Checking if we received it correctly
}

Is there a way to pass a component generated using JavaScript and Qt.createComponent into the function parameter of my custom C++ class?

Answer â„–1

In our project, we utilize QML UI elements that are subclasses of QQuickItem (specific to Qt Quick). These elements inherit from the base class QObject. Additionally, we have other 'auxiliary' objects used in QML that also inherit directly from QObject:

// Using a QObject pointer with QML objects
Q_INVOKABLE void receiveComponent(QObject* pObj);

It is important to note that we work with various Qt primitives such as QString, QVariant, QVariantList, and QVariantMap. For more details, you can refer to the official documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fatal syntax error encountered when attempting to define a JavaScript object

Hey, I'm just starting out with JavaScript and I'm encountering a syntax error with the getValue() function in the code below. Can someone please assist me in solving it? let obj = { x:1, function getValue(){ console.log("hello") } } ...

Angular: Refresh mat-table with updated data array after applying filter

I have implemented a filter function in my Angular project to display only specific data in a mat-table based on the filter criteria. Within my mat-table, I am providing an array of objects to populate the table. The filtering function I have created loo ...

How can you enable fullscreen for a featherlight iFrame?

I have implemented Featherlight to display an iframe within a popup modal on my website. If you click the iframe button, you can see a demo of how it works. One issue I am facing is that the generated iframe tag by Featherlight does not include allowfulls ...

Guide to accessing Realm(JavaScript) object in an asynchronous manner and integrating it with various services

I have incorporated the following code into my project to open Realm asynchronously and integrate it with services. RmProfile.js: import Realm from 'realm'; const PrflSchema = { name: 'Profile', primaryKey: 'id', prope ...

Is it necessary for me to utilize a template?

Hello there! I hope you're having a fantastic day! I have come across this main() code, and it needs some tweaking to make it work properly. Here are a few guidelines: 1) Use only 1 class; 2) Avoid duplicating code; 3) Do not modify the main() fun ...

Integrating threejs dynamically into a Create React App environment

When I am dynamically loading Three.js, the variable THREE is not found. I have created a React project using create-react-app and copied the three js file into the public folder. Here's the directory structure: src public ├── js │ └─┠...

The offlinefirst.sock encountered an EPERM error

Encountering an error when attempting to run https://github.com/jakearchibald/wittr on Windows bash. Assistance in either resolving or troubleshooting this issue would be greatly appreciated: Development server listening. (PID:469) Config server liste ...

`Vue Component failing to display data from Blade File`

In my project using Laravel Blade, I am currently in the process of converting some blade files to Vue components. One challenge I encountered is trying to display a dynamically created page title on the screen from the Vue component rather than the blade ...

Creating a new copy constructor specifically tailored for a directed graph implementation using an adjacency list

I have been developing a comprehensive constructor copy function for a directed graph: class Graph { class Node { private: std::vector<Node*> children; public: Node* replicate() { Node* c = new Node(*this); for(int i = 0; i ...

Using Jquery $.ajax may lead to temporary freezing of the Browser

I have a $ajax function that fetches multiple JSON objects from a URL and converts them into divs. There are around 50 objects, and I am using setInterval to call the $ajax function every 10 seconds for updates on each of the created divs. However, I' ...

Having trouble with AES decryption on my nodeJS/ExpressJS server backend

Looking to decipher data post retrieval from mongoDb. The retrieved data comprises encrypted and unencrypted sections. app.get("/receive", async (req, res) => { try { const data = await UploadData.find(); const decryptedData = data. ...

How can I include inline CSS directly within a string instead of using an object?

Is there a way to write inline CSS in a string format instead of an object format? I attempted the following, but it did not work as expected: <div style={"color:red;font-weight:bold"}> Hello there </div> What is my reason for want ...

How can I dynamically assign ng-model with a filter for a particular object in an array?

Is there a recommended method for linking an input element to a specific field of an object in an array using its id? I tried using ng-model along with the find() function from the array prototype. However, the implementation is not working properly as it ...

Firefox does not allow contenteditable elements to be edited if they are nested inside a parent element that is draggable

Here is a basic HTML example: <div draggable=true> <div contenteditable=true>can't edit me</div> </div> When testing in Chrome, I noticed that I was able to edit the contents of the contenteditable div, however, this functi ...

Creating an HTML element within a three.js globe

I have a globe created using three.js Reference: I am trying to display an HTML div at a specific latitude/longitude on the globe. Can someone guide me on how to position the div at a particular lat/long? What I've attempted: I'm currently stu ...

Using jQuery to select the child element of the parent that came before

Recently, I've been experimenting with creating animations using CSS and jQuery. While it has been successful so far, I'm now looking to take it a step further. Specifically, I want information to appear on top of an image when the user clicks on ...

Guide on displaying a document in react-doc-viewer from a protected API endpoint in either Next.Js or ReactJs

I am looking to display files in my Next.JS web application using a secure API. The API provides the following data: { "name": "Test1.docx", "contentUri": "https://api.mypurecloud.ie/api/v2/downloads/x ...

"Unlocking the Secrets of Extracting Data from Highlighted Cells in Excel with Node.js

I created a script in node.js to extract information from an excel file. Each row contains a highlighted cell (only one). Right now, I am utilizing the xlsx package to access the data. Here is my code snippet for retrieving data from the sheet: var XLSX = ...

Injecting a variable into JavaScript using CodeIgniter

I've encountered an issue where I am unable to pass a variable from Codeigniter's view to the controller and then to the model for executing the necessary query to retrieve data from the database. Below is a snippet from my Controller: public f ...

Implementing pagination in a Node.js application using MongoDB.ORCreating

function implementPaginationForDigitalMigrationJoin(req, res, next) { DigitalMigrationForm.aggregate([ // Join with user_info table { $lookup: { from: DigitalMigrationFormList.collection.name, // other ...