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
DNSalehi
Posts: 47
Registered: ‎01-26-2011
My Device: Not Specified
Accepted Solution

How to push a new page in TabbedPane?

I'm using a TabbedPane and need to open a new Page but there doesn't seem to be a push() function for TabbedPane.

I know I can open a new sheet but I don't want to use a sheet for this case, I need a new page (The kind that scrolls in from the right).
Any suggestions?

Please use plain text.
Contributor
Scott56
Posts: 22
Registered: ‎01-05-2013
My Device: Dev Alpha
My Carrier: Bell

Re: How to push a new page in TabbedPane?

Put a navigation pane inside of a tab.

 

 

Tab {
        NavigationPane {
            backButtonsVisible: false
            peekEnabled: true
            id: navInTab
            Page {
                id: tab3
                Container {
                }
            }
        }
}

 and then attach the page you want to push to as an attachedObject

 

attachedObjects: [
                Page {
                    id: pushedPage
                    content: Container {
                    }
                }
]

 Then push at whatever point.

 

navInTab.push(pushedPage);

 

Please use plain text.
Developer
shahumang8
Posts: 643
Registered: ‎08-09-2010
My Device: Not Specified

Re: How to push a new page in TabbedPane?

Hi DNSalehi,

 

   

 

     Please check below code.

       

import bb.cascades 1.0

TabbedPane {
    id: tabMeniuNavigation
    activeTab: tab2
  
    attachedObjects: [
       
        ComponentDefinition {
            id: searchPage
            source: "search.qml"
        }
    ]

    //showTabsOnActionBar: true
    Tab {
        title: qsTr("Tab1")
        id: tab1
    }
    Tab {
        id: tab2
        title: qsTr("Tab2")
        NavigationPane {
            id: storeNavigationPane
            Page {
                ImageButton {
                                    defaultImageSource: "asset:///images/two_arrows_more.png"
                                    layoutProperties: StackLayoutProperties {
                                    }
                                    horizontalAlignment: HorizontalAlignment.Right
                                    verticalAlignment: VerticalAlignment.Center
									onTriggered: {
                            var newPage = searchPage.createObject();
                            storeNavigationPane.push(newPage)
                        }
                                }
            }
        }
    }
    Tab {
        id: tab3
        title: qsTr("Tab3")
        Page {
            Container {
                // define tab content here
                Label {
                    text: qsTr("Tab 3 title")
                    horizontalAlignment: HorizontalAlignment.Center
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                    }
                }
                
            }
        }
    }
    Tab {
        id: tab4
        title: qsTr("Tab4")
        Page {
            Container {
                // define tab content here
                Label {
                    text: qsTr("Tab 4 title")
                    horizontalAlignment: HorizontalAlignment.Center
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                    }
                }
            }
        }
    }
    Tab {
        id: tab5
        title: qsTr("Tab5")
       
        
 
             Page {
            Container {
                // define tab content here
                Label {
                    text: qsTr("Tab 5 title")
                    horizontalAlignment: HorizontalAlignment.Center
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                    }
                }
            }
        }
        
    }
    Tab {
        id: tab6
        title: qsTr("Tab6")
        Page {
            Container {
                Label {
                    text: qsTr("Tab 6 title")
                    horizontalAlignment: HorizontalAlignment.Center
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                    }
                }
            }
        }
    }
    onCreationCompleted: {
        // this slot is called when declarative scene is created
        // write post creation initialization here
        console.log("TabbedPane - onCreationCompleted()")

        // enable layout to adapt to the device rotation
        // don't forget to enable screen rotation in bar-bescriptor.xml (Application->Orientation->Auto-orient)
        OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
    }
}

 

   I hope now your problem solved.

 

-------------------------------------------------------------------------------

 

feel free to press the like button on the right side to thank the user that helped you.

Please use plain text.