1005ICT Object Oriented Programming Lecture Notes

1005ICT Object Oriented Programming Lecture Notes School of Information and Communication Technology Griffith University Semester 2, 2015 1

20 GUI Components and Events This section develops a program with a graphical user interface, built from Swing components. 20.1 The problem Our client wants the Human Resource Management (HRM) system we built to retain its existing functionality, but with a Graphical user interface (GUI). They do want one extra feature. They would like to be able to view the current staff roster within the interface. 1005ICT Object Oriented Programming 2015-2 2

20.2 Design For this program, there are two aspects to the design: the layout of the the GUI; and the class design. 20.2.1 GUI design We should plan the components, and how they will function. This requires both a diagram and explanatory notes. 1005ICT Object Oriented Programming 2015-2 3

This is a mock up of the desired interface, a window featuring labels, a text field, a scrollable text area, and buttons. 8 X 1 New name: 2 4 Roster: Campbell Rick Aspley 3 Hire 1 Hank Zappa 2 Lady Dada 5 6 7 Fire Retire 1005ICT Object Oriented Programming 2015-2 4

Component descriptions and behaviours: 1. Label New name: indicates the purpose of the text field. 2. Text field where the name of a new employee may be entered. Should be able to hire on pressing the return/enter key. 3. Button Hire hires the new employee whose name in the text area. 4. Label Roster: indicates the purpose of the text area. 5. Text area where staff roster is displayed. It should be scrollable to accommodate a long list. 6. Button Fire fires the newest employee. 7. Button Retire retires the oldest employee. 8. Lastly, closing the frame, saves the roster and quits the program. 1005ICT Object Oriented Programming 2015-2 5

20.2.2 Class designs We are not starting this program from scratch. We already have a variety of existing console implementations to choose from. We should start from the version that uses java.util.arraydeque, because that class has more flexibility and features than our own deque implementations. It will allow us access to all the employees, not just the first and last. It is good practice to try to reuse as much of the existing program as possible, and to avoid having duplication of code. That is, the console and GUI versions should share as much common code as possible. 1005ICT Object Oriented Programming 2015-2 6

This is how the classes are associated in the old console version. Campbell +main(args : String[]) : void -load() : void -save() : void -interact() : void * -d Employee ArrayDeque The problem with this, as a starting point for development of the GUI version, is that the main class has two roles combined: managing the staff roster and providing the console user interface. Separating those into two separate classes will allow the reuse of the staff roster in the GUI version. 1005ICT Object Oriented Programming 2015-2 7

The rearrangement of existing code into different classes is called refactoring. CampbellT -APP_NAME : String {readonly} -FILE_NAME : String {readonly} +main(args : String[]) : void -interact() : void 1 -roster Roster +save(filename : String) : void +load(filename : String) : void +hire(who : String) : Employee +fire() : Employee +retire() : Employee * -d Employee ArrayDeque 1005ICT Object Oriented Programming 2015-2 8

class Employee no change. class Roster new, manages the roster. New methods for hiring and firing return the affected employee so that the client program can output information if it wants to. +save(filename : String) : void load the roster from a disk file, if it exists. +load(filename : String) : void saves the roster to the disk file. +hire(who : String) : Employee hires a new employee. Returns the new employee, or null if who is blank. +fire() : Employee returns the fired employee or null. +retire() : Employee returns the retired employee or null. 1005ICT Object Oriented Programming 2015-2 9

class CampbellT modified, now only performs the I/O. -APP NAME : String {readonly} the name of the app. -FILE NAME : String {readonly} the name of the file to save the roster to. -roster : Roster manages the staff roster. +main(args : String[]) : void main method. -interact() : void accepts user commands and prints messages as actions are carried out. 1005ICT Object Oriented Programming 2015-2 10

Now we can replace the console version of the main class with a GUI version. (We don t yet know the details of required new members.) CampbellGUI -APP_NAME : String {readonly} -FILE_NAME : String {readonly}... +main(args : String[]) : void... 1 -roster Roster +save(filename : String) : void +load(filename : String) : void +hire(who : String) : Employee +fire() : Employee +retire() : Employee * -d Employee ArrayDeque 1005ICT Object Oriented Programming 2015-2 11

