LAYOUT MANAGER
Chapter 11.3:
Layout Managers
 The layout manager determines how the GUI
components are added to the container (such as
the content pane of a frame)
 Layout managers are set in containers using the
setLayout(LayoutManager) method in a container
FlowLayout
 In using this layout, GUI components
are placed in left-to-right order.
 When the component does not fit on the
same line, left-to-right placement continues
on the next line.
 As a default, components on each line
are centered.
 When the frame containing the
component is resized, the placement of
components is adjusted accordingly.
FlowLayout Sample
This shows
the placement
of five buttons
by using
FlowLayout.
FlowLayout
 The components are arranged
in the container from left to
right in the order in which they
were added.
 When one row becomes filled,
a new row is started.
 FlowLayout can be aligned in 3
ways:
FlowLayout.LEFT – left aligned
FlowLayout.RIGHT – right aligned
FlowLayout.CENTER – center aligned
FlowLayout Constructors
 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 in
pixel between components.
 public FlowLayout(int alignment)
Constructs a new FlowLayout with a specified alignment and a
default gap of five pixels for both horizontal and vertical.
 public FlowLayout()
Constructs a new FlowLayout with a default center alignment
and a default gap of five pixels for both horizontal and vertical.
import java.awt.*;
import javax.swing.*;
//import java.awt.event.*;
public class TestFlowLayout extends JFrame
{
public TestFlowLayout()
{
super(“Using flowLayout");
Container cpane = getContentPane();
cpane.setLayout(new FlowLayout(FlowLayout.LEFT,20,10));
for (int i=1; i<7;i++)
cpane.add(new JButton("button "+i));
setSize(300,200);
setVisible(true);
}
public static void main(String[] arg)
{
TestFlowLayout teks = new TestFlowLayout();
teks.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
10
20
BorderLayout
 This layout manager divides the container into five
regions: center, north, south, east, and west.
 The north and south regions expand or shrink in
width only
 The east and west regions expand or shrink in
height only
 The center region expands or shrinks on both
height and width.
 Not all regions have to be occupied.
BorderLayout Sample
GridLayout
 This layout manager placesGUI components on
equal-size N by M grids.
 Components are placed in top-to-bottom, left-to-
right order.
 The number of rows and columns remains the
same after the frame is resized, but the width and
height of each region will change.
GridLayout Sample
Using Panels as Containers
 Panels act as smaller containers for grouping user
interface components.
 It is recommended that you place the user
interface components in panels and place the
panels in a frame. You can also place panels in a
panel.
 To add a component to JFrame, you actually add it
to the content pane of JFrame. To add a
component to a panel, you add it directly to the
panel using the add method.
Create a JPanel
example :
Container cpane = getContentPane();
JPanel pan = new JPanel(); // create a panel
pan.add(new JButton(“Click”)); // add a button in the panel
cpane.add(pan) // add the panel in the container
label TextField
Text Area
button button
There are 3 panels :
top panel – has 2 components that are label, textfield
- 2 components are arranged with flowLayout
middle panel – has a component: text area. It is arranged with Gridlayout
bottom panel – has 2 components that are buttons
- 2components are arranged with Flowlayout
All panels are arrranged with borderlayout
top panel –north middle panel –center bottom panel –South
Top
panel
Middle
panel
Bottom
panel
import java.awt.*;
import javax.swing.*;
public class UjiPanel extends JFrame
{
public UjiPanel()
{
super("Membuat BorderLayout");
Container bekas = getContentPane();
bekas.setLayout(new BorderLayout());
JPanel panelAtas = new JPanel();
bekas.add(panelAtas,BorderLayout.NORTH);
JLabel label = new JLabel("Nama");
JTextField txtField = new JTextField(10);
panelAtas.setLayout(new FlowLayout());
panelAtas.add(label);
panelAtas.add(txtField);
JPanel panelTengah = new JPanel();
bekas.add(panelTengah,BorderLayout.CENTER);
JTextArea txtArea = new JTextArea();
panelTengah.setLayout(new GridLayout());
panelTengah.add(txtArea);
JPanel panelBawah = new JPanel();
bekas.add(panelBawah,BorderLayout.SOUTH);
JButton btg1 = new JButton("Hantar");
JButton btg2 = new JButton("Batal");
btg2.setMnemonic('B');
panelBawah.setLayout(new FlowLayout());
panelBawah.add(btg1);
panelBawah.add(btg2);
setSize(300,200);
setVisible(true);
} // konstruktor
public static void main(String[] arg)
{
UjiPanel teks = new UjiPanel();
teks.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
Step in Creating Panel
 Set a layout manager for a container (frame).
 Create a panel
 Set a layout for the panel.
 Add the panel in the container (frame)
 Create a component that to be added in the panel
 Add the component in the panel

Chapter 11.3

  • 1.
  • 2.
    Layout Managers  Thelayout manager determines how the GUI components are added to the container (such as the content pane of a frame)  Layout managers are set in containers using the setLayout(LayoutManager) method in a container
  • 3.
    FlowLayout  In usingthis layout, GUI components are placed in left-to-right order.  When the component does not fit on the same line, left-to-right placement continues on the next line.  As a default, components on each line are centered.  When the frame containing the component is resized, the placement of components is adjusted accordingly.
  • 4.
    FlowLayout Sample This shows theplacement of five buttons by using FlowLayout.
  • 5.
    FlowLayout  The componentsare arranged in the container from left to right in the order in which they were added.  When one row becomes filled, a new row is started.  FlowLayout can be aligned in 3 ways: FlowLayout.LEFT – left aligned FlowLayout.RIGHT – right aligned FlowLayout.CENTER – center aligned
  • 6.
    FlowLayout Constructors  publicFlowLayout(int align, int hGap, int vGap) Constructs a new FlowLayout with a specified alignment, horizontal gap, and vertical gap. The gaps are the distances in pixel between components.  public FlowLayout(int alignment) Constructs a new FlowLayout with a specified alignment and a default gap of five pixels for both horizontal and vertical.  public FlowLayout() Constructs a new FlowLayout with a default center alignment and a default gap of five pixels for both horizontal and vertical.
  • 7.
    import java.awt.*; import javax.swing.*; //importjava.awt.event.*; public class TestFlowLayout extends JFrame { public TestFlowLayout() { super(“Using flowLayout"); Container cpane = getContentPane(); cpane.setLayout(new FlowLayout(FlowLayout.LEFT,20,10)); for (int i=1; i<7;i++) cpane.add(new JButton("button "+i)); setSize(300,200); setVisible(true); } public static void main(String[] arg) { TestFlowLayout teks = new TestFlowLayout(); teks.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } } 10 20
  • 8.
    BorderLayout  This layoutmanager divides the container into five regions: center, north, south, east, and west.  The north and south regions expand or shrink in width only  The east and west regions expand or shrink in height only  The center region expands or shrinks on both height and width.  Not all regions have to be occupied.
  • 9.
  • 10.
    GridLayout  This layoutmanager placesGUI components on equal-size N by M grids.  Components are placed in top-to-bottom, left-to- right order.  The number of rows and columns remains the same after the frame is resized, but the width and height of each region will change.
  • 11.
  • 12.
    Using Panels asContainers  Panels act as smaller containers for grouping user interface components.  It is recommended that you place the user interface components in panels and place the panels in a frame. You can also place panels in a panel.  To add a component to JFrame, you actually add it to the content pane of JFrame. To add a component to a panel, you add it directly to the panel using the add method.
  • 13.
    Create a JPanel example: Container cpane = getContentPane(); JPanel pan = new JPanel(); // create a panel pan.add(new JButton(“Click”)); // add a button in the panel cpane.add(pan) // add the panel in the container
  • 14.
    label TextField Text Area buttonbutton There are 3 panels : top panel – has 2 components that are label, textfield - 2 components are arranged with flowLayout middle panel – has a component: text area. It is arranged with Gridlayout bottom panel – has 2 components that are buttons - 2components are arranged with Flowlayout All panels are arrranged with borderlayout top panel –north middle panel –center bottom panel –South Top panel Middle panel Bottom panel
  • 15.
    import java.awt.*; import javax.swing.*; publicclass UjiPanel extends JFrame { public UjiPanel() { super("Membuat BorderLayout"); Container bekas = getContentPane(); bekas.setLayout(new BorderLayout()); JPanel panelAtas = new JPanel(); bekas.add(panelAtas,BorderLayout.NORTH); JLabel label = new JLabel("Nama"); JTextField txtField = new JTextField(10); panelAtas.setLayout(new FlowLayout()); panelAtas.add(label); panelAtas.add(txtField); JPanel panelTengah = new JPanel(); bekas.add(panelTengah,BorderLayout.CENTER); JTextArea txtArea = new JTextArea(); panelTengah.setLayout(new GridLayout()); panelTengah.add(txtArea); JPanel panelBawah = new JPanel(); bekas.add(panelBawah,BorderLayout.SOUTH); JButton btg1 = new JButton("Hantar"); JButton btg2 = new JButton("Batal"); btg2.setMnemonic('B'); panelBawah.setLayout(new FlowLayout()); panelBawah.add(btg1); panelBawah.add(btg2);
  • 16.
    setSize(300,200); setVisible(true); } // konstruktor publicstatic void main(String[] arg) { UjiPanel teks = new UjiPanel(); teks.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } }
  • 17.
    Step in CreatingPanel  Set a layout manager for a container (frame).  Create a panel  Set a layout for the panel.  Add the panel in the container (frame)  Create a component that to be added in the panel  Add the component in the panel