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: 330
Registered: ‎04-04-2012
My Device: BlackBerry Z30/Z10/Z10LE/Q10/PlayBook
Accepted Solution

Hide Tab on TabbedPane

I am trying to create a login/register system for my app. I have the framework working, except for the part after the user registers or logs in.

 

The login/register system works like this. The app starts. The first tab have a navigation pane. Peek is disabled as is the ActionBar. So the user has no were to go but to select either login or register. When one of those buttons are selected and the action is validated, then the tab which contains the login/registration is hidden until the user logouts.

 

I don't see any option to hide a tab. I can't believe that this isn't an option. I was also thinking that could the tab be an attached Object and created or destroyed to accomplish this if a hide isn't possible?

 

main.qml

 

import bb.cascades 1.0

TabbedPane {
    showTabsOnActionBar: false
    peekEnabled: false
    Tab {
        id: loginregisterTab
        title: qsTr("Login/Register")
        NavigationPane {
            id: navigationPane
            peekEnabled: false
            Page {
                actionBarVisibility: ChromeVisibility.Hidden
                Container {
                    Label {
                        text: "Login/Register"
                    }
                    Button {
                        onClicked: {
                            var page = loginPage.createObject();
                            navigationPane.push(page);
                        }
                        text: "Login"
                        attachedObjects: [
                            ComponentDefinition {
                                id: loginPage
                                LoginPage {
                                }
                            }
                        ]
                    }
                    Button {
                        onClicked: {
                            var page = createPage.createObject();
                            navigationPane.push(page);
                        }
                        text: "Create"
                        attachedObjects: [
                            ComponentDefinition {
                                id: createPage
                                CreatePage {
                                }
                            }
                        ]
                    }
                }
            }
            onPopTransitionEnded: {
                page.destroy();
                // Check for login/register flags. If valid flags, remove login/register Tab.
            }
        }
    }
    Tab {
        title: qsTr("Tab 2")
        Page {
            id: tab2
            Container {
                // define tab content here
                Label {
                    text: qsTr("Tab 2 title")
                    horizontalAlignment: HorizontalAlignment.Center
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                    }
                }
            }
        }
    }
    Tab {
        title: qsTr("Tab 3")
        Page {
            id: tab3
            Container {
                // define tab content here
                Label {
                    text: qsTr("Tab 3 title")
                    horizontalAlignment: HorizontalAlignment.Center
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                    }
                }
            }
        }
    }
    onCreationCompleted: {
        OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
    }
}

 

LoginPage.qml

 

import bb.cascades 1.0

Page {
    actions: [
        ActionItem {
            title: "Login"
            ActionBar.placement: ActionBarPlacement.OnBar
            onTriggered: {
                // Code to check login credentials. If successful then pop.
                navigationPane.pop();
            }
        }
    ]
    Container {
        Label {
            text: "Login Page"
        }
    }
}

 

Developer
Posts: 1,629
Registered: ‎04-08-2010
My Device: Z10 (red Limited Edition), Q10, Z30
My Carrier: Telekom.de, O2, Vodafone

Re: Hide Tab on TabbedPane

you cannot hide a Tab - only enable /disable

 

there's a feature request by me since Beta 2 to add this functionality BBTEN-251

-------------------------------------------------------------------------------
ekke (independent software architect, rosenheim, germany)

BlackBerry Elite Developer
BlackBerry Platinum Enterprise Partner
International Development Mobile Apps BlackBerry 10 Cascades
Cascades - Workshops / Trainings / Bootcamps

blog: http://ekkes-corner.org videos: http://www.youtube.com/user/ekkescorner http://vimeo.com/ekkescorner/videos
bb10-development: http://appbus.org Twitter: @ekkescorner
Developer
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Hide Tab on TabbedPane

You could simply remove the Tab, and keep a reference to it, then add/insert it back in later. https://developer.blackberry.com/cascades/reference/bb__cascades__tabbedpane.html#remove

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
Posts: 330
Registered: ‎04-04-2012
My Device: BlackBerry Z30/Z10/Z10LE/Q10/PlayBook

Re: Hide Tab on TabbedPane

How do I get a reference to a tab?

