Intro to Computer Science II

1. Intro to Computer Science II Chapter 10 Graphical Interface Design Graphical applications and applets

2. Three kinds of Java programs • Console Applications • Console window used for all input from the user (Scanner) and output (System.out). • GUI Applications • Graphical interface, keyboard, and mouse are used for user input and output goes to windows. • GUI Applet • Special kind of Java program that can be run by a web browser instead of command line interpreter

3. Structure of GUI application // import statements go here public class ApplicationTemplate extends JFrame implements ActionListener { // Declare instance variables for GUI components here // Declare any other variables here public ApplicationTemplate() { setTitle("Put your frame title here"); // Statements to create GUI components go here // Statements to add them to frame go here // Statements to add action listeners go here setSize(400, 300); // size of the frame }

4. Structure of GUI application public void actionPerformed(ActionEvent e) { // statements to process events go here } // Construct an application and make it visible public static void main(String[] args) { JFrame f = new ApplicationTemplate(); f.setVisible(true); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } }

5. Top level GUI components • JFrame • put frame around a window that has a title bar with a title, minimimze, maximize, close buttons • Window (content pane) • The inside of a frame on which other GUI components can be placed • Components that can interact with user: • JLabel, JButton, JTextField, JTextArea, etc

6. Steps for creating a GUI • Construct a JFrame object • Construct components • Add components to the frame's content pane (a container class) • Add any action listeners to the components • Add a window listener to frame if necessary • Write the event processing code associated with each action listener.

7. This is the title This is the title bar This is the window frame This is a window 400 by 300 book-project/chapter10/simple

8. GUI Example JTextField JLabel JButton JTextArea JScrollPane

9. Greeting1 Application (1) JLabel JTextField (input) Before entering a name After entering a name and pressing enter key JTextField (output)

10. Greeting1 class (1) • Choose the GUI components • JTextField object called input to define the input text field • JLabel object called prompt for the text defining what the input object should contain • JTextField object called output to define a text field in which the greeting should be displayed • When the user pressed Enter key the text should be copied from input to output field

11. Greeting1 class design import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; public class Greeting1 extends JFrame implements ActionListener { // data fields public Greeting1() {...} public void actionPerformed(ActionEvent e) {...} } this methodimplementsActionListener

12. Declaring GUI components private JLabel prompt; private JTextField input; private JTextField output; these are instance data fields

13. Creating GUI components these statements go in the constructor prompt = new JLabel("Enter your name and press enter"); input = new JTextField(20); output = new JTextField(20); output.setEditable(false); no typing allowedin the output field approximatewidth in chars

14. Choosing a layout manager • A layout manager is an object that knows how to position the GUI components on the window • FlowLayout • put as many components on a line as will fit, then go to the next line (like word wrap in a word processor) • BorderLayout • will use it later. It is the default layout for a JFrame • GridLayout • will use it later

15. Resizing with FlowLayout Default frame before resize by user Frame after resize using FlowLayout manager Now frame is not wideenough to have morethan one componenton a line

16. Adding GUI components to frame components are added to content pane of a frame, not directly to the frame itself Container cp = getContentPane(); specify the layout manager cp.setLayout(new FlowLayout()); add components to the content pane cp.add(prompt); cp.add(input); cp.add(output);

17. Event-driven programming • GUI programming • decide what events we want to process. For example, mouse movement and clicking, enter key press, button click • Supply the appropriate method (called an event handler) that a component can call to process each event we are listening for • we decide what events we want to process by adding the appropriate listeners to each component

18. Events and Event Handlers Button clickhandler method Enter keyhandler method EventOccurs Mouse clickhandler method Mouse draghandler method

19. Adding Event Listeners Event handlerobject GUI Component Event handlerobject Listener list Event handlerobject

20. Event handling in Greeting1 Add an action listener to the input text field input.addActionListener(this); our class will contain the event handler this is the event handler contains information about the event public void actionPerformed(ActionEvent e) { // statements to process action events go here }

21. Greeting1 processing code When the user presses enter the text in the input field must be obtained and copied to the output field. JTextField objects have getText and setText methods to do this public void actionPerformed(ActionEvent e) { String name = input.getText(); output.setText("Hello " + name); }

22. Greeting1 class (1) See /book-project/chapter10/simple import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; public class Greeting1 extends JFrame implements ActionListener { private JLabel prompt; private JTextField input; private JTextField output;

23. Greeting1 class (2) public Greeting1() { setTitle("Greeting1 (enter key event)"); prompt = new JLabel("Enter your name and press Enter"); input = new JTextField(20); output = new JTextField(20); output.setEditable(false); Container cp = getContentPane(); cp.setLayout(new FlowLayout()); cp.add(prompt); cp.add(input); cp.add(output); input.addActionListener(this); setSize(450,100); }

24. Greeting1 class (3) public void actionPerformed(ActionEvent e) { String name = input.getText(); output.setText("Hello " + name); } public static void main(String[] args) { JFrame = new Greeting1(); f.setVisible(true); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } } // end of Greeting1 class

25. Using a JButton When you press enter now nothing happens click the Done button to display the greeting

26. Greeting2 class (1) See /book-project/chapter10/simple import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; public class Greeting2 extends JFrame implements ActionListener { private JLabel prompt; private JTextField input; private JTextField output; private JButton done; private JButton done;

27. Greeting2 class (2) public Greeting2() { setTitle("Greeting2 (button event)"); prompt = new JLabel("Enter ..."); input = new JTextField(20); output = new JTextField(20); output.setEditable(false); Container cp = getContentPane(); cp.setLayout(new FlowLayout()); cp.add(prompt); cp.add(input); cp.add(done); cp.add(output); done.addActionListener(this); setSize(450,100); } done = new JButton("Done"); cp.add(done); done.addActionListener(this);

28. Greeting2 class (3) public void actionPerformed(ActionEvent e) { String name = input.getText(); output.setText("Hello " + name); } public static void main(String[] args) { JFrame = new Greeting2(); f.setVisible(true); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } } // end of Greeting2 class

29. Enter key and button press We could have written the Greeting2 class so that either the enter key or button press displays the greeting input.addActionListener(this); done.addActionListener(this); In either case the actionPerformed method will be called.

30. Multiple types of events • In previous example the two events (enter key press and button click) are both processed in the same way so we don't have to distnguish them • In general each event type will be processed in a different way: • using getSource() method of the ActionEvent object to determine which event occured • using inner classes, one for each event type

31. Exit button example • Use enter key event to display the greeting • Use an exit button to given an alternate way to exit the application that is equvalent to clicking the close box • Now we need to distinguish the two events since they are processed differently (one displays the greeting and the other exits the application.

32. Using getSource input.addActionListener(this); exit.addActionListener(this); public void actionPerformed(ActionEvent e) { if (e.getSource() == input) // enter was pressed { String name = input.getText(); output.setText("Hello " + name); } else // exit button was clicked { System.exit(0); // exit program }

33. Enter key and exit button display greeting when enter key is pressed Exit program when exit button is clicked

34. Greeting3 class (1) See /book-project/chapter10/simple import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; public class Greeting3 extends JFrame implements ActionListener { private JLabel prompt; private JTextField input; private JTextField output; private JButton exit; private JButton exit;

35. Greeting3 class (2) public Greeting3() { prompt = new JLabel("Enter name ..."); input = new JTextField(20); output = new JTextField(20); output.setEditable(false); Container cp = getContentPane(); cp.setLayout(new FlowLayout()); cp.add(prompt); cp.add(input); cp.add(output); cp.add(exit); input.addActionListener(this); setSize(450,100); } exit = new JButton("Exit"); cp.add(exit); exit.addActionListener(this);

36. Greeting3 class (3) public void actionPerformed(ActionEvent e) { if (e.getSource() == input) { String name = input.getText(); output.setText("Hello " + name); } else System.out.exit(0); } public static void main(String[] args) { JFrame = new Greeting3(); f.setVisible(true); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } } // end of Greeting3 class

37. Inner classes • An inner class is declared inside a class • There are several kinds • We will consider only the kind that are normally used to specify event handlers • Instead of implemeningt the listener interface using "this" (our class) we can have the inner class do it • Then each event type is associated with its own inner class • Inner classes have access to data of the enclosing class (important)

38. EnterKeyHandler public class EnterKeyHandler implements ActionListener { public void actionPerformed(ActionEvent e) { String name = input.getText(); output.setText("Hello " + name); } } inner class can access the data of the enclosing class Instead of input.addActionListener(this); we now use input.addActionListener(new EnterKeyHandler());

39. ExitButtonHandler public class ExitButtonHandler implements ActionListener { public void actionPerformed(ActionEvent e) { System.exit(0); } } Instead of exit.addActionListener(this); we now use exit.addActionListener(new ExitButtonHandler());

40. Greeting4 Instead of public class Greeting4 extends JFrame implements ActionListener { ... } we now use public class Greeting4 extends JFrame { ... } since the inner classes now implement the ActionListener interface.

41. Greeting4 class (1) See /book-project/chapter10/simple import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; public class Greeting4 extends JFrame { private JLabel prompt; private JTextField input; private JTextField output; private JButton exit;

42. Greeting4 class (2) public Greeting4() { prompt = new JLabel("Enter name ..."); input = new JTextField(20); output = new JTextField(20); output.setEditable(false); exit = new JButton("Exit"); Container cp = getContentPane(); cp.setLayout(new FlowLayout()); cp.add(prompt); cp.add(input); cp.add(output); cp.add(exit); input.addActionListener(new EnterKeyHandler()); exit.addActionListener(new ExitButtonHander()); setSize(450,100); } input.addActionListener(new EnterKeyHandler()); exit.addActionListener(new ExitButtonHandler());

43. Greeting4 class (3) public class EnterKeyHandler implements ActionListener { public void actionPerformed(ActionEvent e) { String name = input.getText(); output.setText("Hello " + name); } } public class ExitButtonHandler implements ActionListener { public void actionPerformed(ActionEvent e) { System.exit(0); } } inner classes

44. Greeting4 class (4) public static void main(String[] args) { JFrame = new Greeting4(); f.setVisible(true); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } } // end of Greeting4 class

45. Numeric text fields (1) • The methods for getting and setting text only work for strings: • public String getText() • public void setText() • To work with numeric values use • "" + n to convert from a number to a string • Integer.parseInt(s) to convert string s to an int • Double.parseDouble(s) to convert string s to a double

46. Numeric text fields (2) Converting text field values to numeric values int i = Integer.parseInt(input.getText().trim()); double d = Double.parseDouble(input.getText().trim()); Displaying numeric values in text fields output.setText("" + n); output.setText(String.valueOf(n));

47. Temperature Conversion double tc = Double.parseDouble(input.getText().trim()); double tf = (9.0 / 5.0) * tc + 32.0; output.setText("" + tf);

48. Temperature class (1) import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; public class Temperature extends JFrame { private JLabel prompt; private JTextField input; private JTextField output; public Temperature() { setTitle("Celsius to Fahrenheit Conversion"); setSize(325,100);

49. Temperature class (2) prompt = new JLabel("Enter Celsius, ..."); input = new JTextField(10); output = new JTextField(10); output.setEditable(false); Container cp = getContentPane(); cp.setLayout(new FlowLayout()); cp.add(prompt); cp.add(input); cp.add(output); input.addActionListener(new EnterKeyHandler()); } // end constructor

50. Temperature class (3) public class EnterKeyHandler implements ActionListener { public void actionPerformed(ActionEvent e) { double tc = Double.parseDouble(input.getText().trim()); double tf = (9.0/5.0) * tc + 32.0; output.setText("" + tf); } } public static void main(String[] args) { Jframe f = new Temperature(); f.setVisible(true); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } } // end Temperature class