1. GUIs
Mimi Opkins
CECS277

2. Anatomy of an Application GUI
Internal structure
JFrame
JFrame
JPanel
containers
JPanel
JButton
JButton
JLabel
JLabel

3. JFrame’s Content Pane (2)
Menu Bar
Content Pane
Components
Container
Frame (with Title Bar) x
Menu Bar (optional)
Content Pane
Container

4. JFrame’s Content Pane
A JFrame has a content pane which is a Container where you can add components
Use the getContentPane method to get its reference
Add components to the content pane or
Add a container to the content pane, then add components to the container
Container contentPane = getContentPane();

5. Layout Management Arranging components on the screen
User-interface components are arranged by placing them in a Swing Container object:
JFrame (content pane), JPanel and JApplet

6. Layout Management
Each container has a layout manager that directs the arrangement of its components
Three useful layout managers are:
1) Border layout
2) Flow layout
3) Grid layout
Components are added to a container which uses a layout manager to place them

7. Flow Layout A JPanel uses flow layout by default panel = new JPanel();
Components are added from left to right
panel = new JPanel();
panel.add(rateLabel);
panel.add(rateField);
panel.add(button);
panel.add(resultLabel);
A JPanel uses flow layout by default

8. 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);

9. Grid Layout
Components are placed in boxes in a simple table arrangement
Specify the size (rows then columns) of the grid
JPanel buttonPanel = new JPanel();
buttonPanel.setLayout(new GridLayout(4, 3));
Then add components which will be placed from the upper left, across, then down
buttonPanel.add(button7);
buttonPanel.add(button8);
buttonPanel.add(button9);
buttonPanel.add(button4);
. . .

10. 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
JTextField in NORTH of keypadPanel
JPanel GridLayout in CENTER of keypadPanel
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);
Copyright © 2014 by John Wiley & Sons. All rights reserved.

11. Processing Text Input Dialog boxes allows for user input… but
Popping up a separate dialog box for each input is not a natural user interface
Most graphical programs collect text input through text fields
The JTextField class provides a text field
When you construct a text field, supply the width:
The approximate number of characters that you expect
If the user exceeds this number, text will ‘scroll’ left
final int FIELD_WIDTH = 10;
final JTextField rateField = new JTextField(FIELD_WIDTH);

12. Add a Label and a Button A Label helps the user know what you want
Normally to the left of a textbox
A Button with an actionPerformed method can be used to read the text from the textbox with the getText method
Note that getText returns a String, and must be converted to a numeric value if it will be used in calculations
JLabel rateLabel = new JLabel("Interest Rate: ");
double rate = Double.parseDouble(rateField.getText());
double interest = account.getBalance() * rate / 100;
account.deposit(interest);
resultLabel.setText("balance: " + account.getBalance());

13. 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

14. Inner Classes
An inner class is a class that is declared inside another class
Trivial class can be declared inside a method:
public class MeasurerTester {
public static void main(String[] args)
class AreaMeasurer implements Measurer
. . . }
Measurer areaMeas = new AreaMeasurer();
double averageArea = Data.average(rects, areaMeas);

15. Inner Classes
You can declare inner class inside an enclosing class, but outside its methods.
It is available to all methods of enclosing class:
public class MeasurerTester {
class AreaMeasurer implements Measurer
. . . }
public static void main(String[] args)
Measurer areaMeas = new AreaMeasurer();
double averageArea = Data.average(rects, areaMeas);

16. Inner Classes
Compiler turns an inner class into a regular class file with a strange name:
MeasurerTester$1AreaMeasurer.class
Inner classes are commonly used for utility classes that should not be visible elsewhere in a program.

17. Event Handling
In an event-driven user interface, the program receives an event whenever the user manipulates an input component.
User interface events include key presses, mouse moves, button clicks, and so on.
Most programs don't want to be flooded by irrelevant events.
A program must indicate which events it needs to receive.

