Dynamic qml object creation and deletion
-
Hi guys
I am trying to create dynamic objects using javascript and i am able to create it. But when I am trying to delete those objects I am getting errorIn my example I am having 3 qml files and one .js file
Controller.js
var componentOne; var spriteOne; var componentTwo; var spriteTwo; function createSpriteObjects() { componentOne = Qt.createComponent("qrc:/Group.qml"); componentTwo = Qt.createComponent("qrc:/Terminator.qml"); if (componentOne.status === Component.Ready && componentTwo.status === Component.Ready) finishCreation(); else componentOne.statusChanged.connect(finishCreation); componentTwo.statusChanged.connect(finishCreation); } function finishCreation() { spriteOne = componentOne.createObject(mainWindow, {"iwidth": 800, "iheight": 100,"icolor":"Gray" }); spriteTwo = componentTwo.createObject(mainWindow, {"jwidth": 800, "jheight": 100,"jcolor":"Gray" }); } function destroyer() { spriteOne.destroy(); }
Main.qml
import QtQuick 2.6 import QtQuick.Window 2.2 import "qrc:/Controller.js" as Control Window { id:mainWindow visible: true width: 800 height: 600 title: qsTr("Hello World") Component.onCompleted: { Control.createSpriteObjects(); } }
Group.qml
import QtQuick 2.0 Rectangle { id:groupRect property int iheight; property int iwidth; property string icolor; height:iheight width:iwidth color:icolor anchors.bottom:parent.bottom }
Terminator.qml
import QtQuick 2.0 import "qrc:/Controller.js" as Terminate Rectangle { id:term property int jheight; property int jwidth; property string jcolor; height:jheight width:jwidth color:jcolor anchors.top:parent.top MouseArea { anchors.fill:parent onClicked: Terminate.destroyer(); } }
I have dynamically created group.qml and terminator.qml . My aim is to call a function written in .js (destroyer)on mouse click event of terminator.qml and that function should destroy my group.qml object. But I am getting this error on mouse click
qrc:/Controller.js:24: TypeError: Cannot call method 'destroy' of undefined
how can i solve this problem?
-
This indicate that spriteone object does not exist
-
@dheerendra yes sir spriteone will only work under finishcreation... so how can i delete qml object from a function in .js or if I want to change property of group.qml from a function in .js ..?
-
Keep the dynamically created object reference inside main.qml and use it inside JS to assign and delete.
//main.qml Window { ... property var spriteOne; ...
and inside Controller.js
function finishCreation() { mainWindow.spriteOne = componentOne.createObject(mainWindow, {"iwidth": 800, "iheight": 100,"icolor":"red" }); spriteTwo = componentTwo.createObject(mainWindow, {"jwidth": 800, "jheight": 100,"jcolor":"blue" }); } function destroyer() { mainWindow.spriteOne.destroy(); }