Carl Alphonce alphonce@buffalo

1. A Progression of Events Carl Alphonce alphonce@buffalo.edu

2. Course CS1 Objects-first Java-based Design patterns introduced

3. Background(what students have been taught) • object • type (class/interface) • reference • variable • assignment • method • parameters • return type

4. Experience(what students know how to do)

5. EVENT HANDLING • Objective: be able to apply observer pattern for event handling • start with specific case (JButton/ActionListener) • broaden perspective to additional implementations of pattern • goal: students can apply pattern to a novel instantiation of it

6. Lesson: Observer Pattern

7. Lesson:Observer Pattern • Event handling & Observer pattern progression • show concrete example (fix: observable, observer, update) • vary the update (same observable, observer) • vary the concrete observable (the subject) • vary the concrete observer

8. Worked Example Low E • Problem statement • build a button which reacts to a click by printing “Stop that!” • Procedure for solving problem • create button, add to container • create event handler (class implementing ActionListener) • override actionPerformed method to print “Stop that!” • attach event handler to button • Walk through prototype solution • Give similar problem

9. Worked Example:Container Code In course, code to create a JFrame is familiar from previous examples package sigcse2011; import javax.swing.JButton; import javax.swing.JFrame; public class GUI { public GUI() { JFrame _mainWindow = new JFrame("A simple application"); _mainWindow.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); _mainWindow.pack(); _mainWindow.setVisible(true); } }

10. Worked Example:Container Code Step #1 Create button, add to container package sigcse2011; import javax.swing.JButton; import javax.swing.JFrame; public class GUI { public GUI() { JFrame _mainWindow = new JFrame("A simple application"); _mainWindow.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JButton _button = new JButton("Some text on a button"); _mainWindow.pack(); _mainWindow.setVisible(true); } }

11. Worked Example:Container Code Step #1 Create button, add to container package sigcse2011; import javax.swing.JButton; import javax.swing.JFrame; public class GUI { public GUI() { JFrame _mainWindow = new JFrame("A simple application"); _mainWindow.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JButton _button = new JButton("Some text on a button"); _mainWindow.getContentPane().add(_button); _mainWindow.pack(); _mainWindow.setVisible(true); } }

12. Worked Example:Event-Handler Code Step #2 create event handler (class implementing ActionListener) package sigcse2011; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; public class ButtonEventHandler implements ActionListener{ public ButtonEventHandler() { } @Override public void actionPerformed(ActionEvent _) { } }

13. Worked Example:Event-Handler Code Step #3 override actionPerformed method to print message package sigcse2011; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; public class ButtonEventHandler implements ActionListener { public ButtonEventHandler() { } @Override public void actionPerformed(ActionEvent _) { System.out.println("Stop that!"); } }

14. Worked Example:Container Code Step #4 • attach event handler to button package sigcse2011; import javax.swing.JButton; import javax.swing.JFrame; public class GUI { public GUI() { JFrame _mainWindow = new JFrame("A simple application"); _mainWindow.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JButton _button = new JButton("Some text on a button"); _button.addActionListener(newButtonEventHandler()); _mainWindow.getContentPane().add(_button); _mainWindow.pack(); _mainWindow.setVisible(true); } }

15. First problem for students • Problem statement • build a button which reacts to a click by printing a different message, “That tickles!” • Procedure for solving problem • create button, add to container • create event handler (class implementing ActionListener) • override actionPerformed method to print “That tickles!” • attach event handler to button

16. Worked Example:Event-Handler Code Step #3 override actionPerformed method to print message package sigcse2011; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; public class ButtonEventHandler implements ActionListener { public ButtonEventHandler() { } @Override public void actionPerformed(ActionEvent _) { System.out.println(”That tickles!"); } }

17. Second problem for students • Problem statement • build a button which alternates between the two messages • More involved example • instance variables • constructor • actionPerformed • Procedure for solving problem • create button, add to container • create event handler (class implementing ActionListener) • solution steps • declare instance variables for two messages, • define constructor to initialize the variables • override actionPerformed method to alternate between two messages (“swap” code, familiar to students from earlier) • attach event handler to button

18. Still low E: Swap code done earlier in course too. package sigcse2011; // imports not shown to save space public class Swapper implements ActionListener { private String _current; private String _next; public Swapper(String a, String b) { _current = a; _next = b; } @Override public void actionPerformed(ActionEvente) { System.out.println(_current); String tmp = _current; _current = _next; _next = tmp; } }

19. Third problem for students • Problem statement • build a button which changes title of JFrame (alternating between two different titles) • More involved example • instance variables • constructor • actionPerformed • call setTitle on JFrame • Procedure for solving problem • create button, add to container • create event handler (class implementing ActionListener) • solution steps • declare needed instance variables • define constructor to initialize instance variables • override actionPerformed method to alternate between two titles (call setTitle on JFrame object) • attach event handler to button

20. Observing more broadly • Vary subject with ActionListener • Timer / ActionListener • Vary observer • Timer w/ActionListener • JButtonw/MouseListener • JPanelw/MouseListener • JPanelw/KeyListener • etc.

21. Summary: “Faded guidance” • Worked example • Almost identical exercise (a partially-worked exercise) • Similar exercise (less guidance, but same basic framework) • Examples of later exercises • Timer w/ActionListener • JButtonw/MouseListener • JPanelw/MouseListener • JPanelw/KeyListener • Students eventually integrate in larger project

22. Schedule 7:00 Introduction and Background (Michael) 7:20 Example 1: Presentation and Discussion (Carl) 7:40 Group work: Discuss/work out example in small groups 8:10 Present/Discuss a group work example 8:30 Refreshment break 8:50 Example 2: Presentation and Discussion (Dale) 9:10 Group work: Discuss/work out example in small groups 9:40 Present/Discuss a group work example 10:00 Wrap up

23. Possible exercise: • Objective: be able to correctly choose between inheritance and composition • Assumptions: • inheritance – extension • composition – restriction • Case study: java.util.Stack

24. Possible exercise: • Objective: be able to apply iterator pattern to process elements of a Collection • use existing iterator of Collection

25. Possible exercise: • Objective: be able to apply iterator pattern to in new situation • implement the iterator pattern for some novel use • example: define an iterator to read characters from a file