Title: GUI Textbook layoutManagers
Course: CPS 261: Advanced Java Concepts ~ DL & MM MASTER

GUI Textbook LayoutManager examples

The examples in this set of notes come from chapter 17 in the textbook. I have pre-loaded his examples into Eclipse and I have changed many of the JLabel classes to JButton because I think it is easier to see the point that the author is making. I have the actual code I am using at the end of these notes.

Key concept: Layout manager approaches

- FlowLayout
- GridLayout
- BorderLayout
- Combinations of the above using JPanel

1. FlowLayoutJFrame, FlowLayoutDemo (I changed the JLabels to JButtons)
  - Using FlowLayout
  - I have demo'ed this before, but if you resize the window you can see the FlowLayout class strategy in action.
2. GridLayoutJFrame -(I changed the JLabels to JButtons) Resize to see what happens.
  - Using GridLayout
  - In this example we are seeing a GridLayout that has 2 rows and 3 columns.
  - Note that we only have 5 buttons and the last cell is empty.
  - Every cell is evenly resized as we expand or contract the window.
3. BorderLayoutJFrame, BorderLayoutDemo -(I changed the JLabels to JButtons)
  - Using BorderLayout
  - Note that we have 3 regions to start with : North, Center, South
  - As you expand this window note that North and South only expand as far as they need to do display properly. Center on the other hand absorbs any extra space available
  - BorderLayouts are good when we have a main panel in the center and we want to have "tool bars" outside the main pane
  - In BorderLayoutJFrame, remove the comments to add the East and West sides for BorderLayout.
4. PanelDemo -
  - Note that we can create layers of layout managers
  - At the top level, PanelDemo uses a BorderLayout.
  - In this example, we are introducing the JPanel class. JPanel has both Component and Container properties.
  - In the Center region, we add a JPanel which because it is also a Container has a LayoutManager needed and we use GridLayout for 3 panes (red, white and blue)
  - In the South region, we add a JPanel which uses a FlowLayout. This JPanel then gets 3 buttons added to it.
  - Each of the 3 buttons is connected to an ActionListener class (this).
  - PanelDemo.java

FlowLayoutJFrame


import javax.swing.JFrame;
import javax.swing.JButton;
import java.awt.FlowLayout;

public class FlowLayoutJFrame extends JFrame
{
    public static final int WIDTH = 500;
    public static final int HEIGHT = 400;

    public FlowLayoutJFrame( )
    {
        super( );
        setSize(WIDTH, HEIGHT);
        setTitle("Layout Demonstration");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        setLayout(new FlowLayout( ));

        JButton button1 = new JButton("First button");
        add(button1);

        JButton button2 = new JButton("Second button");
        add(button2);

        JButton button3 = new JButton("Third button");
        add(button3);
    }
}



FlowLayoutDemo


public class FlowLayoutDemo
{
    public static void main(String[] args)
    {
        FlowLayoutJFrame gui = new FlowLayoutJFrame();
        gui.setVisible(true);
    }
}



GridLayoutJFrame


import javax.swing.JFrame;
import javax.swing.JButton;
import java.awt.GridLayout;

public class GridLayoutJFrame extends JFrame
{
    public static final int WIDTH = 500;
    public static final int HEIGHT = 400;

    public static void main(String[] args)
    {
        GridLayoutJFrame gui = new GridLayoutJFrame(2, 3);
        gui.setVisible(true);
    }

    public GridLayoutJFrame(int rows, int columns )
    {
        super( );
        setSize(WIDTH, HEIGHT);
        setTitle("GridLayout Demonstration");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        setLayout(new GridLayout(rows, columns ));

        JButton button1 = new JButton("First button");
        add(button1);

        JButton button2 = new JButton("Second button");
        add(button2);

        JButton button3 = new JButton("Third button");
        add(button3);

        JButton button4 = new JButton("Fourth button");
        add(button4);

        JButton button5 = new JButton("Fifth button");
        add(button5);
    }
}




