How to customize a ListField in BlackBerry?

Question

I want to customize a ListField in BlackBerry which would be able to list an image and text in a row.

How to accomplish this?

Secrete

Answer 1

Try something like this:

class TaskListField extends ListField implements ListFieldCallback {
 private Vector rows;
 private Bitmap p1;
 private Bitmap p2;
 private Bitmap p3;

 public TaskListField() {
  super(0, ListField.MULTI_SELECT);
  setRowHeight(80);
  setEmptyString("Hooray, no tasks here!", DrawStyle.HCENTER);
  setCallback(this);

  p1 = Bitmap.getBitmapResource("1.png");
  p2 = Bitmap.getBitmapResource("2.png");
  p3 = Bitmap.getBitmapResource("3.png");

  rows = new Vector();

  for (int x = 0; x < 10; x++) {
   TableRowManager row = new TableRowManager();

   // SET THE PRIORITY BITMAP FIELD
   // if high priority, display p1 bitmap
   if (x % 2 == 0) {
    row.add(new BitmapField(p1));
   }
   // if priority is 2, set p2 bitmap
   else if (x % 3 == 0) {
    row.add(new BitmapField(p2));
   }
   // if priority is 3, set p3 bitmap
   else {
    row.add(new BitmapField(p3));
   }

   // SET THE TASK NAME LABELFIELD
   // if overdue, bold/underline
   LabelField task = new LabelField("Task #" + String.valueOf(x),
     DrawStyle.ELLIPSIS);
   // if due today, bold
   if (x % 2 == 0) {
    task.setFont(Font.getDefault().derive(
      Font.BOLD | Font.UNDERLINED));
    System.out.println("OVERDUE");
   } else {
    task.setFont(Font.getDefault().derive(Font.BOLD));
    System.out.println("TODAY");
   }

   row.add(task);

   // SET THE LIST NAME
   row.add(new LabelField("List Name #" + String.valueOf(x),
     DrawStyle.ELLIPSIS) {
    protected void paint(Graphics graphics) {
     graphics.setColor(0x00878787);
     super.paint(graphics);
    }
   });

   // SET THE DUE DATE/TIME
   row.add(new LabelField("Due Date #" + String.valueOf(x),
     DrawStyle.ELLIPSIS | LabelField.USE_ALL_WIDTH
       | DrawStyle.RIGHT) {
    protected void paint(Graphics graphics) {
     graphics.setColor(0x00878787);
     super.paint(graphics);
    }
   });
   rows.addElement(row);
  }
  setSize(rows.size());

 }

 // ListFieldCallback Implementation
 public void drawListRow(ListField listField, Graphics g, int index, int y,
   int width) {
  TaskListField list = (TaskListField) listField;
  TableRowManager rowManager = (TableRowManager) list.rows
    .elementAt(index);
  rowManager.drawRow(g, 0, y, width, list.getRowHeight());
 }

 private class TableRowManager extends Manager {
  public TableRowManager() {
   super(0);
  }

  // Causes the fields within this row manager to be layed out then
  // painted.
  public void drawRow(Graphics g, int x, int y, int width, int height) {
   // Arrange the cell fields within this row manager.
   layout(width, height);

   // Place this row manager within its enclosing list.
   setPosition(x, y);

   // Apply a translating/clipping transformation to the graphics
   // context so that this row paints in the right area.
   g.pushRegion(getExtent());

   // Paint this manager's controlled fields.
   subpaint(g);

   g.setColor(0x00CACACA);
   g.drawLine(0, 0, getPreferredWidth(), 0);

   // Restore the graphics context.
   g.popContext();
  }

  // Arrages this manager's controlled fields from left to right within
  // the enclosing table's columns.
  protected void sublayout(int width, int height) {
   // set the size and position of each field.
   int fontHeight = Font.getDefault().getHeight();
   int preferredWidth = getPreferredWidth();

   // start with the Bitmap Field of the priority icon
   Field field = getField(0);
   layoutChild(field, 32, 32);
   setPositionChild(field, 0, 0);

   // set the task name label field
   field = getField(1);
   layoutChild(field, preferredWidth - 16, fontHeight + 1);
   setPositionChild(field, 34, 3);

   // set the list name label field
   field = getField(2);
   layoutChild(field, 150, fontHeight + 1);
   setPositionChild(field, 34, fontHeight + 6);

   // set the due time name label field
   field = getField(3);
   layoutChild(field, 150, fontHeight + 1);
   setPositionChild(field, preferredWidth - 152, fontHeight + 6);

   setExtent(preferredWidth, getPreferredHeight());
  }

  // The preferred width of a row is defined by the list renderer.
  public int getPreferredWidth() {
   return Graphics.getScreenWidth();
  }

  // The preferred height of a row is the "row height" as defined in the
  // enclosing list.
  public int getPreferredHeight() {
   return getRowHeight();
  }
 }

 public Object get(ListField listField, int index) {
  return null;
 }

 public int getPreferredWidth(ListField listField) {
  return 0;
 }

 public int indexOfList(ListField listField, String prefix, int start) {
  return 0;
 }

}

See code from rtm4bb - A BlackBerry Client for Remember the Milk:

Thithia

I really like this answer, it moves away from doing all kind of gobbledygook in drawListRow and actually allows you to add proper fields to the listfield that will handle their own drawing concerns. – High

+1 Yes, this is a nice trick. However if the list is long there will be too many objects created while not used for their natural purpose. And that's why API provides ListField - to save resources on long lists. I'd prefer to just properly implement ListFieldCallback.drawListRow(). – Urinal

Answer 2

Without knowing more detail about what you're trying to do, I'd suggest taking a look at some of the sample apps that ship with the BlackBerry development environment. Several of the apps such as Contacts.java and PhoneApiDemo.java have a ListField and ListFieldCallback implemenation.

Berrie

Answer 3

Starting with BlackBerry Java SDK 6.0 you can use a RichList:

Use a rich list to display a list of items that contain an optional image on the left, a list of labels beside the image and an optional description below the image and labels

RichList list = new RichList(mainManager, true, 2, 1);

list.add(new Object[] {bitmap1, "Device 1", 
                       "BlackBerry Smartphone 9500", 
                       "Description of Device 1."});
list.add(new Object[] {bitmap2, "Device 2", 
                       "BlackBerry Smartphome 9000", 
                       "Description of Device 2."});

Cystoscope

I'm not give a downvote to you, but I think because your answer not related to the question, RichList isn't a customizable implementation of ListField – Elo