How to make a screen like this on Blackberry

Question

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!

EDIT: I edit this answer just to show how good the solution provided by the user Nate was:

Answer 1

Here's my suggestion. If you want the possibility of making this a table, with the title/text/image/button/footer pattern repeating, there should be a Manager subclass that represents the layout for one row.

As Arhimed noted, this solution assumes a relatively small number of rows (see comments below), to perform well.

First, I created a simple class that holds the data that one row would contain:

   /** The data representation of one row in our table */
   private class Data {
      public String title;
      public String footer;
      public String[] text;  // each array element is a line of text
      public Bitmap icon;

      public Data(String title, String footer, String[] text, String iconName) {
         this.title = title;
         this.footer = footer;
         this.text = text;
         this.icon = Bitmap.getBitmapResource(iconName);
      }
   }

Then, here is the Manager subclass that lays out only one row, which is the presentation of one Data object:

   /** The UI for one row of data */
   private class RowManager extends Manager {

      private LabelField title;
      private LabelField footer;
      private BitmapField iconImage;
      private ButtonField button;
      private TextField text;
      private static final int TITLE_AND_FOOTER_HEIGHT = 32;
      private static final int TEXT_HEIGHT = 80;

      public RowManager(int index, Data content, long style) {
         super(style);

         final Font titleFont = Font.getDefault().derive(Font.PLAIN, 24);
         final Font footerFont = Font.getDefault().derive(Font.PLAIN, 20);
         final Font textFont = Font.getDefault().derive(Font.PLAIN, 16);

         title = new CustomLabelField(content.title, titleFont, 
               Color.BLACK, Field.USE_ALL_WIDTH | DrawStyle.LEFT);
         title.setPadding(6, 0, 0, 10);  // top, right, bottom, left pad
         add(title);

         iconImage = new BitmapField(content.icon);
         add(iconImage);

         button = new ButtonField("Button" + index, ButtonField.CONSUME_CLICK);
         // the cookie helps identify which button this is (which row)
         button.setCookie(new Integer(index));
         button.setFont(textFont);
         add(button);

         text = new TextField(TextField.NON_FOCUSABLE) { 
            public void paint(Graphics g) {
               int c = g.getColor();
               g.setColor(Color.DARKRED);
               super.paint(g);
               g.setColor(c);
            }
         };
         text.setFont(textFont);
         StringBuffer textContent = new StringBuffer();         
         for (int line = 0; line < content.text.length; line++) {
            textContent.append(content.text[line] + "\n\n");   // double line-spacing
         }
         if (content.text.length > 0) {
            text.setText(textContent.toString().substring(0, textContent.toString().length() - 2));  // 2 \n chars
         }
         text.setPadding(10, 10, 10, 10);
         add(text);

         footer = new CustomLabelField(content.footer, footerFont, 
               Color.BLACK, Field.USE_ALL_WIDTH | DrawStyle.RIGHT);
         footer.setPadding(6, 10, 0, 0);  // top, right, bottom, left pad
         add(footer);
      }

      // overridden just to change background color (OS 4.5+!)
      public void paint(Graphics graphics)
      {
         int oldBgColor = graphics.getBackgroundColor();
         graphics.setBackgroundColor(Color.GRAY);
         // make the whole field gray, first, and then fill in the blue
         graphics.clear();

         // paint just the middle section blue
         int oldColor = graphics.getColor();
         graphics.setColor(Color.LIGHTBLUE);         
         graphics.fillRect(0, TITLE_AND_FOOTER_HEIGHT, getWidth(), TEXT_HEIGHT); 

         super.paint(graphics);

         graphics.setColor(oldColor);
         graphics.setBackgroundColor(oldBgColor);
      }

      public void setChangeListener(FieldChangeListener listener) {
         // only the button field supports change listeners
         button.setChangeListener(listener);
      }

      public int getPreferredWidth() {
         return Display.getWidth();
      }

      public int getPreferredHeight() {
         return TITLE_AND_FOOTER_HEIGHT + TEXT_HEIGHT + TITLE_AND_FOOTER_HEIGHT;
      }

      protected void sublayout(int width, int height) {
         int y = 0;

         layoutChild(title, width, TITLE_AND_FOOTER_HEIGHT);
         setPositionChild(title, 0, y);

         layoutChild(iconImage, 
               iconImage.getPreferredWidth(), iconImage.getPreferredHeight());
         setPositionChild(iconImage, 
               width - iconImage.getPreferredWidth() - 10, 5);
         y += TITLE_AND_FOOTER_HEIGHT;

         int buttonWidth = 88;
         layoutChild(text, width - buttonWidth - 20, TEXT_HEIGHT);
         setPositionChild(text, 0, y);

         layoutChild(button, buttonWidth, 40);
         setPositionChild(button, width - buttonWidth - 20, 
               y + (TEXT_HEIGHT - 40) / 2);

         y += TEXT_HEIGHT;

         layoutChild(footer, width, TITLE_AND_FOOTER_HEIGHT);
         setPositionChild(footer, 0, y);

         super.setExtent(width, y + TITLE_AND_FOOTER_HEIGHT);
      }
   }

And, here's a Screen class that would create some sample Data objects, and use the RowManager:

public class StackScreen extends MainScreen implements FieldChangeListener {

   private Vector rowData;

   public StackScreen() {
      super(MainScreen.VERTICAL_SCROLL | MainScreen.VERTICAL_SCROLLBAR);      

      // define the screen title
      Font titleFont = Font.getDefault().derive(Font.PLAIN, 30);
      CustomLabelField title = new CustomLabelField("Screen Title", 
            titleFont, Color.DARKRED, DrawStyle.HCENTER | Field.USE_ALL_WIDTH);        
      title.setPadding(10, 10, 10, 10);
      add(title);

      // populate a dummy set of model data
      rowData = new Vector();      
      Data one = new Data("Title 1", "Some footer info", 
            new String[]{ "First line of text", "Second line of text" }, 
            "image1.png");
      Data two = new Data("Title 2", "Some footer info", 
            new String[]{ "First line of text", "Second line of text" }, 
            "image2.png");
      rowData.addElement(one);
      rowData.addElement(two);

      // create a UI representation of each row's data
      for (int i = 0; i < rowData.size(); i++) {
         RowManager row = new RowManager(i, (Data)rowData.elementAt(i), 0);
         row.setPadding(10, 20, 10, 20);  // top, right, bottom, left pad
         row.setChangeListener(this);
         add(row);
      }
   }

   // invoked when buttons are clicked
   public void fieldChanged(Field field, int context) {
      Object cookie = field.getCookie();
      if (cookie instanceof Integer) {
         Integer rowIndex = (Integer) cookie;
         Dialog.alert("Button " + rowIndex + " clicked!");
      }
   }
}

There's one last utility UI class I used, to create colored labels:

   /** A label field with custom font and color attributes */
   private class CustomLabelField extends LabelField {

      private int fontColor = Color.BLACK;

      public CustomLabelField(String text, Font f, int color, long style) {
         super(text, style);
         setFont(f);
         fontColor = color;
      }      

      public void paint(Graphics g) {
         int oldColor = g.getColor();

         g.setColor(fontColor);
         super.paint(g);

         // reset graphics context
         g.setColor(oldColor);
      }
   }  

This is how it looks on a OS 5.0 9550. I believe I stayed away from any APIs that wouldn't be available on OS 4.5 (setPadding() is undocumented, but usable). Obviously, the layout is highly hardcoded. You'll need to adjust for other devices, but I have to leave you some work :)