Dynamic qml object creation and deletion

ashajg

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 error

In 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?

dheerendra

This indicate that spriteone object does not exist

ashajg

@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 ..?

Mammamia

@ashajg

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();
}

ashajg

hi sir @Mammamia

Okk..So I should declare spriteOne in main.qml instead of Controller.js
and then use it in my .js for creation and deletion operation..

Surely I ll try this approach and check...

Thanks

ashajg

@Mammamia Thanks a Lot its working!!!