Remove raised effect in blackberry objectchoicefie

Question

I am trying to achieve a flat look for blackberry controls, namely objectchoicefield and buttonfield.

The following code does not seem to do the trick. (The width setting does work, but not the border setting.)

public static ObjectChoiceField GetDropdownList(String label, String[] data)
{
    ObjectChoiceField ocf = new ObjectChoiceField(null, data, 0, Field.FIELD_LEFT);

    ocf.setBorder(BorderFactory.createSimpleBorder(new XYEdges(0,0,0,0)));
    ocf.setMinimalWidth(Display.getWidth()-61);

    return ocf;
}

I get the same appearance with or without the setBorder statement. Basically I do not want any 3D look or shadow or shine or rounded corners.

Thanks

Answer 1

This might not do everything you want, but you can try looking at this custom ObjectChoiceField that I built for OS 4.6 and lower devices. I wanted to add a glossy, 3D look, but you could change the custom paint() code I used to make a simpler, flatter look.

Taking my example, changing the rounded corner radius to 1, and removing the call to super.paint(g) gives something like this:

public class CustomChoiceField extends ObjectChoiceField {

   private int _bgWidth = 0;
   private int _bgHeight = 0;
   private int _numChoices = 0;
   private boolean _hasFocus = false;
   private static final int HIGHLIGHT_COLOR = 0xFF185AB5;  // blue-ish
   private static final int RADIUS = 1;    // rounded corner radius in pixels
   private static final int DFLT_PADDING = 20;

   public CustomChoiceField(Object[] choices, int initialIndex) {
      super("", choices, initialIndex);
      _numChoices = choices.length;
   }

   public int getPreferredHeight() {
      return _bgHeight;
   }

   public int getPreferredWidth() {
      return _bgWidth;
   }

   protected void layout(int width, int height) {
      if (_bgWidth == 0 || _bgHeight == 0) {
         if (height <= Display.getHeight()) {
            // probably using custom Manager to specify size
            _bgWidth = width;
            _bgHeight = height;
         } else {
            // use default sizing
            _bgHeight = DFLT_PADDING + getHeightOfChoices();
            for (int i = 0; i < _numChoices; i++) {
               _bgWidth = Math.max(_bgWidth, DFLT_PADDING + getWidthOfChoice(i));
            }
         }
      }

      super.layout(_bgWidth, _bgHeight);
      super.setExtent(_bgWidth, _bgHeight);
   }   

   protected void applyTheme(Graphics arg0, boolean arg1) {
      // do nothing
   }

   protected void drawFocus(Graphics g, boolean on) {
      // do nothing .. handled manually in paint(g)
   }

   protected void onFocus(int direction) {
      _hasFocus = true;
      super.onFocus(direction);
      invalidate();
   }

   protected void onUnfocus() {
      _hasFocus = false;
      super.onUnfocus();
      invalidate();  // required to clear focus
   }

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

      // field color depends on whether we have focus or not
      int bgColor = (_hasFocus) ? HIGHLIGHT_COLOR : Color.BLACK;
      // when the field has focus, we make it a little less transparent
      int alpha = (_hasFocus) ? 0xDD : 0xBB;
      g.setColor(bgColor);
      g.setGlobalAlpha(alpha);
      g.fillRoundRect(0, 0, _bgWidth, _bgHeight, RADIUS, RADIUS);

      // draw a plain white line as a border
      g.setColor(Color.WHITE);
      g.setGlobalAlpha(0xFF);
      g.drawRoundRect(0, 0, _bgWidth, _bgHeight, RADIUS, RADIUS);

      // draw the currently selected choice's text (also in white)
      String text = (String)getChoice(getSelectedIndex());
      int y = (_bgHeight - getFont().getHeight()) / 2;
      g.drawText(text, 0, y, DrawStyle.HCENTER | DrawStyle.TOP, _bgWidth);
      g.setColor(oldColor);
   }
}

And you use the CustomChoiceField like this:

   private ObjectChoiceField[] ocf = new ObjectChoiceField[3];

   public ObjectChoiceScreen() {
      super(MainScreen.VERTICAL_SCROLL | MainScreen.VERTICAL_SCROLLBAR);
      Object[] choices1 = new Object[] { "one", "two", "three" };
      ocf[0] = new CustomChoiceField(choices1, 0);
      Object[] choices2 = new Object[] { "ichi", "ni", "san" };
      ocf[1] = new CustomChoiceField(choices2, 0);
      Object[] choices3 = new Object[] { "uno", "dos", "tres" };
      ocf[2] = new CustomChoiceField(choices3, 0);
      for (int i = 0; i < ocf.length; i++) {
         ocf[i].setMargin(new XYEdges(10, 10, 10, 10));
      }
      getMainManager().addAll(ocf);

This isn't production code, so you'll need to test it yourself. For example, it doesn't handle changing the choices with setChoices(). But, it's a start, and will get you something like this:

You'll notice the difference in color between the first two object choice fields, and the bottom one, which is focused.

My code has the same popup for selecting choices as the normal ObjectChoiceField. So, you still may get rounded corners that way. In my case, I didn't need to change that look and feel, so I'm not sure how you might change that, too.