Lecture 3: Application State + Event Driven Programming CSS290: APPS ON MOBILE DEVICES

TODAY: CONCEPTS Reading: Chapter 3 (Skip P 47-56)) Simple user generated event Events from a button Event Driven Program Structure Solution State Reaction to events as solution Series of user generated event Touch/Move/Release For fun: Working Audio Think: Alarm clock that rings louder over time!?

SIMPLE CASE OF EVENTS App with one single button Press button to increase count See how to change the button’s label Give button a name, and change it’s content! Count Must be instance variable of MainPage Must Persist over Button Event Service function calls Cool app? Illustrate a simple point Application state and events State: Count Events: from button

APPLICATION STATE OF EVENT PROGRAMS The “state of your application”! What is “your application”? What do you want to do? E.g., Counting? Stop watch? Describe your solution in English! Keep track of number of times you have press the button  State: the number Keep track of number of seconds and millisconds passed  State: Seconds, Milli-Seconds Define persistent variables representing your state! Persistent over event services!! E.g., Instance variables to MainPage

EVENT DRIVEN PROGRAMMING SOLUTION States are “persistent variables” Int NumSecond, Int NumMilliSecond Events: in the form of function calls (Event Services/Handlers) Service: change the application state to implement your application! Timer: update/increase the NumSecond and/or NumMilliSecond accordingly Where will “Events come from”? E.g., can come from button push E.g., can come from timer (generated from the application)

STOP WATCH APP Implements Second/MilliSecond with BeginTime and Now!! Notice: does not explicitly keep track of number of second Another application state: Brush, just for fun

EXERCISE Add a button to stop/continue the stop watch Hint: look at Timer.IsEnable, Timer.Stop Add a button to re-start the stop watch You can start with the source code that was given to you

INTER-DEPENDENT EVENTS An event implies another one will be generated! Mouse Buttons: Down  Drag  Up Touch  Drag  Up Usually wants to keep track of what is happening along the way!! Manipulation series of Touch events Notice exists on ALL GUI elements! Remember about Event propagation/Routing: start from Parent Use Manipulation to capture movements Delta: what just happened Cumulative: what happened since the beginning Print out the Translation.X/Y to verify

EXAMPLE: EVENT ROUTING Look at the EventRouting source code Structure Blue: Grandparent: lowest priority in event handling Red: Parent: blocks delta from grandParent Green Region: highest priority: blocks End from Parent

EVENT ROUTING DETAILS Always sent to the leave!! (lowest-level child)!! Child-Green panel: touch/move: Start from all three generation Delta only from Child/Parent (Parent blocked the event from GrandParent) Completed: only from Child (Child blocked event from everyone!) Red Region: touch/move Start: from parent and grandParent Delta: only from Parent (blocked from grandParent) Completed: from both parent and grandParent (parent did not block Completed) Blue region: touch/move see all messages

WORKING WITH AUDIO MediaElement GUI element No need for appearance! Play(), Stop(), Volume, CurrentState Start/Stop Volume control Text Echo Easy? How, think Alarm Clock with interesting beeps!!

SELF TEST Event service that modify GUI apparance Changing the button content/label What is application state of an event driven program Variables describing persistent information Events trigger functions that modify the application state Inter-dependent events: passing event information along the Event routing: parent blocks events from children! For fun: Working with media

APPENDIX: MISC INFO Manipulation events on canvas: Must make sure Fill is not null, otherwise not capable for receiving events TextBox Accepts input!!