Frame layout laying me out.

[StaticX]

Hi, I am having a terrible time getting to grips with layout managers, and am hoping someone can shed some light onto my misery.My problem is this:

I have created a simple GUI, that contains a button panel, a picture panel and a radio button panel.All these panels are put into one Container called mainPanel,which has a BorderLayout and this is set as the content pane.

This is what I would like my panel to look like:

[IMG]http://img831.imageshack.us/img831/2415/examplea.jpg[/IMG]

Uploaded with ImageShack.us

The button panel and picture panel work fine, the problem arises with the radio buttons having their own panel, underneath the pictures.

When I try to set them to BorderLayout.SOUTH, it does not work(this area is already occupied by the button panel, but i thought maybe I could place it ontop of it.)

I also tried to have my picture panel as a borderLayout, and set the pictures in the center and radio panel in the south, but this too gets rid of the picute display.

Here is my code, and help is much appreciated.

import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.*;
import java.util.Random;


public class GUI extends JFrame implements ActionListener {

	private Container mainPanel;
	
	private JPanel buttonPanel;
	private JPanel picturePanel;
	private JPanel radioButtonPanel;
	
	
	private JButton showPicture;
	
	
	// Constructor for the GUI.
	GUI(){
		
		setTitle("Simple Picture Printout");
		setSize(649,480);
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
			
		mainPanel = createPane();
		
		setContentPane(mainPanel);
		
		setVisible(true);

	}
	
	
	
	private Container createPane() {
	
		Container contentPane = new Container();
		contentPane.setLayout(new BorderLayout());
		contentPane.setBackground(Color.BLUE);
		
		
		picturePanel = createPicturePanel();
		buttonPanel = createButtonPanel();
		radioButtonPanel = createRadioButtonPanel();
		
		
		contentPane.add(picturePanel, BorderLayout.CENTER);
		contentPane.add(buttonPanel, BorderLayout.SOUTH);
		
		
		
		// This does not work!
		contentPane.add(radioButtonPanel, BorderLayout.SOUTH);
	
		return contentPane;
	
	}
	
	

	
	public JPanel createButtonPanel() {
		
		// Create pane, set layout & color.
		JPanel pane = new JPanel();
		pane.setLayout(new FlowLayout(FlowLayout.CENTER));
		pane.setBackground(Color.BLUE);
		
		// Add descriptions to buttons.
		showPicture = new JButton("Show Pictures");
		
		// Add actionListener functionality to deal button.
		deal.addActionListener(this);
		
		// Add buttons to pane.
		pane.add(deal);
		
		// return pane into buttonPanel object.
		return pane;	
	}
	
	
	
	public JPanel createPicturePanel() {
	
		JPanel pane = new JPanel();
		pane.setLayout(new FlowLayout());
		pane.setBackground(Color.BLUE);

		return pane;
	}
	

	
	// Creates a radio button panel for choosing which picture you would like to keep.
	public JPanel createRadioButtonPanel() {
		JPanel pane = new JPanel();
		pane.setLayout(new FlowLayout());
		pane.setBackground(Color.BLUE);
		
		
		JRadioButton b1 = new JRadioButton();
		JRadioButton b2 = new JRadioButton();
		JRadioButton b3 = new JRadioButton();
		
		pane.add(b1);
		pane.add(b2);
		pane.add(b3);
		
		return pane;
	}
	
	
	

	// The actionPerformed method.
	public void actionPerformed(ActionEvent e){
	
	
		// Functionality of when showPicture button is pressed.
		if(e.getSource() == showPicture) {
		// Clear the card panel.
		clearPicturePanel();
		
		
		String pictureSource[] = new String[4]

		
		
		// This is the code for setting the card image to the panel
		// can probably be made shorter with an array and loop.
		
		String imgsrc1 = pictureSource[0];
		String imgsrc2 = pictureSource[1];
		String imgsrc3 = pictureSource[2];
		String imgsrc4 = pictureSource[3];
		
		ImageIcon picIcon1 = new ImageIcon(imgsrc1);
		ImageIcon picIcon2 = new ImageIcon(imgsrc2);
		ImageIcon picIcon3 = new ImageIcon(imgsrc3);
		ImageIcon picIcon4 = new ImageIcon(imgsrc4);
		
		
		// Add images to picturePanel
		picturePanel.add(new JLabel(picIcon1));
		picturePanel.add(new JLabel(picIcon2));
		picturePanel.add(new JLabel(picIcon3));
		picturePanel.add(new JLabel(picIcon4));


		// Add picture panel to mainPanel(the container).
		mainPanel.add(picturePanel);
		
		setContentPane(mainPanel);
		
		}
	}
	
	// Removes all picture images from the panel, so new deal can be shown.
	
	public void clearPicturePanel() {
		picturePanel.removeAll();
		
	}
	
}// end GUI.

[jon.kiparsky]

Layout's a bitch.
I'm not an expert, but try a GridLayout(0,1). This will give you - I think - one column and as many rows as needed. Might be (1,0) - check the API.

[martin5211]

It's viable to use several panels (could be three) and use e.g. setLocation(130,10) to change the position of the panels. Setting a different background with setBackground(Color.white) and setSize(width,height) could help too in the positioning.

[StaticX]

Thanks for the help guys, I have tried both methods and neither seemed to work(perhaps I was doing it wrong.)Is there a way to simply stack panels on top of each other?

[jon.kiparsky]

It takes a lot of expermentation to get layout to work right.
FlowLayout tries to add things left to right, until there's no more horizontal space, then it goes down a line (like a line of text). Maybe if you set your mainPanel's horizontal size to be only marginally larger than your largest panel, you might have better luck with that layout?

[Ezzaral]

BoxLayout, GridLayout, or GridBagLayout would all work.
http://download.oracle.com/javase/tutorial/uiswing/layout/index.html

[hanvyj]

I use GridBagLayout for everything - its seems the most versatile to me, but it involves me making loads of intermediate panels... I would put the pictues and radio buttons in their own panel (with no title/border), and add them in layouts like this:

http://img833.imageshack.us/img833/9647/layoutqh.png

Gridbag layout = gray, with the "intermediate" panels this is just splitting it in two, with the "base" panel/container this is splitting it into 4, with the bottom having a width of 1.

Panel = black, there are two "intermediate" panels here you wont be able to notice

Component/ImagePanel = blueish