May 20, 1998 CS102-02 Lecture 8-2

Building GUIs in Java III

CS 102-02

Lecture 8-2

A picture's worth a thousand words

May 20, 1998 CS102-02 Lecture 8-2

Agenda

• Events: Interfaces and adapters

• Keyboard events

• Layout managers– FlowLayout– BorderLayout– GridLayout

• Panels

May 20, 1998 CS102-02 Lecture 8-2

Listening to a Mouse

• Event-listening interfaces group related methods and variables together

• Mouse events include:– Single clicks– Double clicks– Shift-clicking– Mouse moving & dragging

May 20, 1998 CS102-02 Lecture 8-2

MouseListener Interface• mouseClicked(MouseEvent)

– Invoked when the mouse has been clicked on a component.

• mouseEntered(MouseEvent) – Invoked when the mouse enters a component.

• mouseExited(MouseEvent) – Invoked when the mouse exits a component.

• mousePressed(MouseEvent) – Invoked when a mouse button has been pressed

on a component. • mouseReleased(MouseEvent)

– Invoked when a mouse button has been released on a component.

May 20, 1998 CS102-02 Lecture 8-2

MouseMotionListener Interface

• mouseDragged(MouseEvent) – Invoked when a mouse button is pressed

on a component and then dragged.

• mouseMoved(MouseEvent) – Invoked when the mouse button has been

moved on a component (with no buttons down).

May 20, 1998 CS102-02 Lecture 8-2

MouseEvents• Notice that every one of the methods

takes a MouseEvent– Number of mouse clicks– The x,y position of the event relative to the

source component.– Is this mouse event is the popup-menu

trigger event for the platform?– Translates the coordinate position of the

event by x, y.

May 20, 1998 CS102-02 Lecture 8-2

How to Use the Event Interfaces• Write a class which implements the

interface; implementing means you must either:– Write definitions for all the methods– Declare the implementing class abstract

• Implementing class can then be a listener

• Register the listener with a component– Registered component will get events

May 20, 1998 CS102-02 Lecture 8-2

Listeners in Action• Write a listener:

public class MouseTracker extends Applet implements MouseListener, MouseMotionListener

:public void mouseClicked(MouseEvent e){ setValues( "Clicked", e.getX(), e.getY() );}

• Register the listeneraddMouseListener( this );addMouseMotionListener( this );

May 20, 1998 CS102-02 Lecture 8-2

A la carte Events

• What if you don't want the whole interface?

• Adapter classes enable you to pick and and choose

• Every event listener interface with more than one method has a corresponding adapter class

May 20, 1998 CS102-02 Lecture 8-2

Using Event Adapters for Fun and Profit

• Event adapter class has already implemented the interface for you(What do you think the method definitions

look like?)

• Pick the methods you really want and override them

May 20, 1998 CS102-02 Lecture 8-2

Overriding Adapter Methods

• To override a method, you must first create a subclass of the class

• Next, write your own implementation of the method

May 20, 1998 CS102-02 Lecture 8-2

Using MouseMotionAdapter

class MotionHandler extends MouseMotionAdapter {

private Drag dragger;

public MotionHandler( Drag d ) { dragger = d; } public void mouseDragged(MouseEvent e) { dragger.setCoordinates( e.getX(), e.getY() ); }}

Subclass the adapter

Override the methods you want

May 20, 1998 CS102-02 Lecture 8-2

