Tutorials Blackberry How to create a custom ListField in blackberry

How to create a custom ListField in blackberry

ListField Contains rows of selectable list items. A ListField uses a class that implements the ListFieldCallback interface to perform drawing tasks. A ListField must register a class that implements the ListFieldCallback interface using the setCallback method before the class can be used. After registration, when a ListField must display an item in its list, it invokes the appropriate methods of the registered callback class.

My post will answer all your questions:

  1. How do I customize my list field with multiple fields?
  2. How do I listen for click and move to another screen?
  3. How to customize the font of list field items?

The sample here will gives the screen as shows in the picture given here.
I have used this following set of static String to demonstrate the usages of my custom list field class. Here the first step is to create a CustomListField field object and then pass the required param.

Bitmap listThumb = Bitmap.getBitmapResource("thumb_icon.png");
String listTitle="Headline";
String listDesc = "Mobile news feeds & mobile buzz";
String listDesc2 = " Update yourself keep learning and have fun";
Bitmap navBar = Bitmap.getBitmapResource("next_arrow.png");
Vector v = new Vector();
for(int i=0; i
v.addElement(new ListRander(listThumb, listTitle, listDesc,listDesc2, navBar));
}
CustomListField myListView = new CustomListField(v){
    protected boolean trackwheelClick (int status, int time) {
        Dialog.alert(" You have selected :" + getSelectedIndex());
        return super.trackwheelClick(status, time);
    }
}
;
add(myListView);

Now you got to include the CustomListField class

public class CustomListField extends ListField implements ListFieldCallback {

    private Vector _listData;
    private int _MAX_ROW_HEIGHT = 60;
    public CustomListField (Vector data) {

        _listData = data;
        setSize(_listData.size());
        setSearchable(true);
        setCallback(this);
        setRowHeight(_MAX_ROW_HEIGHT);

    }

    protected void drawFocus (Graphics graphics, boolean on) {

        XYRect rect = new XYRect();
        graphics.setGlobalAlpha(150);
        graphics.setColor(Color.BLUE);
        getFocusRect(rect);
        drawHighlightRegion(graphics,HIGHLIGHT_FOCUS,true,rect.x,rect.y,rect.width,rect.height);

    }

    public int moveFocus (int amount, int status, int time) {

        this.invalidate(this.getSelectedIndex());
        return super.moveFocus(amount, status, time);

    }

    public void onFocus (int direction) {

        super.onFocus(direction);

    }

    protected void onUnFocus () {

        this.invalidate(this.getSelectedIndex());

    }

    public void refresh () {

        this.getManager().invalidate();

    }

    public void drawListRow (ListField listField, Graphics graphics, int index, int y, int w) {

        ListRander listRander = (ListRander)_listData.elementAt(index);
        graphics.setGlobalAlpha(255);
        graphics.setFont(Font.getDefault().getFontFamily().getFont(Font.PLAIN, 24));
        final int margin =5;
        final Bitmap thumb= listRander.getListThumb();
        final String listHeading = listRander.getListTitle();
        final String listDesc= listRander.getListDesc();
        final String listDesc2= listRander.getListDesc2();
        final Bitmap nevBar = listRander.getNavBar();
        //list border
        graphics.setColor(Color.GRAY);
        graphics.drawRect(0, y, w, _MAX_ROW_HEIGHT);
        //thumbnail border & thumbnail image
        graphics.setColor(Color.BLACK);
        graphics.drawRoundRect(margin-2, y+margin-2,thumb.getWidth()+2, thumb.getHeight()+2, 5, 5);
        graphics.drawBitmap(margin, y+margin, thumb.getWidth(), thumb.getHeight(), thumb, 0, 0);
        //drawing texts
        graphics.setFont(FontGroup.fontBold);
        graphics.drawText(listHeading, 2*margin+thumb.getWidth(), y+margin);
        graphics.setColor(Color.GRAY);
        graphics.setFont(FontGroup.smallFont);
        graphics.drawText(listDesc, 2*margin+thumb.getWidth(), y+ margin+20);
        graphics.drawText(listDesc2, 2*margin+thumb.getWidth(), y+ margin+32);
        //draw navigation button
        final int navBarPosY = y+(_MAX_ROW_HEIGHT/2 - nevBar.getHeight()/2);
        final int navBarPosX = Graphics.getScreenWidth()- nevBar.getWidth()+ margin;
        graphics.drawBitmap(navBarPosX, navBarPosY, nevBar.getWidth(), nevBar.getHeight(), nevBar, 0 , 0);

    }

    public Object get(ListField listField, int index) {

        String rowString = (String) _listData.elementAt(index);
        return rowString;

    }

    public int indexOfList (ListField listField, String prefix, int start) {

        for (Enumeration e = _listData.elements(); e.hasMoreElements(); ) {

            String rowString = (String) e.nextElement();
            if (rowString.startsWith(prefix)) {

                return _listData.indexOf(rowString);

            }

        }

        return 0;

    }

    public int getPreferredWidth(ListField listField) {

        return 3 * listField.getRowHeight();

    }

}

Here, in order to make the changes depending on the list items that we are rendering, I have declared a bean class to make my life easy.

public class ListRander {
    private Bitmap listThumb= null;
    private Bitmap navBar = null;
    private String listTitle=null;
    private String listDesc= null;
    private String listDesc2= null;
    public ListRander(Bitmap listThumb,String listTitle, String listDesc, String listDesc2, Bitmap navBar) {
        this.listDesc = listDesc;
        this.listDesc2 = listDesc2;
        this.listThumb = listThumb;
        this.listTitle = listTitle;
        this.navBar = navBar;
    }
    public Bitmap getListThumb() {
        return listThumb;
    }
    public void setListThumb(Bitmap listThumb) {
        this.listThumb = listThumb;
    }
    public Bitmap getNavBar() {
        return navBar;
    }
    public void setNavBar(Bitmap navBar) {
        this.navBar = navBar;
    }
    public String getListTitle() {
        return listTitle;
    }
    public void setListTitle(String listTitle) {
        this.listTitle = listTitle;
    }
    public String getListDesc() {
        return listDesc;
    }
    public void setListDesc(String listDesc) {
        this.listDesc = listDesc;
    }
    public String getListDesc2() {
        return listDesc2;
    }
    public void setListDesc2(String listDesc2) {
        this.listDesc2 = listDesc2;
    }
}

Total
0
Shares
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Anonymous
Anonymous
10 years ago

Very good post. really it helped me a lot. this piece of code is a reusable comp. thanks neel.

Anonymous
Anonymous
10 years ago

really very good post … thnx alot for sharing this work, it saved me 🙂

alberto
alberto
8 years ago

Excelent!

Previous Post
Blackberry Tutorials

How to create borderless transparent popup screen in blackberry

Next Post
Blackberry Tutorials

How to Record Incoming Phone Call in Blackberry

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All