SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Carl Alphonce [email protected] A Progression of Events.

SIGCSE’11 - Workshop #3 Pedagogical Progressions for Teaching OODC

om

pu

ter

Scie

nce &

En

gin

eeri

ng

Carl [email protected]

A Progression of Events


om

pu

ter

Scie

nce &

En

gin

eeri

ng

Course

• CS1• Objects-first• Java-based• Design patterns introduced


om

pu

ter

Scie

nce &

En

gin

eeri

ng

Background(what students have been taught)

• object• type (class/interface)• reference• variable– assignment

• method– parameters– return type


om

pu

ter

Scie

nce &

En

gin

eeri

ng

Experience(what students know how to do)


om

pu

ter

Scie

nce &

En

gin

eeri

ng

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


om

pu

ter

Scie

nce &

En

gin

eeri

ng

Lesson: Observer Pattern


om

pu

ter

Scie

nce &

En

gin

eeri

ng

Lesson:Observer Pattern

• Event handling & Observer pattern progressionA. 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

ActionListener MouseListener KeyListener

JButton 1, 2 4

Timer 3

JPanel 5 6


om

pu

ter

Scie

nce &

En

gin

eeri

ng

Worked Example

• Problem statement– build a button which reacts to a click by

printing “Stop that!”

• Procedure for solving problem1. create button, add to container2. 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


om

pu

ter

Scie

nce &

En

gin

eeri

ng

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 JFrameis familiar from previous examples


om

pu

ter

Scie

nce &

En

gin

eeri

ng



public class GUI {


_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


om

pu

ter

Scie

nce &

En

gin

eeri

ng



public class GUI {


_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


om

pu

ter

Scie

nce &

En

gin

eeri

ng

Worked Example:Event-Handler Code

package sigcse2011;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;

public class ButtonEventHandler implements ActionListener {

public ButtonEventHandler() {}

@Overridepublic void actionPerformed(ActionEvent _) {

}}

Step #2create event handler

(class implementing ActionListener)


om

pu

ter

Scie

nce &

En

gin

eeri

ng






System.out.println("Stop that!");}

}

Step #3override actionPerformed method

to print message


om

pu

ter

Scie

nce &

En

gin

eeri

ng



public class GUI {


_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


om

pu

ter

Scie

nce &

En

gin

eeri

ng

First problem for students

• Problem statement– build a button which reacts to a click by

printing a different message, “That tickles!”

• Procedure for solving problem1. create button, add to container2. create event handler (class implementing

ActionListener)3. override actionPerformed method to print

“That tickles!”4. attach event handler to button


om

pu

ter

Scie

nce &

En

gin

eeri

ng






System.out.println(”That tickles!");}

}

Step #3override actionPerformed method

to print message


om

pu

ter

Scie

nce &

En

gin

eeri

ng

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 problem1. create button, add to container2. create event handler (class implementing ActionListener)3. solution steps

a) declare instance variables for two messages,b) define constructor to initialize the variablesc) override actionPerformed method to alternate between two messages

(“swap” code, familiar to students from earlier)

4. attach event handler to button


om

pu

ter

Scie

nce &

En

gin

eeri

ng

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.


om

pu

ter

Scie

nce &

En

gin

eeri

ng

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 problem1. create button, add to container2. create event handler (class implementing ActionListener)3. solution steps

a) declare needed instance variablesb) define constructor to initialize instance variablesc) override actionPerformed method to alternate between two titles (call setTitle on

JFrame object)

4. attach event handler to button


om

pu

ter

Scie

nce &

En

gin

eeri

ng

Observing more broadly

• Vary subject with ActionListener– Timer / ActionListener

• Vary observer– Timer w/ActionListener– JButton w/MouseListener– JPanel w/MouseListener– JPanel w/KeyListener– etc.


om

pu

ter

Scie

nce &

En

gin

eeri

ng

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


om

pu

ter

Scie

nce &

En

gin

eeri

ng

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


om

pu

ter

Scie

nce &

En

gin

eeri

ng

Possible exercise:

• Objective: be able to correctly choose between inheritance and composition

• Assumptions:– inheritance – extension– composition – restriction

• Case study: java.util.Stack


om

pu

ter

Scie

nce &

En

gin

eeri

ng

Possible exercise:

• Objective: be able to apply iterator pattern to process elements of a Collection– use existing iterator of Collection


om

pu

ter

Scie

nce &

En

gin

eeri

ng

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

SIGCSE’11 - Workshop #3Pedagogical Progressions for Teaching OOD Computer Science & Engineering Carl Alphonce [email protected] A Progression of Events.

Documents