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: 111
Registered: ‎07-05-2012
My Device: none
My Carrier: MOvistar
Accepted Solution

BB10: How To Create a Custom Menu

[ Edited ]

Hi everyone,

 

I need to create a custom menu for BB10. This is how I want it (see the two screenshos):

 

 

  • It has to be a bar on the top of the screen. Just like a BB10 "Title Bar", it has to have a title. But it also has to have two buttons: one on the left of the bar and one on the right of the bar.
  • When you press the left button, a custom tab menu appears from the left of the screen. It also has a title and a menu list with custom icons and background color/images.

I don't know if this is possible to do yet, but I've heard you can do it by using "Custom Control"s. I have tried with "Tabed Panes", "Aplication Menu", "Context Menu", "Action Menu" and "Title Bar" but I think none of them satisfies what I need.

 

Any idea?

 

Thanks a lot.

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

Re: BB10: How To Create a Custom Menu

[ Edited ]

Something wrong with your screenshots I think. Although the mods have approved them, they appear (to me) only as blank space.

 

Edit: Oh, I can see they're hosted on a dropbox account, but we'd need to log in to see them. Maybe you should make them public somehow, and edit your post if necessary.


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: 111
Registered: ‎07-05-2012
My Device: none
My Carrier: MOvistar

Re: BB10: How To Create a Custom Menu

Done! Thank you.

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: BB10: How To Create a Custom Menu

Hi!

 

I think this can be done but requires some coding.

 

Create the menu in a Container offscreen, set the Container's layout to AbsoluteLayout (so you can specify x & y) and slide the container into visible area with animation.

 

Create Titlebar as a Container with two ImageButtons and a Label. Slide the container to the right.

 

Or even use single Container for both menu and titlebar, just create half of the items offscreen.

 

When positioning controls you can use device resolution to avoid hardcoding values:

 

DisplayInfo display;
int displayWidth = display.pixelSize().width();

 Animations are created by combining ParallelAnimation, SequentialAnimation and different transitions.

 


Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 111
Registered: ‎07-05-2012
My Device: none
My Carrier: MOvistar

Re: BB10: How To Create a Custom Menu

Hi Zmey,

 

thanks a lot. l will try that out probably tomorrow and then I will let you know.

Developer
Posts: 111
Registered: ‎07-05-2012
My Device: none
My Carrier: MOvistar

Re: BB10: How To Create a Custom Menu

[ Edited ]

Hi Zmey,

 

it worked really well! Thanks again.

 

Although, I have a new problem about it.:

 

In a Nutshell: I don't want to have too many screens in the screen stack and then have memory problems.

 

When the user presses any of the left Menu Items, a new screen is pushed (with NavigationPane.push()). If the user presses, for example, Menu Item 1 and then presses Menu Item 2, and then presses Menu Item 1 again, the screen stack will have MenuItem1Screen, MenuItem2Screen and MenuItem1Screen (again) on top.

 

How can avoid this?

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: BB10: How To Create a Custom Menu

[ Edited ]

It's possible to pop() or remove() pages from NavigationPane programmatically. Pop() is animated, remove() isn't.

 

Something like this should work (should be simpler without animations):

 

Subscribe to NavigationPane's popTransitionEnded signal.

 

When menu item is chosen:

1. save menu item id (or pointer to it's button) to later determine which item was chosen.

2. temporarily disable all menu items.

3. if previous Page was pushed into the pane, pop that page. Otherwise call pushNewPage() (see below)

 

In popTransitionEnded signal handler destroy the old page, then also call pushNewPage()

 

Create pushNewPage() function. In this function create a new page based on menu item id saved previously. Enable all disabled menu items. Push the new page into NavigationPane. Save a pointer to the new page for step 3 above.

 

I hope I described the idea well. Smiley Happy

 

 p.s. 

I'm not sure if it is safe to push the page in popTransitionEnded handler. If this doesn't work, use QTimer::singleShot() to schedule execution of another method and push the page there.

 


Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 111
Registered: ‎07-05-2012
My Device: none
My Carrier: MOvistar

Re: BB10: How To Create a Custom Menu

Thanksagain Zmey,

 

you have helped me a lot.

 

I didn't do it quite as you told me but I did use the information you gave me. This is what I did:

 

NavigationPane 
{
id: navPane property bool removePreviousScreenAfterPush: false ... onPushTransitionEnded: { if(removePreviousScreenAfterPush) { if(count() > 1) { var pageToRemove = at(count() - 2); remove(pageToRemove); } removePreviousScreenAfterPush = false } } }

 This way, when the user presses a Menu Item, I set "removePreviousScreenAfterPush" property to "true" and then call navPane.push(). I preferred using "onPushTransitionEnded" because I can remove the screen after the push transition is shown.

 

Thanks again Zmey.

New Contributor
Posts: 6
Registered: ‎03-03-2013
My Device: BB10
My Carrier: Airtel

Re: BB10: How To Create a Custom Menu

Hi jmoukel,

 

I also want the same behaviour in my app. If you dont mind can you please send the full code? I have an urgent requirement.

 

Thanks in advance.

 

-uttam

New Contributor
Posts: 6
Registered: ‎03-03-2013
My Device: BB10
My Carrier: Airtel

Re: BB10: How To Create a Custom Menu

Can you please send me the code of this ?