在文本字段旁边添加文本以描述用户期望输入的数据

Question

I am trying to create a simple GUI that simulates a record store. I am still in the beginning stages.

I am running into trouble when I try to add text to describe what the user is expected to enter in the text field.

In addition, I am also having trouble positioning every textfield on its own line. In other words if there is space for two textfields in one line, then it displays in one line, and I am trying to display every text field on its own line.

This is what I tried so far:

item2 = new JTextField("sample text");

However the code above just adds default text within the text field, which is not what I need :/

I appreciate all the help in advance.

public class MyClass extends JFrame{
        private JTextField item1;
        private JTextField item2;

        public MyClass(){
            super("Matt's World of Music");
            setLayout(new FlowLayout());

            item1 = new JTextField();
            item2 = new JTextField();

            add(item1);
            add(item2);

            thehandler handler = new thehandler();

            item1.addActionListener(handler);
            item2.addActionListener(handler);   

        }

    }

Answer 1

For your first problem, you need to use a JLabel to display your text. The constructor is like this:

JLabel label = new JLabel("Your text here");

Works really well in GUI.

As for getting things on their own lines, I recommend a GridLayout. Easy to use.

In your constructor, before adding anything, you do:

setLayout(new GridLayout(rows,columns,x_spacing,y_spacing));

x_spacing and y_spacing are both integers that determine the space between elements horizontally and vertically.

Then add like you have done. Fiddle around with it and you'll get it worked out.

So your final would look like:

setLayout(new GridLayout(2,2,10,10));
add(new JLabel("Text 1"));
add(text1);
add(new JLabel("text 2"));
add(text2);

Answer 2

You could just use a JLabel to label your textfields.

    JLabel label1 = new JLabel("Item 1: ");
    add(label1);
    add(item1);

If you really want text inside the fields, you could set the text in the field with the constructor, and then add a MouseListener to clear the text on click:

    item1 = new JTextField("Text");
    item1.addMouseListener(new MouseAdapter() {
        public void mouseClicked(MouseEvent e) {
            if (item1.getText().equals("Text")) // User has not entered text yet
                item1.setText("");
        }
    });

Or, (probably better) use a FocusListener:

    item1 = new JTextField("Text");
    item1.addFocusListener(new FocusListener() {
        public void focusGained(FocusEvent e) {
            if (item1.getText().equals("Text")) // User has not entered text yet
                item1.setText("");
        }
        public void focusLost(FocusEvent e) {
            if (item1.getText().equals("")) // User did not enter text
                item1.setText("Text");
        }
    });

As for layout, to force a separate line, you use use a Box .

    Box itemBox = Box.createVerticalBox();
    itemBox.add(item1);
    itemBox.add(item2);
    add(itemBox);

Answer 3

Make:

item1 = new JTextField(10);
item2 = new JTextField(10);

that should solve problem with width of JTextField. For beginning use GridLayout to display JTextField in one line. After that I strongly recomend using of MIG Layout http://www.migcalendar.com/miglayout/whitepaper.html .

put JLabel next to JTextField to describe what the user is expected to enter in the text field.

JLabel lbl = new JLabel("Description");

or you could also consider using of toolTipText:

item1.setToolTipText("This is description");

Answer 4

For making a form in Java Swing, I always recommend the FormLayout of JGoodies, which is designed to ... create forms. The links contains an example code snippet, which I just copy-pasted here to illustrate how easy it is:

public JComponent buildContent() {
    FormLayout layout = new FormLayout(
            "$label, $label-component-gap, [100dlu, pref]",
            "p, $lg, p, $lg, p");

    PanelBuilder builder = new PanelBuilder(layout);
    builder.addLabel("&Title:",  CC.xy(1, 1));
    builder.add(titleField,      CC.xy(3, 1));
    builder.addLabel("&Author:", CC.xy(1, 3));
    builder.add(auhtorField,     CC.xy(3, 3));
    builder.addLabel("&Price:",  CC.xy(1, 5));
    builder.add(priceField,      CC.xy(3, 5));
    return builder.getPanel();
}

Now for the description:

• Use a label in front of the textfield to give a very short description
• You can put a longer description in the textfield as suggested by @Alden. However, if the textfield is for short input, nobody will be able to read the description
• You can use a tooltip ( JComponent#setTooltipText ) to put a longer description. Those tooltips also accept basic html which allows some formatting. Drawback of the tooltips is that the user of your application has to 'discover' that feature as there is no clear indication those are available
• You can put a "help-icon" (like eg a question mark) after each text field (use a JButton with only an icon) where on click you show a dialog with a description (eg by using the JOptionPane class)
• You can put one "help-icon" on each form which shows a dialog with a description for all fields.

Note for the dialog suggestion: I wouldn't make it a model one, allowing users to open the dialog and leave it open until they are finished filling in the form