1

Why layout managers

• Can we perform layout without them?– Yes. A container’s layout property can be set to null.

• Absolute positioning: specify size and position of every component within that container.

– does not adjust well when the top-level container is resized

– does not adjust well to differences between users and systems

2

import java.awt.*;

import java.awt.event.*;

import javax.swing.*;

public class AbsoluteExampleApplet extends JApplet {

private Container container;

private FlowLayout layout;

public void init () {

container = getContentPane();

container.setLayout(null);

JButton ok = new JButton("OK");

ok.setBounds(50, 100, 80, 25);

container.add(ok);

JButton close = new JButton("Close");

close.setBounds(150, 100, 80, 25);

container.add(close);

}

}

3

import java.awt.*;

import java.awt.event.*;

import javax.swing.*;

public class AbsoluteExample extends JFrame {

private Container container;

public AbsoluteExample() {

container = getContentPane();

container.setLayout(null);

JButton ok = new JButton("OK");

ok.setBounds(50, 100, 80, 25);

container.add(ok);

JButton close = new JButton("Close");

close.setBounds(150, 100, 80, 25);

container.add(close);

setSize(300, 250);

setVisible(true);

}

public static void main(String[] args) {

AbsoluteExample ex = new AbsoluteExample();

ex.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

}

}

4

What is a layout manager

• A layout manager is an object that implements the LayoutManager interface and determines the size and position of the components within a container.

• A container's layout manager has the final say on the size and position of the components within the container, even though Components can provide size and alignment hints

5

Layout Managers

• Layout managers– Provided for arranging GUI components

– Provide basic layout capabilities

– Processes layout details

– Programmer can concentrate on basic “look and feel”

– Interface LayoutManager– Lay out elements by their relative positions without using

distance units

6

Layout Management

– Each container has a layout manager that directs the arrangement of its components

– Components are added to a container which uses a layout manager to place them

– Three useful layout managers are:

1) Border layout2) Flow layout3) Grid layout

Page 6

7

Containers

• Top-level containers• Jdialog• Jframe• Japplet

• Intermediate level containers– E.g. Jpanel, JScrollPan, …

• Heavyweight vs Lightweigtht components

8

Layout managers.

Layout manager Description FlowLayout Default for java.awt.Applet, java.awt.Panel and

javax.swing.JPanel. Places components sequentially (left to right) in the order they were added. It is also possible to specify the order of the components using the Container method add that takes a Component and an integer index position as arguments.

BorderLayout Default for the content panes of JFrames (and other windows) and JApplets. Arranges the components into five areas: North, South, East, West and Center.

GridLayout Arranges the components into rows and columns.

Layout managers.

9

FlowLayout

• FlowLayout– Most basic layout manager (but NOT always the default

manager)

– GUI components placed in container from left to right

10

Flow Layout

• Components are added from left to right

• Most basic layout manager (but NOT always the default manager)

panel = new JPanel();

panel.add(rateLabel);

panel.add(rateField);

panel.add(button);

panel.add(resultLabel);

panel = new JPanel();

panel.add(rateLabel);

panel.add(rateField);

panel.add(button);

panel.add(resultLabel);

1 // FlowLayoutDemo.java 2 // Demonstrating FlowLayout alignments. 3 4 // Java core packages 5 import java.awt.*; 6 import java.awt.event.*; 7 8 // Java extension packages 9 import javax.swing.*;10 11 public class FlowLayoutDemo extends JFrame {12 private JButton leftButton, centerButton, rightButton;13 private Container container;14 private FlowLayout layout;15 16 // set up GUI and register button listeners17 public FlowLayoutDemo()18 {19 super( "FlowLayout Demo" );20 21 layout = new FlowLayout();22 23 // get content pane and set its layout24 container = getContentPane();25 container.setLayout( layout );26 27 // set up leftButton and register listener28 leftButton = new JButton( "Left" );29 30 leftButton.addActionListener(31 32 // anonymous inner class33 new ActionListener() {34 35 // process leftButton event

FlowLayoutDemo.java

Lines 21-25

Set layout as FlowLayout

