lab 6: event & input intro
DESCRIPTION
Lab 6: event & input intro. User Interface Lab: GUI Lab Oct. 2 nd , 2013. Lab 6 goals. Hw1b review Debugging Techniques Events and Event handlers. Hw1b. Maybe a little too much? Review Actionscript Syntax. Debugging. Official method: trace() with Flash Player in debugging mode. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/1.jpg)
Lab 6: event & input intro
User Interface Lab: GUI LabOct. 2nd, 2013
![Page 2: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/2.jpg)
Lab 6 goals
• Hw1b review
• Debugging Techniques
• Events and Event handlers
![Page 3: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/3.jpg)
Hw1b
• Maybe a little too much?
• Review Actionscript Syntax
![Page 4: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/4.jpg)
Debugging
• Official method: trace() with Flash Player in debugging mode
![Page 5: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/5.jpg)
Debugging
• Simple method: print it on the screen!
![Page 6: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/6.jpg)
Events
• Flex applications are event driven– Outside of startup, every action is result of a trigger
• Two even types:– System events: component ready, timer done, etc.– User events: mouse clicks, keyboard presses, etc.
![Page 7: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/7.jpg)
Event handlers
• The pieces of code that get run after an event occurs
• Think of them as spring loading your program
![Page 8: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/8.jpg)
Event handlers
• Written in actionscript
• Takes in “event” parameter– More information about
the event– Ex. position of the
mouse, holding ctrl, etc.
![Page 9: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/9.jpg)
take this mxml application…what does it look like?
![Page 10: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/10.jpg)
![Page 11: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/11.jpg)
take this mxml application…everything is run on startup
![Page 12: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/12.jpg)
We want to pop up an alert when pressed…
![Page 13: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/13.jpg)
select button -> “generate event handler” does this for you
![Page 14: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/14.jpg)
…after generating the event handlerwhere is the event handler here?
![Page 15: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/15.jpg)
Event handler will get run only when button is pressed
![Page 16: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/16.jpg)
Event handler will get run only when button is pressed
![Page 17: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/17.jpg)
Showing an alert when the button is pressed
![Page 18: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/18.jpg)
Green stuffs: run when application startsOrange stuffs: run when the button is pressed
![Page 19: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/19.jpg)
Event handlers
• An event handler may handle events from multiple objects.
• An object might distribute events to multiple event handlers.
![Page 20: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/20.jpg)
In-class project
• Create a new Flex project named “Lab6ICP”• Create a VGroup• Put a button in Vgroup– Label: Button 1– Id: myButton1
• Put a label in Vgroup– Doesn’t have any text in it– Id: myLabel
![Page 21: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/21.jpg)
![Page 22: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/22.jpg)
Create a click event handler for the button
• Go back to source, take a look at the event handler– The parameter passed in is called “event” that has a type
“MouseEvent”– What attribute does this event object have?
Explore using the autocomplete menu (event. …)
![Page 23: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/23.jpg)
Use event parameter to see if shift key is pressed when button is clicked
• Run and see the result
![Page 24: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/24.jpg)
Create another button and let it use the same click event handler
• Put a new button in VGroup between Button 1 and the label– Label: Button 2– Id: myButton2
• Add an click event handler to the button in MXML
• How do I know which button is clicked?
![Page 25: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/25.jpg)
Add a parameter to the event handler to identify which button is clicked
• Event handler is just a function that gets called when a specific event happens and takes that event as a parameter. It can be edited like any other functions.
![Page 26: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/26.jpg)
Things to note
• Objects may have different event types– What event does a button object have?
![Page 27: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/27.jpg)
Things to note
• Event -> Show inherited Events
![Page 28: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/28.jpg)
Event handler in Lab5ICP
• Add an event handler to an object in actionscript
• Lab 5 ICP
![Page 29: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/29.jpg)
public function myFunction(x:int):int{return x+1;
}
Access control
Declaration Name Return type
Name & type of the parameter(s) passed in
![Page 30: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/30.jpg)
public function myFunction(x:int):int{return x+1;
}
Access control
Declaration Name Return type
Name & type of the parameter(s) passed in
![Page 31: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/31.jpg)
Make your GUI_rectangle interactive
• Open Lab5ICP or download the solution from Blackborad
• Suppose we want the rectangle to change its color when the user hovers the mouse on it, and pop up an alert box when the user clicks it, what event handler should we add to the rectangle?– GUI_rectangle extends UIComponent
![Page 32: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/32.jpg)
Make your GUI_rectangle interactive
• Add three event handlers in the constructor– MouseEvent.CLICK: pops up an alert saying “Click!”– MouseEvent.MOUSE_OVER: draw a gray rectangle– MouseEvent.MOUSE_OUT: draw a black rectangle
![Page 33: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/33.jpg)
![Page 34: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/34.jpg)
(if we have time) Review
• Right now the initial color and hover color are set in the class file– The blueprint already decides the color of the shape
• What if I want to have many rectangles in my interface, each have different colors? – Let the color becomes a public attribute that can be
accessed and changed in MXML (during instantiation)– Solution on Blackboard (Lab5ICP_solution-Oct3)
![Page 35: Lab 6: event & input intro](https://reader035.vdocuments.us/reader035/viewer/2022062310/56816934550346895de08d9b/html5/thumbnails/35.jpg)
Next time: more on event & input