Lecture 19 Graphics User Interfaces (GUIs)

User Interface The way in which the user interacts with the program Separate “what” the program does from “how” the user interacts with it Television Function: Adjust volume, channels, color, etc Interface: Manual controls Universal Remote Automobile Function: Turn, accelerate, decelerate, stop Human driver Autonomous vehicle Project 3’s Forest Function: Add rocks, trees, weeds, grass, foxes, mice, rabbits Files Console Graphical - DARPA Urban Challenge

Powerball Example Here’s an example using a class called PowerBallMachine. It is based on the Powerball lottery where a person must correctly match 5 balls selected from a collection of 55 balls. PowerballMachine has a single method called getOdds(int n, int k). getOdds computes the chances of correctly selecting k balls from a collection of size n. Let’s look at two interfaces for out PowerBallMachine. The first will be a text based interface and the second with be a graphical interface. import java.util.*; public class PowerBallMachine { public int getOdds(int n, int k) { int lotteryOdds = 1; for (int i = 1; i <=k; i++) { lotteryOdds = lotteryOdds * (n-i+1)/i; } return lotteryOdds;

Powerball- Console Interface import java.util.*; public class PowerBallMain { public static void main(String args[]) { PowerBallMachine machine = new PowerBallMachine(); Scanner input = new Scanner(System.in); System.out.println("Enter number of balls to pick from: "); int n = input.nextInt(); System.out.println("How many balls do you want to draw? "); int k = input.nextInt(); System.out.println("Odds of winning are 1 in " + machine.getOdds(n, k)); }

Powerball – Graphical User Interface

Building Graphical User Interfaces Abstract Window Toolkit versus Swing AWT depend on native code (heavyweight) Faster than swing Not portable Swing is pure java (lightweight) Portable Not necessarily good for graphics Pros and Cons: see http://bdn1.borland.com/article/0,1410,26970,00.html

Swing Components Frames Scroll Panes Panels Tabbed Panes Split Panes Everything builds off of the Frame! Panels Tabbed Panes Split Panes Sun’s Java Tutorial

Swing Components Progress Bars Lists Buttons Combo Boxes Labels Text Boxes Menus Spinners Sliders Sun’s Java Tutorial

Anatomy of a Frame

Swing Components Interact with your Program PowerballMachine getOdds(int n, int k) Your program needs to know when the user enters a number in one of the two text fields so it can call getOdds to get the updated odds. Likewise, it needs to know when the user presses the Run button for the same reason. When the user presses the Exit button your program needs to know that as well so that it can shut down. The notification occurs via objects called Events. Every time a GUI component changes it’s state, it generates an event and sends the event to any object that is interested. An object lets the GUI component know that it is interested the events by registering as an event listener with the GUI component.

Event Handling Graphical User Interface Widget Event Listeners or Object A Object B Object C Event Event Event Widget Registered Listeners Object A Object B Object C Event Listeners or Event Handlers

Creating & Sending Events GUI components that can change state, generate “events” when a change occurs JButtons – ActionEvent JTextField – ActionEvent JLists – ListSelectionEvent JCheckBox – ItemEvent plus many, many more... All have a method which allows objects to register as an event listener addxxxListener(xxxListener x); Events are not limited to GUI components, however they will be introduced and discussed in that context

Event Listeners/Handlers Objects become event listeners by implementing the appropriate interface that will allow them to register with a GUI component that generates events Ex: JButton is a GUI component that generates events every time it is pressed JButton b = new JButton(“Button #1”); Generate ActionEvents addActionListener(ActionListener a); Any object implementing the ActionListener interface can register with the JButton to be notified when the button changes state (is pressed) public interface ActionListener { void actionPerformed(ActionEvent e); } public class MyObject implements ActionListener { ... public void actionPerformed(ActionEvent e) { System.out.println(“Don’t press the button!”); MyObject mo = new MyObject(); b.addActionListener(mo); By virtue of being a JButton, b generates ActionEvents By implementing the ActionListener interface, MyObject becomes an ActionListener Since mo is an ActionListener, it can register with JButton b

Button Example We’re going to start with a very simple example with a Frame that contains two GUI components a button a label. When the button is pressed, a message is displayed at the console

GuiTest extends JFrame import javax.swing.*; import java.awt.*; import java.awt.event.*; public class GuiTest extends JFrame { private Container c; public GuiTest(String t) { super(t); setSize(275, 170); c = getContentPane(); c.setLayout(new FlowLayout()); JButton b = new JButton("I Believe"); b.addActionListener(new MyActionListener()); c.add(b); JLabel lab = new JLabel("Push the button!"); c.add(lab); setVisible(true); addWindowListener(new MyWindowAdapter()); } public static void main(String[] args) { GuiTest g = new GuiTest("GuiTest Title"); class MyWindowAdapter extends WindowAdapter { public void windowClosing(WindowEvent e) { System.out.println("Window closed...Exiting Program"); System.exit(0); class MyActionListener implements ActionListener { public void actionPerformed(ActionEvent e) { System.out.println("Button Pressed"); GuiTest extends JFrame Compare this version to the previous. Things to note: The explicit definition of a JFrame is gone. GuiTest extends JFrame so it is the JFrame. Most of what was in main is now in the GuiTest constructor. The title for the frame is passed via the constructor using super. Notice that we have three separate classes

GuiTest: Inner Classes import javax.swing.*; import java.awt.*; import java.awt.event.*; public class GuiTest1 extends JFrame { private Container c; public GuiTest1(String t) { super(t); setSize(275, 170); c = getContentPane(); c.setLayout(new FlowLayout()); JButton b = new JButton("I Believe"); b.addActionListener(new MyActionListener()); c.add(b); JLabel lab = new JLabel("Push the button!"); c.add(lab); setVisible(true); addWindowListener(new MyWindowAdapter()); } public static void main(String[] args) { GuiTest1 g = new GuiTest1("GuiTest Title"); class MyWindowAdapter extends WindowAdapter { public void windowClosing(WindowEvent e) { System.out.println("Window closed...Exiting Program"); System.exit(0); class MyActionListener implements ActionListener { public void actionPerformed(ActionEvent e) { System.out.println("Button Pressed"); Here’s we’ve brought all three into a single class and had GuiTest extend JFrame. We’ve also moved most of it to the constructor.

GuiTest: Count the button clicks import javax.swing.*; import java.awt.*; import java.awt.event.*; public class GuiTest3 extends JFrame { private Container c; private int x = 0; JLabel lab; public GuiTest3(String t) { super(t); setSize(275, 170); c = getContentPane(); c.setLayout(new FlowLayout()); JButton b = new JButton("I Believe"); b.addActionListener(new MyActionListener()); c.add(b); lab = new JLabel("Push the button!"); c.add(lab); setVisible(true); } public static void main(String[] args) { GuiTest3 g = new GuiTest3("GuiTest Title"); g.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); class MyActionListener implements ActionListener { public void actionPerformed(ActionEvent e) { x++; if (x == 1) { lab.setText("First Time!"); System.out.println("Button pressed for the first time!"); } else if (x < 10) { lab.setText(x + " times."); System.out.println("Button Pressed " + x + " times."); else { lab.setText("Enough already...stop!"); We did two things here, we got rid of the WindowAdapter and we also added some additional functionality to the ActionListener If we had not made MyActionListener an inner class then we would not be able to change the label and count the clicks.