36 public void actionPerformed( ActionEvent event )37 {38 layout.setAlignment( FlowLayout.LEFT );39 40 // re-align attached components41 layout.layoutContainer( container );42 }43 44 } // end anonymous inner class45 46 ); // end call to addActionListener47 48 container.add( leftButton );49 50 // set up centerButton and register listener51 centerButton = new JButton( "Center" );52 53 centerButton.addActionListener(54 55 // anonymous inner class56 new ActionListener() {57 58 // process centerButton event 59 public void actionPerformed( ActionEvent event )60 {61 layout.setAlignment( FlowLayout.CENTER );62 63 // re-align attached components64 layout.layoutContainer( container );65 }66 }67 );68 69 container.add( centerButton );70

FlowLayoutDemo.java

Line 38

Line 61

When user presses left JButton, left align components

When user presses center JButton, center components

71 // set up rightButton and register listener72 rightButton = new JButton( "Right" );73 74 rightButton.addActionListener(75 76 // anonymous inner class77 new ActionListener() {78 79 // process rightButton event 80 public void actionPerformed( ActionEvent event )81 {82 layout.setAlignment( FlowLayout.RIGHT );83 84 // re-align attached components85 layout.layoutContainer( container );86 }87 }88 );89 90 container.add( rightButton );91 92 setSize( 300, 75 );93 setVisible( true );94 }95 96 // execute application97 public static void main( String args[] )98 { 99 FlowLayoutDemo application = new FlowLayoutDemo();100 101 application.setDefaultCloseOperation(102 JFrame.EXIT_ON_CLOSE );103 }104 105 } // end class FlowLayoutDemo

FlowLayoutDemo.java

Line 82

When user presses right JButton, right components

FlowLayoutDemo.java

15

Nested Classes

• Java allows to define a class within another class– logically grouping classes that are only used in one place

– increase encapsulation

– lead to more readable and maintainable code

– Inner class: Non-static nested classes

class OuterClass {

...

class NestedClass {

...

}

}

16

Anonymous Inner Classes

• make the code more concise• declare and instantiate a class at the same time.• do not have a name• use only once

53 centerButton.addActionListener(54 55 // anonymous inner class56 new ActionListener() {57 58 // process centerButton event 59 public void actionPerformed( ActionEvent event )60 {61 layout.setAlignment( FlowLayout.CENTER );62 63 // re-align attached components64 layout.layoutContainer( container );65 }66 }67 );

17

BorderLayout

• BorderLayout– Arranges components into five regions

• NORTH (top of container)• SOUTH (bottom of container)• EAST (left of container)• WEST (right of container)• CENTER (center of container)

18

Border Layout

• Components are placed toward areas of a container– NORTH, EAST, SOUTH, WEST, or CENTER

– Specify one when adding components

The content pane of a JFrame uses border layout by default

panel.setLayout(new BorderLayout());

panel.add(component, BorderLayout.NORTH);

panel.setLayout(new BorderLayout());

panel.add(component, BorderLayout.NORTH);

Page 18

1 // BorderLayoutDemo.java 2 // Demonstrating BorderLayout. 3 4 // Java core packages 5 import java.awt.*; 6 import java.awt.event.*; 7 8 // Java extension packages 9 import javax.swing.*;10 11 public class BorderLayoutDemo extends JFrame12 implements ActionListener {13 14 private JButton buttons[];15 private String names[] = { "Hide North", "Hide South", 16 "Hide East", "Hide West", "Hide Center" };17 private BorderLayout layout;18 19 // set up GUI and event handling20 public BorderLayoutDemo()21 {22 super( "BorderLayout Demo" );23 24 layout = new BorderLayout( 5, 5 );25 26 // get content pane and set its layout27 Container container = getContentPane();28 container.setLayout( layout );29 30 // instantiate button objects31 buttons = new JButton[ names.length ];32 33 for ( int count = 0; count < names.length; count++ ) {34 buttons[ count ] = new JButton( names[ count ] );35 buttons[ count ].addActionListener( this );

BorderLayoutDemo.java

Lines 24-28

Set layout as BorderLayout with 5-pixel horizontal and vertical gaps

36 }37 38 // place buttons in BorderLayout; order not important39 container.add( buttons[ 0 ], BorderLayout.NORTH ); 40 container.add( buttons[ 1 ], BorderLayout.SOUTH ); 41 container.add( buttons[ 2 ], BorderLayout.EAST ); 42 container.add( buttons[ 3 ], BorderLayout.WEST ); 43 container.add( buttons[ 4 ], BorderLayout.CENTER ); 44 45 setSize( 300, 200 );46 setVisible( true );47 } 48 49 // handle button events50 public void actionPerformed( ActionEvent event )51 {52 for ( int count = 0; count < buttons.length; count++ )53 54 if ( event.getSource() == buttons[ count ] )55 buttons[ count ].setVisible( false );56 else57 buttons[ count ].setVisible( true );58 59 // re-layout the content pane60 layout.layoutContainer( getContentPane() );61 }62 63 // execute application64 public static void main( String args[] )65 { 66 BorderLayoutDemo application = new BorderLayoutDemo();

BorderLayoutDemo.java

Lines 39-43

Lines 54-57

Place JButtons in regions specified by BorderLayout

When JButtons are “invisible,” they are not displayed on screen, and BorderLayout rearranges

67 68 application.setDefaultCloseOperation(69 JFrame.EXIT_ON_CLOSE );70 }71 72 } // end class BorderLayoutDemo

