Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Highlighted
New Developer
Posts: 41
Registered: ‎02-11-2010
My Device: Bold 9000
My Carrier: AT&T
Accepted Solution

Help with dynamically created components (turning properties on or off)

Hello all! I'm working on an app with a bunch of control delegates created dynamically. 

 

Here is my use case-scenario:

I'm making a GPA calculator type app, and instead of hard coding a bunch of dropdowns for students to select grades, I created a custom component. According to the documentation, each dynamically created component doesn't get destroyed until the parent it self gets destroyed. ControlDelegate seemed to be a better option as you can set the flag to false to make the component go away.  I created a control delegate that uses the dropdown custom component and added some aliases to be able to give each an object name on creation. My problem now is that I can't figure out the proper element to call to be able to set the delegateActive property to false to make the element go away. 

 

here is the control delegate: 

 

import bb.cascades 1.2

Container {
    property alias cT : classTitle.text
    property alias oN : obName.text 
    property alias dN : dDown.objectName
    property alias cdF : dDown.delegateActive
    property alias dDown : dDown 
    
    topPadding: 10.0
    bottomPadding: 10.0

    ControlDelegate {
        id: dDown
        sourceComponent: droDwn
        delegateActive: true
    }
    attachedObjects: [
        ComponentDefinition {

            id: droDwn
            GpaDD {
                ddPro {
                    title: cT
                    objectName: oN
                }
            }
        }

    ]
    
    Label {
        id: classTitle
        text: ""
        visible: false
    }
    Label {
        id: obName
        text: ""
        visible: false
    }
    
    onTouch: {
        console.log(dDown.delegateActive + " " + dDown.objectName)
    }
}

 on the main page, I have the following code to create a new component:

 

Page {
    id: gpaCalc
    actions: [
        ActionItem {
            id: addDD
            title: "Add Class"
            imageSource: "asset:///images/add.png"
            ActionBar.placement: ActionBarPlacement.OnBar

            onTriggered: {
                var nn = ddContainer.count();
                var newDD = defDrop.createObject();
                newDD.cT = "Class " + [ nn ];
                newDD.oN = "_" + nn;
                newDD.dN = "_" + nn;
                ddContainer.add(newDD);

            }
        },
        ActionItem {
            id: remDD
            title: "Remove Class"
            imageSource: "asset:///images/Edit.png"
            ActionBar.placement: ActionBarPlacement.OnBar

            onTriggered: {
                console.log();
            }

        }
    ]
    attachedObjects: [
        ComponentDefinition {
            id: defDrop
            DropDelegate {
            }
        }
    ]
    Container {

        /* ImageView {
         * horizontalAlignment: HorizontalAlignment.Fill
         * verticalAlignment: VerticalAlignment.Fill
         * imageSource: "asset:///images/rect_overlay.png"
         * opacity: 0.65
         * }*/
        ScrollView {
            horizontalAlignment: HorizontalAlignment.Fill
            verticalAlignment: VerticalAlignment.Fill
            scrollViewProperties {
                scrollMode: ScrollMode.Vertical

            }
            Container {
                horizontalAlignment: HorizontalAlignment.Fill
                verticalAlignment: VerticalAlignment.Fill
                topPadding: 50
                leftPadding: 50
                rightPadding: 50
                id: ddContainer

                onCreationCompleted: {
                    if (ddContainer.count() < 2) {
                        var nn = ddContainer.count();
                        var newDD = defDrop.createObject();
                        newDD.cT = "Class " + [ nn ];
                        newDD.oN = "_" + nn;
                        newDD.dN = "_" + nn;
                        ddContainer.add(newDD);
                    }
                }
                Label {
                    text: "Select Your Grades"
                    textStyle.fontStyle: FontStyle.Normal
                    textStyle.fontWeight: FontWeight.W100
                    verticalAlignment: VerticalAlignment.Top
                    horizontalAlignment: HorizontalAlignment.Center
                    textStyle.fontSize: FontSize.XXLarge
                }
            }
            accessibility.name: "TODO: Add property content"
        }
    }
}

 How can i find the last created control delegate to set the delegate active tag as false?

Any help is appreciated! Smiley Very Happy

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Help with dynamically created components (turning properties on or off)

It would just be dDown.delegateActive = false;


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
New Developer
Posts: 41
Registered: ‎02-11-2010
My Device: Bold 9000
My Carrier: AT&T

Re: Help with dynamically created components (turning properties on or off)

Thanks, but it is not working. Each component is given a different objectName on creation and that is where I'm there is no dDown id on each subsequent element added... Smiley Sad
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Help with dynamically created components (turning properties on or off)

I see, you are adding components on a button press to a Dynamically loaded 'container' so to speak.
Yes you will need to search for them by objectName and remove them from the scene graph, as and when you need them.

If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Help with dynamically created components (turning properties on or off)

Do you have so many that you need to do it this way?
Why not just have a place holder for *each* dropdown and turn them on and off individually using delegateActive?

If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Help with dynamically created components (turning properties on or off)

In a similar fashion to how you would do tabbedPanes using Delegate...

http://developer.blackberry.com/native/documentation/cascades/ui/navigation/multiple_screens_tabs.ht...

If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
New Developer
Posts: 41
Registered: ‎02-11-2010
My Device: Bold 9000
My Carrier: AT&T

Re: Help with dynamically created components (turning properties on or off)

Theoretically speaking, I don't need more than 10. I'll have to go this route for now, but I'd still like to learn how to find each instance of objectName in case I need to do something like this in the future. I saw another post that uses a C++ helper function, but i'd like to learn if there is a way to do it strictly using QML/JS
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Help with dynamically created components (turning properties on or off)

No, there is no findChild() function exposed to QML you would need to dip in to C++.

If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.