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

Error: Attempting to assign a value to the property 'running' of an undefined variable

While working with Nuxt.js, I encountered an issue related to reading the running property of my client object. Here is the HTML code snippet: <b-button v-show="!(projectSelecter(project.ID)).isStarted" //this work just fine variant="success" c ...

Distinguishing between `notEmpty` and `exists` in express-validator: what sets them apart

I'm confused about the distinction between exists and notEmpty in express-validator as they seem to function identically. ...

Creating a dynamic dropdown menu based on a class value using JavaScript in PHP

There are two dropdown menus on my webpage that display information from my SQL table. The first dropdown contains different "Colors," and the second dropdown contains members associated with each color group. Each member is categorized into different optg ...

Running an express server on localhost with nginx: A step-by-step guide

Is it possible to run the express server using Nginx on localhost? And if so, how can this be accomplished? const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => res.send('Hello ...

Including content without triggering the digest cycle (utilizing raw HTML) within a Directive

My goal is to include raw HTML inside a directive for later transclusion (to populate a modal when opened). The issue arises when the contents of dialog-body are executed, triggering the ng-repeat loop and causing the template to be rerun, leading to a po ...

Automate your workflow with Apps Script: Save time by appending a row and seamlessly including additional details to the

I currently have 2 server-side scripts that handle data from an html form. The first script saves user input to the last row available in my Google sheet, while the second script adds additional details to the newly created row. Although both scripts work ...

How come the Array object transforms into an empty state when an input file is passed as an array element in an ajax request without

When attempting to upload a file without assigning it to an array, the process works fine. However, when trying to assign the file object as an element of an array, $_FILES becomes empty. HTML <input type='file' name='image' class= ...

Exploring the differences between client-side and server-side data manipulation

Recently, I discovered how to access local variables from Express in client-side JavaScript: Check out this helpful thread on StackOverflow However, this discovery has brought up a new challenge for me... Now I am unsure about which data manipulation tas ...

The React hamburger menu triggers a re-render of child elements within the layout

I am currently working with React and Material UI v5. Within my layout, I have a menu component with children. Whenever I click on the menu, it triggers a refresh of the children components. I attempted to resolve this by encapsulating the child components ...

Having difficulty sending ajax to the controller function

Currently, I am facing an issue with updating my database using AJAX in Laravel. The goal is to change the value in the enable column from 1 to 0 when a toggle button is clicked. Below script is included in the view: $(".toggle-btn").change(function() { ...

Retrieve data from a JSON gist by parsing it as a query string

I have a JavaScript-based application with three key files: index.html app.js input.json The app.js file references input.json multiple times to populate content in div elements within index.html. My goal is to enhance the functionality so that when acc ...

I seem to be having trouble using my markers on my istamap

function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker = new ...

ng-repeat did not properly listen for changes in the radio box selection

Feeling a bit confused here. I'm trying to call a function on change and pass the obj to it. From what I understand, since it's bound to the selected obj, I should be able to just use ng-model. However, in this situation, nothing happens when I s ...

Is it possible for me to design a unique path without relying on redux?

I am working on a Loginscreen.js component import React, { Component } from 'react'; import Login from './Login'; class Loginscreen extends Component { constructor(props){ super(props); this.state={ username:'&apo ...

Error message: "The contract is not defined in thirdweb-dev/react

I am currently using thirdweb-dev/react library to interact with a smart contract. However, I am encountering an issue where the contract is showing up as undefined in my code along with the following error message: query.ts:444 Error: Could not ...

"Why is it that the keypress event doesn't function properly when using the on() method

My goal is to capture the enter event for an input field $("input[name='search']").on("keypress", function(e){ if (e.which == '13') { alert('code'); } }); This is the HTML code snippet: <input name="searc ...

Verifying if checkboxes are selected in PHP using JavaScript

echo '<div class="col-lg-10 col-lg-offset-1 panel">' . "<table id='data' class='table'> <tr> <th></th> <th>Document No</th> <th>AWB NO</th> ...

How about "Temporary and localized responses with Discord.JS?"

Recently, I've been diving into the world of localization on my Discord Bot and had a thought. Localization allows you to tailor replies in different languages based on the user's language settings. For example, take a look at this code snippet ...

Using custom class instances or objects within Angular controllers is a simple process

Using three.js, I have created a class called threeDimView that houses my scene, camera, and other elements. In my JavaScript code, I instantiate a global object of this class named threeDimView_. threeDimView_ = new threeDimView(); Now, I wish to displa ...

How can you refresh the source element?

Is there a way to make the browser reload a single element on the page (such as 'src' or 'div')? I have tried using this code: $("div#imgAppendHere").html("<img id=\"img\" src=\"/photos/" + recipe.id + ".png\" he ...