Scott Violet's Blog

December 2005 Archives

JPasswordField with an empty echo character: the fix

Specifying you want JPasswordField to render a character with no space is as easy as:

passwordField.setEchoCharacter('\u200b');

  public int viewToModel(float fx, float fy, Shape boundsAsShape, Position.Bias[] bias) {
    boundsAsShape = adjustAllocation(boundsAsShape);
    Rectangle bounds = (boundsAsShape instanceof Rectangle) ?
                (Rectangle)boundsAsShape : boundsAsShape.getBounds();
    if (fx < bounds.x) {
      return getStartOffset();
    }
    return getEndOffset();
  }

To install this View you need to do something similar to that of the last blog (refer to it for more details). Create a custom JPasswordField, with a custom UI that returns the new View:

  new JPasswordField() {
    public void updateUI() {
      setUI(new BasicPasswordFieldUI() {
        public View create(Element elem) {
          return new EmptySpacePasswordView(elem);
        }
      });
    }
  };

That's enough for passwordfield and text, next time around something new.

Variations of JPasswordField

Variation 1: no feedback

  passwordField.setEchoCharacter('\u200b');

Variation 2: variable amount of space

All of Swing's text components, be it JPasswordField, JTextField, JEditorPane share the same architecture. What applies to one equally applies to the others. The text component use an instance of View to do the rendering of text. In some ways a View can be thought of as a lightweight Component, for example, View has methods like getPreferredSpan, getMinimumSpan, paint... Just as Containers are typically nested Views are usually nested as well. Views are responsible doing the following:

• Layout of either text or child Views. This includes calculating a size for the View.
• Painting.
• Provide a mapping between model and view, or view and model. For example, what position on screen is the character at location 5 in the model.
• Updating as the model changes.

    private static final int MIN_WIDTH = 2;
    private static final int MAX_WIDTH = 15;

    private List<Integer> widths;
    private Random widthGenerator;

    private final int generateCharacterSize() {
        return widthGenerator.nextInt(MAX_WIDTH - MIN_WIDTH) + MIN_WIDTH;
    }

    // Invoked when text has been inserted. Updates the width List appropriately
    public void insertUpdate(DocumentEvent changes, Shape a, ViewFactory f) {
        for (int i = 0; i < changes.getLength(); i++) {
            // Notice the autoboxing of int to Integer here.
            widths.add(i + changes.getOffset(), generateCharacterSize());
        }
        // Invoke super to update the visibility appropriately.
        super.insertUpdate(changes, a, f);
    }

VariableWidthPasswordView doesn't need to paint, so it no-ops the appropriate paint methods. The primary View method for painting is paint. VariableWidthPasswordView is a subclass of FieldView which implements paint to invoke drawSelectedText and drawUnselectedText. VariableWidthPasswordView will override drawSelectedText and drawUnselectedText to do nothing. This is done rather than overriding paint as paint is also responsible for invoking the appropriate methods to render the selection. By overriding drawUnselectedText and drawSelectedText to do nothing the selection is still rendered appropriately by FieldView.

To map from a position of text in the model to that of the view VariableWidthPasswordView overrides modelToView. modelToView uses the List of widths to determine the position. Here's the implementation:

    public Shape modelToView(int pos, Shape a, Position.Bias b)
            throws BadLocationException {
        // JPasswordField and JTextField implement their own virtual
        // coordinate system. This does the necessary mapping.
        Rectangle bounds = adjustAllocation(a).getBounds();
        bounds.x += modelToView(pos);
        bounds.width = 1;
        return bounds;
    }
    // Returns the view x coordinate in the views space for the specified
    // model coordinate.
    private final int modelToView(int p1) {
        int offset = 0;
        int end = Math.min(widths.size(), p1);
        for (int i = 0; i < end; i++) {
            // Notice the auto unboxing here.
            offset += widths.get(i);
        }
        return offset;
    }

    public int viewToModel(float fx, float fy, Shape a, Position.Bias[] bias) {
        a = adjustAllocation(a);
        Rectangle bounds = (a instanceof Rectangle) ? (Rectangle)a : a.getBounds();
        int x = (int)fx - bounds.x;
        for (int i = 0; i < widths.size(); i++) {
            // More auto unboxing.
            x -= widths.get(i);
            if (x <= 0) {
                return i;
            }
        }
        return getEndOffset();
    }

    public float getPreferredSpan(int axis) {
        if (axis == View.X_AXIS) {
            int size = 0;
            for (Integer width : widths) {
                size += width;
            }
            return size;
        }
        return super.getPreferredSpan(axis);
    }

   // We generally discourage using UIs from one look and feel
   // with another look and feel. When using metal this will be fine,
   // that may not be true when using other look and feels.
   JPasswordField myPasswordField = new JPasswordField(10) {
        public void updateUI() {
            setUI(new BasicPasswordFieldUI() {
                public View create(Element elem) {
                    return new VariableWidthPasswordView(elem);
                }
            });
        }
    };

1: As this demo shows it's possible to write a UI that ignores the echo character. All of Sun's UIs honor the echo character, but third party look and feels may not.

This work is licensed under a Creative Commons License.