[SOLVED] Problems adding components dynamically

xcoder

Hello,

I'm following this tutorial to learn Qt Quick "Qt Quick Application Developer Guide for Desktop":http://download.qt-project.org/learning/developerguides/qtquickdesktop/QtQuickApplicationGuide4Desktop.pdf

Once again, I'm stuck somewhere. This time, I'm having problems adding objects dynamically to the "Page". Probably again I'm overlooking some small detail.

I get the following error:
@
qrc:///Page.qml: QML Component: createObject: value is not an object
qml: note object failed to be created!
@

And here is the Page.qml:

@
import QtQuick 2.0

Item {
id: root
width: 600
height: 400
opacity: 0.0

Component {
    id: noteComponent
    Note { }
}

Item {
    id: container
    anchors.fill: parent
}

function newNoteObject(args) {

    var note = noteComponent.createObject(container, args)
    if(note == null)
        console.log("note object failed to be created!")
}

}
@

I also tried to use Qt.createComponent, which is the example provided in the documentation
Instead of defining component, I would create the component from qml file
@
var noteComponent= Qt.createComponent("Note.qml");
@

I still get the same error

Thanks

dheerendra

@Just try this ?

Rectangle {
id : top
width: 200
height: 400
color : "blue"
MouseArea {
anchors.fill: parent
onClicked: {
console.log("onclicked")
var component = Qt.createComponent("Page1.qml");
if (component.status == Component.Ready) {
console.log("here")
component.createObject(top, {"x": 100, "y": 100});
}
}
}
}

======Page1.qml=========
Rectangle {
id: root
width: 200
height: 200
opacity: 1.0

Component {
    id: noteComponent
    Rectangle {
    width: 100;height: 100;color: "red"
    }
}

Item {
    id: container
    anchors.fill: parent
}

}
@

If you are intent is to create inline component, try using Loader as well.

xcoder

Thank you,

Your example worked, and from there I found out what exactly was the problem in my code.

The problem was the way I called the newNoteObject function, I noticed that my code worked when I specified args to be {"x": 100, "y": 100}. I guess args can't be null. Either there is a typo in the tutorial (page 40 ) or in earlier versions for Qt Quick it didn't matter.

Basically, I just call the function the following way now:

@onClicked: pagePanel.currentPage.newNoteObject({})@

Instead of:

@pagePanel.currentPage.newNoteObject()@

Now both approaches work, either defining the Component as an item or using the Qt.createComponent() method.

Thank you again, there is quite steep learning curve regarding Qt Quick.

dheerendra

It does matter how do you call the function. You passed the null and which assumed some many things. Can you point me the Qt documentation where it is like this ?

xcoder

Hi Dheerendra,

It's not in the documentation itself, but in one of the developer guides:
http://qt-project.org/wiki/Developer-Guides

More precisely: Qt Quick Application Developer Guide for Desktop on page 40

@Tool {
id: newNoteTool
source: "images/add.png"
// using the currentPage property of PagePanel and
// calling newNoteObject() function without any arguments.
onClicked: pagePanel.currentPage.newNoteObject()
}@

However, now that I finished the guide, in page 40 it does call the construction of new note without providing args, but later on it will introduce a new function which will use the args and different function will be called from that place. I guess the writer stripped a little bit too much code out. Good guide nonetheless.

Or maybe I just misunderstood something.

Illogica

@xcoder
I'm following your same guide, and stumbled upon your very same problem.
There are a few little problems with that document that makes it quite challenging to follow.
I always end up double checking with the attached source code.
Just in case somebody else needs that, here are all the guides and the sources.