createComponent change property first and after creation when component is visible

elicat

Goodmorning everyone,
variuos questions on the topic of dynamic component creation with Qt.createComponent:

Is it true that if I dynamically create the components of a QML file, the execution is slower? How slow?
if I create a component, is there any way to change its properties once it has been displayed? For example: A treeView has the model propion set in its QML file. I create it and then it must be changed with another model after you creation. Can you post an example?
When the component was created I was able to modify the model properties using a property alias as you can see in the example. But how can I change the same properties once the component is displayed?

The component in file QML:

Item {
    property alias modelObjTree: idTreeMenuView.model
    TreeView {
        id: idTreeMenuView
        Layout.minimumWidth: 50
        width: 300
        Layout.maximumWidth: 300
        model: treeViewModelData
        height: idRectAreaSxRow2.height
        TableViewColumn {
            role: "display" // is role 0
        }
    }
}

as soon as he finished creating object he changed his property

                var componentQmlTree = Qt.createComponent("qrc:/mycomponent/MenuTreeView.qml");
                var objComponentCreate = componentQmlTree.createObject(this, {"id": "idTreePippo", "modelObjTree": treeViewModelSimulation});
                if (objComponentCreate == null) {
                    // Error Handling
                    console.log("Error creating object");
                } else {
                    console.log("object created: " + objComponentCreate);
                    objComponentCreate.visible= true;
                }
                objComponentCreate.modelObjTree = treeViewModelData;

in the creation phase can I set a different id from wullo indicated in the QML file?

In particular, I'm wondering how I can modify the properties of a dynamically created component, both during and after and what are the limits.

sierdzio

@elicat said in createComponent change property first and after creation when component is visible:

Goodmorning everyone,
three questions on the topic of dynamic component creation with Qt.createComponent:

Is it true that if I dynamically create the components of a QML file, the execution is slower? How slow?

No it is not. After the object is generated it works the same as any other QML code.

if I create a component, is there any way to change its properties once it has been displayed? For example: A treeView has the model propion set in its QML file. I create it and then it must be changed with another model. Can you post an example?

You can modify properties during creation as outlined here: https://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html

Then, of course, you can modify the properties same as with any other QML component: through Connections, accessing object properties (using dot: myObject.someProperty), accessing children objects, sending signals to the object etc.

in the creation phase can I set a different id from wullo indicated in the QML file?

ID is not visible outside the QML file. You cannot access it and you cannot change it. You can modify properties and find object children by name, though.

In particular, I'm wondering how I can modify the properties of a dynamically created component, both during and after and what are the limits.

Yep, you can modify the properties at any time. It works exactly the same as for normal "static" QML components.

Diracsbracket

@sierdzio said in createComponent change property first and after creation when component is visible:

No it is not. After the object is generated it works the same as any other QML code.

What about the creation speed itself? e.g. 1000 items defined in-line vs. creating those 1000 items dynamically in some JS loop?

sierdzio

@Diracsbracket said in createComponent change property first and after creation when component is visible:

@sierdzio said in createComponent change property first and after creation when component is visible:

No it is not. After the object is generated it works the same as any other QML code.

What about the creation speed itself? e.g. 1000 items defined in-line vs. creating those 1000 items dynamically in some JS loop?

You'd have to create a benchmark and measure it, I don't know. My guess is that there will be little difference between the two approaches.

In practice I've been using both Loaders and Qt.createComponent() heavily in several projects and it works fine. If they are slower than static objects then it's not slower enough to notice (in my case at least).

Diracsbracket

@elicat said in createComponent change property first and after creation when component is visible:

var objComponentCreate = componentQmlTree.createObject(this, {"id": "idTreePippo", "modelObjTree": treeViewModelSimulation});

I don't think defining the ID like that works.

What you can do instead is to define a property somewhere, and assign the object to that property. The property name will become its external ID:

Component {
     id: listViewComponent
     ListView {}
}

Item {
      id: testItem
     property ListView listView
}

and in some JS:

testItem.listView = listViewComponent.createObject(someParent)

You can then modify listView as you would if it were defined in-line.

Using a var means that it needs to be a global JS variable, if you want to access the object outside the scope of the JS function you used to create it.

Diracsbracket

@sierdzio said in createComponent change property first and after creation when component is visible:

In practice I've been using both Loaders and Qt.createComponent() heavily in several projects and it works fine. If they are slower than static objects then it's not slower enough to notice (in my case at least).

Thanks. Completely unrelated to the question though, I have read somewhere that there is such a thing as a QML compiler, which is not free. Do you have any idea what its speed-up benefits would be?

sierdzio

@Diracsbracket said in createComponent change property first and after creation when component is visible:

@sierdzio said in createComponent change property first and after creation when component is visible:

In practice I've been using both Loaders and Qt.createComponent() heavily in several projects and it works fine. If they are slower than static objects then it's not slower enough to notice (in my case at least).

Thanks. Completely unrelated to the question though, I have read somewhere that there is such a thing as a QML compiler, which is not free. Do you have any idea what its speed-up benefits would be?

QML compiler is available in Open Source Qt since Qt 5.10 or so. In the meantime it has been partially superseded by QML cache (which is used by default so you don't need to turn it on anywhere).

QML compiler will improve your app startup times - it will take less time for QML engine to start the app because it won't need to parse QML, instead it will only load the precompiled data (mmap). Then at runtime, there is no difference in performance.

Diracsbracket

@sierdzio said in createComponent change property first and after creation when component is visible:

QML compiler is available in Open Source Qt since Qt 5.10 or so. In the meantime it has been partially superseded by QML cache (which is used by default so you don't need to turn it on anywhere).

Awesome. Great to know!

elicat

@sierdzio hello,
I state that I have done several tests before relaunching the post, and then continue the questions because not everything is resolved.
Let's start with a QML file in which I create components (with javascript) that will be located inside it:

to a dynamically created button component (for example a button.qml file) I can change properties such as color height etc etc .. but the same button will have different actions on click. How do I combine different winds and actions with different dynamically created buttons?
we hypothesize to create two buttons in the main.qml (File Buttonxx.qml -> Button1 and Button2) and a TreeView (from file menutree.qml). the Button1 on click must act on the properties of TreeView making it visible and Button2 makes it disappear (for example). Or even more difficult: it has to change the TreeView model. How is it done? How do I get to set the standards and act on the components created?
Everything I can write in the component files can not find the other components.
from the previous reasoning comes this question: if a component changes its properties except the ID how do I point to a specific object?
if I use the signal and the slot to access C ++ how do I act on components that were created dynamically in javascript in the main QML?