How to mix JTextField and JTextAreas and have the same look?

Question

I use miglayout to create a form that has JTextFields (short input responses) as well as JTextAreas (longer answers). The problem is twofold.

• The border around the Scrollpane scroll wrapper does not match the border of the text box.
• The width and location of the text field / text field are different, as a result of which they do not align correctly.

alt text http://grab.by/3O0V

After changing from right / left to right / filling: alt text http://grab.by/3RMk You can see that the borders are aligned, but there are still spaces. I tried to establish novelty, but this does not fix it.

Source:

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 is the preferred way to combine and match jtextfield and jtextareas while maintaining visual harmony? Now I notice that the text box has a blue highlight around it when the focus in it, unlike the text area ... is another source of visual break.

Answer 1

The answer is that the MiG layout people are working on a fix for their next version .

Hello,

Apple has an unpleasant habit of compensating by default and does not allow the developer to decide. This is the case when they added a border to make it more visually similar to OS X. This should be the choice of the layout manager ...

MigLayout can compensate for visual boundaries like this, but this is only done for JTabbedPane in Windows XP. I'm not sure if this can be done 100% well in OS X, though. I have to check. We don’t want the text box to just go over the border.

I added this to my task list for the next version.

Answer 2

I know this question is pretty old, but to get the border for TextArea to match the value of the TextField :

 (myTextArea).setBorder(new TextField().getBorder()); 

This should give a border to your TextArea , like a TextField .

Answer 3

Not sure how you can fix the border problem, but to fix the layout, I would just use springlayout. Springlayout is just a way to improve the layout of your elements inside a JPanel. You can learn more about this Java Sun Tutorial.

In particular, you use it by setting where you want your northern, southern, western and eastern borders of each element. To do this, you will need to first remove your tags from the append, so that each of them can be named. Therefore, instead of:

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

do:

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

For each of your items (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 must set any required border. They should be in a certain order South, North, West, then East. Although you do not need to use all four borders if you do not want to. The following is an example of setting up the first text area located on 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 does not set the south of the text area, but if you want it, this should be the first. The first line sets the north side of the text area 10 pixels from the top. When you set other areas besides the name of the previous (above) area, instead, and say that it is 10 pixels from the south of the previous one:

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

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

Answer 4

To solve the layout problem, try columnConstraints [right][fill] instead of [right][left] .

As for the other problem, it looks like a mismatch in appearance. I ran your code on Windows, and there are differences too, but less glaring. My suggestion would be to set explicit boundaries 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); 

If you can't get MigLayout to align your components, consider 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); 

Answer 5

I know that MiGLAyout (which I like, BTW) has the ability to perform special processing for visual alignment compared to strict pixel alignment. You may encounter this ... The unit identifier "al" is used for this, but I should not have used it, so I cannot provide examples. It’s probably worth downloading a sample MiG project and see if they have the same alignment problem (I'm sure they have panels similar to yours).

For what it's worth, we often mix text fields and areas in one panel and don’t encounter this ... We do need to set the border of the scroll area as well as the borders of the text field, as suggested by Noel Ang.

In addition, instead of specifying constraints in the layout constructor, we usually specify them when adding each component - I'm not sure if it matters or not ...

Answer 6

First, +1 for screenshots. Since you are using a Mac, have you tried Quaqua Look And Feel? It correctly displays text fields / areas.