BorderLayoutJFrame


import javax.swing.JFrame;
import javax.swing.JButton;
import java.awt.BorderLayout;

public class BorderLayoutJFrame extends JFrame
{
    public static final int WIDTH = 500;
    public static final int HEIGHT = 400;

    public BorderLayoutJFrame( )
    {
        super("BorderLayout Demonstration" );
        setSize(WIDTH, HEIGHT);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        setLayout(new BorderLayout( ));

        JButton button1 = new JButton("First button");
        add(button1, BorderLayout.NORTH);

        JButton button2 = new JButton("Second button");
        add(button2, BorderLayout.SOUTH);

        JButton button3 = new JButton("Third button");
        add(button3, BorderLayout.CENTER);

        /*
        JButton button4 = new JButton("Fourth button");
        add(button4, BorderLayout.EAST);

        JButton button5 = new JButton("Fifth button");
        add(button5, BorderLayout.WEST);
        */
    }
}





BorderLayoutDemo


public class BorderLayoutDemo
{
    public static void main(String[] args)
    {
        BorderLayoutJFrame gui = new BorderLayoutJFrame( );
        gui.setVisible(true);
    }
}


PanelDemo


import javax.swing.JFrame;
import javax.swing.JPanel;
import java.awt.BorderLayout;
import java.awt.GridLayout;
import java.awt.FlowLayout;
import java.awt.Color;
import javax.swing.JButton;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;

public class PanelDemo extends JFrame implements ActionListener
{
    public static final int WIDTH = 300;
    public static final int HEIGHT = 200;

    private JPanel redPanel;
    private JPanel whitePanel;
    private JPanel bluePanel;

    public static void main(String[] args)
    {
        PanelDemo gui = new PanelDemo( );
        gui.setVisible(true);
    }

    public PanelDemo( )
    {
        super("Panel Demonstration");
        setSize(WIDTH, HEIGHT);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLayout(new BorderLayout( ));

        JPanel biggerPanel = new JPanel( );
        biggerPanel.setLayout(new GridLayout(1, 3));

        redPanel = new JPanel( );
        redPanel.setBackground(Color.LIGHT_GRAY);
        biggerPanel.add(redPanel);

        whitePanel = new JPanel( );
        whitePanel.setBackground(Color.LIGHT_GRAY);
        biggerPanel.add(whitePanel);

        bluePanel = new JPanel( );
        bluePanel.setBackground(Color.LIGHT_GRAY);
        biggerPanel.add(bluePanel);

        add(biggerPanel, BorderLayout.CENTER);

        JPanel buttonPanel = new JPanel( );
        buttonPanel.setBackground(Color.LIGHT_GRAY);
        buttonPanel.setLayout(new FlowLayout( ));

        JButton redButton = new JButton("Red");
        redButton.setBackground(Color.RED);
        redButton.addActionListener(this);
        buttonPanel.add(redButton);

        JButton whiteButton = new JButton("White");
        whiteButton.setBackground(Color.WHITE);
        whiteButton.addActionListener(this);
        buttonPanel.add(whiteButton);

        JButton blueButton = new JButton("Blue");
        blueButton.setBackground(Color.BLUE);
        blueButton.addActionListener(this);
        buttonPanel.add(blueButton);

        add(buttonPanel, BorderLayout.SOUTH);
    }

    public void actionPerformed(ActionEvent e)
    {
        String buttonString = e.getActionCommand( );

        if (buttonString.equals("Red"))
             redPanel.setBackground(Color.RED);
        else if (buttonString.equals("White"))
            whitePanel.setBackground(Color.WHITE);
        else if (buttonString.equals("Blue"))
            bluePanel.setBackground(Color.BLUE);
        else
            System.out.println("Unexpected error.");
    }
}



Last Updated: July 22, 2014 8:39 PM