20.3 New console implementation /* ** file: Roster.java ** author: Andrew Rock ** purpose: Roster for a dumb HRM system. */ import java.util.*; import java.io.*; public class Roster { // A deque contains the employees. private Deque<Employee> d = new ArrayDeque<Employee>(); 1005ICT Object Oriented Programming 2015-2 12

These are changed to make them use the filename parameter. // save(filename) saves the names left for the // next session. public void save(string filename) { // load(filename) loads the names left from the // previous session. public void load(string filename) { Next the new methods for hiring, firing and retiring. 1005ICT Object Oriented Programming 2015-2 13

// hire(who) hires a new employee. // Returns the new employee or null. public Employee hire(string who) { who = who.trim(); if (who.length() > 0) { Employee e = new Employee(who); d.addlast(e); return e; } else { return null; } } 1005ICT Object Oriented Programming 2015-2 14

// fire() fires the newest employee. // Returns the fired employee or null. public Employee fire() { try { return d.removelast(); } catch (Exception e) { return null; } } 1005ICT Object Oriented Programming 2015-2 15

// retire() retires the oldest employee. // Returns the retired employee or null. public Employee retire() { try { return d.removefirst(); } catch (Exception e) { return null; } } 1005ICT Object Oriented Programming 2015-2 16

/* ** file: CampbellT.java ** author: Andrew Rock ** purpose: A dumb HRM system text version. */ import java.util.*; public class CampbellT { // app name private static final String APP_NAME = "Campbell"; // saved data file name private static final String FILE_NAME = APP_NAME + ".txt"; 1005ICT Object Oriented Programming 2015-2 17

// the staff roster private static Roster roster = new Roster(); public static void main(string[] args) { roster.load(file_name); interact(); roster.save(file_name); } 1005ICT Object Oriented Programming 2015-2 18

// interact() prompts for and processes user // commands. private static void interact() { Scanner sc = new Scanner(System.in); System.out.print("? "); String command = sc.next(); while (!command.equals("q")) { if (command.equals("h")) { Employee e = roster.hire(sc.nextline()); if (e!= null) { System.out.println(e.getName() + " is hired as employee number " + e.getid() + "."); } else { System.err.println( "No name to hire."); } 1005ICT Object Oriented Programming 2015-2 19

} else if (command.equals("f")) { Employee f = roster.fire(); if (f!= null) { System.out.println("Employee " + f.getid() + ", " + f.getname() + ", is fired."); } else { System.err.println( "No-one to fire."); } } else if (command.equals("r")) { Employee r = roster.retire(); if (r!= null) { System.out.println("Employee " + r.getid() + ", " + r.getname() + ", has retired."); } else { 1005ICT Object Oriented Programming 2015-2 20

} } System.err.println( "No-one to retire."); } } else { System.out.println("Bad command."); } System.out.print("? "); command = sc.next(); } 1005ICT Object Oriented Programming 2015-2 21

20.4 GUI implementation 20.4.1 main and frame We start by creating the main method and the code for putting up the frame. Mostly this is the same as we have done before in the 2D graphics examples. /* ** file: CampbellGUI.java ** author: Andrew Rock ** purpose: A dumb HRM system, with a GUI. */ import java.awt.*; import javax.swing.*; 1005ICT Object Oriented Programming 2015-2 22