Developer
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Hide Tab on TabbedPane

If you give it an "id" property in QML, then you can reference it with that name. In C++ you could assign objectName and get it through that technique (look at some of the Cascades samples for example).

If you want to get it out of the TabbedPane, and you know the position, you can use the at() routine https://developer.blackberry.com/cascades/reference/bb__cascades__tabbedpane.html#at or if it's the active one, the activeTab property.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
Posts: 330
Registered: ‎04-04-2012
My Device: BlackBerry Z30/Z10/Z10LE/Q10/PlayBook

Re: Hide Tab on TabbedPane

Thanks to those that helped. I got it to work like I wanted.

 

import bb.cascades 1.0

TabbedPane {
    id: tabbedPane
    showTabsOnActionBar: false
    peekEnabled: false
    Tab {
        id: loginregisterTab
        title: qsTr("Login/Register")
        NavigationPane {
            id: navigationPane
            peekEnabled: false
            Page {
                actionBarVisibility: ChromeVisibility.Hidden
                Container {
                    Label {
                        text: "Login/Register"
                    }
                    Button {
                        onClicked: {
                            var page = loginPage.createObject();
                            navigationPane.push(page);
                        }
                        text: "Login"
                        attachedObjects: [
                            ComponentDefinition {
                                id: loginPage
                                LoginPage {
                                }
                            }
                        ]
                    }
                    Button {
                        onClicked: {
                            var page = createPage.createObject();
                            navigationPane.push(page);
                        }
                        text: "Create"
                        attachedObjects: [
                            ComponentDefinition {
                                id: createPage
                                CreatePage {
                                }
                            }
                        ]
                    }
                }
            }
            onPopTransitionEnded: {
                page.destroy();

                // Check for login/register flags. If valid flags, remove login/register Tab.
                tabbedPane.remove(loginregisterTab);
                tabbedPane.showTabsOnActionBar = true;
                tabbedPane.peekEnabled = true;

            }
        }
    }
    Tab {
        title: qsTr("Tab 2")
        Page {
            id: tab2
            Container {
                // define tab content here
                Label {
                    text: qsTr("Tab 2 title")
                    horizontalAlignment: HorizontalAlignment.Center
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                    }
                }
            }
        }
    }
    Tab {
        title: qsTr("Tab 3")
        Page {
            id: tab3
            Container {
                // define tab content here
                Label {
                    text: qsTr("Tab 3 title")
                    horizontalAlignment: HorizontalAlignment.Center
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                    }
                }

                // Create Logout Button. Can be anywhere.
                Button {
                    text: "Logout"
                    onClicked: {
                        tabbedPane.insert(0,loginregisterTab);
                        tabbedPane.activeTab = loginregisterTab;
                        tabbedPane.setShowTabsOnActionBar(false);
                        tabbedPane.setPeekEnabled(false);
                    }
                }

            }
        }
    }
    onCreationCompleted: {
        OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
    }
}

 

Developer
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Hide Tab on TabbedPane

I'm glad you got it working, but I'd also like to point out that you could do this more easily without any of that, if you simply show another Page or Sheet on top of the TabbedPane when the user is logged out. You could even do it with a Dialog, actually.

Any of those could be used to hide the entire ActionBar and tabs until the user was logged in, and then removed during the session, with the TabbedPane showing from underneath.

There are alternatives too, I believe. Start the app with only the login page showing. When the user has logged in, slide a TabbedPane in on top. I'm not sure if that requires the initial page to be a NavigationPane or not, but it could work with that too. When the user logs out, you just remove the TabbedPane again and go back to the login page.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
Posts: 330
Registered: ‎04-04-2012
My Device: BlackBerry Z30/Z10/Z10LE/Q10/PlayBook

Re: Hide Tab on TabbedPane

@peter9477

.

  I am trying to replicate how the Blackberry ID registration/login works on the Dev Alpha device. I try and develop things to work the same as the RIM developed apps so they are similar to what the user is accustomed to. In this case with the Blackberry ID, you have a screen which gives you two options and both goto child pages.

 

  If you think that this could be accomplished in a more simple fashion using the techniques you described, then could you show it?

 

  Thanks again.