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
Developer
macaronlover
Posts: 101
Registered: ‎01-06-2014
My Device: Q10
My Carrier: EE

Re: Change page content based on selected dropdown item

I got it. Thank you very much. The problem was I had a Page control at the top before the container.

Please use plain text.
Developer
macaronlover
Posts: 101
Registered: ‎01-06-2014
My Device: Q10
My Carrier: EE

Re: Change page content based on selected dropdown item

However. When I open the page the qml doesn't appear & everytime I choose a different item from the drop-down it keeps creating qmls 1 on top of the other which I do not want.

Please use plain text.
Developer
pyth
Posts: 501
Registered: ‎01-19-2011
My Device: My Trusty Red Plane
My Carrier: Outer Space

Re: Change page content based on selected dropdown item

that's because sabdelsayed's code calls removeAll() and createObject() every time you switch the selected index. So it removes all visible elements and creates them completely new again every time (@sabdelsayed I don't think it's a good solution performancewise, also, if you assume that inside those containers any changes/settings were made, those changes/settings would be lost. Or if it would be a list/scrollview, the position would also be lost)

@macaronlover you can keep using that code, but what you should do is
1) not call removeAll()
2) on creation completed, create your first container as default
3) create a property variant in your Page definition, storing your containers after createObject. Then, inside onSelectedIndexChanged, check if the property was created already, if yes, set it to visible and all the others to invisible

e.g. like this
//.....
if(selectedIndex==1)
{
if (control1) {
control1.visible = true;

//and set all others to visible = false

} else {
control1 = compDef1.createObject();
changingContainer.add(control1);
}
}
//...
-----------------------------------------------------------------------
I'm a bird from outer space. But I'm not flappy o.o
Please use plain text.
BlackBerry Development Advisor
sabdelsayed
Posts: 249
Registered: ‎08-17-2012
My Device: BlackBerry Z10 and Q10
My Carrier: Bell

Re: Change page content based on selected dropdown item

[ Edited ]

Acutally pyth, the ComponentDefinition component doesn't have a visible property and the code doesn't compile if the modifications you suggested are incorporated. The visible property exists only for ControlDelegate and Delegate.

 

@macaronlover, please use my modified (and not original), code where I have added functionality to remove and add components based on the user-selected option. You still need to add, however, code that initializes the view for the user.

 

Memorywise, the above code is good. Might be not the best though in terms of loading/unloading time. If that is a concern, then the best way to implement this is indeed using ControlDelegates based on Simon's suggestion.

 

For more details on the various ways to create QML dynamically checkout this documentation:

http://developer.blackberry.com/native/documentation/cascades/best_practices/dynamic_qml/

@SamarAbdelsayed

Did this answer your question? Please accept post as solution.
Please refrain from posting new questions in solved threads.
Found a bug? Report it using the Issue Tracker
Please use plain text.
Developer
simon_hain
Posts: 16,010
Registered: ‎07-29-2008
My Device: Z10 LE
My Carrier: O2 Germany

Re: Change page content based on selected dropdown item

creating stuff once and switching the visible flag is one solution.
i would try to use ControlDelegates and setting them to active.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Please use plain text.
Developer
macaronlover
Posts: 101
Registered: ‎01-06-2014
My Device: Q10
My Carrier: EE

Re: Change page content based on selected dropdown item

I only see your original code in this thread. Could you post it again please?

Please use plain text.
Developer
macaronlover
Posts: 101
Registered: ‎01-06-2014
My Device: Q10
My Carrier: EE

Re: Change page content based on selected dropdown item

Sounds different but I'd need to see some example code as I'm a beginner.

Please use plain text.
Developer
pyth
Posts: 501
Registered: ‎01-19-2011
My Device: My Trusty Red Plane
My Carrier: Outer Space

Re: Change page content based on selected dropdown item

Hi sabdelsayed

 

I never said that the visible flag should be set on the ComponentDefinition component, I said: "create a property variant in your Page definition, storing your containers after createObject"

 

In code it would be this:

Page {

    property variant control1;

    Container {
        
        id: outerContainer
        
        DropDown {
           //etc...

 

if I apply the code from my previous post:

//.....
if(selectedIndex==1)
{
if (control1) {
control1.visible = true;

//and set all others to visible = false

} else {
control1 = compDef1.createObject();
changingContainer.add(control1);
}
}
//... 

 I can see that

1) it compiles, because it is stored inside a variant (and QML doesn't care what type it is)

2)I never set a visible flag into a ComponentDefinition, but on that variant, which was created from a ComponentDefinition with a qml, which

3) must be a Container at root (you stated this yourself in your previous posts), and containers do have a visible property

 

 

Also, in your code, you still remove everything. If you assume that the user made any change (scrolling a list (position), setting a checkbox, entering some text inside a textfield), all these changes would be lost as soon as the user switches the index of the dropdown

 

 

 

@simon_hain your suggestion is even better, but I feared that macaronlover did not feel comfortable with ControlDelegates yet and wanted to give a simple working solution

-----------------------------------------------------------------------
I'm a bird from outer space. But I'm not flappy o.o
Please use plain text.
Developer
macaronlover
Posts: 101
Registered: ‎01-06-2014
My Device: Q10
My Carrier: EE

Re: Change page content based on selected dropdown item

So based on my solution code below what is wrong with it/how can it be improved?

 

import bb.cascades 1.2

Page {
    titleBar: TitleBar {
        title: "Govan"
    }
    Container {    
        	id: rootContainer
        DropDown {  
            id: myDropDown   
            enabled : true    
            
            onSelectedIndexChanged : {        
                console.log("SelectedIndex was changed to " + selectedIndex);
                // Create the component and add it to the Container   
                if(selectedIndex==1)
                {
                    var createdControl = compDef1.createObject();
                    rootContainer.add(createdControl);   
                } 
                else if (selectedIndex==2)
                {
                    var createdControl = compDef2.createObject();
                    rootContainer.add(createdControl);  
                }
                else if (selectedIndex==3)
                {
                    var createdControl = compDef3.createObject();
                    rootContainer.add(createdControl);  
                }
                else {
                    var createdControl = compDef4.createObject();
                    rootContainer.add(createdControl);
                }            
            }

            
            Option {        
                text : "Inner Circle"           
                selected : true   
            }     
            Option {        
                text : "Outer Circle"        
                selected: false
            }     
            Option {        
                text : "Facilities" 
                selected: false   
            }
            Option {        
                text : "Accessibility" 
                selected: false   
            }           
        }
        attachedObjects: [                  
            ComponentDefinition {                      
                id: compDef1                       
                source: "asset:///stations/Govan/Inner_Circle.qml"
            },
            ComponentDefinition {
                id: compDef2
                source: "asset:///stations/Govan/Outer_Circle.qml"
            },
            ComponentDefinition {
                id: compDef3
                source: "asset:///stations/Govan/Facilities.qml"
            },
            ComponentDefinition {
                id: compDef4
                source: "asset:///stations/Govan/Accessibility.qml"
            }
        ]  
    
    }       
}

 

Please use plain text.
Developer
simon_hain
Posts: 16,010
Registered: ‎07-29-2008
My Device: Z10 LE
My Carrier: O2 Germany

Re: Change page content based on selected dropdown item

you create new objects every time you select something without removing them somwhere.

take a look at
https://developer.blackberry.com/native/reference/cascades/bb__cascades__qmlcontroldelegate.html

it handles the exact scenario you have.

if you want to keep user entries etc on the created elements you would best create stuff once and keep it referenced, toggling the visibility as suggested by pyth.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Please use plain text.