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: 163
Registered: ‎01-30-2013
My Device: Blackberry 10 Simulator

slide a navigation pane to the right

menu.png

 

On the image above. Imagine the Menu I have implemented as a ListView.


On the right hand side (the application which slides to the right, for the menu to show), I have a

NavigationPane.

 

I learned how to slide pages if I have two containers in one page for example.

But is it possible to create animation using the NavigationPane and ListView as I mentioned

above (e.g., slide the NavigationPane to the right, so that the ListView comes out from the left)?.

 

If yes, how? Any code samples?. I may need to do it all in C++.

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: slide a navigation pane to the right

Have you thought about doing this as a tabbedPane you would not have to do your own animation then,

 

http://developer.blackberry.com/cascades/reference/bb__cascades__tabbedpane.html

 

If you still want to do it yourself then any ui element can be animated in the same way as you have done the containers.

 

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 163
Registered: ‎01-30-2013
My Device: Blackberry 10 Simulator

Re: slide a navigation pane to the right

[ Edited ]

Hi BBSJdev,

 

Nice to see you back Smiley Happy.

 

tabbedPane put on the left as a menu is a good idea but I can't add a search bar to it for example, and that is why I may need to use a custom ListView.

 

>>"If you still want to do it yourself then any ui element can be animated in the same way as you have done the containers."

 

You suggest any element can be animated but I still could not figure out how to do it with a ListView and a NavigationPane.

 

For example, consider this scenario:

 

import bb.cascades 1.0
 
Page {
    Container {
        

          ListView
           {
             // This is my custom menu with items etc.
          
           }
    }

// Also somewhere here I want to have an embedded "NavigationPane"
// such that it is displayed maybe in the first place? (e.g., on top of the Menu), // so that when user clicks a button on NavigationPane, that // NavigationPane gets animated, moves to the right for example // (I know how to add animations, just I am not sure how to embed // this NavigationPane here such that then it is possible also to add animations to it). // I hope I have made it more clear, what I am trying to achieve. Thank you. }

 

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: slide a navigation pane to the right

[ Edited ]

Since you've put it in a container anyway why not animate that?

 

As you want a list and a search bar (and they will reside in the one container) this would be the way to go anyway.

 

Reading your source comments you won't be able to embed a NavigationPane, currently they are full screen, single Page objects.

 

 

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 163
Registered: ‎01-30-2013
My Device: Blackberry 10 Simulator

Re: slide a navigation pane to the right

Hi BBSJdev,

 

that's my issue. Say I have successfuly embedded the ListView and Searchbar in one container.

But now what I want is that when user clicks on some page on the NavigationPane (or on some button),

I want the NavigationPane to move to the right, and my Menu (the container I mentioned above), come

out from left. How to do this??

Thank you.

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: slide a navigation pane to the right

[ Edited ]

Ok I don't believe you can override the default behaviour of the NavigationPane, but I haven't tried to so may be wrong on that.

 

However on this occasion the default behaviour behaves as you want, slides to the right, so this is a bit hacky but...

 

1) Have a Page with your attached Container in and also previous (partial view left side elements) 

2) On pushing the page (from the button push) start your animation of the container also sliding left to right

 

If you define the page you want to slide as it's own QML Page and you need to see the partial left side of that pane then just transition that across at the same time in your animation.

 

As I said hacky. Smiley Happy

 

Do you really need the partial view, afterall it's just window dressing not functional?

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: slide a navigation pane to the right

[ Edited ]

Ok forget what I wrote previously an easier way to keep the partial view is to just define the page with everything in to begin with.

 

So instead of designing to a 768 pixel width you would do 1000 with a container defined as that size with everything in (menu container and page container).

 

When you push that page on to the stack you initially start the container offset at 1000 - 768 then when your action occurs simple transition to 0 and bring the hidden 'menu' into place, faking the look of a menu coming in from the left and the other page sliding to the right.

 

If you need to do this for multiple pages then define your 'sidemenuwithpage.qml' with a DelegateControl in then programmatically change the DelegateControl source page to the one you want with the menu always present.

 

This seems like a lot of extra work for just a nice design feature but thinking about it this seems the easiest way to do it and keeps the flexibility of being able to add that 'fake' menu to any page easily.


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: slide a navigation pane to the right

Please don't judge me on the code as I'm not at my computer, you would have to add the signal and logic stuff yourself and work out the kinks in this design but something like this...

 

    Container {
        id: rootContainer

        preferredWidth: 1000
        minWidth: 1000

        translationX: -378

        layout: StackLayout {
	        orientation: LayoutOrientation.LeftToRight
        }
        
        Container {
            id: fakeMenu

            preferredWidth: 378

            // Menu QML
            // ...
        }

        Container {
            // catch signal here from source page
            onShowFakeMenuRequest: {
                rootContainer.translationX: 378
            }

            ControlDelegate {
                    id: ChangeablePage                       
                    source: "pageX.qml"
            }

        }

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.