Explanation on Dynamic Object Management in QML

[VVNart]

First of all, I just started to learn programming so a bit slow to understand it.

There's this part that I don't seems to understand.

createQmlObject ( string qml, object parent, string filepath )

The "string filepath" as in the file path where my object will be created or something else?
Because after try to practice how to do it, it doesn't work at all for me.

[ltomuta]

See http://doc.trolltech.com/4.7-snapsho...lObject-method

If filepath is specified, it will be used for error reporting for the created object.

A cryptic message but which basically means that the parameter matters not, and if for some reason your code does not work, the reason is elsewhere, not in this parameter.

[VVNart]

Here is the code just to do for testing. The result is it already appear a red rectangle when the simulator load rather than click the button to create.

//---main.QML----//

import QtQuick 1.0
import "componentCreation.js" as MyScript
Rectangle {
    id: appWindow
    width: 300; height: 300

    Component.onCompleted: MyScript.createSpriteObjects();

    Rectangle{
        x: 22
        y: 207
        height:60
        width:40
        color: "grey"

    MouseArea{
    onClicked: Qt.createQmlObject("sprite.qml", appWindow,"object1") }
    }
}

//---sprite.qml---//

import QtQuick 1.0

 Rectangle{
     height: 60
     width: 40
     x: 180 * Math.random()
     y: 180 * Math.random()
     color: "red"
}

//---componentCreation.js---//

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);
         if (sprite == null) {
             // Error Handling
         } else {
             sprite.x = 100;
             sprite.y = 100;
             // ...
         }
     } else if (component.status == Component.Error) {
         // Error Handling
         console.log("Error loading component:", component.errorString());
     }
 }

[ltomuta]

You do not use createQmlObject to load a qml file. The QML code should be in the "string" parameter itself.

onClicked: Qt.createQmlObject('import QtQuick 1.0; Rectangle {height: 60; width: 60; color: "green";}', button2,"object1")

As the documentation of createQmlObject says, if you are interested in loading components (e.g. loading new QML files) you should be using createComponent

[VVNart]

Can I have a simple example on createComponent code with button? It's quite a struggle to understand without basic on javascript

[ltomuta]

Here's a code snippet achieving the creation of a randomly positioned rectangle at a click of a button. It includes both a createQMLObject and a createComponent based solution.

main.qml

import QtQuick 1.0

Rectangle {
    width: 360
    height: 360

    Rectangle {
        id: button
        height: 60;
        width: parent.width
        color: "red"

        Text {
            text: "Exit"
            anchors.centerIn: parent
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                Qt.quit();
            }
        }
    }

    Rectangle {
        id: button2
        anchors.top: button.bottom

        height: 60;
        width: parent.width
        color: "blue"

        function handleClick()
        {
            var component = Qt.createComponent("object1.qml");
            if (component.status == Component.Ready) {
                var button = component.createObject(button2);
                button.color = "red";
            }

        }

        Text {
            text: "Click for new square"
            anchors.centerIn: parent
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                onClicked: parent.handleClick() //Qt.createQmlObject('import QtQuick 1.0; Rectangle {height: 60; width: 60; x: 180 * Math.random(); y: 180 * Math.random(); color: "red"; border.color: "black";}', button2,"object1")
            }
        }
    }

}

object1.qml

import QtQuick 1.0

Rectangle {
    height: 60
    width: 60
    x: 180 * Math.random()
    y: 180 * Math.random()
    color: "blue"
    border.color: "black"
}

[VVNart]

Thank you for the example.

However, the createComponent is still not working whereas createQmlObject works. Instead it shows "error" in the console when I state "else {console.log("Error creating object")}

[ltomuta]

What is the error message you see?

[VVNart]

It's actually no error. But it doesn't create any component by using createComponent. The button is still functioning as it show "Error creating object" in the console log.

function handleClick()
        {
            var component = Qt.createComponent("object1.qml");
            if (component.status == Component.Ready) {
                var button = component.createObject(button2);
                button.color = "red";}
           else {console.log("Error creating object")}
            }

[ltomuta]

Have you created the "object1.qml" file in the same directory where main.qml is?
The code above works fine for me, with or without the else branch.

[VVNart]

Hey it works! This is because object1.qml is not in the same folder with main.qml. Silly me :P

Thanks alot!