QML (Cascades) - insert container at position

Question

Cascades, 10.2 SDK

MyCustomContainer.qml:

import bb.cascades 1.2

Container {
    id: rootContainer

    Container{
        id: childContainer
        // some content
    }   
}

MyPage.qml:

import bb.cascades 1.2

Page {

    MyCustomContainer{

         Label{
              id: label
         }
    }
}

Label will be added on top of all content inside the rootContainer. I'd like to insert the label(or any other content) below all the content in MyCustomContainer. I've tried creating a property inside MyCustomContainer:

property Container backgroundContent

and add it as first child inside the MyCustomContainer as:

id: rootContainer

backgroundContent{
    id: backgroundContent
}

and just set it in MyPage as:

MyCustomContainer{
     backgroundContent: Container{

     }

but I get

Cannot assign to non-existent property "id"

since the property value has not been set.

Can I somehow insert the content from MyPage.qml at the root of the MyCustomContainer?

Answer 1

The solution is rather simple. Predict at which place can components be injected in the root container and place another container there.

Container {
id: rootContainer

Container{
    id: injectContainer
}

Container{
    id: childContainer
    // some content
}   
}

injectContainer.add(label)

Answer 2

It sounds like you want to use a default property to assign any children of the MyCustomContainer to be placed into the childContainer.

import bb.cascades 1.2

Container {
    id: rootContainer

    default property content: childContainer.children

    Container{
        id: childContainer
        // All children when this control is used will be placed inside this component.
    }   
}

Then it can be naturally used as:

MyCustomContainer {
     Container {

     }

This will render the Container within the childContainer of the MyCustomContainer component.

Answer 3

Try using backgroundContent.add()