Layout Managers

Arranges and lays out the GUI components on a container

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 2

Layout Managers

Layout Managers controls the size and position of components in a container.

Every container has a default Layout Manager: Panels – FlowLayout Window (e.g. Applets, etc.) – BorderLayout

Usage: myContainer.setLayout( new

LayoutManger() );

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 3

Layout Managers

Basic Layouts FlowLayout BorderLayout GridLayout

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 4

FlowLayout

FlowLayout( int align )FlowLayout()

GUI components are placed on a container from left to right in the order in which they are added to the container.

Alignments: Left ( FlowLayout.LEFT ) Center ( FlowLayout.CENTER ) Right ( FlowLayout.RIGHT )

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 5

Layout Managers

Basic Layouts FlowLayout BorderLayout

Panels GridLayout

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 6

BorderLayout GUI components are arranged into 5 regions

North – top South – bottom Center – middle East – right West – left

Max of 5 Components can be added directly. Usage: c.setLayout(new BorderLayout());

c.add("North", new Button("North"));

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 7

Panels

A component that can contain other components.

Containers that allow grouping of Components to create complex GUI’s. May have components added to them

(including other panels) Default Layout: FlowLayout Each Panel can have a different

layout.

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 8

Layout Managers

Basic Layouts FlowLayout BorderLayout GridLayout

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 9

GridLayout

GridLayout(int rows, int cols)

Container is divided into a grid where components are placed in rows and columns.

Every component has the same width and height.

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 10

GridLayout

Components are added left to right until row is full, starting from the top-left cell of the grid.

The process continues left to right on the next row of the grid.

Usage: c.setLayout(new GridLayout(1, 1)); c.add(new Button("Button 1"));

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 11

Exercises

Create an applet that looks like a phone’s dialing pad. Use buttons and a Grid Layout.

Create an applet that looks like a chat window.

Create an applet that looks like Windows’ Standard calculator. Use buttons, labels, text fields and several panels to do this.

Advanced Layouts (optional)

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 13

Layout Managers

Advanced Layouts CardLayout GridBagLayout BoxLayout

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 14

CardLayout

Components are arranged or stacked like a deck of cards.

Only the component at the “top” of the deck is visible.

Each card is usually a container (i.e. Panel)

Each card can use any layout manager.

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 15

Layout Managers

Advanced Layouts CardLayout GridBagLayout BoxLayout

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 16

GridBagLayout

Similar to GridLayout Arranges components into a grid

But more Flexible Each component size can vary. Components can be added in any order.

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 17

Layout Managers

Advanced Layouts GridBagLayout CardLayout BoxLayout

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 18

BoxLayout

GUI components are arranged left-to-right or top-to-bottom in a container.

Event Handling

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 20

AWT 1.1 Idea: Listeners

Idea: each visual object has one or more “listeners” that perform the action for that object

Listeners implement an interface and perform some action

e.g., ActionListener, MouseListener, etc. You add listeners to each object

b.addActionListener( myListener ) When button is pressed, listener’s method is called Efficient – only the added listeners receive the events

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 21

The Applet as the Listener What needs to be done

import java.awt.event.*;

init() method:

create the Button as before goButton = new Button( “Go” ); goButton must be a field of the applet

add the applet (“this”) as listener for each button goButton.addActionListener( this )

applet implements ActionListener interface define actionPerformed( ActionEvent e ) method use e.getSource() to get the Button object that was clicked use if statements to determine which button it is

if ( e.getSource() == goButton )

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 22

The Applet as the ListenerMyApplet

(implements ActionListener)b1 = new Button( “1” );

b1.addActionListener( this );

Button b1

0

1

2

ButtonactionListeners

b1

…

inside init() …

b2 = new Button( “2” );b2.addActionListener( this );

Button b2

0

1

2

ButtonactionListeners

b2…

public void actionPerformed(ActionEvent e){ if ( e.getSource() == b1 ) { … } else if ( e.getSource() == b2 ) { … }}

create an ActionEvent objectfor each ActionListener, call actionPerformed(…)

when b2 is pressed …

ActionEventsource

actionPerformed(…)

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 23

Events Exampleimport javax.swing.*;import java.awt.*;import java.awt.event.*;

public class HelloWorldApplet2 extends JApplet implements ActionListener

{ private JButton button; private JTextField textField; private JLabel label; public void init() { Container c =

this.getContentPane(); c.setLayout( new FlowLayout() ); label = new JLabel( "Hello,

World!" ); c.add( label ); textField = new JTextField( "Enter

your name here", 15 ); c.add( textField );

button = new JButton( "Click Me" ); button.addActionListener( this ); c.add( button ); }

public void actionPerformed( ActionEvent ae )

{ if ( ae.getSource() == button ) { String string = textField.getText(); label.setText( "Hello, " + string +

"!" ); } }}

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 24

Events Example 2import java.awt.*;import javax.swing.*;import java.awt.event.*;

public class HideMessage extends JApplet implements ActionListener { JButton hideButton; JTextField message;

public void init() {

Container c = this.getContentPane(); hideButton = new JButton( “Hide” ); c.add( hideButton ); hideButton.addActionListener( this ); message = new JTextField( “Hello” ); c.add( message ); }

public void actionPerformed( ActionEvent e )

{ if ( e.getSource() == hideButton ) { message.setVisible( false ); } } }

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 25

Exercises

Hide and Show Applet add another button

TextCopy applet use a TextField, a Label, and a Button When you press the button, the text is

copied from the TextField to the Label

Mouse Event Listeners

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 27

Mouse listener interfaces

MouseListener void mouseClicked( MouseEvent me ) void mouseEntered( MouseEvent me ) void mouseExited( MouseEvent me ) void mousePressed( MouseEvent me ) void mouseReleased( MouseEvent me )

MouseMotionListener void mouseMoved( MouseEvent me ) void mouseDragged( MouseEvent me )

9/04/2005Copyright 2005, by the authors of these slides, and Ateneo

de Manila University. All rights reserved

L13: Layout Managers

Slide 28

Mouse Event

Represents the state of the mouse pointer when the event occurs

Most useful methods: getX() and getY() returns the coordinates of the mouse