GRAPHICAL USER GRAPHICAL USER INTERFACEINTERFACE

1.4 USE LAYOUT 1.4 USE LAYOUT MANAGERMANAGER

Learning Outcomes

By the end of the class, student should be able to: Define the use of layout manager in AWT Use layout manager in AWT:

FlowLayout GridLayout BorderLayout BoxLayout

Write java program using layout manager

USE OF LAYOUT MANAGERS

The UI components are placed in containers.

Each container has a layout manager to arrange the GUI components within the container.

LAYOUT MANAGERS

FlowLayout

GridLayout

BorderLayout

BoxLayout

SYNTAX TO SET LAYOUT MANAGER

container.setLayout(new SpecificLayout());

container.setLayout(new SpecificLayout());

setLayout(new SpecificLayout());setLayout(new SpecificLayout());

Set the layout manager here

Set the layout manager here

AWT

SWING

FlowLayout

Simplest and most basic layout manager Components arranged in container from

left to right in the order in which they were added

When edge of container reached, continues on next line

Can determine the gap between components in pixels.

Three constant (alignment): FlowLayout.RIGHT FlowLayout.LEFT FlowLayout.CENTER

FlowLayout.CENTER

FlowLayout.RIGHT

FlowLayout.LEFT

FlowLayout CONSTRUCTOR

public FlowLayout(int align, int hGap, int vGap)Constructs a new FlowLayout with a specified alignment, horizontal gap and vertical gap. The gaps are the distances inpixel between components.

public FlowLayout(int alignment)Constructs a new FlowLayout with a specified alignment and a default gap of 5 pixels for both horizontal and vertical.

public FlowLayout()Constructs a new FlowLayout with a default center alignment and a default gap of 5 pixels for both horizontal and vertical.

import java.awt.*;import javax.swing.*;

