views:

533

answers:

5

I am using miglayout to create a form in which there are JTextFields (short input answers) as well as JTextAreas (Longer answers). The problem is twofold.

  1. The border placed around a Scrollpane wrapped text area does not match that of a Text Field.
  2. The width and placement of the textarea/textfield differ, causing them not to line up correctly.

alt text

After changing from right/left to right/fill: alt text You can see that the bounds line up, but that there are still gaps. I tried setting novisualpadding but this did not fix it.

Source code:

package test2;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
import javax.swing.JTextField;
import net.miginfocom.swing.MigLayout;

public class Test extends JPanel {

private static final int NUM_CHARACTERS_WIDTH = 20;
private static final int NUM_ROWS = 5;
public Test() {

    setLayout(new MigLayout(
            "wrap 2",
            // Align text labels on the so their right edge meets left edge of the text fields
            "[right][left]"
            ));

    add(new JLabel("Text field:"));
    add(new JTextField(NUM_CHARACTERS_WIDTH));

    add(new JLabel("No scrollpane text area:"));
    add(new JTextArea(NUM_ROWS, NUM_CHARACTERS_WIDTH));

    add(new JLabel("Scrollpane text area:"));
    add(new JScrollPane(new JTextArea(NUM_ROWS, NUM_CHARACTERS_WIDTH)));

    add(new JLabel("Text field:"));
    add(new JTextField(NUM_CHARACTERS_WIDTH));

}


public static void main(String[] args) {
    JFrame frame = new JFrame("");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    JPanel panel = new Test();
    frame.add(panel);
    frame.pack();
    frame.setVisible(true);
}

}

What's the preferred way to mix and match jtextfield and jtextareas, while still maintaining visual harmony? I notice now that the text field has a blue highlight around it when focus is in it, as opposed to the text area... another source of visual discontinuity.

+1  A: 

Not sure how you can fix your border problem but to fix your layout situation I would just use springlayout. Springlayout is just a way to better layout your elements within the JPanel. You can find out more about it Java Sun Tutorial

Specifically you use it by setting where you want your North, South, West and East borders of each element. To do this you would have to first take your label calls out of the add so each one can be named. So instead of:

add(new JLabel("Text field:"));

Do:

JLabel myLabelName = new JLabel("Text field:");
add(myLabelName);

For each of your elements (JLabels, JTextAreas and JTextField). Once this is done you can easily set the layout.

Springlayout layout = new SpringLayout();
setLayout(layout);

Then for each of the elements you have to set any of the borders you want. They have to be in the specific order South, the North, West then East. Though you don't have to use all four borders if you don't want to. Here is an example on how to set your first text area, the one on the top.

layout.putConstraint(SpringLayout.NORTH, FirstTextAreaName, 10, SpringLayout.NORTH, this);
layout.putConstraint(SpringLayout.WEST, FirstTextAreaName, this.getWidth()/2, SpringLayout.WEST, this);
layout.putConstraint(SpringLayout.EAST, FirstTextAreaName, -10, SpringLayout.EAST, this);

This example doesn't set the south of the text area but if you did want to it would have to be first. The first line sets the north side of the text area to be 10 pixels away from the top. When setting the other areas you but the previous (above) areas name instead of this and say it is 10 pixels away from the south of the previous one:

layout.putConstraint(SpringLayout.NORTH, SecondTextAreaName, 10, SpringLayout.SOUTH, FirstTextAreaName);

The second line in the above example sets the east side of the text area to start halfway through your main panel. The last, third, line sets the east side of the text area to be 10 pixels from the east side of your main panel.

Kyra
+2  A: 

For the layout problem, try a columnConstraints value of [right][fill] instead of [right][left].

For the other issue, this appears to be a look-and-feel inconsistency. I ran your code in Windows, and the differences are there too, but less flagrant. My suggestion would be to set identifical borders explicitly for text fields and text areas.

setLayout(new MigLayout(
        "wrap 2",
        "[right][fill]"
        ));

JTextField textField;
JScrollPane scrollPane;

