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 Several Lists (One Next to the Other)

[ Edited ]

Hi everyone,

 

I need to create a menu list like the one in the next picture:

 

 


    In this menu list:

 

  1. The user could swipe vertically and navigate through the ITEMS (ITEM1, ITEM2, ITEM3, ...). Besides that, the headers title (like header2's) would remain on top, I mean, they won't hide when swiping down.
  2. The user could also swipe horizontally. And a new list of ITEMS will show up. And the header titles will move as well.

   So, in a nutshell, what I need is something like several vertical lists inside an horizontal list.

 

   Any ideas?

 

   Thanks in advance.

Highlighted
Contributor
Posts: 20
Registered: ‎02-21-2012
My Device: Bold 9900
My Carrier: AT&T

Re: BB10: How To Create Several Lists (One Next to the Other)

Well, the swipe motion is a gesture, so if you can add a gesture to the ListView, you can detect this gesture and reload the list with data.

https://developer.blackberry.com/cascades/reference/bb__cascades__segmentedcontrol.html

That may be your best bet. You can, then, of course detect which page you're on and determine if you should allow a right gesture or a left gesture.
Developer
Posts: 325
Registered: ‎10-01-2012
My Device: Dev Alpha C, Playbook 32 GB
My Carrier: BleskMobil

Re: BB10: How To Create Several Lists (One Next to the Other)

To be honest I don't like this UX pattern as it looks like Android one and native BB has different solution.

 

I would suggest to look at https://developer.blackberry.com/devzone/design/bb10/application_structure.html and use tabs for this purpose. They provide exactly the same functionality and look more natural. 

 

And as bonus you will save a lot of work to you ;-)

--------------------------------------------------------------------------------------------
-- My Blackberry 10 app at http://blackberry.hubalek.net
-- My Android apps at http://android.hubalek.net
Contributor
Posts: 20
Registered: ‎02-21-2012
My Device: Bold 9900
My Carrier: AT&T

Re: BB10: How To Create Several Lists (One Next to the Other)

I agree. Using gestures within apps to move around within your app is confusing. You have to teach the user what to do with YOUR app.

While Blackberry 10 is all about gestures, RIM will be teaching users how to use the OS, not your app.

Make it as intuitive as possible Smiley Happy.
Developer
Posts: 111
Registered: ‎07-05-2012
My Device: none
My Carrier: MOvistar

Re: BB10: How To Create Several Lists (One Next to the Other)

[ Edited ]

Hi guys,

 

I finally figured out how to do it.

 

This is how I made it:

 

  1. I created several containers, one for each vertical list. The 1st container is visible to the user. The 2nd is hidden just next (on the right) to the 1st one. The 3rd one is hidden just next (on the right) to the 2nd. And so on.
  2. I used getures to catch any user swiping. Each time the user swipes, either to the left or to the right, I use animations to hide the current visible screen, and make visible the next one. You also have to block the list item selection any time you catch a user's swipe, cause you don't want the user to swipe and select at the sam time.
  3. The headers were the biggest problem. I created a stack-layout-fromLeftToRight container for the headers. This container has a really large "minWidth" and Inside it I put a label for each header. In order to locate each header in the middle, no matter how long is the text it contains, I used the "LayoutUpdateHandler" handler for each label. This handler gives you the current width of the label and from there you can calculate and set the position of he label.
  4. I used gestures, and animation to move the headers. Just as I did with the lists.

The good things is that it works, and it does it very smoothly.

 

I know tabs would be a much easier solution, but my client wanted something more pesonalized. Thanks a lot for your help though.

 

Hope this helps someone.

Thanks again guys.

Developer
Posts: 325
Registered: ‎10-01-2012
My Device: Dev Alpha C, Playbook 32 GB
My Carrier: BleskMobil

Re: BB10: How To Create Several Lists (One Next to the Other)

You are asking for lower ratings with Android like solution. Most people hate Android apps on QNX.

 

I would suggest to persuade your client to accept BB UI Guidelines. You will save some work, people will like your app more.

--------------------------------------------------------------------------------------------
-- My Blackberry 10 app at http://blackberry.hubalek.net
-- My Android apps at http://android.hubalek.net
Developer
Posts: 111
Registered: ‎07-05-2012
My Device: none
My Carrier: MOvistar

Re: BB10: How To Create Several Lists (One Next to the Other)

I disagree.

 

I think most of the people would not even notice (or care about) that. They don't know about this platform specific things.

 

And this is not just Android, Apple does have this kind of menu too.