Graphical User Interfaces

• Allow for interaction with– Buttons– Menus– Text Fields

• Two Java Libraries to assist in GUI Programming– AWT– Swing

Text Fields• provide a line of user-updatable text• need to

- import javax.swing.*; - declare a variable

private JTextField input;- construct

input = new JTextField( "Enter text here " );- place in a window

- use. For example,String userInput = input.getText();

• User enters desired text in the text field at the north of the window

• With each click on the canvas, the text is displayed

import objectdraw.*;import java.awt.*;import javax.swing.*;

public class TextController extends WindowController {private JTextField input;

public void begin() {input = new JTextField( "Enter text here" );Container contentPane = getContentPane();contentPane.add( input, BorderLayout.NORTH );contentPane.validate();

}

public void onMouseClick( Location point ){new Text( input.getText(), point, canvas );

}}

The Container Class• Graphical components must be put in a

Container to be displayedimport java.awt.*;

Container contentPane = getContentPane();

contentPane.add( aComponent, position );

• Validate to be sure components displayed properly

Layout of Components in a Container

• Many layout options

• One example: BorderLayout– BorderLayout.NORTH– BorderLayout.EAST– BorderLayout.SOUTH– BorderLayout.WEST– BorderLayout.CENTER

Buttons

Let’s add a button to our previous program.Clicking on the button clears the canvas.

• Want clicks on the button to trigger a program action

• Requires slightly more programming effort than text fields

import objectdraw.*;import java.awt.*;import java.awt.event.*;import javax.swing.*;

public class TextButtonController extends WindowController implements ActionListener {

private JTextField input;

public void begin() {input = new JTextField( "Enter text here" );JButton clearButton = new JButton(" Clear canvas ");

Container contentPane = getContentPane();contentPane.add( input, BorderLayout.NORTH );contentPane.add( clearButton, BorderLayout.SOUTH );contentPane.validate();

clearButton.addActionListener(this);}

public void onMouseClick( Location point ){new Text( input.getText(), point, canvas );

}

public void actionPerformed( ActionEvent evt ) {canvas.clear();

}}

Action Events

• When a JButton is clicked

– an ActionEvent is generated– actionPerformed is executed

• Just as onMouseClick is executed whenever a user clicks on the canvas

– actionPerformed is provided with a parameter• Contains information about the object that

triggered the event

Checklist for using JButtons

• Construct the JButton• Add it to the content pane of the

WindowController extension and validate• So that the WindowController extension

responds to events generated by the JButton– Add this as a listener– Make sure WindowController extension implements

ActionListener– Add actionPerformed method

Combo Boxes• The Swing package’s name for pop-up

menus: JComboBox

• Let’s use one to control the speed of a simple falling ball animation– Three speed options: slow, medium, fast

FallingBall.java

Using a JComboBox

MenuBallController.java

Checklist for JComboBoxes• Construct the JComboBox and add selection

options• Add it to the content pane of the

WindowController extension and validate• So that the WindowController extension

responds to events generated– Add this as a listener– Make sure WindowController extension implements

ActionListener– Add actionPerformed method

Better GUI design: basic tools

• Panels• Layout Managers

The JPanel

• Provided by Swing• Organize subcomponents

– Add subcomponents to JPanel– Add JPanel to Container

Organizing JButtons in a JPanel

• Construct the JPanelJPanel southPanel = new JPanel();

• After each JButton is constructed, add it to the JPanel southPanel.add( fastButton );southPanel.add( mediumButton );southPanel.add( slowButton );

• Add the JPanel to the containercontentPane.add(southPanel, BorderLayout.SOUTH);

FlowLayout

• JPanels use a different layout manager:FlowLayout

• Lays out its components left to right

Which button?If we make this a listener for each of the three buttons, as we havebefore…actionPerformed method must determine which one clicked

public void actionPerformed(ActionEvent evt) {if (evt.getSource() == slowButton) {speed = SLOW_SPEED;} else if (evt.getSource() == mediumButton) {speed = MEDIUM_SPEED;} else {speed = FAST_SPEED;}if (droppedBall != null) {droppedBall.setSpeed(speed);}

}

More on Layout Managers

• Determine how GUI components should be displayed

• Do their best to accommodate when user changes window size

• Some useful layout managers:– BorderLayout: adds to sides or center– FlowLayout: adds left to right– GridLayout: divides a container into equally sized

parts• southPanel.setLayout( new GridLayout(1, 3) );

Sliders

• Used to graphically select values in a range

• Can be vertical or horizontal

• stateChanged method replaces actionPerformed

• Swing’s name: JSlider

A slider for controlling speedimport objectdraw.*;import java.awt.*;import java.awt.event.*;import javax.swing.*;import javax.swing.event.*;

public class SliderBallController extends WindowController implements ChangeListener {

private JSlider speedSlider;

public void begin() {speedSlider = new JSlider (JSlider.HORIZONTAL, SLOW_SPEED,

FAST_SPEED, SLOW_SPEED);speedSlider.addChangeListener(this);

}

A slider for controlling speed

public void stateChanged (ChangeEvent evt) {speed = speedSlider.getValue();If (droppedBall != null) {

droppedBall.setSpeed(speed);}

}}

Complete SliderBallController class

Checklist for JSliders• Construct the JSlider; provide four parameters:

– Constant that says whether vertical or horizontal– Minimum and maximum integer values for slider– Initial value of the slider

• Add it to the content pane of the WindowController extension and validate

• So that the WindowController extension responds to events generated– Add this as a listener– Make sure WindowController extension implements

ChangeListener– Add stateChanged method

• Import javax.swing.event package

Labels• JLabel class provided by

Swing• Single line of read-only

text• A passive component -

no event listener required!

• Useful for providing labels for sliders, text fields, etc.

Using JLabels

• Two ways to construct– Providing text only

JLabel speedLabel = new JLabel("Speed is ");– Providing text and justification

JLabel speedLabel = new JLabel("Speed is ",JLabel.RIGHT);

• Modifiable with setText methodspeedLabel.setText("Speed is " + speed);

LabelBallController.java

Handling Keystrokes

• Can write Java programs so that every keystroke made by the user generates an event that can be handled

• No need to add special components to our already-existing window

Handling Keystrokes• Need to associate listener with keyboard events

this.addKeyListener( this ); // in a WindowController extensioncanvas.addKeyListener( this ); // sometimes need this!setFocusable( true );

• Need to make sure listener has appropriate method to handle key events– public void keyPressed ( KeyEvent evt )– public void keyReleased ( KeyEvent evt )– public void keyTyped ( KeyEvent evt )

• KeyEvents include: VK_A – VK_Z, VK_0 – VK_9

Review• Construct the GUI component

• Add the component to a container (i.e., a panel or the content pane of a window)

• If a listener is needed– Add this as a listener for the GUI component– Make sure the WindowController extension implements

the appropriate listener interface– Add the event-handling methods promised by the

listener interface