Cascades Development

[DNSalehi]

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?

[Scott56 · Accepted solution]

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);

[shahumang8 · Accepted solution]

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.