1. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Carl Alphonce alphonce@buffalo.edu A Progression of Events

2. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Course CS1 Objects-first Java-based Design patterns introduced

3. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Background (what students have been taught) object type (class/interface) reference variable –assignment method –parameters –return type

4. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Experience (what students know how to do)

5. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering 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. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Lesson: Observer Pattern

7. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Lesson: Observer Pattern Event handling & Observer pattern progression A.show concrete example (fix: observable, observer, update) B.vary the update (same observable, observer) C.vary the concrete observable (the subject) D.vary the concrete observer Observer Subject ActionListenerMouseListenerKeyListener JButton 1, 24 Timer 3 JPanel 56

8. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Worked Example Problem statement –build a button which reacts to a click by printing “Stop that!” Procedure for solving problem 1.create button, add to container 2.create event handler (class implementing ActionListener) 3.override actionPerformed method to print “Stop that!” 4.attach event handler to button Walk through prototype solution Give similar problem Low E

9. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Worked Example: Container Code 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); } In course, code to create a JFrame is familiar from previous examples

10. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Worked Example: Container Code 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); } Step #1 Create button, add to container

11. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Worked Example: Container Code 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); } Step #1 Create button, add to container

12. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Worked Example: Event-Handler Code package sigcse2011; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; public class ButtonEventHandler implements ActionListener { public ButtonEventHandler() { } @Override public void actionPerformed(ActionEvent _) { } Step #2 create event handler (class implementing ActionListener)

13. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Worked Example: Event-Handler Code 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!"); } Step #3 override actionPerformed method to print message

14. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Worked Example: Container Code 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(new ButtonEventHandler()); _mainWindow.getContentPane().add(_button); _mainWindow.pack(); _mainWindow.setVisible(true); } Step #4 attach event handler to button

15. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering 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 1.create button, add to container 2.create event handler (class implementing ActionListener) 3.override actionPerformed method to print “That tickles!” 4.attach event handler to button

16. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Worked Example: Event-Handler Code 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!"); } Step #3 override actionPerformed method to print message

17. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering 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 1.create button, add to container 2.create event handler (class implementing ActionListener) 3.solution steps a)declare instance variables for two messages, b)define constructor to initialize the variables c)override actionPerformed method to alternate between two messages (“swap” code, familiar to students from earlier) 4.attach event handler to button

18. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering 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(ActionEvent e) { System.out.println(_current); String tmp = _current; _current = _next; _next = tmp; } Still low E: Swap code done earlier in course too.

19. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering 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 1.create button, add to container 2.create event handler (class implementing ActionListener) 3.solution steps a)declare needed instance variables b)define constructor to initialize instance variables c)override actionPerformed method to alternate between two titles (call setTitle on JFrame object) 4.attach event handler to button

20. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Observing more broadly Vary subject with ActionListener –Timer / ActionListener Vary observer –Timer w/ActionListener –JButton w/MouseListener –JPanel w/MouseListener –JPanel w/KeyListener –etc.

21. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering 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 –JButton w/MouseListener –JPanel w/MouseListener –JPanel w/KeyListener Students eventually integrate in larger project

22. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering 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. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Possible exercise: Objective: be able to correctly choose between inheritance and composition Assumptions: –inheritance – extension –composition – restriction Case study: java.util.Stack

24. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Possible exercise: Objective: be able to apply iterator pattern to process elements of a Collection –use existing iterator of Collection

25. SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering 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