Cascades Development

[georg22]

Hi,

how can i store the reference of the created object, for example to remove it later.

In the example below the reference "createdControl" is stored in a local variable of the "onClicked" handler and is not accessable later. 

Its not possible to use a property of the Container to store it, because then i need to specify a datatype ( strangely enough its possible to store it in an imported javascript file in a typless variable....). 

So this reference seems to be pretty useless for now, or am i missing something?

Thanks.

Container {              
    id: rootContainer               
    Label  {                  
        text: "Example Component Definition"              
    }              
    Button  {                  
        text: "Click to create dynamic component"
        onClicked :  {                      
            // Create the component and add it to the Container   
            var createdControl = compDef.createObject();
            rootContainer.add(createdControl);
        }             
    }
    attachedObjects: [                  
        ComponentDefinition {                      
            id: compDef                       
            source: "test.qml"             
        }
    ]         
}

[georg22 · Accepted solution]

Ok, the right datatype is "variant", sorry, i searched for an hour, just found it 

[kj13ennett]

Hey, I'm doing pretty much the same thing, COuld you elaborate on how you solved this, I'm having some trouble still.

Thanks

[lew]

something like this should fix it:

Container {              

property variant createdControl;

    id: rootContainer               
    Label  {                  
        text: "Example Component Definition"              
    }              
    Button  {                  
        text: "Click to create dynamic component"
        onClicked :  {                      
            // Create the component and add it to the Container   
            var createdControl = compDef.createObject();
            if(!createdControl) createdControl = compDef.createObject();
            rootContainer.add(createdControl);
        }             
    }
    attachedObjects: [                  
        ComponentDefinition {                      
            id: compDef                       
            source: "test.qml"             
        }
    ]         
}

[laclekim]

OK so how do i call the function to remove. is it destroy or remove...neither of those are working for me.. could you help me with an example?

[ekke]

I also didn't found a way to destroy dynamically created objects

[lew]

to remove:

https://developer.blackberry.com/cascades/reference/bb__cascades__container.html#remove

to delete a qml object, use:

destroy()

NOTE:

1) when deleting qml objects, it is not garanteed to be freed immediately

2) QML cleans objects automatically within some sort of GC using the parent-child relationship of all the QML objects...so you don't have to clean you dynamically created elements unless you removed it from its parent or its parent won't be deleted until the app is closed. 

3) to add to pt (2), destroying a parent object also destroys all its childs.

4) destroy are often used in a NavigationPane or TabbedPane....if you have many different Pages or Tabs, you might want to destroy them when it is no longer active, else they won't be cleaned up until the NavigationPane or Tabbedpane is destroyed (for some cases, it could be when the app exits...and that's not good)

5) play around with the above while monitoring the heap usage using the QNX System Information Perspective!

hope this helps!

[ekke]

thx lew

now it works

I had to use my custom QML Type: (UsersNavPane)

TabbedPane {
    property UsersNavPane n;  

 then to create the dynamic object this way

function createUserTabComponent() {
    n = onDemandComponentUsersNavPane.createObject();
    usersTab.content = n;

 and destroying works this way

function destroyUserTabComponent() {
    if (usersTab.content) {
        usersTab.resetContent();
        n.destroy()
    }

thx