Putting It to Work• Got the mouseDragged event, so use itpublic class Drag extends Applet {

private int xValue = -10;

private yValue = -10;

public void init() {

addMouseMotionListener(

new MotionHandler( this ) );

}

– Where's the MouseMotionListener in this picture?

Our custom event handler

May 20, 1998 CS102-02 Lecture 8-2

Keyboard Events

• More to programs than the mouse

• Keys have events too, you knowkeyPressed(KeyEvent)

Invoked when a key has been pressed.

keyReleased(KeyEvent) Invoked when a key has been released.

keyTyped(KeyEvent) Invoked when a key has been typed.

May 20, 1998 CS102-02 Lecture 8-2

Know Your Keys

• Some keys are ordinary, run-of-the-mill keys– "A", "S", "8", "\" and so on

• Other keys are calls to action– Home, PgUp, F3

• Still other keys modify keys– Ctrl, Alt, Command

May 20, 1998 CS102-02 Lecture 8-2

Some Key Facts I• Every key on the keyboard has a unique

key code– Press a key, and an event is fired– Event (a KeyEvent) contains the key code– Key code doesn't change, even if the key is

modified

• Key characters are unique Unicode values fired by a key or a key combination– Key can fire different key characters ('a' or 'A')

May 20, 1998 CS102-02 Lecture 8-2

Some Key Facts II• Action keys are usually keys which don't

fire Unicode characters (For example, Home)– Key character is CHAR_UNDEFINED

• Key events are usually generated by users, through the AWT but– Programs can generate key events on their

own– Example: Testing a TextField

May 20, 1998 CS102-02 Lecture 8-2

Laying It On the Line• Java's really cross-platform

– Small screens, big screens, PDAs– Toasters?

• Graphics are different on different platforms

• Use LayoutManagers to control placement and appearance of GUIs– Different LayoutManagers have different

effects

May 20, 1998 CS102-02 Lecture 8-2

How to Use a Layout Manager

• Containers must lay out contained components

• Set the container's layout to a desired LayoutManager– LayoutManager takes over

May 20, 1998 CS102-02 Lecture 8-2

Go With the Flow

• FlowLayout is the most basic– Place a component, add some space,

place another component– Filled a row? Start another one!

• Default for Panels

May 20, 1998 CS102-02 Lecture 8-2

Different Flows• FlowLayout()

– Constructs a new Flow Layout with a centered alignment and a default 5-unit horizontal and vertical gap.

• FlowLayout(int) – Constructs a new Flow Layout with the specified

alignment and a default 5-unit horizontal and vertical gap.

• FlowLayout(int, int, int) – Creates a new flow layout manager with the

indicated alignment and the indicated horizontal and vertical gaps.

May 20, 1998 CS102-02 Lecture 8-2

FlowLayout Demo

public void actionPerformed(ActionEvent e){ int align;

if ( e.getSource() == left ) align = FlowLayout.LEFT; else if ( e.getSource() == center ) align = FlowLayout.CENTER; else align = FlowLayout.RIGHT;

setLayout( new FlowLayout( align ) ); validate(); // re-align components }

May 20, 1998 CS102-02 Lecture 8-2

BorderLayout

• Arrange up to 5 components– North, South, East and West– Center: Allocated al the leftover space

May 20, 1998 CS102-02 Lecture 8-2

BorderLayout in ActionIn the init() method:

// set layout to border layoutsetLayout( new BorderLayout( 5, 5 ) );

:// b is an array of Buttons//order not importantadd( b[ 0 ], BorderLayout.NORTH ); add( b[ 1 ], BorderLayout.SOUTH );add( b[ 2 ], BorderLayout.EAST );add( b[ 3 ], BorderLayout.WEST );add( b[ 4 ], BorderLayout.CENTER );

May 20, 1998 CS102-02 Lecture 8-2

GridLayout

• Arrange components in a grid– All grid cells are the same size– Control horizontal and vertical spacing

• Example from Figure 10.31

// set layout to grid layout

setLayout( new GridLayout( 2, 3, 5, 5 ));

May 20, 1998 CS102-02 Lecture 8-2

Creating GridLayouts

GridLayout() Creates a grid layout with a default of one column per component, in a single row.

GridLayout(int, int) Creates a grid layout with the specified number of rows and columns.

GridLayout(int, int, int, int) Creates a grid layout with the specified number of rows and columns.

May 20, 1998 CS102-02 Lecture 8-2

Panels• Panels are Containers

– Applet inherits from Panel, which is what makes an Applet a Container

• Generic containers

• Hierarchical layouts– Create an Applet– Create multiple Panels, each with its own

layout and add Panels to Applet's layout

May 20, 1998 CS102-02 Lecture 8-2

Building a Panelpublic void init(){ buttonPanel = new Panel(); buttons = new Button[ 5 ];

buttonPanel.setLayout( new GridLayout( 1, buttons.length ) );

for ( int i = 0; i < buttons.length; i++ ) { buttons[ i ] = new Button( "Button " + (i + 1) ); buttonPanel.add( buttons[ i ] ); } setLayout( new BorderLayout() ); add( buttonPanel, BorderLayout.SOUTH );}