Graphical User Interfaces

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