public class CampbellGUI { Same as the console version: // app name private static final String APP_NAME = "Campbell"; // saved data file name private static final String FILE_NAME = APP_NAME + ".txt"; // the staff roster private static Roster roster = new Roster(); 1005ICT Object Oriented Programming 2015-2 23

The frame, and any components that we need to access from multiple methods, we make global. // the frame private static JFrame frame = new JFrame(APP_NAME); public static void main(string[] args) { roster.load(file_name); layoutcomponents(); addlisteners(); frame.setdefaultcloseoperation( JFrame.EXIT_ON_CLOSE); frame.pack(); frame.setvisible(true); } 1005ICT Object Oriented Programming 2015-2 24

In the main method, we: load the roster from disk; delegate the layout of the components, and the setting up of event handling to other methods; set the program to quit when the window is closed; set the size of the window (using pack() to set the minimum size that fits all the components); and make the frame visible. 1005ICT Object Oriented Programming 2015-2 25

20.4.2 Components and layout In our previous graphics examples, we only had one component to put into the frame and it filled the content area of the frame. When we have multiple components in a frame, or any container, there are many ways that the components could be placed relative to each other. In GUI frameworks that do not have to be platform independent, the components can be placed manually using graphical tools. Such tools exist for Java, but to use them, you need to understand the code that they will generate. We will lay out our components with just Java code. 1005ICT Object Oriented Programming 2015-2 26

A Container delegates the layout of the Components it contains to a LayoutManager. There are many different classes that implement the LayoutManager interface. Some are simple and only work for simple cases. The best one, for flexibility and total control, is GridBagLayout. The simplest one that is still quite powerful is javax.swing.boxlayout, and that is the only one we will use in these lecture notes. A BoxLayout can be used to lay out components along the x-axis. 1005ICT Object Oriented Programming 2015-2 27

A BoxLayout can also be used to lay out components along the y-axis. By nesting Containers with BoxLayouts components may be laid out in all kinds of 2-dimensional arrangements. 1005ICT Object Oriented Programming 2015-2 28

This shows how we can nest box layouts to make our GUI. X Campbell New name: Rick Aspley Hire Roster: 1 Hank Zappa 2 Lady Dada Fire Retire We will use JPanels as the containers that use the BoxLayouts. 1005ICT Object Oriented Programming 2015-2 29

Here are the components that we need to declare globally: // input text field private static JTextField namefield = new JTextField(20); // Output text area: private static JTextArea rosterarea = new JTextArea(10, 25); // buttons: private static JButton hirebtn = new JButton("Hire"), firebtn = new JButton("Fire"), retbtn = new JButton("Retire"); 1005ICT Object Oriented Programming 2015-2 30

Set up the panels and the box layouts and their orientations. // layoutcomponents() lays out the components. private static void layoutcomponents() { JPanel box0 = new JPanel(), box1 = new JPanel(), box2 = new JPanel(), box3 = new JPanel(); box0.setlayout(new BoxLayout(box0, BoxLayout.Y_AXIS)); box1.setlayout(new BoxLayout(box1, BoxLayout.X_AXIS)); box2.setlayout(new BoxLayout(box2, BoxLayout.Y_AXIS)); box3.setlayout(new BoxLayout(box3, BoxLayout.X_AXIS)); 1005ICT Object Oriented Programming 2015-2 31

Add box0 to the frame s content area, and then nest the other three boxes. frame.add(box0); box0.add(box1); box0.add(box2); box0.add(box3); Center the nested boxes within box0. box1.setalignmentx( Component.CENTER_ALIGNMENT); box2.setalignmentx( Component.CENTER_ALIGNMENT); box3.setalignmentx( Component.CENTER_ALIGNMENT); 1005ICT Object Oriented Programming 2015-2 32

Adding a border to each box allows a little spacing out. box1.setborder(new EmptyBorder(5, 5, 5, 5)); box2.setborder(new EmptyBorder(5, 5, 5, 5)); box3.setborder(new EmptyBorder(5, 5, 5, 5)); Need to add this to the top: import javax.swing.border.*; Add the components to the top box. box1.add(new JLabel("New name:")); box1.add(namefield); box1.add(hirebtn); 1005ICT Object Oriented Programming 2015-2 33

Add and align the label in the middle box. JLabel rosterlbl = new JLabel("Roster:"); box2.add(rosterlbl); rosterlbl.setalignmentx( Component.LEFT_ALIGNMENT); The text area is for output only. rosterarea.seteditable(false); Fill it with the text to display. (A tostring() method needs to be added to class Roster.) rosterarea.settext(roster.tostring()); 1005ICT Object Oriented Programming 2015-2 34

We don t add the text area directly. It does not have its own scrolling functionality. We embed it in a JScrollPane and add and align that. JScrollPane scroller = new JScrollPane(rosterArea); box2.add(scroller); scroller.setalignmentx( Component.LEFT_ALIGNMENT); Finally, add the hire and retire buttons to the bottom box. } box3.add(firebtn); box3.add(retbtn); 1005ICT Object Oriented Programming 2015-2 35

20.4.3 Event handling Now we need to get the components to trigger the actions we want performed. This is done with event handling. We will set up event handling in this method. // addlisteners() adds event listeners to the // components and the frame. private static void addlisteners() { and we ll need to add this at the top: import java.awt.event.*; 1005ICT Object Oriented Programming 2015-2 36