BorderLayoutDemo.java

BorderLayoutDemo.java

23

Grid Layout

• Divides container into grid of specified row and columns– Specify the size (rows then columns) of the grid

Components are added starting at top-left cell

Proceed left-to-fight until row is full

buttonPanel.add(button7);

buttonPanel.add(button8);

buttonPanel.add(button9);

buttonPanel.add(button4);

. . .

buttonPanel.add(button7);

buttonPanel.add(button8);

buttonPanel.add(button9);

buttonPanel.add(button4);

. . .

buttonPanel.setLayout(new GridLayout(4, 3));

buttonPanel.setLayout(new GridLayout(4, 3));

1 // GridLayoutDemo.java 2 // Demonstrating GridLayout. 3 4 // Java core packages 5 import java.awt.*; 6 import java.awt.event.*; 7 8 // Java extension packages 9 import javax.swing.*;10 11 public class GridLayoutDemo extends JFrame12 implements ActionListener {13 14 private JButton buttons[];15 private String names[] =16 { "one", "two", "three", "four", "five", "six" };17 private boolean toggle = true;18 private Container container;19 private GridLayout grid1, grid2;20 21 // set up GUI22 public GridLayoutDemo()23 {24 super( "GridLayout Demo" );25 26 // set up layouts27 grid1 = new GridLayout( 2, 3, 5, 5 );28 grid2 = new GridLayout( 3, 2 );29 30 // get content pane and set its layout31 container = getContentPane();32 container.setLayout( grid1 );33 34 // create and add buttons35 buttons = new JButton[ names.length ];

GridLayoutDemo.java

Line 27

Line 28

Create GridLayout grid1 with 2 rows and 3 columns

Create GridLayout grid2 with 3 rows and 2 columns

36 37 for ( int count = 0; count < names.length; count++ ) {38 buttons[ count ] = new JButton( names[ count ] );39 buttons[ count ].addActionListener( this );40 container.add( buttons[ count ] );41 }42 43 setSize( 300, 150 );44 setVisible( true );45 }46 47 // handle button events by toggling between layouts48 public void actionPerformed( ActionEvent event )49 { 50 if ( toggle )51 container.setLayout( grid2 );52 else53 container.setLayout( grid1 );54 55 toggle = !toggle; // set toggle to opposite value56 container.validate();57 }58 59 // execute application60 public static void main( String args[] )61 {62 GridLayoutDemo application = new GridLayoutDemo();63 64 application.setDefaultCloseOperation(65 JFrame.EXIT_ON_CLOSE );66 } 67 68 } // end class GridLayoutDemo

GridLayoutDemo.java

Lines 50-53

Toggle current GridLayout when

user presses JButton

GridLayoutDemo.java

27

