I’ve since updated this manager a bit
To illustrate some more concepts in BlackBerry UI design, I created a simple Manager that positions its fields in a grid with a fixed number of columns, and a variable number of rows (determined at layout time based on the number of fields currently controlled by the manager).
As I’ll keep saying in this space, Managers are a cornerstone of BlackBerry UI development - get familiar with how to implement them and your life will become a lot easier.
You can download the source here
The manager will use all available width (determined by its parent), allocating column width evenly. It adds rows as needed by the number of fields. The height of each row is determined by the height of the tallest field in that row.
It also respects field positional style attributes - Field.FIELD_TOP, FIELD_BOTTOM, FIELD_VCENTER, FIELD_LEFT, FIELD_RIGHT, FIELD_HCENTER - these come into play if a field is in a row or column that’s bigger than it.
The implementation is very simple (intentionally so) - the sublayout method iterates through all managed Fields, and lays them out across columns and down as many rows are are necessary. The navigationMovement method is also overridden to provide sensible focus movement among fields within the manager.
Two usage examples:
Example 1: Simple 2 column grid of buttons & labels
Manager gridFieldManager = new GridFieldManager(2, 0);
// Row 1
gridFieldManager.add(new LabelField("Column 1"));
gridFieldManager.add(new LabelField("Column 2"));
// Row 2
gridFieldManager.add(new ButtonField("Button 1"));
gridFieldManager.add(new ButtonField("Button 2"));
// Row 3
gridFieldManager.add(new ButtonField("Button 3"));
gridFieldManager.add(new ButtonField("Button 4"));
add(gridFieldManager);
Example 2: 2 column grid with horizontally centered fields (FIELD_HCENTER style)
Manager gridFieldManager = new GridFieldManager(2, 0);
// Row 1
gridFieldManager.add(new LabelField("Column 1", Field.FIELD_HCENTER));
gridFieldManager.add(new LabelField("Column 2", Field.FIELD_HCENTER));
// Row 2
gridFieldManager.add(new ButtonField("Button 1", Field.FIELD_HCENTER));
gridFieldManager.add(new ButtonField("Button 2", Field.FIELD_HCENTER));
// Row 3
gridFieldManager.add(new ButtonField("Button 3", Field.FIELD_HCENTER));
gridFieldManager.add(new ButtonField("Button 4", Field.FIELD_HCENTER));
add(gridFieldManager);
Example 3: Crazy alignments
This is really just to show off the alignment capabilities. You might notice that there are no fully-justified fields (i.e. fields that fill their grid cells). To get that effect, you have to play with the layout of the field itself.
Manager gridFieldManager = new GridFieldManager(2, 0);
// Row 1
gridFieldManager.add(new ButtonField("Button One"));
gridFieldManager.add(new ButtonField("Button Two"));
// Row 2
gridFieldManager.add(new ButtonField("HC", Field.FIELD_HCENTER)); // Horizontal Centered
gridFieldManager.add(new ButtonField("RT", Field.FIELD_RIGHT)); // Right aligned
// Row 3
Field tallField = new ButtonField("Tall!");
tallField.setFont(tallField.getFont().derive(Font.PLAIN, 32)); // Set the font large so this row will be taller
gridFieldManager.add(tallField);
gridFieldManager.add(new ButtonField("Top")); // Aligned to top (default)
// Row 4
gridFieldManager.add(new ButtonField("Vertical Centered", Field.FIELD_VCENTER)); // Vertically centered
tallField = new ButtonField("Tall!");
tallField.setFont(tallField.getFont().derive(Font.PLAIN, 32)); // Set the font large so this row will be taller
gridFieldManager.add(tallField);
// Row 6
tallField = new ButtonField("Tall!");
tallField.setFont(tallField.getFont().derive(Font.PLAIN, 32)); // Set the font large so this row will be taller
gridFieldManager.add(tallField);
gridFieldManager.add(new ButtonField("Bottom", Field.FIELD_BOTTOM)); // Aligned to bottom
// Row 7
gridFieldManager.add(new ButtonField("CTR", Field.FIELD_VCENTER | Field.FIELD_HCENTER)); // Vertically & horizontally centered
tallField = new ButtonField("Tall!");
tallField.setFont(tallField.getFont().derive(Font.PLAIN, 32)); // Set the font large so this row will be taller
gridFieldManager.add(tallField);
// Row 8
gridFieldManager.add(new ButtonField("Last")); // Illustrating an odd number of Fields on the last row
add(gridFieldManager);
8100 Series screen
8300 Series screen
16 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.
want to implement a Chat UI screen like Google talk, BB messenger or Jivetalk. However, I got stuck by many problems.
I have two areas in the main screen.
——————–
| RichTextField |
———————
| AutoTextEditField |
——————–
Firstly, Everytime after user clicks enter key, I append the user input from AutoTextEditField to RichTextField, However, the RichTextField never scroll to the bottom. I have to move the focus from AutoTextEditField to RichTextField and scroll the trackball to scroll down to see the new append content.
2ndly, Even though I uses the VERTICALSCROLL|VERTICALSCROLLBAR for RichTextField, I couldn’t see the SCROLLBAR on the screen.
I want to implement a screen similar to google talk or yahoo messenger. It seems my current solution is on the wrong track. Do you have experience on this? could provide me some suggestion? or Sample code?
I really appreciate it.
Yep, I’ve done layouts similar to that before - stay tuned, I’ll post an answer shortly.
Great info. The blackberry community needs more people like you!
What happens if you add more fields than you have vertical space? I’m a BB dev newbie but it seams like if you add more fields than you have vertical space then eventually inside sublayout it is going to call layoutChild with a negative height. Is there some extra mojo you have to add if you want the grid to be scrollable so it can be bigger than the screen and the focused field is always visible?
This is great!!! I’ve been looking for this exact functionality for awhile now. Now I can finish my little pet project
Thank you for sharing this.
Hi, Thanks a lot for posting the source code of the GridLayoutManager. I am noticing the following. Can you please suggest what needs to be done to handle this?
–When I create a PopupScreen using GridLayoutManger, and add fields to the the grid layout manger, the screen is not scrollable vertically.
Scrolling works like a charm if I add the grid layout manager to MainScreen.
Hi, I figured out the workaround for the above.
–create a vertical manager with VERTICAL_SCROLL
–add grid layout manager to this vertical manager.
I still can’t explain why the original code didn’t work.
Thanks once again for sharing your code and posting very well written posts on building RIM UI components.
Even with the above workaround, scrolling does not work well. Fields at the top of the screen get distorted as scrollbar goes down.
Anthony, is it possible to provide some hints as to what I should look at?
its too good handy solution… liked to have it..
thank you very much..
I think there is a small bug in the implementation. When I use the original version the height of a rows is always >= the height of the heighest previous row. Even if the elements in the row have smaller height than this. To resolve this I have added rowHeight=0 after line 178 y+= rowheight. Anyhow after this small addition it is working great, I am using it, thanks for the example.
Thanks Boris, appreciate the feedback and the fix - do you mind if I incorporate it into the version I have up on the site?
Please do incorporate it if you want. Dont have any problems with that.
Hi Anthony, I got a small question. I am looking for a way to insert some small divider between the rows of the grid. Maybe draw a small line or something like that. I cant really think of something simple to do that, do you maybe have a hint for me here?
Ciao Boris
hey ….m mking a menu page for blackberry …in vch i wnt exit n back buttons on the bottomost position . m successful to drive exit at bottomost postion, but want to display back at rightof bottom. i dnt knw hw to get button at the right of bottom…
plz help me if u have ny information regarding it …or if smbdy cn help me wd d code …it wud be really greatful.
> Versha
What you could do is add a new horizontal or vertical manager to your existing main screen manager and then u could just add the buttons along with the style “Field.Field_Right”.
Unbelievable a manager like this is not part of the default api.. I use a very similar LayoutManager in Java and missed it sorely until now!
hi to all
i am new for black berry.i create grid field with 6 columns&3 rows.i want to focus each row when the cursor moving..but i can’t able to focus the row …please any one help me…