Click on icon in a JTextField and clear its content

Question

I am trying to create a JTextField with an image and a hint. The function of the textfield is a search field to search some books. Now, I like to go a little bit further. I would like to give the image a function. For example, if I click on the image the text in the textfield should be cleared.

To achieve this implementation I created a new class and extended it with JTextField.

This is the code:

public class JSearchTextField extends JTextField implements FocusListener {

/**
 * 
 */
private static final long serialVersionUID = 1L;
private String textWhenNotFocused;
private Icon icon;
private Insets dummyInsets;
private JTextField dummy;

public JSearchTextField() {
    super();

    Border border = UIManager.getBorder("TextField.border");
    dummy = new JTextField("Suchen...");
    this.dummyInsets = border.getBorderInsets(dummy);

    icon = new ImageIcon(JSearchTextField.class.getResource("/images/clearsearch.png"));
    this.addFocusListener(this);

}

public JSearchTextField(String textWhenNotFocused) {
    this();
    this.textWhenNotFocused = textWhenNotFocused;
}

public void setIcon(ImageIcon newIcon){
    this.icon = newIcon;
}

public String getTextWhenNotFocused() {
    return this.textWhenNotFocused;
}

public void setTextWhenNotFocused(String newText) {
    this.textWhenNotFocused = newText;
}

public void paintComponent(Graphics g){
    super.paintComponent(g);

    int textX = 2;

    if(!this.hasFocus() && this.getText().equals("")) {
        int height = this.getHeight();
        Font prev = this.getFont();
        Font italic = prev.deriveFont(Font.ITALIC);
        Color prevColor = g.getColor();
        g.setFont(italic);
        g.setColor(UIManager.getColor("textInactiveText"));
        int h = g.getFontMetrics().getHeight();
        int textBottom = (height - h) / 2 + h - 4;
        int x = this.getInsets().left;
        Graphics2D g2d = (Graphics2D) g;
        RenderingHints hints = g2d.getRenderingHints();
        g2d.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, 
                             RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
        g2d.drawString(textWhenNotFocused, x, textBottom);
        g2d.setRenderingHints(hints);
        g.setFont(prev);
        g.setColor(prevColor);
    } else {
        int iconWidth = icon.getIconWidth();
        int iconHeight = icon.getIconHeight();
        int x = dummy.getWidth() + dummyInsets.right;
        textX = x - 420;
        int y = (this.getHeight() - iconHeight)/2;
        icon.paintIcon(this, g, x, y);
    }

    setMargin(new Insets(2, textX, 2, 2));

}
@Override
public void focusGained(FocusEvent arg0) {
    this.repaint();
}

@Override
public void focusLost(FocusEvent arg0) {
    this.repaint();
}

}

And this is where I create the fields;

txtSearchBooks = new JSearchTextField("Buch suchen...");

Now back to my question. Do you have any idea how I can give the image a function where the text will be automatically cleared? I tried to implement a MouseListener and set the text of "txtSearchBooks" to null but it hasn't worked.

I hope I didn't go off in the wrong direction.

Sorry for the long post but I would really appreciate to get some advice.

Answer 1

A JTextField is a JComponent, meaning it is also a container for other components. You can use the add(Component c) method to add other components to it. BUT A JTextField won't show its added components unless you provide a LayoutManager to it. Then it behaves just like a normal JPanel.

I made a small example how you can manage what you need. The label is showed to the right, and clicking it will clear the field. You can use a button as well, instead of label.

Please note you don't need to create the Image object from scratch as I do, you can load it from a file. I create it this way so that the example doesn't rely on other files.

public class TextFieldWithLabel {
    public static void main(String[] args) 
    {
        JFrame frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        final JTextField textField = new JTextField("Search...");
        textField.setLayout(new BorderLayout());

        //creating dummy image...
        Image image = new BufferedImage(25, 25, BufferedImage.TYPE_INT_RGB);
        Graphics graphics = image.getGraphics();
        graphics.setColor(Color.WHITE);
        graphics.fillRect(0, 0, 25, 25);
        graphics.setColor(Color.RED);
        graphics.fillRect(2, 11, 21, 3);
        graphics.fillRect(11, 2, 3, 21);

        JLabel label = new JLabel(new ImageIcon(image));
        textField.add(label, BorderLayout.EAST);
        label.addMouseListener(new MouseAdapter() {
            @Override
            public void mouseClicked(MouseEvent e) {
                textField.setText("");
            }
        });
        frame.add(textField);
        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}