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
Trusted Contributor
Posts: 114
Registered: ‎05-09-2013
My Device: BB10 Z10
My Carrier: Virgin
Accepted Solution

Tabbed structure on the first (not root) level

Hi all,

 

I'm trying to set up the following UI structure, and I'm wondering if it is possible at all:

 

I've set up a list of items on the root level of the application, as such ( "main.qml", simplified):

 

NavigationPane {

    Page {
         ListView {
              listItemComponents: [
              ]
              onTriggered: {
			// show personRecord
              }

         }

    attachedObjects: [
        ComponentDefinition {
            id: personRecord
            source: "PersonRecord.qml"
        }
    ]
}

 Then, as each list item is triggered, I'd like to invoke a tabbed pane structure containing multiple pages ("PersonRrecord.qml", simplified):

TabbedPane {
    Tab {
        Page1 {
        }
    }
    Tab {
        Page2 {
        }
    }
    Tab {
        Page3 {
        }
    }
    
    ...

    onCreationCompleted: {
    }
}

 Any suggestions/ideas on how I can go about this?

 

Trusted Contributor
Posts: 114
Registered: ‎05-09-2013
My Device: BB10 Z10
My Carrier: Virgin

Re: Tabbed structure on the first (not root) level

bump! anyone?

Developer
Posts: 16,987
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport
My Carrier: O2 Germany

Re: Tabbed structure on the first (not root) level

i guess it would be the most simple to solve this from c++.

if you want to try it from qml you could use the TabbedPane as a root element, as long as it does not have any other tabs it does not display the tab actions and looks like the navigation pane, maybe you could utilize this. just as an idea.
----------------------------------------------------------
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
Trusted Contributor
Posts: 114
Registered: ‎05-09-2013
My Device: BB10 Z10
My Carrier: Virgin

Re: Tabbed structure on the first (not root) level

Thanks! I had some limited success incorporating the Tabbed Pane into a Sheet... but that's not quite what I'm looking for.

Developer
Posts: 660
Registered: ‎10-08-2009
My Device: Bold 9900
My Carrier: Telus

Re: Tabbed structure on the first (not root) level

I've pondered about this issue for the longest time (using tabbedpane NOT as a root) and it can't be done. The only way is simon's approach - added TabbedPane inside a sheet and pushing that sheet from the root NavigationPane. If you decide to take this approach, make sure to disable peak so that user don't see the NavigationPane that the TabbedPane was pushed from.

----------------------------------------------------------
Twitter: @gyubok
Developer
Posts: 285
Registered: ‎08-06-2010
My Device: Z10

Re: Tabbed structure on the first (not root) level

The best way to accomplish this that I can think of would be to use C++.

 

What you could do is that when a list item is called, it would use Application::instance()->setScene to set the scene to the TabbedPane which you would like to show. You wouldn't have transitions and would need to come up with a creative way to get back to your "main" page, but it certainly can be done.



Follow me on twitter @RileyGB - https://twitter.com/RileyGB
View my BB10 OpenSource projects - https://github.com/RileyGB/BlackBerry10-Samples
Trusted Contributor
Posts: 114
Registered: ‎05-09-2013
My Device: BB10 Z10
My Carrier: Virgin

Re: Tabbed structure on the first (not root) level

Thank you, gentlemen! At least you did all the "pondering" for me. I do like the transitions, so I want to stay within QML framework.... and Yes, I disabled the peek, and  I have it working adequately, aside from a few small quirks:

 

  • I have set up the very last tab with a signal that takes me back to the calling (root) page. The transition back to it is kind of awkward... First there is a horizontal transition to the right, and at the same time, sheet's transition from top down, giving it this weird diagonal direction. Is there a way to change sheet's transition, or disable it?

 

  • Also - is it possible to specify what is the default tab going into TabbedPane?

 

  • Finally - probably an easy fix but while I'm at it, my tabbed pane screens are compressed vertically by a bottom action menu. Can I overlay this menu over the page, instead of having it shrunk vertically?
Developer
Posts: 660
Registered: ‎10-08-2009
My Device: Bold 9900
My Carrier: Telus

Re: Tabbed structure on the first (not root) level

Use activeTab property to set the default tab when it is created.

 

What do you mean bottom action menus are shrunk vertically? 

----------------------------------------------------------
Twitter: @gyubok
Trusted Contributor
Posts: 114
Registered: ‎05-09-2013
My Device: BB10 Z10
My Carrier: Virgin

Re: Tabbed structure on the first (not root) level

Thanks. I tried using activeTab a few days ago but since the page is not dynamic, it worked only the first time. So, I tried again - I created an alias for the default tab and I set it every time I open the page from within the main screen - it works Smiley Very Happy

 

No, bottom menu is not shrunk - its page is. I use a 768x1280 bitmap graphic as a page background, and that menu shrinks the background vertically to fit itself in on the bottom. Is it possible to have that menu overlaid on the page, instead of stacking itself on the bottom?

 

The last item that prevents this approach from being almost there is the sheet transition... Any way to stop the sheet from collapsing downward? Or changing the sheet's transition?

 

 

Developer
Posts: 660
Registered: ‎10-08-2009
My Device: Bold 9900
My Carrier: Telus

Re: Tabbed structure on the first (not root) level

If you're creating the page via componentdefinition and creating that object every time the tab is called is incredible waste of resource. You should create a javascript var and create the object upon tab bed pane creationcompleted and set that as a tab each time.

If you're laying the background image as a imagedefinition and assigning it as background image to the container, the shrinking will happen. What you can do is either create the container as docklayout and create imageview and change the aspect method of that imageview or create a scrollview and in the main container, set the background via imagedefinition

Also, there is no way to customize sheet transition. I'm afraid you'll have to live with it Smiley Tongue
----------------------------------------------------------
Twitter: @gyubok