1. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 1 94.204* Object-Oriented Software Development Part 18-c Building Graphic User Interfaces with Java Layout Managers Copyright © 1998-2001 D.L. Bailey, Systems and Computer Engineering, Carleton University revised April 2002

2. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 2 Revisiting the Curve-Fitting Application Let's change the curve-fitting (method of least squares) application so that it –displays the equation of the line when the line is plotted, and –has a button that, when pressed, will erase the display

3. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 3 Ten points clicked Button pressed

4. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 4 GUI Components for the Curve-Fitting Application In the first version of this application, a subclass of JPanel was used to plot the points and line –we’ll try to reuse this JPanel subclass Now we need to place additional GUI components in the frame –JLabel object : For the label “Equation of the line –JTextField object : display the equation in the form “y=mx+b” –JButton : to clear the plot

5. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 5

6. 6 Labels - Class JLabel Jlabel is the simplest component that contains a single line of text that cannot be edited by the user Here is a sequence of statements that creates three labels JLabel l1 = new JLabel("Label 1", JLabel.CENTER); JLabel l2 = new JLabel("Label 2"); // Default is left justified. // So this is the same as // JLabel l2 = JLabel("Label 2", JLabel.LEFT); JLabel l3 = new JLabel("Label 3", JLabel.RIGHT);

7. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 7 Text Fields - Class JTextField A JTextField object is a text component that displays a single line of text in a box that can be edited (although editing should be disabled if the field is used to display program output, but is not used for input) The following statements create a 20 column wide, “output-only” JTextField with a white background JTextField tf = new JTextField(20); tf.setBackground(Color.white); // Don't allow the user to type in the text field tf.setEditable(false);

8. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 8 Buttons - Class JButton A JButton object is a GUI pushbutton with a text label (a String object) or an icon (an Icon object) The following statement creates a JButton with the label “Press Me!”: JButton b = new JButton(“Press Me!”);

9. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 9 Events Sent By JButton s When a JButton object is clicked, it generates an ActionEvent action To handle these button clicks, an ActionListener object must be registered as the listener for the button The ActionListener declares a single method: public void actionPerformed(ActionEvent e) There is no ActionAdapter abstract class (Why?)

10. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 10 Events Sent By JButton s Here is a listener object for a JButton that sends the doThis message to an instance of SomeClass when the button is clicked: class ButtonHandler implements ActionListener { private SomeClass anObject; public ButtonHandler(SomeClass anObject) { this.anObject = anObject; }

11. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 11 Events Sent By JButton s public void actionPerformed(ActionEvent e) { anObject.doThis(); } To register an instance of this ActionListener with JButton b: SomeClass obj; // initialization of obj to a SomeClass object // not shown here b.addActionListener(new ButtonHandler(obj));

12. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 12 Back to the Curve-Fitting Application The revised version of the application is in file LinearRegression2.java As before, LinearRegression2() builds the GUI What associations are needed between the various objects? Let’s walk through some scenarios :

13. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 13 CloseableFrame LinearRegression2 JTextField JButton JLabel JPanel Vector MyMouseInputHandler MouseInputAdapter ButtonHandler Plot ActionListener

14. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 14 First Cut at Building the GUI private Plot plot; private JButton b; private JTextField tf; // In LinearRegression2()... tf = new JTextField(20); tf.setBackground(Color.white); tf.setEditable(false); plot = new Plot(tf); Container contentPane = getContentPane(); contentPane.add(plot);

15. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 15 First Cut at Building the GUI JLabel l = new JLabel(" Equation of the line ", JLabel.RIGHT); l.setForeground(Color.black); contentPane.add(l); contentPane.add(tf); b = new JButton("Clear Plot"); b.addActionListener(new ButtonHandler(plot)); contentPane.add(b);

16. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 16 First Cut at Building the GUI When the program runs, it doesn’t display all of the GUI components ! To understand why, we have to look at how AWT and Swing GUI components are placed in containers

17. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 17 Component Layout Container defines an add() method that is invoked to add components to the container –recall that the content pane return by JFrame ’s getContentPane() method is a Container Recall that our Components were not placed in the pane by specifying their (x,y) coordinates. Q: Why not? –A: what looks good in one environment may not look as good in another environment Instead, each Container object has a layout manager object that controls how components are positioned in the container

18. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 18 Component Layout The default layout manager for a JFrame ’s content pane object is a BorderLayout object (there are other Layout managers available) A border layout divides the container into 5 regions: “North”, “South”, “East”, “West”, and “Center” One component can be placed in each region: North South EastWestCenter

19. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 19 Second Cut at Building the GUI private Plot plot; private JButton b; private JTextField tf; // in LinearRegression2()... tf = new JTextField(20); tf.setBackground(Color.white); tf.setEditable(false); plot = new Plot(tf); Container contentPane = getContentPane(); contentPane.add(plot, "North");

20. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 20 Second Cut at Building the GUI JLabel l = new JLabel(" Equation of the line ", JLabel.RIGHT); l.setForeground(Color.black); contentPane.add(l, "West"); contentPane.add(tf, "Center"); b = new JButton("Clear Plot"); b.addActionListener(new ButtonHandler(plot)); contentPane.add(b, "South");

21. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 21 LinearRegression2: 2nd Cut at Building the GUI JLabel l = new JLabel(" Equation of the line ", JLabel.RIGHT); l.setForeground(Color.black); contentPane.add(l, "West"); contentPane.add(tf, "Center"); b = new JButton("Clear Plot"); b.addActionListener(new ButtonHandler(plot)); contentPane.add(b, "South");

22. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 22 An expanded display Suppose we want to change the GUI to look like this:

23. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 23 GUI for Iteration 3 Starting from the top of the frame, there are 4 components: –the JPanel –the JLabel –the JTextField –the JButton But, the BorderLayout that manages a JFrame ’s content pane has only 3 regions, top to bottom So, how do we arrange the components the way we want them?

24. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 24 GUI for Iteration 3 Recall that a JPanel is a subclass of Container (see next slide) That means we can put components in a JPanel, and put the JPanel in the JFrame ’s content pane –we can even put JPanel s inside JPanel s Each Container has its own layout manager, which can be changed by sending the container the setLayout() message, passing a new layout manager object as the message argument –the default layout manager for a JPanel is a FlowLayout object

25. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 25 Object Component Container Frame Window Applet Pane l JFrame JApplet JPane l JComponent

26. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 26 Component JPanel content pane of JFrame (a Container) Component Nesting

27. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 27 JLabel JTextField JButton Plot (is-a JPanel) JPanel content pane of JFrame (a Container) GUI Components for Iteration 3

28. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 28 LinearRegression3 JTextField JButton JLabel JPanel Vector MyMouseInputHandler MouseInputAdapter ButtonHandler Plot ActionListener JPanel

29. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 29 Class LinearRegression3 : Building the GUI private Plot plot; private JButton b; private JTextField tf; tf = new JTextField(20); tf.setBackground(Color.white); tf.setEditable(false); plot = new Plot(tf); Container contentPane = getContentPane(); contentPane.add(plot, "Center");

30. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 30 Class LinearRegression3 : Building the GUI // Create a panel to hold a label, the textfield // that displays the equation, and the button. JPanel p = new JPanel(); p.setLayout(new BorderLayout()); JLabel l = new JLabel(" Equation of the line ", SwingConstants.CENTER); l.setForeground(Color.black); p.add(l, "North"); p.add(tf, "Center");

31. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 31 Class LinearRegression3 : Building the GUI b = new JButton("Clear Plot"); b.addActionListener(new ButtonHandler(plot)); p.add(b, "South"); // Now put the panel in the frame. contentPane.add(p, "South");

32. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 32 The GridLayout Layout Manager The GridLayout layout manager organizes a container's components in a rectangular grid The container is divided into equal size rectangles, and one component is placed in each rectangle In LinearRegression3.java, we could change the JPanel ’s layout manager to a GridLayout object this way: JPanel p = new JPanel(); p.setLayout(new GridLayout(3,1));

33. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 33 The GridLayout Layout Manager This code lays out the panel’s components in a rectangular grid consisting of 3 rows and 1 column The panel is divided into 3 equal sized rectangles, and one component is placed in each rectangle Components are placed in the panel by invoking Container ’s add() method: p.add(l); // place label at top p.add(tf); // place text field below p.add(b); // place button at bottom

34. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 34 GridLayout Layout Manager Example Here’s how to build a panel that models a telephone keypad:

35. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 35 GridLayout Layout Manager Example public class Telephone extends CloseableFrame { public static void main(String args[]) { JFrame f = new Telephone(); f.pack(); f.show(); }

36. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 36 GridLayout Layout Manager Example public Telephone () { super(); setTitle("Telephone"); JPanel p = new JPanel(); p.setLayout(new GridLayout(4,3)); p.add(new JButton("1")); p.add(new JButton("2")); p.add(new JButton("3")); p.add(new JButton("4")); p.add(new JButton("5"));

37. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 37 GridLayout Layout Manager Example p.add(new JButton("6")); p.add(new JButton("7")); p.add(new JButton("8")); p.add(new JButton("9")); p.add(new JButton("*")); p.add(new JButton("0")); p.add(new JButton("#")); Container contentPane = getContentPane(); contentPane.add(p); }

38. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 38 Handling Events From Multiple Sources A single event listener object can be registered as the listener for several components To handle the event, the listener must first identify which component sent the event The event listener starts by sending the event object the getSource() message, which returns a reference to the object that generated the event Let’s look at how to write an event listener that is sent events by two buttons

39. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 39 Example 1 The class that creates the buttons also serves as the event listener for the buttons: public class Example1 extends CloseableFrame implements ActionListener { private JButton b1, b2; public Example1() {...

40. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 40 Example 1 b1 = new JButton(“Up”); contentPane.add(b1); b1.addActionListener(this); b2 = new JButton(“Down”); contentPane.add(b2); b2.addActionListener(this);... }

41. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 41 Example 1 public void actionPerformed(ActionEvent e) { Object o = e.getSource(); // Determine which kind of // component sent the ActionEvent. if (o instanceof JButton) { // A button was clicked. JButton b = (JButton)o;

42. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 42 Example 1 if (b == b1) // We clicked the “Up” this.doUp(); else if (b == b2) this.doDown(); }

43. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 43 Example 1 Note the use of instanceof to determine the kind of object that sent the event Object o = e.getSource(); if (o instanceof JButton) { JButton b = (JButton)o; How do the listener determine which button was clicked? In this example, b is a reference to the JButton object that generated the event This reference is compared to the references saved in instance variables b1 and b2

44. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 44 Example 2 The event listener is a different class from the class that creates the button As such, the private instance variables b1 and b2 in the class where the buttons are created are not visible to the event listener To overcome this, when the event listener is created, its constructor is passed references to –the buttons –the object that the event listener will ask to do work when the buttons are clicked

45. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 45 Example 2 public class Example2 extends CloseableFrame { private JButton b1, b2; public Example2() {... b1 = new JButton(“Up”); contentPane.add(b1);

46. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 46 Example 2 b2 = new JButton(“Down”); contentPane.add(b2); ButtonListener l = new ButtonListener(this, b1, b2); b2.addActionListener(l); b1.addActionListener(l);... }

47. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 47 Example 2 class ButtonListener implements ActionListener { private Example2 app; private JButton b1, b2; public ButtonListener(Example2 app, JButton b1, JButton b2) { this.app = app; this.b1 = b1; this.b2 = b2; }

48. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 48 Example 2 public void actionPerformed(ActionEvent e) { Object o = e.getSource(); // Determine which kind of // component sent the ActionEvent. if (o instanceof JButton) { // A button was clicked. JButton b = (JButton)o;

49. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 49 Example 2 if (b == b1) // We clicked the “Up” app.doUp(); else if (b == b2) app.doDown(); }

50. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 50 Example 3 We can avoid passing the event listener references to all the buttons by invoking JButton ’s getActionCommand() method The JButton ’s getActionCommand() method returns a String containing the button’s “action command” By default, the action command is the button’s label, but this can be changed by sending the button the setActionCommand() message

51. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 51 Example 3 public class Example3 extends CloseableFrame { public Example3() { private JButton b1, b2; // Notice that these are no longer // instance variables... b1 = new JButton(“Up”); contentPane.add(b1);

52. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 52 Example 3 b2 = new JButton(“Down”); contentPane.add(b2); ButtonListener l = new ButtonListener(this); b2.addActionListener(l); b1.addActionListener(l);... }

53. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 53 Example 3 class ButtonListener implements ActionListener { private Example3 app; public ButtonListener(Example3 app) { this.app = app; }

54. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 54 Example 3 public void actionPerformed(ActionEvent e) { Object o = e.getSource(); // Determine which kind of // component sent the ActionEvent. if (o instanceof JButton) { // A button was clicked. JButton b = (JButton)o;

55. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 55 Example 3 String s = b.getActionCommand(); if (s.equals(“Up”)) // We clicked the “Up” app.doUp(); else if (s.equals(“Down”)) app.doDown(); }

56. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 56 Recap - Using the Java 1.1 Event Model Select AWT or Swing components –a GUI-based application has at least one component: its frame (a subclass of Frame or JFrame) Look up the event classes for the events generated by the components Look up the listener interface for each event class Design listener classes to handle the events –build a class that implements the listener interface, or... –subclass an adapter class that implements the listener interface, and override the methods of interest

57. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 57 Recap - Using the Java 1.1 Event Model Write the GUI initialization code (usually placed in the constructor of the top-level application class): –create instances of each component –create listener objects –register each listener with its event source

58. Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt 58 Recap - Using the Java 1.1 Event Model If componentObject generates event XEvent – its event listener, listenerObject, is an instance of a class that implements the XListener interface or extends XAdapter –listenerObject must be registered with componentObject componentObject.addXListener(listenerObject); Exception to the rule: MouseEvent has two listeners ( MouseMotionListener and MouseListener ) so components that generate MouseEvent s have two add- listener methods