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

Java Development

Reply
Contributor
andev
Posts: 34
Registered: ‎10-19-2011
My Device: 9800

How can I create such UI?

Hello!
Can you tell me, how can I create such UI?

 

 

I need three zones: two fixed (top and bottom) and one scrollable (middle).
Both fixed zones have picture as background. Upper zone has a label, bottom zone has three buttons with images (PictureBackgroundButtonField).
Scrollable zone in the middle consists from 6 to 15 buttons (PictureBackgroundButtonField) and must be vertically scrollable.

I tried use Vertical and Horizontal Managers, but confused.

Developer
YamilBracho
Posts: 713
Registered: ‎05-31-2010
My Device: 8520

Re: How can I create such UI?

Developer
arkadyz
Posts: 2,268
Registered: ‎07-08-2009
My Device: various

Re: How can I create such UI?


YamilBracho wrote:

Check this post http://supportforums.blackberry.com/t5/Java-Development/MainScreen-explained/td-p/605580


Or, better yet, the knowledge base article created after that post:

MainScreen explained :smileywink:

----------------------------------------------------------
please click 'Accept Solution' on posts that provide the solution to the question you've posted. Don't say "Thanks", press 'Like' button instead!
Contributor
andev
Posts: 34
Registered: ‎10-19-2011
My Device: 9800

Re: How can I create such UI?

Thank you for quick answer!
I've read article and now I'm using Banner and Status. Can you give me reference to material about creation sophisticated Managers? There is only simple examples in the knowledgebase.

Developer
arkadyz
Posts: 2,268
Registered: ‎07-08-2009
My Device: various

Re: How can I create such UI?


andev wrote:

Thank you for quick answer!
I've read article and now I'm using Banner and Status. Can you give me reference to material about creation sophisticated Managers? There is only simple examples in the knowledgebase.


Here is one not-so-simple example of sophisticated Managers and Fields:

Advanced buttons, fields, and managers

The only thing it lacks is any special processing you might want for touchscreen events, but there is enough info in the knowledge base about those. Search for TouchEvent and you'll see.

----------------------------------------------------------
please click 'Accept Solution' on posts that provide the solution to the question you've posted. Don't say "Thanks", press 'Like' button instead!
Contributor
andev
Posts: 34
Registered: ‎10-19-2011
My Device: 9800

Re: How can I create such UI?

[ Edited ]

Thank you!

Developer
RileyGB
Posts: 284
Registered: ‎08-06-2010
My Device: Z10

Re: How can I create such UI?

[ Edited ]

I would strongly recommend against implementing the bottom zone in BlackBerry unless you are ONLY targeting touch devices. 

 

That type of design is horrible for usability for users on non-touch devices as they must scroll through EVERY item in the middle section before they can reach the bottom. If you populate the middle with say 40-50 focusable items, this would really frustrate users. For the BB platform, it is much smarter to have navigation in the top zone (see Twitter, Facebook, Foursquare, etc.). 

 

As for how you could do this, the top zone could be a simple VFM in which you USE_ALL_WIDTH and HCENTER a labelfield. The middle zone could be done by creating a ListStyleButtonField in a ListStyleButtonFieldSet (see http://supportforums.blackberry.com/t5/Java-Development/Implement-advanced-buttons-fields-and-manage...). You would need to modify the paint method to display the items properly as you styled. The bottom zone (which I strongly recommend against implementing) could be done using a HFM in setStatus().

 

Hope that helps.



Follow me on twitter @RileyGB - https://twitter.com/RileyGB
View my BB10 OpenSource projects - https://github.com/RileyGB/BlackBerry10-Samples
Contributor
andev
Posts: 34
Registered: ‎10-19-2011
My Device: 9800

Re: How can I create such UI?

My focus on devices 6 and 7 series, touch and non-touch.
Yes, you're right, this design is awful for non-touch devices.
But, the fact is that I must to repeat original design and can't change it. I'm porting application, that was designed for iOS, then was ported to Android (someone), Nokia (by me) and now BB.
Don't worry, in middle zone 5 elements as maximum, I've devided 9 elements to two groups (4+5 => 5+5). The main functionality is in this scrollable elements. Twitter, FB and info are additional functionally there.
Thank you very much for you advice about how to do this. Although, I'm sure there will be questions.

Contributor
andev
Posts: 34
Registered: ‎10-19-2011
My Device: 9800

Re: How can I create such UI?

To realize top zone I've used such code:

 

    private VerticalFieldManager _vfmHeader;
    private Bitmap _bmHeader = Bitmap.getBitmapResource("img/" + _sW + "/headerFooter/header.png");
    private Background _bgHeader = BackgroundFactory.createBitmapBackground(_bmHeader);

       _vfmHeader = new VerticalFieldManager(USE_ALL_WIDTH);
       _vfmHeader.setBackground(_bgHeader);
       _vfmHeader.add(new LabelField("Some text 123", FIELD_HCENTER));
       setBanner(_vfmHeader);

 

Width and HCENETR are OK, but the height as same as label's height.
How can I set necessary height manually? It must mutch with background size.