Question

Can anyone please help me to create a custom drop down similar to the image attached in blackberry 5.0. I have used object choice field but it is coming along with label. Guide me to create custom drop down as show in image below

Answer 1

I have created my customized ChoiceField, using popup Screen. Here is the below code sample

package com.src.java.rim.ui;

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Display;
import net.rim.device.api.ui.DrawStyle;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.UiApplication;
import net.rim.device.api.ui.XYEdges;
import net.rim.device.api.ui.component.ListField;
import net.rim.device.api.ui.component.ListFieldCallback;
import net.rim.device.api.ui.container.HorizontalFieldManager;
import net.rim.device.api.ui.container.PopupScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;
import net.rim.device.api.ui.decor.BackgroundFactory;
import net.rim.device.api.ui.decor.Border;
import net.rim.device.api.ui.decor.BorderFactory;

public class FWCustomChoiceField extends HorizontalFieldManager {

    /*space between text and icon*/
    final int padding = 10;

    String arrowBitmapName = "arrow_state_grey_right.png";

    Object choice[] = null;

    int index = -1;

    String text = "Please select one option";

    ListField choiceField = null;
    public FWCustomChoiceField(final Object choice[]) {

        this.choice = new Object[choice.length];        
        this.choice = choice;

        choiceField = new ListField(){
            protected boolean navigationClick(int status, int time) {

                Field focus = UiApplication.getUiApplication().getActiveScreen() .getLeafFieldWithFocus();

                if (focus instanceof ListField) {
                    ChoicePopupScreen popup = new ChoicePopupScreen(10, 80, choice);
                    popup.setChoice(choice);                    
                    UiApplication.getUiApplication().pushScreen(popup);
                }
                return super.navigationClick(status, time);
                }
        };      

        choiceField.setSize(1);
        choiceField.setCallback(new TestListCallback());
        add(choiceField);
    }


    public void setSelIndex(int index){
        this.index = index; 
        this.text = choice[index].toString();
        choiceField.invalidate();
    }

    public int getSelectedIndex(){
        return index;
    }

    final class TestListCallback implements ListFieldCallback {
        TestListCallback() {
        }
        public void drawListRow(ListField list, Graphics g, int index, int y, int w) {
            Bitmap bitmap = Bitmap.getBitmapResource(arrowBitmapName);          
            int fontWidth = getFont().getAdvance(text);
            int width = Display.getWidth() ;
            int posX = (width-(fontWidth + padding + bitmap.getWidth()))/2; 

            int height = list.getRowHeight();
            int posY = (height - bitmap.getHeight())/2;

            g.drawText(text, posX, y, 0, w);
            g.drawBitmap(posX+fontWidth+padding,posY, bitmap.getWidth(), bitmap.getHeight(), bitmap, 0, 0);
        }
        public Object get(ListField listField, int index) {
            return null;
        }
        public int getPreferredWidth(ListField listField) {
            return Graphics.getScreenWidth();
        }
        public int indexOfList(ListField listField, String prefix, int start) {
            return listField.indexOfList(prefix, start);
        }
    }



    public class ChoicePopupScreen extends PopupScreen {
        Object []choice = null;

        /*holds the position for popup screen*/
        private int  _posX = 0;
        private int _posY = 0;

        public ChoicePopupScreen(int posx,int posy, Object[] choice) {
            /*calling super class constructor*/
            super(new VerticalFieldManager(), Field.FOCUSABLE);

            this.setMargin(new XYEdges(1,1,1,1));

            this.choice = new Object[choice.length];
            this.choice = choice;

            /*Setting position for popup screen*/
            _posX = posx;
            _posY = posy;

            /*list field customized to display as choice picker*/
            ListField choiceList = new ListField(){
                /*list field event handling using navigation click*/
                protected boolean navigationClick(int status, int time) {
                    /*getting the selected list index value*/
                    int index = this.getSelectedIndex();

                    /*returning the selected index to the main field*/
                    setSelIndex(index);

                    /*removing the popup screen from the screen stack*/
                    UiApplication.getUiApplication().popScreen(UiApplication.getUiApplication().getActiveScreen());

                    /*required for event handling*/
                    return super.navigationClick(status, time);
                }
            };

            /*displays the message when list is empty*/
            choiceList.setEmptyString("List is empty", DrawStyle.LEFT);
            choiceList.setSize(choice.length);
            choiceList.setCallback(new PopUpListCallback());            
            add(choiceList);


            Border border = BorderFactory.createSimpleBorder( new XYEdges(), Border.STYLE_TRANSPARENT);
            this.setBorder(border);
        }

        protected void  setChoice(Object []choice) {            
            this.choice = new Object[choice.length];
            this.choice = choice;
        }

        protected void sublayout(int width, int height) {
            super.sublayout(width, height);         
            /*setting the position for the popup screen*/
            setPosition(_posX , _posY);
        }
    }

    private class PopUpListCallback implements ListFieldCallback {
        PopUpListCallback() {
        }

        public void drawListRow(ListField list, Graphics g, int index, int y, int w) {
            String text = choice[index].toString();
            g.drawText(text, padding, y, 0, w);
        }

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

        public int getPreferredWidth(ListField listField) {
            return Graphics.getScreenWidth();
        }

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

To use the above class

String choicestrs[] = {"Opt 1", "Opt 2", "Opt 3"};
add(new FWCustomChoiceField(choicestrs));