18. Event Handling
Event listeners:
A program indicates which events it needs to receive by installing event listener objects
Belongs to a class provided by the application programmer
Its methods describe the actions to be taken when an event occurs
Notified when event happens
Event source:
User interface component that generates a particular event
Add an event listener object to the appropriate event source
When an event occurs, the event source notifies all event listeners

19. Event Handling public interface ActionListener {
Example: A program that prints a message whenever a button is clicked.
Button listeners must belong to a class that implements the ActionListener interface:
public interface ActionListener {
void actionPerformed(ActionEvent event); }
Your job is to supply a class whose actionPerformed method contains the instructions that you want executed whenever the button is clicked.

20. Event Handling
Your job is to supply a class whose actionPerformed method contains the instructions that you want executed whenever the button is clicked.

21. ClickListener.java
1 import java.awt.event.ActionEvent; 2 import java.awt.event.ActionListener; 3 4 /** 5 An action listener that prints a message. 6 */ 7 public class ClickListener implements ActionListener 8 { 9 public void actionPerformed(ActionEvent event) 10 { 11 System.out.println("I was clicked."); 12 } 13 }

22. Event Handling - Listening to Events
event parameter of actionPerformed contains details about the event, such as the time at which it occurred.
Construct an object of the listener and add it to the button:
ActionListener listener = new ClickListener();
button.addActionListener(listener);
Whenever the button is clicked, it calls:
listener.actionPerformed(event);
And the message is printed.
Similar to a callback
Use a JButton component for the button; attach an ActionListener to the button.

23. ButtonViewer.java
1 import java.awt.event.ActionListener; 2 import javax.swing.JButton; 3 import javax.swing.JFrame; 4 5 /** 6 This program demonstrates how to install an action listener. 7 */ 8 public class ButtonViewer 9 { 10 private static final int FRAME_WIDTH = 100; 11 private static final int FRAME_HEIGHT = 60; public static void main(String[] args) 14 { 15 JFrame frame = new JFrame(); 16 JButton button = new JButton("Click me!"); 17 frame.add(button); ActionListener listener = new ClickListener(); 20 button.addActionListener(listener); frame.setSize(FRAME_WIDTH, FRAME_HEIGHT); 23 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 24 frame.setVisible(true); 25 } 26 }

24. Using Inner Classes for Listeners
Implement simple listener classes as inner classes like this:
JButton button = new JButton(". . .");
// This inner class is declared in the same method
// as the button variable
class MyListener implements ActionListener {
. . . }
ActionListener listener = new MyListener();
button.addActionListener(listener);
Advantages
Places the trivial listener class exactly where it is needed, without cluttering up the remainder of the project
Methods of an inner class can access instance variables and methods of the surrounding class

25. Using Inner Classes for Listeners
Local variables that are accessed by an inner class method must be declared as final.
Example: add interest to a bank account whenever a button is clicked:
JButton button = new JButton("Add Interest");
final BankAccount account = new BankAccount(INITIAL_BALANCE);
// This inner class is declared in the same method as the account and
// button variables.
class AddInterestListener implements ActionListener {
public void actionPerformed(ActionEvent event)
// The listener method accesses the account variable
// from the surrounding block
double interest = account.getBalance() * INTEREST_RATE / 100;
account.deposit(interest); } };
ActionListener listener = new AddInterestListener();
button.addActionListener(listener);

