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: 134
Registered: ‎04-25-2009
My Device: Z30
Accepted Solution

NavigationPane in root of TabbedPane

[ Edited ]

Hello all,

 

I have a TabbedPane, and then a menu with a SettingsActionItem. When this settings button is triggered I want to push a page that has the settings on it, and then i can click back to return to tabs.

 

import bb.cascades 1.0

TabbedPane {
    Menu.definition: MenuDefinition {
        settingsAction: SettingsActionItem {
            onTriggered: {
                var page = setingsView.createObject();
                navigationPane.push(page);
            }
            attachedObjects: ComponentDefinition {
                id: settingsView
                source: "SettingsView.qml"
            }
        }
    }
    Tab {
        tite: "Tab1"
        NavigationPane {
            id: navigationPane
            Page {
                 //etc.....
            }
        }
    }
}

 However the problem is that there is no navigation pane with which to push the new page. We cannot put a NavigationPane under the TabbedPane, but we can put it in a Tab of a TabbedPane.

 

So how can I go about pushing a new page?

 

Thanks!

 

[UPDATED CODE ABOVE]

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

Re: NavigationPane in root of TabbedPane


Paratheo wrote:
... We cannot put a NavigationPane under the TabbedPane, but we can put it in a Tab of a TabbedPane.


That's true... so why can't you do that? You've got a Tab with a NavigationPane in it, and you push the new Page on that NavigationPane. I've done that and it works fine.

 

Your code shows both a NavigationPane and a Page inside a Tab, but that won't work since a Tab can have only one AbstractPane in it: https://developer.blackberry.com/cascades/reference/bb__cascades__tab.html#content  (The content pane can be either a Page or a NavigationPane.)


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: 134
Registered: ‎04-25-2009
My Device: Z30

Re: NavigationPane in root of TabbedPane

[ Edited ]

Ah yes I messed up copying the code to this thread. The Page is within the NavigationPane in my code so it works. I updated the code snipped above.

I cant use the NavPane in the tab to push the view because the SettingsActionItem cannot be defined within a Tab. It has to be under TabbedPane like I have it now, otherwise doesn't show up. So I tried referencing that navpane but didn't work.

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

Re: NavigationPane in root of TabbedPane

This is confusing, because the only SettingsActionItem you show there is in a Menu, not in any of your Panes.

Here's an idea that might help: did you know you can put extra items in the attachedObjects list of the TabbedPane, to use when you need them? And that the TabbedPane can have the activePane property changed at any time, even without a Tab being involved?

If you read up on the details of those things, I'm guessing you'll see that you can keep a NavigationPane tucked away in the attachedObjects, and make it the activePane when you need it, and push the settings Page onto it at that point. When you're done, the settings page is popped, and in a handler like onPopTransitionEnded you could then switch back so that the activePage comes from the activeTab. It's a bit convoluted, but it would work if you really absolutely need all three of these stacked together this way.

What about just using that technique but with a simple Page in your TabbedPane instead of the NavigationPane-plus-Page? What would you gain by having the combination that you don't get with just the one?

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: 134
Registered: ‎04-25-2009
My Device: Z30

Re: NavigationPane in root of TabbedPane

Yes I have the SettingsActionItem in the app menu, not in any of the tabs.
It seems like many apps on BB10 have the functionality I am trying to achieve, for instance BBM. BBM on BB10 has tabs, but when you swipe down from top bezel the menu is revealed where you can click the settings action and it opens the settings view in a new page pushed onto the stack.
Could you please paste a code sample that you think would work for what I am trying to do?
Developer
Posts: 134
Registered: ‎04-25-2009
My Device: Z30

Re: NavigationPane in root of TabbedPane

If it helps, here is my entire project on Github

https://github.com/flaminSaganaki/RedditBB10

 

And here is the specific file

https://github.com/flaminSaganaki/RedditBB10/blob/master/assets/main.qml

Developer
Posts: 262
Registered: ‎07-13-2012
My Device: PlayBook, DA B, DA C, LE Z10 #102, Q10, Z30

Re: NavigationPane in root of TabbedPane

I have got this to work using separate files such as:

 

main.qml

 

TabbedPane {
    id: newsPane
    
 Tab{  
     title: ""
        TabOne {       
            }
}
Tab{
    title: ""
       TabTwo {   
           }
    }
Tab{
    title: ""
       TabThree {          
           }
    }
Tab{
    title: ""
       TabFour {          
           }
    }        

}

 Then, have...

 

TabOne.qml, TabTwo.qml, TabThree.qml and TabFour.qml:

NavigationPane {
    Page {
       ....
       }
   }

 

And this has a NavigationPane within a TabbedPane meaning when I can push to a page from within the NavigationPane and the action bar no longer has tabs, rather it changes to the back button.  Can be illustrated in this app: http://appworld.blackberry.com/webstore/content/20197455/?lang=en (I wrote the app for OnlineTobago)

 

Then as far as your "Settings" page, why not use a Sheet?  This is exactly what a Sheet is intended for, something that breaks the normal navigation flow.  And it will be able to be accessed via the system menu from any tab if defined in the main.qml and using property alias you can control id's defined in the TabOne.qml, TabTwo.qml, etc. I have a sample where I do this too: http://bbcascades.com/index.php/tutorial-list/50-persistence-of-cascades-memory

 

Hope this helps.

---
Check out my BB10 Cascades Coding site: BBcascades.com & Cascades Blog: bbcascadescode.tumblr.com

My Built for BlackBerry app: The Dive Plan
Developer
Posts: 134
Registered: ‎04-25-2009
My Device: Z30

Re: NavigationPane in root of TabbedPane

You helped quite a bit!

I tried out using a Sheet for the settings page, and so far working very well. Thanks for the help!