add(new JLabel("Text field:"));
textField = new JTextField(NUM_CHARACTERS_WIDTH);
textField.setBorder( new EtchedBorder( EtchedBorder.LOWERED ) );
add(textField);

add(new JLabel("No scrollpane text area:"));
add(new JTextArea(NUM_ROWS, NUM_CHARACTERS_WIDTH));

add(new JLabel("Scrollpane text area:"));
scrollPane = new JScrollPane(new JTextArea(NUM_ROWS, NUM_CHARACTERS_WIDTH));
scrollPane.setBorder( new EtchedBorder( EtchedBorder.LOWERED ) );
add(scrollPane);

add(new JLabel("Text field:"));
textField = new JTextField(NUM_CHARACTERS_WIDTH);
textField.setBorder( new EtchedBorder( EtchedBorder.LOWERED ) );
add(textField);

Identicial borders

If you can't get MigLayout to align your components, considering using java.awt.GridBagLayout:

import static java.awt.GridBagConstraints.*;

setLayout( new GridBagLayout() );

GridBagConstraints leftCons = new GridBagConstraints();
leftCons.anchor = NORTHEAST;
leftCons.fill = NONE;
leftCons.weightx = 1.0;
leftCons.gridy = RELATIVE;
leftCons.gridx = 0;
leftCons.insets = new Insets( 4, 8, 4, 8 );

GridBagConstraints rightCons = new GridBagConstraints();
rightCons.anchor = NORTHWEST;
rightCons.fill = HORIZONTAL;
rightCons.weightx = 1.0;
rightCons.gridy = RELATIVE;
rightCons.gridx = 1;
rightCons.insets = leftCons.insets;

add(new JLabel("Text field:"), leftCons);
add(new JTextField(NUM_CHARACTERS_WIDTH), rightCons);

add(new JLabel("No scrollpane text area:"), leftCons);
add(new JTextArea(NUM_ROWS, NUM_CHARACTERS_WIDTH), rightCons);

add(new JLabel("Scrollpane text area:"), leftCons);
add(new JScrollPane(new JTextArea(NUM_ROWS, NUM_CHARACTERS_WIDTH)), rightCons);

add(new JLabel("Text field:"), leftCons);
add(new JTextField(NUM_CHARACTERS_WIDTH), rightCons);
Noel Ang
The [fill] helps. However, the size still isn't perfect on Mac OSX: http://grab.by/3O9U
I82Much
Perhaps a more adaptable alternative is to adopt the preferred border of one component type and apply it to the other; e.g., textField.setBorder(scrollPane.getBorder()).
Noel Ang
Consider giving java.awt.GridBagLayout a try. See my amended answer for more code.
Noel Ang
+2  A: 

I know that MiGLAyout (which I love, BTW) has the ability to do special handling for visual alignment vs strict pixel alignment. You may be running into this... The 'al' unit identifier is used for this, but I haven't had to use it so can't provide examples. It would probably be worth downloading the MiG sample project and see if they have the same alignment issue (I'm sure they have panels similar to yours).

For what it's worth, we mix text fields and areas in the same panel quite frequently and don't run into this... We do have to set the border of the scroll pane to be the same as the border of the text field as suggested by Noel Ang.

Also, instead of specifying constraints in the layout constructor, we generally specify them as we add each component - not sure if that makes a difference or not...

Kevin Day
A: 

First off +1 for screen shots. Since you are using Mac, did you try Quaqua Look And Feel? It renders the textboxes/areas properly.

ring bearer
A: 

The answer is that MiG Layout folks are working on a fix for their next version.

Hello,

Apple has a nasty habbit of compensating by default and not let the developer decide. This is such a case where they have added a border to make it more visually like OS X. This should be the choice of the layout manager...

MigLayout can compensate for visual bounds like this but it is only done for JTabbedPane in Windows XP. I'm not sure it can be done 100% good in OS X though. I'll have to check. We don't want the text field to just grow into the bounds.

I have added this to the todo list for the next version.

I82Much