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
Posts: 508
Registered: ‎01-19-2011
My Device: My Trusty Red Plane
My Carrier: Outer Space

Re: Change page content based on selected dropdown item

[ Edited ]

as simon said, you create objects too often, and nothing is created when you start your page. So here:

 

import bb.cascades 1.0

Page {
    titleBar: TitleBar {
        title: "Govan"
    }
    
    Container {    
        id: rootContainer
        
        property variant control1
        property variant control2
        property variant control3
        property variant control4
        
        onCreationCompleted: {
            var createdControl = compDef1.createObject(); //because your option 0 is set to selected
            control1 = createdControl;
            rootContainer.add(createdControl);   
        }
        
        DropDown {  
            id: myDropDown   
            enabled : true    
            
            function setControlVisibility(controlIndex) { //can be replaced via ControlDelegate
                if (rootContainer.control1)
                    rootContainer.control1.visible = (controlIndex == 0);
                if (rootContainer.control2)
                    rootContainer.control2.visible = (controlIndex == 1);
                if (rootContainer.control3)
                    rootContainer.control3.visible = (controlIndex == 2);
                if (rootContainer.control4)
                    rootContainer.control4.visible = (controlIndex == 3);
            }
            
            onSelectedIndexChanged : {        
                console.log("SelectedIndex was changed to " + selectedIndex);
                // Create the component and add it to the Container   
                
                setControlVisibility(selectedIndex);
                
                if(selectedIndex==0)
                {
                    //you don't need this because it was created onCreationComplete
                    //var createdControl = compDef1.createObject();
                    //rootContainer.add(createdControl);   
                } 
                else if (selectedIndex==1)
                {
                    if (rootContainer.control2)
                    	return;
                    var createdControl = compDef2.createObject();
                    rootContainer.control2 = createdControl;
                    rootContainer.add(createdControl);  
                }
                else if (selectedIndex==2)
                {
                    if (rootContainer.control3)
                        return;
                    var createdControl = compDef3.createObject();
                    rootContainer.control3 = createdControl;
                    rootContainer.add(createdControl);  
                }
                else if (selectedIndex==3) 
                {
                    if (rootContainer.control4)
                        return;
                    var createdControl = compDef4.createObject();
                    rootContainer.control4 = createdControl;
                    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"
            }
        ]  
    }       
}

 

 

I hope this works for you Smiley Happy

-----------------------------------------------------------------------
I'm a bird from outer space. But I'm not flappy o.o