JMU
GUI Layout
An Introduction with Examples in Java


Prof. David Bernstein
James Madison University

Computer Science Department
bernstdh@jmu.edu


GUI Layout
Absolute Layout

The "Graph Paper" Approach

images/layout_absolute1.gif
Absolute Layout in Java

The null LayoutManager java.awt.LayoutManager

javaexamples/layout/NullLayoutDriver.java
import java.awt.*;
import javax.swing.*;


/**
 * An example of absolute layout with the null layout manager
 *
 * @version 1.0
 * @author  Prof. David Bernstein, James Madison Univeristy
 */
public class NullLayoutDriver
{

    /**
     * The entry point of the example
     *
     * @param args   The command line arguments
     */
    public static void main(String[] args)
    {
        Container   contentPane;
        JButton     cancelButton, okButton;
        JFrame      frame;        
        JLabel      titleLabel;

        frame = new JFrame("A Really Amazing Window!");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
       
        contentPane = frame.getContentPane();
        contentPane.setLayout(null);

        titleLabel = new JLabel("An Example of Absolute Layout");
        contentPane.add(titleLabel);
        titleLabel.setBounds(60,20,290,30);

        okButton = new JButton("OK");
        contentPane.add(okButton);
        okButton.setBounds(190,210,60,30);

        cancelButton = new JButton("Cancel");
        contentPane.add(cancelButton);
        cancelButton.setBounds(260,210,90,30);

        
        frame.setSize(400,400);
        frame.setVisible(true);
    }
}
        
Relative Layout
Relative Layout in Java

Using FlowLayout java.awt.FlowLayout

javaexamples/layout/FlowLayoutDriver.java
import java.awt.*;
import javax.swing.*;


/**
 * An example of relative layout with the FlowLayout manager.
 *
 * @version 1.0
 * @author  Prof. David Bernstein, James Madison Univeristy
 */
public class FlowLayoutDriver
{

    /**
     * The entry point of the example
     *
     * @param args   The command line arguments
     */
    public static void main(String[] args)
    {
        Container   contentPane;
        JButton     cancelButton, okButton;
        JFrame      frame;
        JLabel      titleLabel;
        JTextArea   textArea;


        frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        
        contentPane = frame.getContentPane();


        contentPane.setLayout(new FlowLayout());

        titleLabel = new JLabel();
        titleLabel.setText("An Example of Relative Layout");
        contentPane.add(titleLabel);
        
        textArea = new JTextArea(40,20);
        contentPane.add(textArea);
        
        okButton = new JButton();
        okButton.setText("OK");
        contentPane.add(okButton);
        
        cancelButton = new JButton();
        cancelButton.setText("Cancel");
        contentPane.add(cancelButton);
        
        frame.setSize(400,400);
        frame.setVisible(true);
    }
}
        
Template Layout
Template Layout in Java (cont.)
Template Layout in Java

Using GridLayout java.awt.GridLayout

javaexamples/layout/GridLayoutDriver.java
import java.awt.*;
import javax.swing.*;

/**
 * An example of template layout with the GridLayout manager
 *
 * @version 1.0
 * @author  Prof. David Bernstein, James Madison Univeristy
 */
public class GridLayoutDriver
{

    /**
     * The entry point of the example
     *
     * @param args   The command line arguments
     */
    public static void main(String[] args)
    {
        Container   contentPane;
        JButton     cancelButton, okButton;
        JFrame      frame;
        JLabel      titleLabel;
        JTextArea   textArea;


        frame = new JFrame();

        contentPane = frame.getContentPane();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        contentPane.setLayout(new GridLayout(2,2));

        titleLabel = new JLabel();
        titleLabel.setText("An Example of Template Layout");
        contentPane.add(titleLabel);
        
        textArea = new JTextArea(40,20);
        contentPane.add(textArea);
        
        okButton = new JButton();
        okButton.setText("OK");
        contentPane.add(okButton);
        
        cancelButton = new JButton();
        cancelButton.setText("Cancel");
        contentPane.add(cancelButton);
        
        frame.setSize(400,400);
        frame.setVisible(true);
    }
}
        
Template Layout in Java (cont.)
Template Layout in Java (cont.)

Using BoxLayout javax.swing.BoxLayout

javaexamples/layout/BoxLayoutDriver.java
import java.awt.*;
import javax.swing.*;

/**
 * An example of template layout with the BoxLayout manager
 *
 * @version 1.0
 * @author  Prof. David Bernstein, James Madison Univeristy
 */
public class BoxLayoutDriver
{

    /**
     * The entry point of the example
     *
     * @param args   The command line arguments
     */
    public static void main(String[] args)
    {
        Container contentPane;
        JButton cancelButton, okButton;
        JLabel textLabel, titleLabel;
        JFrame frame;


        frame = new JFrame("An Example of BoxLayout");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        
        contentPane = frame.getContentPane();
 

        contentPane.setLayout(new BoxLayout(contentPane, 
                                           BoxLayout.X_AXIS));

        titleLabel = new JLabel();
        titleLabel.setText("An Example of Template Layout");
        contentPane.add(titleLabel);
        
        contentPane.add(Box.createHorizontalStrut(20));
        
        textLabel = new JLabel("Another Label");
        contentPane.add(textLabel);
        
        okButton = new JButton();
        okButton.setText("OK");
        contentPane.add(okButton);
        
        cancelButton = new JButton();
        cancelButton.setText("Cancel");
        contentPane.add(cancelButton);
        
        contentPane.add(Box.createHorizontalGlue());

        
        frame.setSize(600,400);
        frame.setVisible(true);
    }
}
        
Template Layout in Java (cont.)

Using BorderLayout java.awt.BorderLayout

images/borderlayout.gif
Template Layout in Java (cont.)

A BorderLayout java.awt.BorderLayout Example

javaexamples/layout/BorderLayoutDriver.java
import java.awt.*;
import javax.swing.*;


/**
 * An example of template layout with the BorderLayout manager
 *
 * @version 1.0
 * @author  Prof. David Bernstein, James Madison Univeristy
 */
public class BorderLayoutDriver
{

    /**
     * The entry point of the example
     *
     * @param args   The command line arguments
     */
    public static void main(String[] args)
    {
        Container   contentPane;
        JButton     cancelButton, okButton;
        JLabel      titleLabel;
        JTextArea   textArea;
        JFrame      frame;


        frame = new JFrame("Using BorderLayout");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        contentPane = frame.getContentPane();
        contentPane.setLayout(new BorderLayout());

        titleLabel = new JLabel();
        titleLabel.setText("An Example of Template Layout");
        contentPane.add(titleLabel, BorderLayout.NORTH);
        
        textArea = new JTextArea(40,20);
        contentPane.add(textArea, BorderLayout.CENTER);
        
        okButton = new JButton();
        okButton.setText("OK");
        contentPane.add(okButton, BorderLayout.SOUTH);
        
        cancelButton = new JButton();
        cancelButton.setText("Cancel");
        contentPane.add(cancelButton, BorderLayout.EAST);
        
        frame.setSize(400,400);
        frame.setVisible(true);
    }
}