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 layout 2) Flow layout 3) 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.

9 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.*; public class FlowLayoutDemo extends JFrame { 12 private JButton leftButton, centerButton, rightButton; 13 private Container container; 14 private FlowLayout layout; // set up GUI and register button listeners 17 public FlowLayoutDemo() 18 { 19 super( "FlowLayout Demo" ); layout = new FlowLayout(); // get content pane and set its layout 24 container = getContentPane(); 25 container.setLayout( layout ); // set up leftButton and register listener 28 leftButton = new JButton( "Left" ); leftButton.addActionListener( // anonymous inner class 33 new ActionListener() { // process leftButton event FlowLayoutDemo.java Lines Set layout as FlowLayout

36 public void actionPerformed( ActionEvent event ) 37 { 38 layout.setAlignment( FlowLayout.LEFT ); // re-align attached components 41 layout.layoutContainer( container ); 42 } } // end anonymous inner class ); // end call to addActionListener container.add( leftButton ); // set up centerButton and register listener 51 centerButton = new JButton( "Center" ); centerButton.addActionListener( // anonymous inner class 56 new ActionListener() { // process centerButton event 59 public void actionPerformed( ActionEvent event ) 60 { 61 layout.setAlignment( FlowLayout.CENTER ); // re-align attached components 64 layout.layoutContainer( container ); 65 } 66 } 67 ); 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 listener 72 rightButton = new JButton( "Right" ); rightButton.addActionListener( // anonymous inner class 77 new ActionListener() { // process rightButton event 80 public void actionPerformed( ActionEvent event ) 81 { 82 layout.setAlignment( FlowLayout.RIGHT ); // re-align attached components 85 layout.layoutContainer( container ); 86 } 87 } 88 ); container.add( rightButton ); setSize( 300, 75 ); 93 setVisible( true ); 94 } // execute application 97 public static void main( String args[] ) 98 { 99 FlowLayoutDemo application = new FlowLayoutDemo(); application.setDefaultCloseOperation( 102 JFrame.EXIT_ON_CLOSE ); 103 } } // 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( // anonymous inner class 56 new ActionListener() { // process centerButton event 59 public void actionPerformed( ActionEvent event ) 60 { 61 layout.setAlignment( FlowLayout.CENTER ); // re-align attached components 64 layout.layoutContainer( container ); 65 } 66 } 67 );

17 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.*; public class BorderLayoutDemo extends JFrame 12 implements ActionListener { private JButton buttons[]; 15 private String names[] = { "Hide North", "Hide South", 16 "Hide East", "Hide West", "Hide Center" }; 17 private BorderLayout layout; // set up GUI and event handling 20 public BorderLayoutDemo() 21 { 22 super( "BorderLayout Demo" ); layout = new BorderLayout( 5, 5 ); // get content pane and set its layout 27 Container container = getContentPane(); 28 container.setLayout( layout ); // instantiate button objects 31 buttons = new JButton[ names.length ]; for ( int count = 0; count < names.length; count++ ) { 34 buttons[ count ] = new JButton( names[ count ] ); 35 buttons[ count ].addActionListener( this ); BorderLayoutDemo.j ava Lines Set layout as BorderLayout with 5-pixel horizontal and vertical gaps

36 } // place buttons in BorderLayout; order not important 39 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 ); setSize( 300, 200 ); 46 setVisible( true ); 47 } // handle button events 50 public void actionPerformed( ActionEvent event ) 51 { 52 for ( int count = 0; count < buttons.length; count++ ) if ( event.getSource() == buttons[ count ] ) 55 buttons[ count ].setVisible( false ); 56 else 57 buttons[ count ].setVisible( true ); // re-layout the content pane 60 layout.layoutContainer( getContentPane() ); 61 } // execute application 64 public static void main( String args[] ) 65 { 66 BorderLayoutDemo application = new BorderLayoutDemo(); BorderLayoutDemo.j ava Lines Lines Place JButton s in regions specified by BorderLayout When JButton s are “invisible,” they are not displayed on screen, and BorderLayout rearranges

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

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));

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.*; public class GridLayoutDemo extends JFrame 12 implements ActionListener { 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; // set up GUI 22 public GridLayoutDemo() 23 { 24 super( "GridLayout Demo" ); // set up layouts 27 grid1 = new GridLayout( 2, 3, 5, 5 ); 28 grid2 = new GridLayout( 3, 2 ); // get content pane and set its layout 31 container = getContentPane(); 32 container.setLayout( grid1 ); // create and add buttons 35 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 } setSize( 300, 150 ); 44 setVisible( true ); 45 } // handle button events by toggling between layouts 48 public void actionPerformed( ActionEvent event ) 49 { 50 if ( toggle ) 51 container.setLayout( grid2 ); 52 else 53 container.setLayout( grid1 ); toggle = !toggle; // set toggle to opposite value 56 container.validate(); 57 } // execute application 60 public static void main( String args[] ) 61 { 62 GridLayoutDemo application = new GridLayoutDemo(); application.setDefaultCloseOperation( 65 JFrame.EXIT_ON_CLOSE ); 66 } } // end class GridLayoutDemo GridLayoutDemo.java Lines 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.*; public class PanelDemo extends JFrame { 12 private JPanel buttonPanel; 13 private JButton buttons[]; // set up GUI 16 public PanelDemo() 17 { 18 super( "Panel Demo" ); // get content pane 21 Container container = getContentPane(); // create buttons array 24 buttons = new JButton[ 5 ]; // set up panel and set its layout 27 buttonPanel = new JPanel(); 28 buttonPanel.setLayout( 29 new GridLayout( 1, buttons.length ) ); // create and add buttons 32 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 JButton sAdd JButton s to JPanel

36 } container.add( buttonPanel, BorderLayout.SOUTH ); setSize( 425, 150 ); 41 setVisible( true ); 42 } // execute application 45 public static void main( String args[] ) 46 { 47 PanelDemo application = new PanelDemo(); application.setDefaultCloseOperation( 50 JFrame.EXIT_ON_CLOSE ); 51 } } // end class PanelDemo PanelDemo.java Line 38 Add 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

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 Interface 5) 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 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