1 Why layout managers Can we perform layout without them? –Yes. A container’s layout property...
-
Upload
garry-morton -
Category
Documents
-
view
224 -
download
1
Transcript of 1 Why layout managers Can we perform layout without them? –Yes. A container’s layout property...
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