Panels

• Panel– Helps organize components

– Class JPanel is JComponent subclass

– May have components (and other panels) added to them

1 // PanelDemo.java 2 // Using a JPanel to help lay out components. 3 4 // Java core packages 5 import java.awt.*; 6 import java.awt.event.*; 7 8 // Java extension packages 9 import javax.swing.*;10 11 public class PanelDemo extends JFrame {12 private JPanel buttonPanel;13 private JButton buttons[];14 15 // set up GUI16 public PanelDemo()17 {18 super( "Panel Demo" );19 20 // get content pane21 Container container = getContentPane();22 23 // create buttons array24 buttons = new JButton[ 5 ];25 26 // set up panel and set its layout27 buttonPanel = new JPanel();28 buttonPanel.setLayout(29 new GridLayout( 1, buttons.length ) );30 31 // create and add buttons32 for ( int count = 0; count < buttons.length; count++ ) {33 buttons[ count ] = 34 new JButton( "Button " + ( count + 1 ) );35 buttonPanel.add( buttons[ count ] );

PanelDemo.java

Line 27

Line 35

Create JPanel to hold JButtons

Add JButtons to JPanel

36 }37 38 container.add( buttonPanel, BorderLayout.SOUTH );39 40 setSize( 425, 150 );41 setVisible( true );42 }43 44 // execute application45 public static void main( String args[] )46 {47 PanelDemo application = new PanelDemo();48 49 application.setDefaultCloseOperation(50 JFrame.EXIT_ON_CLOSE );51 }52 53 } // end class PanelDemo

PanelDemo.java

Line 38Add JPanel to SOUTH region of Container

30

Content Pane

• The content pane – The container of the root pane's visible components,

excluding the menu bar

– Using a Jpanel

https://docs.oracle.com/javase/tutorial/uiswing/components/rootpane.html

31

Using Nested Panels • Create complex layouts by nesting panels

– Give each panel an appropriate layout manager– Panels have invisible borders, so you can use as many

panels as you need to organize components

JPanel keypadPanel = new JPanel();

keypadPanel.setLayout(new BorderLayout());

buttonPanel = new JPanel();

buttonPanel.setLayout(new GridLayout(4, 3));

buttonPanel.add(button7);

buttonPanel.add(button8);

// . . .

keypadPanel.add(buttonPanel, BorderLayout.CENTER);

JTextField display = new JTextField();

keypadPanel.add(display, BorderLayout.NORTH);

JPanel keypadPanel = new JPanel();

keypadPanel.setLayout(new BorderLayout());

buttonPanel = new JPanel();

buttonPanel.setLayout(new GridLayout(4, 3));

buttonPanel.add(button7);

buttonPanel.add(button8);

// . . .

keypadPanel.add(buttonPanel, BorderLayout.CENTER);

JTextField display = new JTextField();

keypadPanel.add(display, BorderLayout.NORTH);

JTextField in NORTH of keypadPanel

JPanel GridLayout in CENTER of keypadPanel

32

Other layout managers

• Layout managers are not limited to– FlowLayout

– GridLayout

– BorderLayout

• Other– BoxLayout

– CardLayout

– GridBagLayout

– GroupLayout

– SpringLayout

33

34

35

36

37

Steps to Design a User Interface

1) Make a sketch of the component layout.

– Draw all the buttons, labels, text fields, and borders on a sheet of graph paper

38

Steps to Design a User Interface

2) Find groupings of adjacent components with the same layout.

– Start by looking at adjacent components that are arranged top to bottom or left to right

39

Steps to Design a User Interface

3) Identify layouts for each group.– For horizontal components, use flow Layout– For vertical components, use a grid layout with one column

4) Group the groups together.– Look at each group as one blob, and group the blobs

together into larger groups, just as you grouped the components in the preceding step

40

Steps to Design a User Interface5) Write the code to generate the layout

JPanel radioButtonPanel = new JPanel();

radioButtonPanel.setLayout(new GridLayout(3, 1));

radioButton.setBorder(new TitledBorder(new EtchedBorder(), "Size"));

radioButtonPanel.add(smallButton);

