Placing canvas using layout

Question

I'm trying to put two canvas elements, so that each half of the screen occupied by. But when I use the FlowLayout both canvas placed in the center, on each other.

I have the following result:

I want to get as in the following picture:

My code:

public class SigForApplication extends Frame{

public SigForApplication(String title) {
    commonInit(title);
    sigInit();
}

public static void main(String[] args) {
    SigForApplication a = new SigForApplication("SigFor");

}

private void commonInit(String title) {
    this.setTitle(title);
    this.setLayout(new FlowLayout());
    this.setSize(800, 400);
    this.setVisible(true);
    this.addWindowListener(
            new WindowAdapter() {
        @Override
        public void windowClosing(WindowEvent e) {
            dispose();
            System.exit(0);
        }
    });
}

private void sigInit() {

    SignatureCanvasInput sigCanvasIn = new SignatureCanvasInput();
    sigCanvasIn.setSize(new Dimension(400, 200));
    this.add(sigCanvasIn);

    SignatureCanvasInput sigCanvasOutput = new SignatureCanvasInput();
    sigCanvasOutput.setMaximumSize(new Dimension(400, 200));
    this.add(sigCanvasOutput);

}
}

Answer 1

Use a GridLayoutfor this, with just two components in a single row. The components in a grid layout are assigned equal size.

See also the Laying Out Components Within a Container lesson of the tutorial, and as camickr suggested, particularly the Visual Guide to Layout Managers.