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

Change page content based on selected dropdown item

I have a page containing a drop down that has 4 options. What I would like to do is for the content to change based on the selected item. How can I do this? Can I use sheets or pages? The content will consist of a lot of items.

Retired
Posts: 83
Registered: ‎10-10-2012
My Device: Z30
My Carrier: Bell

Re: Change page content based on selected dropdown item

Hi macaronlover,

 

>I have a page containing a drop down that has 4 options.

>What I would like to do is for the content to change based on the selected item.

>How can I do this? Can I use sheets or pages? The content will consist of a lot of items.

 

Not sure if I understand exactly what you asking for.

 

Can you check out the example here : (scroll down to "drop down menu example" - is that what you are trying to do?)

 

https://developer.blackberry.com/native/documentation/cascades/ui/core_controls/dropdown.html

 

-g

Developer
Posts: 101
Registered: ‎01-06-2014
My Device: Q10
My Carrier: EE

Re: Change page content based on selected dropdown item

I want to use different views for the different drop-down items

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

Here's a simple example of how it can be done

 

import bb.cascades 1.2

Page {
    Container {
        
        id: outerContainer
        
        DropDown {
            Option {
                text: "Gimme blue"
                value: 0
            }
            Option {
                text: "Gimme red"
                value: 1
            }
            onSelectedValueChanged: {
                outerContainer.showContent(selectedValue);
            }
            selectedIndex: 0
        }
        
        Container {
            id: container1
            background: Color.Blue
            verticalAlignment: VerticalAlignment.Fill
            horizontalAlignment: HorizontalAlignment.Fill
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1.0
            }
        }
        
        Container {
            id: container2
            background: Color.Red
            verticalAlignment: VerticalAlignment.Fill
            horizontalAlignment: HorizontalAlignment.Fill
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1.0
            }
            visible: false
        }
        
        function showContent(type) {
            switch(type) {
                case 0: 
                    container1.visible = true;
                    container2.visible = false;
                    break;
                case 1: 
                    container1.visible = false;
                    container2.visible = true;
                    break;
            }
        }
    }
}

 

 

if you want to be more efficient though (having a lot more containers with lots of different content), consider creating the containers on demand via ComponentDefinition

-----------------------------------------------------------------------
I'm a bird from outer space. But I'm not flappy o.o
Developer
Posts: 16,997
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport
My Carrier: O2 Germany

Re: Change page content based on selected dropdown item

as you are using "lots of items" i would consider using ControlDelegates that you set to active when the appropriate selection is done while changing the others to active=false.
----------------------------------------------------------
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
Retired
Posts: 252
Registered: ‎08-17-2012
My Device: BlackBerry Z10 and Q10
My Carrier: Bell

Re: Change page content based on selected dropdown item

[ Edited ]

Hi macaronlover,

 

You need to listen to the selectedIndexChanged() signal. In the corresponding slot (onSelectedIndexChanged) create the view you desire based on the selectedindex. Here's a sample code:

 

import bb.cascades 1.2

Page {      
    Container {    
        id: rootContainer
        background: Color.create("#ff808080")    
        preferredWidth: 1000   
        preferredHeight: 500
        DropDown {  
            id: myDropDown
            title : "Reminder"    
            enabled : true    
            
            onSelectedIndexChanged : {        
                console.log("SelectedIndex was changed to " + selectedIndex);        
                changingContainer.removeAll();     
                
                // Create the component and add it to the Container   
                if(selectedIndex==1)
                {
                    var createdControl = compDef1.createObject();
                    changingContainer.add(createdControl);   
                } 
                else if (selectedIndex==2)
                {
                    var createdControl = compDef2.createObject();
                    changingContainer.add(createdControl);  
                }
                else {
                    var createdControl = compDef3.createObject();
                    changingContainer.add(createdControl);  
                }
            
            }
            
            // image + text + description    
            Option {        
                //imageSource: "alarm.png"        
                text : "5 min"        
                description : "Sets the alarm to 5 minutes"        
                value : "5min"        
                selected : true         
                onSelectedChanged : {   
                    
                    if (selected == true) {                
                        console.log ("Setting alarm to 5 minutes.");           
                    }      
                }
            
            }     
            // text + description    
            Option {        
                text : "10 min"        
                description : "Sets the alarm to 10 minutes"        
                value : "10min"    }     
            // text only    
            Option {        
                text : "15 min"        
                value : "15min"    
            }             
        }
        
        Container {
            id: changingContainer
        }
        attachedObjects: [                  
            ComponentDefinition {                      
                id: compDef1                       
                source: "option1.qml"             
            },
            ComponentDefinition {
                id: compDef2
                source: "option2.qml"
            },
            ComponentDefinition {
                id: compDef3
                source: "option3.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
Developer
Posts: 101
Registered: ‎01-06-2014
My Device: Q10
My Carrier: EE

Re: Change page content based on selected dropdown item

My content is not showing when I do it:

 

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"
            }
        ]  
    
    }       
}

 

Retired
Posts: 252
Registered: ‎08-17-2012
My Device: BlackBerry Z10 and Q10
My Carrier: Bell

Re: Change page content based on selected dropdown item

[ Edited ]

Is the top control of the qml files defined under ComponentDefinition a Container? It has to be a Container, since you cannot define a page within a page.

 

Also, I slightly edited the above code to allow for resetting the container content prior to loading the new content.

 

P.S. I tried the above code and verified it works okay before sharing it here.

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

Re: Change page content based on selected dropdown item

Not really sure what you mean as I'm a complete beginner

Retired
Posts: 252
Registered: ‎08-17-2012
My Device: BlackBerry Z10 and Q10
My Carrier: Bell

Re: Change page content based on selected dropdown item

No worries Smiley Happy, welcome to BlackBerry 10 Cascades development.

 

I mean that your inner_circle, outer_circle, facilities and accessibility qml files need to have a Container as the top control like for e.g. the qml files i'm using:

 

import bb.cascades 1.2

Container {
    Label {
        text: "control added"
    }
    
}

 

 

 

@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