Click on the icon in the JTextField and clear its contents.

Question

I am trying to create a JTextField with an image and a tooltip. A text field function is a search field for searching for some books. Now I like to go a little further. I would like to give the image a function. For example, if I click on an image, the text in the text box should be cleared.

To achieve this implementation, I created a new class and extended it using 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 here I create the fields;

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

Now back to my question. Do you know how I can give an image a function where the text will be automatically cleared? I tried to implement MouseListener and set the text "txtSearchBooks" to zero, but it did not work.

I hope I didn’t go in the wrong direction.

Sorry for the long post, but I am very grateful for the advice.

Answer 1

A JTextField is a JComponent , which means that 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 will not show its added components unless you provide it with a LayoutManager . Then it behaves like a normal JPanel .

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

Please note that you do not need to create an Image object from scratch, just like me, you can load it from a file. I create it so that this example does not 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); } }