How to set cursor position in the middle of CustomEditField?

Question

I have created a custom edit field with rounded Border. But the cursor is displaying at the top of the CustomEditField. How to change the cursor position to center of the field. Need help on this issue. Following code snippet is the implementation of CustomEditField.

public CustomEditField() {
    this(0);
    setMaxSize(15);
    setCursorPosition(AXIS_VERTICAL);
}

public CustomEditField(long style) {
    this(new XYEdges(20, 10, 20, 10), Field.FIELD_HCENTER
            | Field.USE_ALL_WIDTH | Field.NON_SPELLCHECKABLE
            | TextField.NO_NEWLINE | CONSUME_INPUT | style);
}

public CustomEditField(String label, String initialValue) {
    this(0);
    setLabel(label);
    setText(initialValue);
}

public CustomEditField(XYEdges points, long style) {
    super(style);
    setPadding(points);
}

/**
 * Paints EditField Background with specified Format values
 */
protected void paintBackground(Graphics graphics) {
    graphics.setColor(Color.WHITE);
    graphics.fillRoundRect(10, getPaddingTop(), getWidth() - 10,
            getHeight() - getPaddingBottom(), 20, 20);
    graphics.setColor(0x686868);
    graphics.drawRoundRect(10, getPaddingTop(), getWidth() - 10,
            getHeight() - getPaddingBottom(), 20, 20);
    graphics.setColor(Color.BLACK);
}

Screenshot will very helpful. – tonymontana Jun 09 '12 at 12:18 — tonymontana, Jun 09 '12 at 12:18

score 1 · Answer 1 · edited May 23 '17 at 10:34

First, there's a few concepts to make sure you're clear on. For a Field, there is margin, padding, and a border. Here is a good description of what they represent ... the linked question was about Android, but as far as I know, Android and BlackBerry use those concepts in the same way.

If you want your rounded rectangle to be your border, then when you're drawing it, you don't start it by coming in by the amount of padding. Padding is what goes inside the border. So, you should just draw your rectangles at (x,y) == (0,0). If you want to provide some space outside of the border, to be a buffer between other fields, use margin for that. Field objects have a setMargin() call that looks just like setPadding().

Secondly, the method setCursorPosition() is not really for centering the cursor's layout in space. It's for setting which character in the EditField the cursor should be next to. Not what you want for this problem.

Also, your above code isn't plotting the rectangles symmetrically. Remember that when you have padding on both sides, then you would have to subtract top and bottom pad to get the remaining height, or subtract left and right to get remaining width.

Anyway, depending on how you actually want your CustomEditField padded, you may need to change this a little. But, the following will at least give you an edit field where the cursor is vertically centered.

public class CustomEditField extends BasicEditField {
   public CustomEditField () {
      this(0);
      setMaxSize(15);
      //setCursorPosition(AXIS_VERTICAL); 
   }

   public CustomEditField (long style) {
      this(new XYEdges(20, 10, 20, 10), Field.FIELD_HCENTER | Field.USE_ALL_WIDTH | Field.NON_SPELLCHECKABLE
            | TextField.NO_NEWLINE | CONSUME_INPUT | style);
   }

   public CustomEditField (String label, String initialValue) {
      this(0);
      setLabel(label);
      setText(initialValue);
   }

   public CustomEditField (XYEdges points, long style) {
      super(style);
      setPadding(points);
   }

   /**
    * Paints EditField Background with specified Format values
    */
   protected void paintBackground(Graphics graphics) {
      graphics.setColor(Color.WHITE);
      graphics.fillRoundRect(0, 0, getWidth(), getHeight(), 20, 20);
      graphics.setColor(0x686868);
      graphics.drawRoundRect(0, 0, getWidth(), getHeight(), 20, 20);
      graphics.setColor(Color.BLACK);
   }
}

Note that this will give 20 pixels of space above the text, before your rounded rectangle (if you use the default constructor). That looks like a lot. Maybe that's not really what you want. You might decide to take the padding on all 4 sides down to 10 pixels, and then use setMargin() on the field to provide some space outside the border. You'll have to play around with it.

By the way, another way to attack this problem, that I use a lot, is to wrap your EditField inside a Manager, like a VerticalFieldManager. If you do that, and add() the EditField to the VerticalFieldManager, with the style flags = Field.FIELD_VCENTER, that should also accomplish your goal. But in this case, I don't think that's necessary.

How to set cursor position in the middle of CustomEditField?

1 Answers1