GUIs Mimi Opkins CECS277

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

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

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();

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

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

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

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

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

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.

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

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());

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

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

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

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.

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.

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

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.

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

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 }

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.

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; 12 13 public static void main(String[] args) 14 { 15 JFrame frame = new JFrame(); 16 JButton button = new JButton("Click me!"); 17 frame.add(button); 18 19 ActionListener listener = new ClickListener(); 20 button.addActionListener(listener); 21 22 frame.setSize(FRAME_WIDTH, FRAME_HEIGHT); 23 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 24 frame.setVisible(true); 25 } 26 }

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

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

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; 14 15 private static final double INTEREST_RATE = 10; 16 private static final double INITIAL_BALANCE = 1000; 17 18 public static void main(String[] args) 19 { 20 JFrame frame = new JFrame(); 21 22 // The button to trigger the calculation 23 JButton button = new JButton("Add Interest"); 24 frame.add(button); 25 Continued

InvestmentViewer1.java Continued 26 // The application adds interest to this bank account 27 final BankAccount account = new BankAccount(INITIAL_BALANCE); 28 29 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 } 40 41 ActionListener listener = new AddInterestListener(); 42 button.addActionListener(listener); 43 44 frame.setSize(FRAME_WIDTH, FRAME_HEIGHT); 45 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 46 frame.setVisible(true); 47 } 48 } Continued

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

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());

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

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

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; 15 16 private static final double INTEREST_RATE = 10; 17 private static final double INITIAL_BALANCE = 1000; 18 19 public static void main(String[] args) 20 { 21 JFrame frame = new JFrame(); 22 23 // The button to trigger the calculation 24 JButton button = new JButton("Add Interest"); 25 Continued

InvestmentViewer2.java Continued 26 // The application adds interest to this bank account 27 final BankAccount account = new BankAccount(INITIAL_BALANCE); 28 29 // The label for displaying the results 30 final JLabel label = new JLabel("balance: " + account.getBalance()); 31 32 // 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); 37 38 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 } 47 48 ActionListener listener = new AddInterestListener(); 49 button.addActionListener(listener); 50 Continued

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

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) }

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();

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; 15 16 private Rectangle box; 17 Continued

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 } 23 24 public void paintComponent(Graphics g) 25 { 26 Graphics2D g2 = (Graphics2D) g; 27 g2.draw(box); 28 } 29 30 /** 31 Moves the rectangle by a given amount. 32 @param dx the amount to move in the x-direction 33 @param 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 }

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; 13 14 private RectangleComponent scene; 15 16 class TimerListener implements ActionListener 17 { 18 public void actionPerformed(ActionEvent event) 19 { 20 scene.moveRectangleBy(1, 1); 21 } 22 } 23 Continued

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

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 }

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 }

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.

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; 15 16 private Rectangle box; 17 18 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

RectangleComponent2.java 24 public void paintComponent(Graphics g) 25 { 26 Graphics2D g2 = (Graphics2D) g; 27 g2.draw(box); 28 } 29 30 /** 31 Moves the rectangle to the given location. 32 @param x the x-position of the new location 33 @param 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 }

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.

Program Run Figure 9 Clicking the Mouse Moves the Rectangle

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; 12 13 private RectangleComponent2 scene; 14 15 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

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 } 30 31 public RectangleFrame2() 32 { 33 scene = new RectangleComponent2(); 34 add(scene); 35 36 MouseListener listener = new MousePressListener(); 37 scene.addMouseListener(listener); 38 39 setSize(FRAME_WIDTH, FRAME_HEIGHT); 40 } 41 }

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 }

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.

Java Coordinate System

Each GUI Component Has its Own Coordinate System

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

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.

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

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); }

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”);  

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();

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.

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.

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

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); }

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.

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

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();

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