0

I am a newbie to Java and GUI programming. I have the following question.

In my GUI, I have a JTextField with a JLabel which reads "Radius". Now I want to put an icon next to the JTextField with a question mark which on clicked explains in details what the JLabel means. For instance, in this case, it should pop up a message explaining "The radius of the circle to be drawn on the image". The message should disapper when the mouse is moved Below is a pictorial description of what I am trying to implement.

My question is very basic. I want to know which Swing Component can I use to implement this? I tried looking it up on the web but I did not know which component to look for. Any help and suggestions would be appreciated. enter image description here

camickr
  • 321,443
  • 19
  • 166
  • 288
Silver moon
  • 229
  • 3
  • 15
  • 2
    use a `JLabel` and set icon to it without any text also use a **ToolTip** for your text – Anchit Sep 11 '18 at 17:54
  • @Anchit Thank you. Can you please point me to a basic implementation? I am not sure I completely followed – Silver moon Sep 11 '18 at 17:55
  • 1
    [Here](https://docs.oracle.com/javase/tutorial/uiswing/components/label.html) is the detail of JLabel and [Here](https://www.java-examples.com/jlabel-set-tooltip-example) is the details of ToolTip. Also if you're using an IDE, it would be very easy for you. If this helps, I'll post the answer – Anchit Sep 11 '18 at 17:58
  • @Anchit Thank you. Yes, posting an answer might help others too, please do it if ok – Silver moon Sep 11 '18 at 17:59
  • 1
    `can I just place a question mark symbol?` - you could use the question mark icon from the JOptionPane. See [Option Pane Features](https://docs.oracle.com/javase/tutorial/uiswing/components/dialog.html#features). Then you will have a LAF icon be displayed. You can use the `UIManager.getIcon("OptionPane.questionIcon")` to get the Icon. Check out the [UIManager Defaults](https://tips4java.wordpress.com/2008/10/09/uimanager-defaults/) for other system Icons you might be able to use. – camickr Sep 11 '18 at 19:45

2 Answers2

3

You can do it very easily. All you need to do is just use a JLabel and place no text on it. Rather, place an image on it

This code let's you set the Image to the JLabel

import java.awt.FlowLayout;

import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;

public class AddingIconJLabel {
  public static void main(String[] args) {
    JFrame.setDefaultLookAndFeelDecorated(true);
    JFrame frame = new JFrame();
    frame.setTitle("JLabel Test");
    frame.setLayout(new FlowLayout());
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    ImageIcon imageIcon = new ImageIcon("yourFile.gif");
    JLabel label = new JLabel(imageIcon);

    frame.add(label);
    frame.pack();
    frame.setVisible(true);
  }
}

Secondly, Place the ToolTip on the JLabel to make your text appear on when you over on the Image

Here'e the helpful code hint for that

JLabel label = new JLabel("Username");
label.setToolTipText("Enter your username");
Anchit
  • 171
  • 1
  • 11
  • Another question: Instead of selecting an image from the computer, can I just place a question mark symbol? This maybe a foolish question but I want to know what this GUI will display if it doesn't find the image on some other computer? – Silver moon Sep 11 '18 at 18:08
  • 1
    You can use it but then as per GUI, you need to enhance it's view. I do prefer placing an image as it will be easy and fast If the image is not there in someone else's PC, you should place it in the directory of the Project. Then it would be easy for everyone's PC And do **NEVER** give your code to anyone. Generate JAR file and run it over the PC. It won't require anything extra – Anchit Sep 11 '18 at 18:10
1

I wonder why nobody suggested to use a Popup for this.

This is basically what is used "under the hood" of tool tips (and popup menus). The main advantage here is that you do not have take care about the layout, and (in contrast to standard tool tips) have full control over when it appears and when it disappears. So you can explicitly create the popup when the icon is clicked, and explicitly hide it when the mouse exits the icon:

Popup Example

Here is the code as a MCVE :

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Component;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.Point;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;

import javax.swing.BorderFactory;
import javax.swing.Icon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.Popup;
import javax.swing.PopupFactory;
import javax.swing.SwingUtilities;
import javax.swing.UIManager;

public class PopupExample
{
    public static void main(String[] args)
    {
        SwingUtilities.invokeLater(() -> createAndShowGui());
    }

    private static void createAndShowGui()
    {
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        JPanel p = new JPanel(new BorderLayout());
        p.add(new JLabel("Radius:"), BorderLayout.WEST);
        p.add(new JTextField(10), BorderLayout.CENTER);

        Icon icon = UIManager.getIcon("OptionPane.questionIcon");
        JLabel label = new JLabel(icon);

        addHelpPopup(label, "<html>"
            + "The help text. You can (but do <br>"
            + "not have to) use <i>HTML</i> here for <br>"
            + "<u>formatting</u>"
            + "</html>");

        p.add(label, BorderLayout.EAST);

        f.getContentPane().setLayout(new FlowLayout());
        f.getContentPane().add(p);

        f.add(label);
        f.setSize(400, 300);
        f.setLocationRelativeTo(null);
        f.setVisible(true);
    }


    private static void addHelpPopup(Component component, String text)
    {
        component.addMouseListener(new MouseAdapter()
        {
            private Popup popup;

            @Override
            public void mouseClicked(MouseEvent e)
            {
                if (popup != null)
                {
                    popup.hide();
                    popup = null;
                }
                PopupFactory popupFactory = PopupFactory.getSharedInstance();
                JLabel label = new JLabel(text);
                label.setOpaque(true);
                label.setBorder(BorderFactory.createCompoundBorder(
                    BorderFactory.createLineBorder(Color.BLACK),
                    BorderFactory.createEmptyBorder(5, 5, 5, 5)));
                Dimension dim = label.getPreferredSize();
                Point p = e.getLocationOnScreen();
                popup = popupFactory.getPopup(
                    component, label, p.x, p.y - dim.height);
                popup.show();
            }
            @Override
            public void mouseExited(MouseEvent e)
            {
                if (popup != null)
                {
                    popup.hide();
                    popup = null;
                }
            }
        });

    }

}
Marco13
  • 53,703
  • 9
  • 80
  • 159