This is what happens when a user clicks a mouse with the pointer over a button in a Java program s window: The mouse hardware sends a message via its connection (say USB) to the PC hardware. The operating system combines the fact that the mouse was clicked with the current location of the pointer (which it manages) to form an event. The operating system determines what area of the display the location is in, and so what program needs to deal with the event. 1005ICT Object Oriented Programming 2015-2 37

The event is sent to the program that needs it. It is sent as a message. That is, the operating system calls a method within the program. If the program is a Java program, then the message is sent to the JVM. The JVM determines which window the mouse was clicked in, and the event is sent as a message to that window. The message is sent down through the nested containers, until it reaches the button. So if we want the button to initiate some action, we have to provide the method that will be called and passed the event as an argument. 1005ICT Object Oriented Programming 2015-2 38

In Java we can t just supply a method on its own to receive the event. All Java methods have to be defined in a class. For buttons, the class must implement the ActionListener interface. That interface defines just one method to implement. There will only be one instance of this class. These conditions are just right for using an anonymous inner class! button, text field,... «interface» ActionListener +actionperformed(e : ActionEvent) : void Component «anonymous» ActionListener 1005ICT Object Oriented Programming 2015-2 39

We ll add a listener to the fire button first, as it is the simplest case. firebtn.addactionlistener( new ActionListener() { public void actionperformed( ActionEvent e) { roster.fire(); rosterarea.settext( roster.tostring()); } }); 1005ICT Object Oriented Programming 2015-2 40

In one statement, we have defined a new, anonymous class that implements ActionListener; implemented its actionperformed method, in which: someone gets fired; and the roster text area gets updated; instantiated a single instance of the new class; and passed that instance as a parameter to addactionlistener to add this listener object to the fire button. So now the fire button can accept the event and trigger the actions we want. 1005ICT Object Oriented Programming 2015-2 41

Similarly for the retire button: retbtn.addactionlistener( new ActionListener() { public void actionperformed( ActionEvent e) { roster.retire(); rosterarea.settext( roster.tostring()); } }); 1005ICT Object Oriented Programming 2015-2 42

The hire button, and pressing enter in the input text field, both need to initiate the same action, so they can share the same listener. ActionListener hireal = new ActionListener() { public void actionperformed( ActionEvent e) { roster.hire(namefield.gettext()); namefield.settext(""); rosterarea.settext( roster.tostring()); } }; namefield.addactionlistener(hireal); hirebtn.addactionlistener(hireal); 1005ICT Object Oriented Programming 2015-2 43

Our program can now hire and fire, but there is one problem remaining. The program will exit when the window is closed. We need an opportunity to save the roster before the program quits. We do this by listening for a window event. The process is similar. The interface WindowListener defines a windowclosing method that we can use to call roster.save, in our implementation. However WindowListener defines lots of other methods that we don t want to have to implement. 1005ICT Object Oriented Programming 2015-2 44

For this reason, there is an abstract class WindowAdapter that implements all of those methods with dummy handlers. Extending that only requires implementing the method we want. «interface» WindowListener +windowclosing(e : WindowEvent) : void... WindowAdapter JFrame «anonymous» WindowAdapter 1005ICT Object Oriented Programming 2015-2 45

This completes our program. } frame.addwindowlistener( new WindowAdapter(){ public void windowclosing( WindowEvent e) { roster.save(file_name); } }); Go play! 1005ICT Object Oriented Programming 2015-2 46

20.5 Section summary This monster section covered: GUI design with a sketch and textual description; refactoring; separating the user interface from the rest, so it can be replaced; laying out components with BoxLayouts; components JPanel, Jlabel, JButton, JTextField, JTextArea, and EmptyBorder; event handling with interface ActionListener and abstract class WindowAdapter; and anonymous inner classes for event listeners. 1005ICT Object Oriented Programming 2015-2 47

20.6 End of section feedback questions Send us your answers to these questions any time you like by clicking on them. What was the most useful topic in this section? What was the least useful topic in this section? What was the least clear topic in this section? What topic in this section would you like to like to know more about? Did you find an error in this section? 1005ICT Object Oriented Programming 2015-2 48