Java GUI: Display Area and 8 buttons

Question

I would like to have a display area and 8 buttons. Each Button Will display different text in the display Area.

Currently I just have the Display Area, but When I try to add A button the button overlaps the Display area. So how can I have a display area and 8 buttons.

JPanel middlePanel = new JPanel ();
middlePanel.setBorder ( new TitledBorder ( new EtchedBorder (), "Display Area" ) );

// create the middle panel components

JTextArea display = new JTextArea ( 16, 58 );
display.setEditable ( false ); // set textArea non-editable
JScrollPane scroll = new JScrollPane ( display );
scroll.setVerticalScrollBarPolicy ( ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS );

//Add Textarea in to middle panel
middlePanel.add ( scroll );

// My code
JFrame frame = new JFrame ();
JFrame btn  = new JFrame();
frame.add ( middlePanel );
frame.pack ();
frame.setLocationRelativeTo ( null );

JButton one = new JButton("1");
JPanel panel = new JPanel();
panel.add(one);
//btn.getContentPane().add(BorderLayout.CENTER,panel);
btn.setVisible(true);
frame.setVisible ( true );

Answer 1

Use two containers, one for the text area and one for the buttons, each with their own layout managers...

JPanel middlePanel = new JPanel (new BorderLayout());
middlePanel.setBorder ( new TitledBorder ( new EtchedBorder (), "Display Area" ) );

JTextArea display = new JTextArea ( 16, 58 );
display.setEditable ( false ); // set textArea non-editable
JScrollPane scroll = new JScrollPane ( display );
scroll.setVerticalScrollBarPolicy ( ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS );

middlePanel.add ( scroll );

JPanel buttonPane = new JPanel(); // FlowLayout by default...
buttonPane.add(...); // Add your buttons here...

JFrame frame = new JFrame ();
frame.add ( middlePanel );
frame.add(buttonPane, BorderLayout.SOUTH);
frame.pack ();
frame.setLocationRelativeTo ( null );
frame.setVisible(true);

This is commonly known as compound layouts ;)

Answer 2

JPanel middlePanel = new JPanel ();
    middlePanel.setBorder ( new TitledBorder ( new EtchedBorder (), "Display Area" ) );

    // create the middle panel components

    JTextArea display = new JTextArea ( 16, 58 );
    display.setEditable ( false ); // set textArea non-editable
    JScrollPane scroll = new JScrollPane ( display );
    scroll.setVerticalScrollBarPolicy ( ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS );

    //Add Textarea in to middle panel
    middlePanel.add ( scroll );
    JPanel buttonPane = new JPanel(); // FlowLayout by default...
    buttonPane.add(new JButton("1")); // Add your buttons here...
    buttonPane.add(new JButton("2"));
    buttonPane.add(new JButton("3"));
    buttonPane.add(new JButton("4"));
    // My code
    JFrame frame = new JFrame ();
    JFrame btn  = new JFrame();
    frame.add ( middlePanel );
    frame.add(buttonPane,BorderLayout.SOUTH);
    frame.pack ();
    frame.setLocationRelativeTo ( null );


    //btn.getContentPane().add(BorderLayout.CENTER,panel);
    btn.setVisible(true);
    frame.setVisible ( true );