Simple BlackBerry Grid Layout Manager

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 vlogs will become a lot easier, in our opinion you can check the best vlogging camera on this associate website.

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

view plaincopy to clipboardprint?
  1. Manager gridFieldManager = new GridFieldManager(20);
  2. // Row 1
  3. gridFieldManager.add(new LabelField(“Column 1”));
  4. gridFieldManager.add(new LabelField(“Column 2”));
  5. // Row 2
  6. gridFieldManager.add(new ButtonField(“Button 1”));
  7. gridFieldManager.add(new ButtonField(“Button 2”));
  8. // Row 3
  9. gridFieldManager.add(new ButtonField(“Button 3”));
  10. gridFieldManager.add(new ButtonField(“Button 4”));
  11. add(gridFieldManager);

 

Example 2: 2 column grid with horizontally centered fields (FIELD_HCENTER style)

view plaincopy to clipboardprint?
  1. Manager gridFieldManager = new GridFieldManager(20);
  2. // Row 1
  3. gridFieldManager.add(new LabelField(“Column 1”, Field.FIELD_HCENTER));
  4. gridFieldManager.add(new LabelField(“Column 2”, Field.FIELD_HCENTER));
  5. // Row 2
  6. gridFieldManager.add(new ButtonField(“Button 1”, Field.FIELD_HCENTER));
  7. gridFieldManager.add(new ButtonField(“Button 2”, Field.FIELD_HCENTER));
  8. // Row 3
  9. gridFieldManager.add(new ButtonField(“Button 3”, Field.FIELD_HCENTER));
  10. gridFieldManager.add(new ButtonField(“Button 4”, Field.FIELD_HCENTER));
  11. 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.

view plaincopy to clipboardprint?
  1. Manager gridFieldManager = new GridFieldManager(20);
  2. // Row 1
  3. gridFieldManager.add(new ButtonField(“Button One”));
  4. gridFieldManager.add(new ButtonField(“Button Two”));
  5. // Row 2
  6. gridFieldManager.add(new ButtonField(“HC”, Field.FIELD_HCENTER)); // Horizontal Centered
  7. gridFieldManager.add(new ButtonField(“RT”, Field.FIELD_RIGHT)); // Right aligned
  8. // Row 3
  9. Field tallField = new ButtonField(“Tall!”);
  10. tallField.setFont(tallField.getFont().derive(Font.PLAIN, 32)); // Set the font large so this row will be taller
  11. gridFieldManager.add(tallField);
  12. gridFieldManager.add(new ButtonField(“Top”)); // Aligned to top (default)
  13. // Row 4
  14. gridFieldManager.add(new ButtonField(“Vertical Centered”, Field.FIELD_VCENTER)); // Vertically centered
  15. tallField = new ButtonField(“Tall!”);
  16. tallField.setFont(tallField.getFont().derive(Font.PLAIN, 32)); // Set the font large so this row will be taller
  17. gridFieldManager.add(tallField);
  18. // Row 6
  19. tallField = new ButtonField(“Tall!”);
  20. tallField.setFont(tallField.getFont().derive(Font.PLAIN, 32)); // Set the font large so this row will be taller
  21. gridFieldManager.add(tallField);
  22. gridFieldManager.add(new ButtonField(“Bottom”, Field.FIELD_BOTTOM)); // Aligned to bottom
  23. // Row 7
  24. gridFieldManager.add(new ButtonField(“CTR”, Field.FIELD_VCENTER | Field.FIELD_HCENTER)); // Vertically & horizontally centered
  25. tallField = new ButtonField(“Tall!”);
  26. tallField.setFont(tallField.getFont().derive(Font.PLAIN, 32)); // Set the font large so this row will be taller
  27. gridFieldManager.add(tallField);
  28. // Row 8
  29. gridFieldManager.add(new ButtonField(“Last”)); // Illustrating an odd number of Fields on the last row
  30. add(gridFieldManager);

Leave a Reply

Your email address will not be published. Required fields are marked *