Download - Graphical User Interfaces
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