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
nordavinder
Posts: 23
Registered: ‎12-02-2012
My Device: BlackBerry 8300
My Carrier: Personal
Accepted Solution

How to make a screen like this on Blackberry

[ Edited ]

Sorry for the title but I don't know how to summarize the question =/

 

I need to make a screen like this:

 

 

As you can see, it shows those "boxes" with UI elements inside each one.

 

Each "box" is placed inside something like cells of some kind of table.

 

I thought it would be a good idea to represent the "boxes" as individual screens inside a TableLayoutManager with vertical scroll, but I don't even know if that would be reliable.

 

Please someone tell me how to do something like that on BlackBerry since I have no idea where to start.

 

I'm using the BlackBerry JRE 4.5.0

 

Thanks in advance!

Please use plain text.
Developer
peter_strange
Posts: 19,595
Registered: ‎07-14-2008
My Device: Not Specified

Re: How to make a screen like this on BlackberryHow to make a screen like this on Blackberry

I would not use TableLayoutManager for this.  In fact I would write my own Manager specific to each 'Box' that you see and then just add the number of these 'boxes' that I needed.

 

But since you are new (and welcome to the forums!!), I think you can get pretty close to what you want using standard Controls.

 

You would use a MainScreen - and use setTitle to set the screen title.  In your setTitle you would set a LabelField - and before you set it you will specify the Font size that you need.  To get the Font color, you will need to override paint.  In paint(), you will just set the color you want

<graphics>.setColor(..)

and then call super.paint.

The tricks are:

1) with setTitle is that at some OS level it changes from being white to being black background, so you might have to override paintBackground() to set the Background to the color you want. 

2) You will need to specify thje USE_ALL_WIDTH style for this LabelField. 

 

This sort of thing (changing the color and background color of a LabelField) is fairly common, search the forum for more hints. 

 

To this MainScreen you will add each Box.  Each Box will be a VerticalFieldManager - you can use setMargin(...) to space these out as you want.   Let us call each your 'BoxManager'

 

To each VerticalFieldManager you will had the titleBar.  TitleBar is another LabelField like the one you added as the Screen Title.  Once again you will override paint() and perhaps paintBackground() to get the colors you want.  Again use USE_ALL_WIDTH.  But to get the Bitmap, you need to extend LabelField class and provide a setBitmap for this class.  Then in paint, which you have overridden to to set the color, you will also use

<graphics>.drawBitmap, to paint the image on the right hand side. 

Do this after the call to super.paint().

 

The footer bar is very similar, only this time you will use the DrawStyle.FIELD_RIGHT so that the labelField paints itself on the right.  This is in the constructor.

 

Finally the trickiest part, the lines and the Button.  Leave this to last...

 

The easiest option is to add to your BoxManager and HorizonalFieldManager.  Then add a Button, and a RichTextField (not a LabelField) to this.  That will give you the Button first.  Not what you want, but until you have worked a little bit more this is best option.  You can come back to us later to get the Button on the correct side.

 

OK enough,  Do this step at a time and ask about each control separately that you have problems with. 

 

Good luck. 

 

If you wanted to research creating your own BoxManager, see

 

http://supportforums.blackberry.com/t5/Java-Development/How-to-Extend-Manager/ta-p/446749

and

http://supportforums.blackberry.com/t5/Java-Development/Create-a-custom-layout-manager-for-a-screen/...

 

Please use plain text.
Contributor
nordavinder
Posts: 23
Registered: ‎12-02-2012
My Device: BlackBerry 8300
My Carrier: Personal

Re: How to make a screen like this on BlackberryHow to make a screen like this on Blackberry

many thanks for the detailed answer Peter! 

Before posting here, I asked the same on stackoverflow.com a couple of hours before and there I got the exact answer just when I was working on your suggestion, but your didactic answer helped me to understand some important concepts =)

Please use plain text.
Developer
peter_strange
Posts: 19,595
Registered: ‎07-14-2008
My Device: Not Specified

Re: How to make a screen like this on BlackberryHow to make a screen like this on Blackberry

Please use plain text.