public class TestFlowLayout extends JFrame{ public TestFlowLayout() { super(“Create FlowLayout"); Container c = getContentPane(); c.setLayout(new FlowLayout(FlowLayout.LEFT,20,10)); for (int i=1; i<9;i++) c.add(new Button("button "+i)); setSize(350,200); setVisible(true); } public static void main(String[] arg) { TestFlowLayout s = new TestFlowLayout(); s.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }}

10

20

GridLayout

Divides container into a grid Components placed in rows and columns All components have same width and

height Added starting from top left, then from left

to right When row full, continues on next row, left

to right

GridLayout CONSTRUCTOR

public GridLayout()

Construct a new GridLayout with one column in a single row.

public GridLayout(int rows,int columns)

Constructs a new GridLayout with the

specified number of rows and columns.

GridLayout CONSTRUCTOR

public GridLayout(int rows, int columns, int hGap, int vGap)

Constructs a new GridLayout with the

specified number of rows and columns, along with specified horizontal and vertical gaps between components.

import java.awt.*;import javax.swing.*;

public class TestGridLayout extends JFrame{ public TestGridLayout() { super(“Create GridLayout"); Container s = getContentPane(); s.setLayout(new GridLayout(3,2,20,10)); for (int i=1; i<7;i++) s.add(new Button("button "+i)); setSize(350,200); setVisible(true); } public static void main(String[] arg) { TestGridLayout t = new TestGridLayout(); t.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }}

BorderLayout

Divides the window into 5 areas: BorderLayout.NORTH - North BorderLayout. SOUTH - South BorderLayout. EAST - East BorderLayout. WEST - West BorderLayout. CENTER - Center

BorderLayout CONSTRUCTOR

public BorderLayout()Construct a new BorderLayout without horizontal or vertical gaps

public BorderLayout(int hGap,int vGap)

Constructs a new BorderLayout with the specified horizontal and vertical gaps between the components.

import java.awt.*;import javax.swing.*;

public class TestBorderLayout extends JFrame{ public TestBorderLayout() { super(“Create BorderLayout"); Container s = getContentPane();

s.setLayout(new BorderLayout(20,10)); Button bNorth = new Button(“North"); Button bSouth = new Button(“South"); Button bEast = new Button(“East"); Button bWest = new Button(“West"); Button bCenter = new Button(“Center"); s.add(bNorth,BorderLayout.NORTH); s.add(bSouth,BorderLayout.SOUTH); s.add(bEast,BorderLayout.EAST); s.add(bWest,BorderLayout.WEST); s.add(bCenter,BorderLayout.CENTER); setSize(350,200); setVisible(true); } public static void main(String[] arg) { TestBorderLayout t = new TestBorderLayout();

t.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }}

import java.awt.*;import javax.swing.*;

public class TestBorderLayout extends JFrame{ public TestBorderLayout() { super(“Create BorderLayout"); Container s = getContentPane();

s.setLayout(new BorderLayout(20,10)); Button bNorth = new Button(“North"); Button bSouth = new Button(“South"); Button bEast = new Button(“East"); Button bWest = new Button(“West"); Button bCenter = new Button(“Center"); //s.add(bNorth,BorderLayout.NORTH); s.add(bSouth,BorderLayout.SOUTH); s.add(bEast,BorderLayout.EAST); s.add(bWest,BorderLayout.WEST); s.add(bCenter,BorderLayout.CENTER); setSize(350,200); setVisible(true); } public static void main(String[] arg) { TestBorderLayout t = new TestBorderLayout();

t.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }}

import java.awt.*;import javax.swing.*;

public class TestBorderLayout extends JFrame{ public TestBorderLayout() { super(“Create BorderLayout"); Container s = getContentPane();

s.setLayout(new BorderLayout(20,10)); Button bNorth = new Button(“North"); Button bSouth = new Button(“South"); Button bEast = new Button(“East"); Button bWest = new Button(“West"); Button bCenter = new Button(“Center"); s.add(bNorth,BorderLayout.NORTH); s.add(bSouth,BorderLayout.SOUTH); //s.add(bEast,BorderLayout.EAST); s.add(bWest,BorderLayout.WEST); s.add(bCenter,BorderLayout.CENTER); setSize(350,200); setVisible(true); } public static void main(String[] arg) { TestBorderLayout t = new TestBorderLayout();

t.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }}

import java.awt.*;import javax.swing.*;

public class TestBorderLayout extends JFrame{ public TestBorderLayout() { super(“Create BorderLayout"); Container s = getContentPane();

s.setLayout(new BorderLayout(20,10)); Button bNorth = new Button(“North"); Button bSouth = new Button(“South"); Button bEast = new Button(“East"); Button bWest = new Button(“West"); Button bCenter = new Button(“Center"); //s.add(bNorth,BorderLayout.NORTH); s.add(bSouth,BorderLayout.SOUTH); //s.add(bEast,BorderLayout.EAST); //s.add(bWest,BorderLayout.WEST); s.add(bCenter,BorderLayout.CENTER); setSize(350,200); setVisible(true); } public static void main(String[] arg) { TestBorderLayout t = new TestBorderLayout();

t.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }}

import java.awt.*;import javax.swing.*;

public class TestBorderLayout extends JFrame{ public TestBorderLayout() { super(“Create BorderLayout"); Container s = getContentPane();

s.setLayout(new BorderLayout(20,10)); Button bNorth = new Button(“North"); Button bSouth = new Button(“South"); Button bEast = new Button(“East"); Button bWest = new Button(“West"); Button bCenter = new Button(“Center"); s.add(bNorth,BorderLayout.NORTH); s.add(bSouth,BorderLayout.SOUTH); s.add(bEast,BorderLayout.EAST); s.add(bWest,BorderLayout.WEST); //s.add(bCenter,BorderLayout.CENTER); setSize(350,200); setVisible(true); } public static void main(String[] arg) { TestBorderLayout t = new TestBorderLayout();

t.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }}

BoxLayout

A layout manager that allows multiple components to be laid out either vertically or horizontally.

The value of axis can be one of the following: BoxLayout.X_AXIS BoxLayout.Y_AXIS BoxLayout.LINE_AXIS BoxLayout.PAGE_AXIS

BoxLayout has a single constructor:public BoxLayout(Container target, int axis)

public BoxLayout(Container target, int axis) The first argument is the container The second is the layout direction.

Summary

4 layout manager: FlowLayout, BorderLayout, GridLayout and BoxLayout.