Java Swing JTextArea not displaying correctly

Question

I am trying to use Java Swing to create a simple GUI in which I have a drawing pad and some buttons it all works fine until I add this code for the JTextField:

String text = "hello";
JTextArea textArea = new JTextArea(text);
textArea.setPreferredSize(new Dimension(500, 50));
textArea.setEditable(false);

Before adding this code the drawpad displays on the left of the screen followed by the buttons, when I add this only the drawpad is displayed unless I resize the frame in which case the buttons and text field reappear although the text field is hidden behind the drawpad slightly. Here is the full code:

    public class testGUI extends Frame{
    public static void main(String[] args) {
        JFrame frame = new JFrame("Neural Networks");
        frame.setSize(700, 300); //set the size of the frame
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
        frame.setVisible(true);  //make it visible

        Container content = frame.getContentPane();
        content.setLayout(new BorderLayout());
        JPanel mainPanel = new JPanel();

        final PadDraw drawPad = new PadDraw();
        drawPad.setSize(100, 100);
        content.add(drawPad);

        JButton clearButton = new JButton("Clear");
        clearButton.addActionListener(new ActionListener(){
            public void actionPerformed(ActionEvent e){
                drawPad.clear();
            }
        });

        JButton loadButton = new JButton("Load");
        loadButton.addActionListener(new ActionListener(){
            public void actionPerformed(ActionEvent e){
                //Load something here
            }
        });


        JButton testButton = new JButton("Test Draw Pad Image");
        testButton.addActionListener(new ActionListener(){
            public void actionPerformed(ActionEvent e){
                //

            }
        });

        JButton loadImage = new JButton("Test image from file");
        loadImage.addActionListener(new ActionListener(){
            public void actionPerformed(ActionEvent e){
                //String filename = textField.getText();
            }
        });

        String text = "hello";
        JTextArea textArea = new JTextArea(text);
        textArea.setPreferredSize(new Dimension(500, 50));
        textArea.setEditable(false);

        mainPanel.add(clearButton);
        mainPanel.add(loadButton);
        mainPanel.add(testButton);
        mainPanel.add(loadImage);
        mainPanel.add(textArea);
        content.add(mainPanel);

    }
}

Answer 1

JPanel mainPanel = new JPanel();

The default layout for a JPanel is a FlowLayout, so all the components flow on a single row. If there is not enough room on the row then the components wrap to the next row.

So when you add the JTextArea the flow is disturbed. The solution is to use a combination of layout managers to get your desired layout effect. Read the section from the Swing tutorial on Using Layout Managers for more information and examples.

JTextArea textArea = new JTextArea(text);
textArea.setPreferredSize(new Dimension(500, 50));

Also, you should NOT set the preferred size of the text area (or any Swing component for that matter). Instead you should do something like:

JTextArea textArea = new JTextArea(rows, columns);

and let the component determine its own preferred size. Also a text area is typically used with a JScrollPane and then you add the scroll pane to your panel:

JScrollPane scrollPane = new JScrollPane( textArea );

Edit:

Taking a second look at your code you have many more problems.

The point of using a layout manager is to have the layout manager set the size and location of the components. So your code should not have any logic related to the size/location of a component.

When you use the add(...) statement on a BorderLayout without a constraint, the component gets added to the CENTER. However only the last component added is managed by the BorderLayout. So only the "mainPanel" is given a size/location by the layout manager. That is why you need the setSize(...) statement on the drawPad to make the component visible. Although you now have the problem that two components are painted in the same space.

So to see the drawPad on the left you might want to use:

content.add(drawPad.BorderLayout.LINE_START);

However this still probably won't work because I'm guessing you are doing custom painting on the draw pad which means you will also need to override the getPreferredSize() method of the class so the layout manager can use the information to determine the size of the component. Read the section from the Swing tutorial on Custom Painting for more information and working examples.

Finally some other issues:.

1. The setVisible(...) statement should be invoked AFTER all the components have been added to the frame.

2. To follow Java standards, class names should start with an upper case character.

3. You should NOT be extending "Frame". There is no need to extend any class in your example.

Read the tutorial and download the demos for examples of better structured code.

Answer 2

You're adding the drawPad and the mainPanel to the content panel, which uses BorderLayout, without specifying any location. They thus end up both in the center position of the border layout, which is supposed to contain only one component.

See How to use BorderLayout in the Swing tutorial.

Also note that setting the preferred size is not something you should do. Instead, the preferred size is supposed to be automatically computed based on other sttings (the contained components, the number of rows and columns of a text area, etc.)

And a JTextArea should be enclosed into a JScrollPane to be good-looking and allow you to scroll.