cs320n – elements of visual programming sending parameters to event handler methods (slides 5-2)...
TRANSCRIPT
![Page 1: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/1.jpg)
CS320n – Elements of Visual Programming
Sending Parameters to Event Handler Methods
(Slides 5-2)
Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for slide ideas.
![Page 2: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/2.jpg)
Visual Programming Sending Parameters to Event Handler Methods
2
What We Will Do Today• Learn how to use parameters in methods
that respond to events. (Event handler methods)
• Do a programming example in the lab
![Page 3: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/3.jpg)
Visual Programming Sending Parameters to Event Handler Methods
3
Mouse clicks• Interactive programs often allow the user
to mouse click an object in the display.– buttons in a windows-based interface– targets in a game– checklist of items on a form
• In this session, we look at how to pass information about a mouse clicked object to an event handler method.
![Page 4: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/4.jpg)
Visual Programming Sending Parameters to Event Handler Methods
4
Example• People are trapped in
a burning building • The user selects
which person will be rescued next.
![Page 5: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/5.jpg)
Visual Programming Sending Parameters to Event Handler Methods
5
Storyboard• Three people are to be rescued. So, we could
write three different methods.
Event 1: click on guy1
Responding Method: Save guy on first floor
Event 1: click on girl2
Responding Method: Save guy on second floor
Event 1: click on girl3
Responding Method: Save guy on third floor
![Page 6: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/6.jpg)
Visual Programming Sending Parameters to Event Handler Methods
6
A Better Solution• Write one event handler method
• send in the information needed to perform the action.
firetruck.savePerson:
parameters: whichFloor, whichPerson, howFarDo in order point ladder at whichFloor extend the ladder howFar meters whichPerson slide down the ladder to the fire truck pull the ladder back howFar meters
whichFloor, whichPerson and howFar parameters
What should their types be?
![Page 7: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/7.jpg)
Visual Programming Sending Parameters to Event Handler Methods
7
Demo• Demonstration of the
code for firetruck.savePerson
![Page 8: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/8.jpg)
Visual Programming Sending Parameters to Event Handler Methods
8
Three events• The argument sent to the parameters depends on
which person is mouse clicked.
• Note: the fire truck is positioned so distance between floor X is X meters (distance to floor 3 is 3 meters)
![Page 9: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/9.jpg)
Visual Programming Sending Parameters to Event Handler Methods
9
Example 2
• Zeus is a powerful god in Greek mythology.
• When Zeus is angry, he shoots a thunderbolt out of the heavens to strike anyone is bothering him
• The user chooses the philosopher who will be the next target of Zeus’s anger.
![Page 10: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/10.jpg)
Visual Programming Sending Parameters to Event Handler Methods
10
Storyboard• A possible design is a method with an Object parameter,
named who, for the object that was clicked.
– The actions in this storyboard are complex. – We can break the actions down into simpler steps
using stepwise refinement.
Event: an object is mouse-clicked
Event handler: shootBolt
Parameter: who – object clickedDo in order
prepare to strike object that was clickedthunder plays and lightning strikes object clickedlighting is repositioned for next strike
![Page 11: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/11.jpg)
Visual Programming Sending Parameters to Event Handler Methods
11
Event: An object is mouse-clicked
Event handler: shootBolt
Parameter: who — the object that was clicked
Do in ordercall prepareToShoot method — send who as the targetcall lightningAndThunder method — send who as the targetlightning move to cloud’s position
prepareToShoot:
Parameter: targetDo together turn Zeus to face the target make the lightning bolt visible
lightningAndThunder:
Parameter: target Do together play sound call specialEffects method — send target
![Page 12: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/12.jpg)
Visual Programming Sending Parameters to Event Handler Methods
12
specialEffects:
Parameter: target
Do in order Do together lightning bolt move to target smoke move to target Do together set smoke to visible set lightning to invisible call smoke cycle — built-in method set target color to black move target up and down
![Page 13: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/13.jpg)
Visual Programming Sending Parameters to Event Handler Methods
13
A driver
• The shootBolt method is at the top level of our design. • It calls other methods (prepareToShoot and
lightningAndThunder) and controls the overall action of the program – we call this a driver.
![Page 14: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/14.jpg)
Visual Programming Sending Parameters to Event Handler Methods
14
One link
• In the fire rescue example, we used three links – one for each person in the burning building.
• In this example, we use only one link by selecting “object under mouse cursor” as the argument.
![Page 15: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/15.jpg)
Visual Programming Sending Parameters to Event Handler Methods
15
prepareToShoot• In setting up the initial scene, we made the lightning bolt
invisible by setting its opacity to 0 (0%). (Review Tips & Techniques 4 for more details about opacity.)
• To prepare to shoot the lightning bolt, it must be made visible – set the opacity back to 1 (100%).
![Page 16: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/16.jpg)
Visual Programming Sending Parameters to Event Handler Methods
16
lightningAndThunder
• Coordinate the sound of thunder with lightning and other special effects.
![Page 17: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/17.jpg)
Visual Programming Sending Parameters to Event Handler Methods
17
specialEffects• The smoke.cycleSmoke is a built-in instruction with a
duration of about 2 1/2 seconds.
![Page 18: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/18.jpg)
Visual Programming Sending Parameters to Event Handler Methods
18
move to• Several statements in the shootBolt and specialEffects
methods use a move to instruction
• The move to instruction moves an object to a particular position in the world.
• In the example above, where is the lighting bolt moved to?
(The move to instruction is described in detail in Tips & Techniques 2.)
![Page 19: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/19.jpg)
Visual Programming Sending Parameters to Event Handler Methods
19
move to with an object parameter
• If an object parameter is used to specify a target position, the process of creating a move to statement involves two steps:
1) Drag in an arbitrary object as the parameter
2) Substitute the object parameter name
This is necessary because an Object parameter is only a placeholder
for an object – not an actual object.
![Page 20: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/20.jpg)
Visual Programming Sending Parameters to Event Handler Methods
20
Demo• Test run of Zeus world.• When parameters are used in interactive
programming, it is especially important to test that all possible parameter values work as expected.– What happens if you click on each philosopher, one
at a time?
• Also try things that shouldn’t work.– What happens if you click on a column?– What happens if you click on a philosopher twice?– What happens if you click on Zeus?
![Page 21: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/21.jpg)
Visual Programming Sending Parameters to Event Handler Methods
21
Classwork Monday in Lab• Create 2 worlds (or combine into 1 world)
– Problem 14, page 140. Penguin slide: Create a world with a lake (environments) and at least 3 penguins on the slope. Make the program event driven. When a penguin is clicked it slides on its belly and spins as it slides. Each penguin should spin some number of times. When the penguin reaches the pond make it disappear into the pool. Write only one event handler method.
![Page 22: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/22.jpg)
Visual Programming Sending Parameters to Event Handler Methods
22
Penguin Slide
![Page 23: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/23.jpg)
Visual Programming Sending Parameters to Event Handler Methods
23
Exercise 2• Problem 15, Page 141.
• Create an interactive hockey game. Create a scene with a person on a lake. Set up a hockey net and give the person a hockey stick (both in the sports folder). Create 3 buttons (bumps from the shape folder) that determine how hard the player swings the stick and how fast the puck (another bump)travels towards the net
![Page 24: CS320n – Elements of Visual Programming Sending Parameters to Event Handler Methods (Slides 5-2) Thanks to Wanda Dann, Steve Cooper, and Susan Rodger for](https://reader036.vdocuments.net/reader036/viewer/2022062803/56649f495503460f94c6b9b3/html5/thumbnails/24.jpg)
Visual Programming Sending Parameters to Event Handler Methods
24
Hockey Game