radioButtonPanel.add(mediumButton);

radioButtonPanel.add(largeButton);

JPanel checkBoxPanel = new JPanel();

checkBoxPanel.setLayout(new GridLayout(2, 1));

checkBoxPanel.add(pepperoniButton());

checkBoxPanel.add(anchoviesButton());

JPanel pricePanel = new JPanel(); // Uses FlowLayout by default

pricePanel.add(new JLabel("Your Price:"));

pricePanel.add(priceTextField);

JPanel centerPanel = new JPanel(); // Uses FlowLayout

centerPanel.add(radioButtonPanel);

centerPanel.add(checkBoxPanel); // Frame uses BorderLayout by default

add(centerPanel, BorderLayout.CENTER);

add(pricePanel, BorderLayout.SOUTH);

JPanel radioButtonPanel = new JPanel();

radioButtonPanel.setLayout(new GridLayout(3, 1));

radioButton.setBorder(new TitledBorder(new EtchedBorder(), "Size"));

radioButtonPanel.add(smallButton);

radioButtonPanel.add(mediumButton);

radioButtonPanel.add(largeButton);

JPanel checkBoxPanel = new JPanel();

checkBoxPanel.setLayout(new GridLayout(2, 1));

checkBoxPanel.add(pepperoniButton());

checkBoxPanel.add(anchoviesButton());

JPanel pricePanel = new JPanel(); // Uses FlowLayout by default

pricePanel.add(new JLabel("Your Price:"));

pricePanel.add(priceTextField);

JPanel centerPanel = new JPanel(); // Uses FlowLayout

centerPanel.add(radioButtonPanel);

centerPanel.add(checkBoxPanel); // Frame uses BorderLayout by default

add(centerPanel, BorderLayout.CENTER);

add(pricePanel, BorderLayout.SOUTH);

41

Summary: Containers and Layouts

• User-interface components are arranged by placing them inside containers– Containers can be placed inside larger containers– Each container has a layout manager that directs the

arrangement of its components– Three useful layout managers are the border layout, flow

layout, and grid layout.– When adding a component to a container with the border

layout, specify the NORTH, EAST, SOUTH, WEST, or CENTER position

• The content pane of a frame has a border layout by default

• A panel has a flow layout by default

42

Applets and Stand-alone Applications

• It is possible to write Java applications in such a way that they can be executed both as stand-alone or applets – Java applets usually don't have a main method

– Execute with a main method and call the init() and start() method of the applet.

import java.awt.*;import javax.swing.*;public class BubbleSort extends JApplet { public void init() { JTextArea outputArea = new JTextArea(); Container container = getContentPane(); container.add( outputArea ); int array[] = { 2, 6, 4, 8, 10, 12, 89, 68, 45, 37 }; String output = "Data items in original order\n"; // append original array values to String output for ( int counter = 0; counter < array.length; counter++ ) output += " " + array[ counter ]; bubbleSort( array ); // sort array output += "\n\nData items in ascending order\n"; // append sorted array values to String output for ( int counter = 0; counter < array.length; counter++ ) output += " " + array[ counter ]; outputArea.setText( output ); setSize( 375, 200 ); setVisible( true ); } // sort elements of array with bubble sort public void bubbleSort( int array2[] ) { // loop to control number of passes for ( int pass = 1; pass < array2.length; pass++ ) { // loop to control number of comparisons for ( int element = 0; element < array2.length - 1; element++ ) { // compare side-by-side elements and swap them if first element is //greater than second element if ( array2[ element ] > array2[ element + 1 ] ) swap( array2, element, element + 1 ); } } }

// swap two elements of an array public void swap( int array3[], int first, int second ) { int hold; // temporary holding area for swap hold = array3[ first ]; array3[ first ] = array3[ second ]; array3[ second ] = hold; } public static void main( String args[] ) { JFrame app = new JFrame (“An applet running as an application”); app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); BubbleSort applet = new BubbleSort (); applet.init(); applet.start(); // attach applet to the center of the window app.getContentPane().add(applet); app.setSize(375, 200); app.setVisible(true); }} // end class BubbleSort