26. InvestmentViewer1.java Continued
1 import java.awt.event.ActionEvent; 2 import java.awt.event.ActionListener; 3 import javax.swing.JButton; 4 import javax.swing.JFrame; 5 6 /** 7 This program demonstrates how an action listener can access 8 a variable from a surrounding block. 9 */ 10 public class InvestmentViewer1 11 { 12 private static final int FRAME_WIDTH = 120; 13 private static final int FRAME_HEIGHT = 60; private static final double INTEREST_RATE = 10; 16 private static final double INITIAL_BALANCE = 1000; public static void main(String[] args) 19 { 20 JFrame frame = new JFrame(); // The button to trigger the calculation 23 JButton button = new JButton("Add Interest"); 24 frame.add(button); 25
Continued

27. InvestmentViewer1.java Continued
26 // The application adds interest to this bank account 27 final BankAccount account = new BankAccount(INITIAL_BALANCE); class AddInterestListener implements ActionListener 30 { 31 public void actionPerformed(ActionEvent event) 32 { 33 // The listener method accesses the account variable 34 // from the surrounding block 35 double interest = account.getBalance() * INTEREST_RATE / 100; 36 account.deposit(interest); 37 System.out.println("balance: " + account.getBalance()); 38 } 39 } ActionListener listener = new AddInterestListener(); 42 button.addActionListener(listener); frame.setSize(FRAME_WIDTH, FRAME_HEIGHT); 45 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 46 frame.setVisible(true); 47 } 48 }
Continued

28. InvestmentViewer1.java Program Run: balance: 1100.0 balance: 1210.0

29. Building Applications with Buttons
Example: investment viewer program; whenever button is clicked, interest is added, and new balance is displayed:
Construct an object of the JButton class:
JButton button = new JButton("Add Interest");
We need a user interface component that displays a message:
JLabel label =
new JLabel("balance: " + account.getBalance());

30. Building Applications with Buttons
Use a JPanel container to group multiple user interface components together:
JPanel panel = new JPanel();
panel.add(button);
panel.add(label);
frame.add(panel);

31. Building Applications with Buttons
Listener class adds interest and displays the new balance:
class AddInterestListener implements ActionListener {
public void actionPerformed(ActionEvent event)
double interest = account.getBalance() * INTEREST_RATE / 100;
account.deposit(interest);
label.setText("balance=” + account.getBalance()); }
Add AddInterestListener as inner class so it can have access to surrounding final variables (account and label).

32. InvestmentViewer2.java Continued
1 import java.awt.event.ActionEvent; 2 import java.awt.event.ActionListener; 3 import javax.swing.JButton; 4 import javax.swing.JFrame; 5 import javax.swing.JLabel; 6 import javax.swing.JPanel; 7 8 /** 9 This program displays the growth of an investment. 10 */ 11 public class InvestmentViewer2 12 { 13 private static final int FRAME_WIDTH = 400; 14 private static final int FRAME_HEIGHT = 100; private static final double INTEREST_RATE = 10; 17 private static final double INITIAL_BALANCE = 1000; public static void main(String[] args) 20 { 21 JFrame frame = new JFrame(); // The button to trigger the calculation 24 JButton button = new JButton("Add Interest"); 25
Continued

33. InvestmentViewer2.java Continued
26 // The application adds interest to this bank account 27 final BankAccount account = new BankAccount(INITIAL_BALANCE); // The label for displaying the results 30 final JLabel label = new JLabel("balance: " + account.getBalance()); // The panel that holds the user interface components 33 JPanel panel = new JPanel(); 34 panel.add(button); 35 panel.add(label); 36 frame.add(panel); class AddInterestListener implements ActionListener 39 { 40 public void actionPerformed(ActionEvent event) 41 { 42 double interest = account.getBalance() * INTEREST_RATE / 100; 43 account.deposit(interest); 44 label.setText("balance: " + account.getBalance()); 45 } 46 } ActionListener listener = new AddInterestListener(); 49 button.addActionListener(listener); 50
Continued

34. InvestmentViewer2.java
51 frame.setSize(FRAME_WIDTH, FRAME_HEIGHT); 52 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 53 frame.setVisible(true); 54 } 55 }

35. Processing Timer Events
javax.swing.Timer generates equally spaced timer events, sending events to installed action listeners.
Useful whenever you want to have an object updated in regular intervals.
Declare a class that implements the ActionListener interface:
class MyListener implements ActionListener {
void actionPerformed(ActionEvent event)
Listener action (executed at each timer event) }

36. Processing Timer Events
To create a timer, specify the frequency of the events and an object of a class that implements the ActionListener interface:
MyListener listener = new MyListener();
Timer t = new Timer(interval, listener);
t.start();

37. RectangleComponent.java Displays a rectangle that moves.
The repaint method causes a component to repaint itself. Call this method whenever you modify the shapes that the paintComponent method draws.
1 import java.awt.Graphics; 2 import java.awt.Graphics2D; 3 import java.awt.Rectangle; 4 import javax.swing.JComponent; 5 6 /** 7 This component displays a rectangle that can be moved. 8 */ 9 public class RectangleComponent extends JComponent 10 { 11 private static final int BOX_X = 100; 12 private static final int BOX_Y = 100; 13 private static final int BOX_WIDTH = 20; 14 private static final int BOX_HEIGHT = 30; private Rectangle box; 17
Continued

38. RectangleComponent.java
18 public RectangleComponent() 19 { 20 // The rectangle that the paintComponent method draws 21 box = new Rectangle(BOX_X, BOX_Y, BOX_WIDTH, BOX_HEIGHT); 22 } public void paintComponent(Graphics g) 25 { 26 Graphics2D g2 = (Graphics2D) g; 27 g2.draw(box); 28 } /** 31 Moves the rectangle by a given amount. dx the amount to move in the x-direction dy the amount to move in the y-direction 34 */ 35 public void moveRectangleBy(int dx, int dy) 36 { 37 box.translate(dx, dy); 38 repaint(); 39 } 40 }

39. RectangleFrame.java Continued
1 import java.awt.event.ActionEvent; 2 import java.awt.event.ActionListener; 3 import javax.swing.JFrame; 4 import javax.swing.Timer; 5 6 /** 7 This frame contains a moving rectangle. 8 */ 9 public class RectangleFrame extends JFrame 10 { 11 private static final int FRAME_WIDTH = 300; 12 private static final int FRAME_HEIGHT = 400; private RectangleComponent scene; class TimerListener implements ActionListener 17 { 18 public void actionPerformed(ActionEvent event) 19 { 20 scene.moveRectangleBy(1, 1); 21 } 22 } 23
Continued

40. RectangleFrame.java
24 public RectangleFrame() 25 { 26 scene = new RectangleComponent(); 27 add(scene); setSize(FRAME_WIDTH, FRAME_HEIGHT); ActionListener listener = new TimerListener(); final int DELAY = 100; // Milliseconds between timer ticks 34 Timer t = new Timer(DELAY, listener); 35 t.start(); 36 } 37 }

41. RectangleViewer.java
1 import javax.swing.JFrame; 2 3 /** 4 This program moves the rectangle. 5 */ 6 public class RectangleViewer 7 { 8 public static void main(String[] args) 9 { 10 JFrame frame = new RectangleFrame(); 11 frame.setTitle("An animated rectangle"); 12 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 13 frame.setVisible(true); 14 } 15 }

42. Mouse Events Use a mouse listener to capture mouse events.
Implement the MouseListener interface which has five methods:
public interface MouseListener {
void mousePressed(MouseEvent event);
// Called when a mouse button has been pressed on a component
void mouseReleased(MouseEvent event);
// Called when a mouse button has been released on a component
void mouseClicked(MouseEvent event);
// Called when the mouse has been clicked on a component
void mouseEntered(MouseEvent event);
// Called when the mouse enters a component
void mouseExited(MouseEvent event);
// Called when the mouse exits a component }

43. Mouse Events public class MyMouseListener implements MouseListener {
Add a mouse listener to a component by calling the addMouseListener method:
public class MyMouseListener implements MouseListener {
// Implements five methods }
MouseListener listener = new MyMouseListener();
component.addMouseListener(listener);
Sample program: enhance RectangleComponent – when user clicks on rectangle component, move the rectangle to the mouse location.

44. RectangleComponent2.java Continued
First add a moveRectangle method to RectangleComponent:
1 import java.awt.Graphics; 2 import java.awt.Graphics2D; 3 import java.awt.Rectangle; 4 import javax.swing.JComponent; 5 6 /** 7 This component displays a rectangle that can be moved. 8 */ 9 public class RectangleComponent2 extends JComponent 10 { 11 private static final int BOX_X = 100; 12 private static final int BOX_Y = 100; 13 private static final int BOX_WIDTH = 20; 14 private static final int BOX_HEIGHT = 30; private Rectangle box; public RectangleComponent2() 19 { 20 // The rectangle that the paintComponent method draws 21 box = new Rectangle(BOX_X, BOX_Y, BOX_WIDTH, BOX_HEIGHT); 22 } 23
Continued

45. RectangleComponent2.java
24 public void paintComponent(Graphics g) 25 { 26 Graphics2D g2 = (Graphics2D) g; 27 g2.draw(box); 28 } /** 31 Moves the rectangle to the given location. x the x-position of the new location y the y-position of the new location 34 */ 35 public void moveRectangleTo(int x, int y) 36 { 37 box.setLocation(x, y); 38 repaint(); 39 } 40 }

46. Mouse Events
Call repaint to tell the component to repaint itself and show the rectangle in its new position.
When the mouse is pressed,the mouse listener moves the rectangle to the mouse location:
class MousePressListener implements MouseListener {
public void mousePressed(MouseEvent event)
int x = event.getX();
int y = event.getY();
component.moveTo(x, y); }
// Do-nothing methods
public void mouseReleased(MouseEvent event) {}
public void mouseClicked(MouseEvent event) {}
public void mouseEntered(MouseEvent event) {}
public void mouseExited(MouseEvent event) {}
All five methods of the interface must be implemented; unused methods can be empty.

47. Program Run
Figure 9 Clicking the Mouse Moves the Rectangle

48. RectangleFrame2.java Continued
1 import java.awt.event.MouseListener; 2 import java.awt.event.MouseEvent; 3 import javax.swing.JFrame; 4 5 /** 6 This frame contains a moving rectangle. 7 */ 8 public class RectangleFrame2 extends JFrame 9 { 10 private static final int FRAME_WIDTH = 300; 11 private static final int FRAME_HEIGHT = 400; private RectangleComponent2 scene; class MousePressListener implements MouseListener 16 { 17 public void mousePressed(MouseEvent event) 18 { 19 int x = event.getX(); 20 int y = event.getY(); 21 scene.moveRectangleTo(x, y); 22 } 23
Continued

49. RectangleFrame2.java
24 // Do-nothing methods 25 public void mouseReleased(MouseEvent event) {} 26 public void mouseClicked(MouseEvent event) {} 27 public void mouseEntered(MouseEvent event) {} 28 public void mouseExited(MouseEvent event) {} 29 } public RectangleFrame2() 32 { 33 scene = new RectangleComponent2(); 34 add(scene); MouseListener listener = new MousePressListener(); 37 scene.addMouseListener(listener); setSize(FRAME_WIDTH, FRAME_HEIGHT); 40 } 41 }

50. RectangleViewer2.java
1 import javax.swing.JFrame; 2 3 /** 4 This program displays a rectangle that can be moved with the mouse. 5 */ 6 public class RectangleViewer2 7 { 8 public static void main(String[] args) 9 { 10 JFrame frame = new RectangleFrame2(); 11 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 12 frame.setVisible(true); 13 } 14 }

51. Summary: Timers, Events
Timers and Animation
A timer generates action events at fixed intervals.
To make an animation, the timer listener should update and repaint a component several times per second.
Mouse Events
You use a mouse listener to capture mouse events.

52. Java Coordinate System

53. Each GUI Component Has its Own Coordinate System

54. The Graphics Class
You can draw strings, lines, rectangles, ovals, arcs, polygons, and polylines, using the methods in the Graphics class.

55. paintComponent Example
In order to draw things on a component, you need to define a class that extends JPanel and overrides its paintComponent method to specify what to draw.

56. paintComponent Example
import javax.swing.*; import java.awt.Graphics; public class TestPaintComponent extends JFrame { public TestPaintComponent() { add(new NewPanel()); } public static void main(String[] args) { TestPaintComponent frame = new TestPaintComponent(); frame.setTitle("TestPaintComponent"); frame.setSize(200, 100); frame.setLocationRelativeTo(null); // Center the frame frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true);

57. paintComponent Example
class NewPanel extends JPanel { protected void paintComponent(Graphics g) { super.paintComponent(g); g.drawLine(0, 0, 50, 50); g.drawString("Banner", 0, 40); }

58. Image Icons
Java uses the javax.swing.ImageIcon class to represent an icon.
An icon is a fixed-size picture; typically it is small and used to decorate components.
Images are normally stored in image files.
You can use new ImageIcon(filename) to construct an image icon.
For example, the following statement creates an icon from an image file us.gif in the image directory under the current class path:
ImageIcon icon = new ImageIcon(“image/us.gif”);

59. Displaying Image Icons
You learned how to create image icons and display image icons in labels and buttons. For example, the following statements create an image icon and display it in a label:
ImageIcon icon = new ImageIcon("image/us.gif");
JLabel jlblImage = new JLabel(imageIcon);
An image icon displays a fixed-size image. To display an image in a flexible size, you need to use the java.awt.Image class. An image can be created from an image icon using the getImage() method as follows:
Image image = imageIcon.getImage();

60. Displaying Images
Using a label as an area for displaying images is simple and convenient, but you don't have much control over how the image is displayed. A more flexible way to display images is to use the drawImage method of the Graphics class on a panel. Four versions of the drawImage method are shown here.

61. Displaying Images Example
This example gives the code that displays an image from image/us.gif. The file image/us.gif is under the class directory. The Image from the file is created in the program. The drawImage method displays the image to fill in the whole panel, as shown in the figure.

62. Displaying Images Example
import java.awt.*;
import javax.swing.*;
public class DisplayImage extends JFrame {
public DisplayImage() {
add(new ImagePanel()); }
public static void main(String[] args) {
JFrame frame = new DisplayImage();
frame.setTitle("DisplayImage");
frame.setSize(300, 300);
frame.setLocationRelativeTo(null); // Center the frame
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);

63. Displaying Images Example
class ImagePanel extends JPanel {
private ImageIcon imageIcon =
new ImageIcon("image/us.gif");
private Image image = imageIcon.getImage();
@Override /** Draw image on the panel */
protected void paintComponent(Graphics g) {
super.paintComponent(g);
if (image != null)
g.drawImage(image, 0, 0, getWidth(), getHeight(), this); }

64. Case Study: ImageViewer Class
Displaying an image is a common task in Java programming. This case study develops a reusable component named ImageViewer that displays an image in a panel. The ImageViewer class contains the properties image, imageFilename, stretched, xCoordinate, and yCoordinate.

65. ImageView Example
This example gives an example that creates six images using the ImageViewer class.

66. ImageView Example import javax.swing.*; import java.awt.*;
public class SixFlags extends JFrame {
public SixFlags() {
Image image1 = new ImageIcon("image/us.gif").getImage();
Image image2 = new mageIcon("image/ca.gif").getImage();
Image image3 = new ImageIcon("image/india.gif").getImage();
Image image4 = new ImageIcon("image/uk.gif").getImage();
Image image5 = new ImageIcon("image/china.gif").getImage();
Image image6 = new ImageIcon("image/norway.gif").getImage();

67. ImageView Example setLayout(new GridLayout(2, 0, 5, 5));
add(new ImageViewer(image1));
add(new ImageViewer(image2));
add(new ImageViewer(image3));
add(new ImageViewer(image4));
add(new ImageViewer(image5));
add(new ImageViewer(image6)); }
public static void main(String[] args) {
SixFlags frame = new SixFlags();
frame.setTitle("SixFlags");
frame.setLocationRelativeTo(null); // Center the frame
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(400, 320);
frame.setVisible(true);