1. Graphical User Interfaces Allow for interaction with –Buttons –Menus –Text Fields Two Java Libraries to assist in GUI Programming –AWT –Swing

2. Text Fields provide a line of user-updatable text need to - import javax.swing.*; - declare a variable private JTextField input; - construct input = new JTextField( "Enter text here " ); - place in a window - use. For example, String userInput = input.getText();

3. User enters desired text in the text field at the north of the window With each click on the canvas, the text is displayed

4. import objectdraw.*; import java.awt.*; import javax.swing.*; public class TextController extends WindowController { private JTextField input; public void begin() { input = new JTextField( "Enter text here" ); Container contentPane = getContentPane(); contentPane.add( input, BorderLayout.NORTH ); contentPane.validate(); } public void onMouseClick( Location point ){ new Text( input.getText(), point, canvas ); }

5. The Container Class Graphical components must be put in a Container to be displayed import java.awt.*; Container contentPane = getContentPane(); contentPane.add( aComponent, position ); Validate to be sure components displayed properly

6. Layout of Components in a Container Many layout options One example: BorderLayout –BorderLayout.NORTH –BorderLayout.EAST –BorderLayout.SOUTH –BorderLayout.WEST –BorderLayout.CENTER

7. Buttons Let’s add a button to our previous program. Clicking on the button clears the canvas. Want clicks on the button to trigger a program action Requires slightly more programming effort than text fields

8. import objectdraw.*; import java.awt.*; import java.awt.event.*; import javax.swing.*; public class TextButtonController extends WindowController implements ActionListener { private JTextField input; public void begin() { input = new JTextField( "Enter text here" ); JButton clearButton = new JButton(" Clear canvas "); Container contentPane = getContentPane(); contentPane.add( input, BorderLayout.NORTH ); contentPane.add( clearButton, BorderLayout.SOUTH ); contentPane.validate(); clearButton.addActionListener(this); }

9. public void onMouseClick( Location point ){ new Text( input.getText(), point, canvas ); } public void actionPerformed( ActionEvent evt ) { canvas.clear(); }

10. Action Events When a JButton is clicked – an ActionEvent is generated –actionPerformed is executed Just as onMouseClick is executed whenever a user clicks on the canvas –actionPerformed is provided with a parameter Contains information about the object that triggered the event

11. Checklist for using JButtons Construct the JButton Add it to the content pane of the WindowController extension and validate So that the WindowController extension responds to events generated by the JButton –Add this as a listener –Make sure WindowController extension implements ActionListener –Add actionPerformed method

12. Combo Boxes The Swing package’s name for pop-up menus: JComboBox Let’s use one to control the speed of a simple falling ball animation –Three speed options: slow, medium, fast FallingBall.java

13. Using a JComboBox MenuBallController.java

14. Checklist for JComboBoxes Construct the JComboBox and add selection options Add it to the content pane of the WindowController extension and validate So that the WindowController extension responds to events generated –Add this as a listener –Make sure WindowController extension implements ActionListener –Add actionPerformed method

15. Better GUI design: basic tools Panels Layout Managers

16. The JPanel Provided by Swing Organize subcomponents –Add subcomponents to JPanel –Add JPanel to Container

17. Organizing JButtons in a JPanel Construct the JPanel JPanel southPanel = new JPanel(); After each JButton is constructed, add it to the JPanel southPanel.add( fastButton ); southPanel.add( mediumButton ); southPanel.add( slowButton ); Add the JPanel to the container contentPane.add(southPanel, BorderLayout.SOUTH);

18. FlowLayout JPanels use a different layout manager: FlowLayout Lays out its components left to right

19. Which button? If we make this a listener for each of the three buttons, as we have before…actionPerformed method must determine which one clicked public void actionPerformed(ActionEvent evt) { if (evt.getSource() == slowButton) { speed = SLOW_SPEED; } else if (evt.getSource() == mediumButton) { speed = MEDIUM_SPEED; } else { speed = FAST_SPEED; } if (droppedBall != null) { droppedBall.setSpeed(speed); }

20. More on Layout Managers Determine how GUI components should be displayed Do their best to accommodate when user changes window size Some useful layout managers: –BorderLayout: adds to sides or center –FlowLayout: adds left to right –GridLayout: divides a container into equally sized parts southPanel.setLayout( new GridLayout(1, 3) );

21. Sliders Used to graphically select values in a range Can be vertical or horizontal stateChanged method replaces actionPerformed Swing’s name: JSlider

22. A slider for controlling speed import objectdraw.*; import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; public class SliderBallController extends WindowController implements ChangeListener { private JSlider speedSlider; public void begin() { speedSlider = new JSlider (JSlider.HORIZONTAL, SLOW_SPEED, FAST_SPEED, SLOW_SPEED); speedSlider.addChangeListener(this); }

23. A slider for controlling speed public void stateChanged (ChangeEvent evt) { speed = speedSlider.getValue(); If (droppedBall != null) { droppedBall.setSpeed(speed); } Complete SliderBallController class

24. Checklist for JSliders Construct the JSlider; provide four parameters: –Constant that says whether vertical or horizontal –Minimum and maximum integer values for slider –Initial value of the slider Add it to the content pane of the WindowController extension and validate So that the WindowController extension responds to events generated –Add this as a listener –Make sure WindowController extension implements ChangeListener –Add stateChanged method Import javax.swing.event package

25. Labels JLabel class provided by Swing Single line of read-only text A passive component - no event listener required! Useful for providing labels for sliders, text fields, etc.

26. Using JLabels Two ways to construct –Providing text only JLabel speedLabel = new JLabel("Speed is "); –Providing text and justification JLabel speedLabel = new JLabel("Speed is ", JLabel.RIGHT); Modifiable with setText method speedLabel.setText("Speed is " + speed); LabelBallController.java

27. Handling Keystrokes Can write Java programs so that every keystroke made by the user generates an event that can be handled No need to add special components to our already-existing window

28. Handling Keystrokes Need to associate listener with keyboard events this.addKeyListener( this ); // in a WindowController extension canvas.addKeyListener( this ); // sometimes need this! setFocusable( true ); Need to make sure listener has appropriate method to handle key events –public void keyPressed ( KeyEvent evt ) –public void keyReleased ( KeyEvent evt ) –public void keyTyped ( KeyEvent evt ) KeyEvents include: VK_A – VK_Z, VK_0 – VK_9

29. Review Construct the GUI component Add the component to a container (i.e., a panel or the content pane of a window) If a listener is needed –Add this as a listener for the GUI component –Make sure the WindowController extension implements the appropriate listener interface –Add the event-handling methods promised by the listener interface