Dynamic QML Object Creation from JavaScript#

instantiating and managing QML objects from JavaScript

QML supports the dynamic creation of objects from within JavaScript. This is useful to delay instantiation of objects until necessary, thereby improving application startup time. It also allows visual objects to be dynamically created and added to the scene in reaction to user input or other events.

Creating Objects Dynamically#

There are two ways to create objects dynamically from JavaScript. You can either call createComponent() to dynamically create a Component object, or use createQmlObject() to create an object from a string of QML. Creating a component is better if you have an existing component defined in a QML document and you want to dynamically create instances of that component. Otherwise, creating an object from a string of QML is useful when the object QML itself is generated at runtime.

Creating a Component Dynamically#

To dynamically load a component defined in a QML file, call the createComponent() function in the Qt object . This function takes the URL of the QML file as its only argument and creates a Component object from this URL.

Once you have a Component , you can call its createObject() method to create an instance of the component. This function can take one or two arguments:

The first is the parent for the new object. The parent can be a graphical object (i.e. of the Item type) or non-graphical object (i.e. of the QtObject or C++ QObject type). Only graphical objects with graphical parent objects will be rendered to the Qt Quick visual canvas. If you wish to set the parent later you can safely pass null to this function.

The second is optional and is a map of property-value pairs that define initial any property values for the object. Property values specified by this argument are applied to the object before its creation is finalized, avoiding binding errors that may occur if particular properties must be initialized to enable other property bindings. Additionally, there are small performance benefits when compared to defining property values and bindings after the object is created.

Here is an example. First there is Sprite.qml, which defines a simple QML component:

import QtQuick

Rectangle { width: 80; height: 50; color: "red" }

Our main application file, main.qml, imports a componentCreation.js JavaScript file that will create Sprite objects:

import QtQuick
import "componentCreation.js" as MyScript

Rectangle {
    id: appWindow
    width: 300; height: 300

    Component.onCompleted: MyScript.createSpriteObjects();
}

Here is componentCreation.js. Notice it checks whether the component status is Component.Ready before calling createObject() in case the QML file is loaded over a network and thus is not ready immediately.

var component;
var sprite;

function createSpriteObjects() {
component = Qt.createComponent("Sprite.qml");
if (component.status == Component.Ready)
    finishCreation();
else
    component.statusChanged.connect(finishCreation);
}

function finishCreation() {
    if (component.status == Component.Ready) {
        sprite = component.createObject(appWindow, {x: 100, y: 100});
        if (sprite == null) {
            // Error Handling
            console.log("Error creating object");
        }
    } else if (component.status == Component.Error) {
        // Error Handling
        console.log("Error loading component:", component.errorString());
    }
}

If you are certain the QML file to be loaded is a local file, you could omit the finishCreation() function and call createObject() immediately:

function createSpriteObjects() {
component = Qt.createComponent("Sprite.qml");
sprite = component.createObject(appWindow, {x: 100, y: 100});

if (sprite == null) {
    // Error Handling
    console.log("Error creating object");
}
}

Notice in both instances, createObject() is called with appWindow passed as the parent argument, since the dynamically created object is a visual (Qt Quick) object. The created object will become a child of the appWindow object in main.qml, and appear in the scene.

When using files with relative paths, the path should be relative to the file where createComponent() is executed.

To connect signals to (or receive signals from) dynamically created objects, use the signal connect() method. See Connecting Signals to Methods and Signals for more information.

It is also possible to instantiate components without blocking via the incubateObject() function.

Creating an Object from a String of QML#

Warning

Creating objects from a string of QML is extremely slow since the engine has to compile the passed QML string every time you do it. Furthermore, it’s very easy to produce invalid QML when programmatically constructing QML code. It’s much better to keep your QML components as separate files and add properties and methods to customize their behavior than to produce new components by string manipulation.

If the QML is not defined until runtime, you can create a QML object from a string of QML using the createQmlObject() function, as in the following example:

const newObject = Qt.createQmlObject(`
    import QtQuick

    Rectangle {
        color: "red"
        width: 20
        height: 20
    }
    `,
    parentItem,
    "myDynamicSnippet"
);

The first argument is the string of QML to create. Just like in a new file, you will need to import any types you wish to use. The second argument is the parent object for the new object, and the parent argument semantics which apply to components are similarly applicable for createQmlObject(). The third argument is the file path to associate with the new object; this is used for error reporting.

If the string of QML imports files using relative paths, the path should be relative to the file in which the parent object (the second argument to the method) is defined.

Important: When building static QML applications, QML files are scanned to detect import dependencies. That way, all necessary plugins and resources are resolved at compile time. However, only explicit import statements are considered (those found at the top of a QML file), and not import statements enclosed within string literals. To support static builds, you therefore need to ensure that QML files using createQmlObject() , explicitly contain all necessary imports at the top of the file in addition to inside the string literals.

Maintaining Dynamically Created Objects#

When managing dynamically created objects, you must ensure the creation context outlives the created object. Otherwise, if the creation context is destroyed first, the bindings and signal handlers in the dynamic object will no longer work.

The actual creation context depends on how an object is created:

If createComponent() is used, the creation context is the QQmlContext in which this method is called

If createQmlObject() is called, the creation context is the context of the parent object passed to this method

If a Component{} object is defined and createObject() or incubateObject() is called on that object, the creation context is the context in which the Component is defined

Also, note that while dynamically created objects may be used the same as other objects, they do not have an id in QML.

Deleting Objects Dynamically#

In many user interfaces, it is sufficient to set a visual object’s opacity to 0 or to move the visual object off the screen instead of deleting it. If you have lots of dynamically created objects, however, you may receive a worthwhile performance benefit if unused objects are deleted.

Note that you should never manually delete objects that were dynamically created by convenience QML object factories (such as Loader and Repeater). Also, you should avoid deleting objects that you did not dynamically create yourself.

Items can be deleted using the destroy() method. This method has an optional argument (which defaults to 0) that specifies the approximate delay in milliseconds before the object is to be destroyed.

Here is an example. The application.qml creates five instances of the SelfDestroyingRect.qml component. Each instance runs a NumberAnimation, and when the animation has finished, calls destroy() on its root object to destroy itself:

application.qml

import QtQuick

Item {
    id: container
    width: 500; height: 100

    Component.onCompleted: {
        var component = Qt.createComponent("SelfDestroyingRect.qml");
        for (var i=0; i<5; i++) {
            var object = component.createObject(container);
            object.x = (object.width + 10) * i;
        }
    }
}

SelfDestroyingRect.qml

import QtQuick

Rectangle {
    id: rect
    width: 80; height: 80
    color: "red"

    NumberAnimation on opacity {
        to: 0
        duration: 1000

        onRunningChanged: {
            if (!running) {
                console.log("Destroying...")
                rect.destroy();
            }
        }
    }
}

Alternatively, the application.qml could have destroyed the created object by calling object.destroy().

Note that it is safe to call destroy() on an object within that object. Objects are not destroyed the instant destroy() is called, but are cleaned up sometime between the end of that script block and the next frame (unless you specified a non-zero delay).

Note also that if a SelfDestroyingRect instance was created statically like this:

This would result in an error, since objects can only be dynamically destroyed if they were dynamically created.

Objects created with createQmlObject() can similarly be destroyed using destroy():

const newObject = Qt.createQmlObject(`
    import QtQuick

    Rectangle {
        color: "red"
        width: 20
        height: 20
    }
    `,
    parentItem,
    "myDynamicSnippet"
);
newObject.destroy(1000);