how to create a list field as same style as BlackBerry facebook?

how to create a list field as same style as Black Berry facebook ? the RIM list field contains only text, i want to create list field that can contains other fields such as image, text area and href link .

I managed to create it ,and it works fine but the the fields inside the list item never gain focus , any idea how do it ?

public class RichListField extends ListField implements ListFieldCallback {
private Vector rows;


public RichListField(String emtpyString, RichListItem[] items) {
    super(0, ListField.MULTI_SELECT);
    setRowHeight(80);
    setEmptyString(emtpyString, DrawStyle.HCENTER);
    setCallback(this);

    rows = new Vector();

    for (int i = 0; i < items.length; i++) {
        TableRowManager row = new TableRowManager();

        row.add(new BitmapField(items[i].getBitmap()));

        LabelField itemLabel = new LabelField(items[i].getLabel(),
                DrawStyle.ELLIPSIS);
        // mark selected
        // itemLabel.setFont(Font.getDefault().derive(
        // Font.BOLD | Font.UNDERLINED));

        itemLabel.setFont(Font.getDefault().derive(Font.BOLD));
        row.add(itemLabel);

        // SET THE LIST Item description
        row.add(new LabelField(items[i].getDescription(),
                DrawStyle.ELLIPSIS) {
            protected void paint(Graphics graphics) {
                graphics.setColor(0x00878787);
                super.paint(graphics);
            }
        });


        row.add(items[i].getLink());
        rows.addE开发者_如何学运维lement(row);
    }
    setSize(rows.size());

}


public void drawListRow(ListField listField, Graphics g, int index, int y,
        int width) {
    RichListField list = (RichListField) 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);
    }


    public void drawRow(Graphics g, int x, int y, int width, int height) {
        // Arrange the cell fields within this row manager.
        layout(width, height);

        setPosition(x, y);


        g.pushRegion(getExtent());

        subpaint(g);

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

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



    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   label field
        field = getField(1);
        layoutChild(field, preferredWidth - 16, fontHeight + 1);
        setPositionChild(field, 34, 3);

        // set the description label field
        field = getField(2);
        layoutChild(field, preferredWidth, fontHeight + 1);
        setPositionChild(field, 34, fontHeight + 6);

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

        //To set the required dimensions for the field
        setExtent(preferredWidth, getPreferredHeight());
    }


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

    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;
}

}

public class RichListItem { private String label; private Bitmap bitmap; private String description; private HrefField link;

public String getLabel() {
    return label;
}

public void setLabel(String label) {
    this.label = label;
}

public Bitmap getBitmap() {
    return bitmap;
}

public void setBitmap(Bitmap bitmap) {
    this.bitmap = bitmap;
}

public String getDescription() {
    return description;
}

public void setDescription(String description) {
    this.description = description;
}

public HrefField getLink() {
    return link;
}

public void setLink(HrefField link) {
    this.link = link;
}

public RichListItem(String label, Bitmap bitmap, String description,
        HrefField link) {
    super();
    this.label = label;
    this.bitmap = bitmap;
    this.description = description;
    this.link = link;
}

}

You just need to add 2 lines of code at drawListRow when implement interface ListFieldCallback.

if (g.isDrawingStyleSet(Graphics.DRAWSTYLE_FOCUS)) rowColor = Color.RED;
else rowColor = Color.GRAY

If all you want to do is change the color when a row has focus, you could override ListField.drawFocus():

protected void drawFocus(Graphics graphics, boolean on) {
    if (on) {
        graphics.setColor(focusColor);
        graphics.setBackgroundColor(focusBackgroundColor);
        super.drawFocus(graphics, on);
        /**
          You may have to play with the call to super.drawFocus() depending on
          what it actually does. For example:
          super.drawFocus(graphics, false); 
          may work better. Or you may have to draw the field yourself.
        */
    }
}